add results of bundle changes

update browserlist for better packaging
2026-07-31 03:18:22 +00:00 · 2026-07-30 09:33:59 +02:00 · 2026-07-27 13:36:56 +02:00
143 changed files with 2204 additions and 8155 deletions
@@ -1,65 +0,0 @@
---
-name: ha-frontend-demo
-description: Home Assistant standalone demo structure, configurations, URL navigation, mocked APIs, shared demo stubs used by gallery, and verification. Use when changing files under demo/, changing gallery consumers of demo/src/stubs/, or running and validating the demo.
---
-
-# HA Frontend Demo
-
-Use this skill for standalone demo work and changes to shared demo stubs consumed by the gallery. Follow the persistent repository guidance in `AGENTS.md` and load matching specialist skills alongside this skill, especially `ha-frontend-testing` when running or validating the demo.
-
-## Purpose
-
-The demo is the full Home Assistant frontend running against a mocked backend and is published at <https://demo.home-assistant.io>. It needs no Home Assistant server, which makes it the easiest way to load the real UI in a browser, for example to take screenshots.
-
-## Running The Demo
-
-Run commands from the repository root:
-
-```bash
-yarn dev:demo               # Development server on http://localhost:8090
-yarn dev:demo --background  # Detached; also supports --status/--stop/--logs
-```
-
-Use the E2E workflows documented in `ha-frontend-testing` when validating the demo.
-
-## Opening A Specific Demo
-
-The demo contains multiple demo configurations. Select one directly with the `demo` query parameter, for example `http://localhost:8090/?demo=<slug>`. The valid slugs are defined in `demoConfigs` in `demo/src/configs/demo-configs.ts`, so "the second demo" means the slug of the second entry in that list. An unknown slug falls back to the default, which is the first entry.
-
-## Opening A Specific Page
-
-The demo build uses hash-based routing: the frontend path goes in the URL hash, and the `demo` query parameter goes before the `#`. The URL format is:
-
-```text
-http://localhost:8090/?demo=<slug>#/<path>
-```
-
-Useful paths:
-
- `/lovelace/0`: The selected demo's dashboard, also the default when no hash is given.
- `/energy`: The energy dashboard. Its tabs are views: `/energy/overview` (Summary), `/energy/electricity`, `/energy/gas`, `/energy/water`, and `/energy/now`.
- `/map`, `/history`, `/todo`, `/config`: Other sidebar panels.
-
-For example, the water tab of the energy dashboard of the second demo is:
-
-```text
-http://localhost:8090/?demo=<second slug>#/energy/water
-```
-
-## Structure
-
- `demo/src/ha-demo.ts`: Root element that sets up all backend mocks.
- `demo/src/configs/<slug>/`: One directory per demo configuration, containing entities, dashboard, and theme data.
- `demo/src/configs/demo-configs.ts`: Registry of demo configurations and URL slug handling.
- `demo/src/stubs/`: Mocked WebSocket and REST APIs.
- `demo/script/develop_demo`, `demo/script/build_demo`: Development server and static build wrappers.
-
-## Shared Gallery Stubs
-
-`demo/src/stubs/` is shared, not demo-private: gallery pages import from it directly. Before changing or removing anything a stub does, search for its callers across `demo/src/` and `gallery/src/`, then check the affected gallery pages as well as the demo.
-
-The two consumers use a stub differently, so demo behavior does not predict gallery behavior. A gallery page calls stubs against the `hass` from `provideHass`, where `hass.config` is the shared `demoConfig` object. A stub that mutates `hass.config` in place is therefore visible to the page. `demo/src/ha-demo.ts` copies `components` into a new array before the stubs run, so the same mutation never reaches the demo. A change can look correct in the demo while quietly breaking a gallery page.
-
-## Verification
-
-Load `ha-frontend-testing` and use its demo and gallery workflows. Validate both consumers when changing shared stubs. Documentation-only changes do not require code tests unless examples or commands change.
@@ -20,7 +20,6 @@ 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
 ```
@@ -29,24 +28,6 @@ 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. It prevents another foreground or background build from starting while one is using the shared generated files under `build/` and `hass_frontend/`.
-
 ## Unit And Utility Tests

 - Add or update Vitest tests for data processing, utility code, and behavior that can be tested without a browser.
@@ -60,7 +41,7 @@ Do not pass `--help`, `--background`, or `--modern` to `script/build_frontend`;

 `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. `yarn dev` and `yarn dev:serve` share one managed process slot because both write the app output.
+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.

 ## Playwright E2E

@@ -1,36 +1,26 @@
 [modern]
 # Modern builds target recent browsers supporting the latest features to minimize transpilation, polyfills, etc.
 # It is served to browsers meeting the following requirements:
-# - released in the last year + current alpha/beta versions
-# - Firefox extended support release (ESR)
-# - with global utilization at or above 0.5%
+# - released in the last 3 years + current alpha/beta versions
 # - exclude dead browsers (no security maintenance for 2+ years)
 # - exclude KaiOS, QQ, and UC browsers due to lack of sufficient feature support data
 unreleased versions
-last 1 year
-Firefox ESR
->= 0.5%
+last 2 years
 not dead
-not KaiOS > 0
 not QQAndroid > 0
 not UCAndroid > 0

 [legacy]
 # Legacy builds are served when modern requirements are not met and support browsers:
-# - released in the last 7 years + current alpha/beta versionss
-# - with global utilization at or above 0.05%
+# - released in the last 7 years with global utilization at or above 0.001%
 # - exclude dead browsers (no security maintenance for 2+ years)
 # - exclude Opera Mini which does not support web sockets
-unreleased versions
-last 7 years
->= 0.05%
+last 7 years and >= 0.001%
 not dead
 not op_mini all

 [legacy-sw]
-# Same as legacy plus supports service workers
-unreleased versions
-last 7 years
->= 0.05% and supports serviceworkers
-not dead
-not op_mini all
+# Same as legacy, restricted to browsers that support service workers
+# (currently resolves to the same set; guards the service worker build if the legacy floor ever drops below them)
+last 7 years and >= 0.001% and supports serviceworkers
+not dead
@@ -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.61.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.61.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.61.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.61.1-noble
      options: --user 1001 --ipc=host
    defaults:
      run:
@@ -1 +1 @@
-24.18.1
+24.18.0
@@ -2,6 +2,8 @@

 You are helping develop the Home Assistant frontend. This repository is a TypeScript application built from Lit-based Web Components for the Home Assistant web UI.

+For the standalone demo — including how to open a specific demo configuration or page via URL — read `demo/AGENTS.md`.
+
 ## Essential Commands

 ```bash
@@ -45,7 +47,6 @@ Detailed guidance lives in project skills under `.agents/skills/`. Load the matc
 - `ha-frontend-user-facing-text`: localization, terminology, sentence case, and Home Assistant text style.
 - `ha-frontend-review`: PR template use, review checklist, and recurring review issues.
 - `ha-frontend-gallery`: gallery pages, demos, sidebar structure, content, and verification.
- `ha-frontend-demo`: standalone demo structure, configurations, navigation, shared stubs, and verification.

 ## Pull Requests

@@ -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: `yarn build`
+- Production build: `script/build_frontend`
 - Gallery: `cd gallery && script/develop_gallery`

 ## Frontend development
@@ -1,267 +0,0 @@
-// 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,
-  processStartTime,
-  readProcessRecord,
-  releaseProcessRecord,
-  runCli,
-  spawnDetachedToLog,
-  spawnForeground,
-  terminateProcess,
-  waitFor,
-  writeProcessRecord,
-} from "./managed-process.mjs";
-
-const repoRoot = path.resolve(
-  path.dirname(fileURLToPath(import.meta.url)),
-  ".."
-);
-const gulpBin = path.join(repoRoot, "node_modules", ".bin", "gulp");
-const stateDir = path.join(repoRoot, "node_modules", ".cache", "ha-build");
-const logFile = path.join(stateDir, "build.log");
-const lockFile = path.join(
-  repoRoot,
-  "node_modules",
-  ".cache",
-  "ha-generated-output.lock"
-);
-
-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 readBuild = () => readProcessRecord(lockFile);
-
-const releaseBuild = (token) => releaseProcessRecord(lockFile, token);
-
-const acquireBuild = (modern, foreground) => {
-  const token = `${process.pid}-${Date.now()}-${Math.random()}`;
-  const result = acquireProcessRecord(lockFile, {
-    pid: process.pid,
-    startTime: processStartTime(process.pid),
-    processGroup: false,
-    foreground,
-    kind: "build",
-    modern,
-    starting: true,
-    token,
-  });
-  return result.acquired ? { token } : { 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 === "dev") {
-    const command = existing.suite === "app-serve" ? "dev:serve" : "dev";
-    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 = acquireBuild(modern, true);
-  if (!lock.token) {
-    reportExisting(lock.existing);
-    return 1;
-  }
-  try {
-    return await spawnForeground({
-      cmd: gulpBin,
-      args: [taskFor(modern)],
-      cwd: repoRoot,
-      processGroup: true,
-      onSpawn: (child) => updateBuild(lock.token, child, true),
-    });
-  } finally {
-    releaseBuild(lock.token);
-  }
-};
-
-const runBackground = async (modern) => {
-  const lock = acquireBuild(modern, false);
-  if (!lock.token) {
-    reportExisting(lock.existing);
-    return 1;
-  }
-  try {
-    const child = await spawnDetachedToLog({
-      cmd: gulpBin,
-      args: [taskFor(modern)],
-      cwd: repoRoot,
-      logFile,
-    });
-    updateBuild(lock.token, child, true);
-    process.stdout.write(
-      `Started ${modern ? "modern " : ""}frontend build (pid ${child.pid})\n` +
-        hints()
-    );
-    return 0;
-  } catch (err) {
-    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") ||
-    (args.modern && !["foreground", "background"].includes(args.mode))
-  ) {
-    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);
@@ -1,15 +1,15 @@
 {
  "_comment": "Initial JS budget (raw/uncompressed bytes) for the cold-load critical entrypoints. Enforced by build-scripts/check-bundle-size.cjs in CI. Re-seed after an intentional change with `--update --headroom=<percent>`.",
  "frontend-modern": {
-    "app": 595204,
-    "core": 57741,
-    "authorize": 576928,
-    "onboarding": 685964
+    "app": 561513,
+    "core": 54473,
+    "authorize": 544272,
+    "onboarding": 647136
  },
  "frontend-legacy": {
-    "app": 861452,
-    "core": 258557,
-    "authorize": 834356,
-    "onboarding": 1001360
+    "app": 790323,
+    "core": 237208,
+    "authorize": 765464,
+    "onboarding": 918679
  }
 }
@@ -20,27 +20,10 @@
 //            no health endpoint, and plain yarn dev has no port at all, so these
 //            track a pidfile and treat the first "Build done" log line as ready.

-import { execFileSync } from "node:child_process";
+import { spawn, execFileSync } from "node:child_process";
 import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import {
-  LIFECYCLE_MODE_FLAGS,
-  acquireProcessRecord,
-  isProcessRecordAlive,
-  outputLog,
-  processStartTime,
-  readProcessRecord,
-  releaseProcessRecord,
-  removeProcessRecord,
-  runCli,
-  sleep,
-  spawnDetachedToLog,
-  spawnForeground,
-  terminateProcess,
-  waitFor,
-  writeProcessRecord,
-} from "./managed-process.mjs";

 const repoRoot = path.resolve(
  path.dirname(fileURLToPath(import.meta.url)),
@@ -53,74 +36,48 @@ const developAndServeScript = path.join(
  "develop_and_serve"
 );
 const logDir = path.join(repoRoot, "node_modules", ".cache", "ha-dev-server");
-const outputLockFile = path.join(
-  repoRoot,
-  "node_modules",
-  ".cache",
-  "ha-generated-output.lock"
-);

 // Each suite names its yarn alias (for hints), a liveness model, and how to
 // spawn it. health suites carry a fixed port; process suites carry the log line
 // that means "ready" and, for app-serve, forward extra args to the script.
-const SUITES = new Map([
-  [
-    "e2e-app",
-    {
-      alias: "test:e2e:app:dev",
-      liveness: "health",
-      port: 8095,
-      spawn: { cmd: gulpBin, args: ["develop-e2e-test-app"] },
-    },
-  ],
-  [
-    "demo",
-    {
-      alias: "dev:demo",
-      liveness: "health",
-      port: 8090,
-      spawn: { cmd: gulpBin, args: ["develop-demo"] },
-    },
-  ],
-  [
-    "gallery",
-    {
-      alias: "dev:gallery",
-      liveness: "health",
-      port: 8100,
-      spawn: { cmd: gulpBin, args: ["develop-gallery"] },
-    },
-  ],
-  [
-    "app",
-    {
-      alias: "dev",
-      liveness: "process",
-      readyLog: /Build done @/,
-      spawn: { cmd: gulpBin, args: ["develop-app"] },
-      processKey: "app",
-    },
-  ],
-  [
-    "app-serve",
-    {
-      alias: "dev:serve",
-      liveness: "process",
-      acceptsArgs: true,
-      readyLog: /Build done @/,
-      spawn: { cmd: developAndServeScript, args: [] },
-      processKey: "app",
-    },
-  ],
-]);
+const SUITES = {
+  "e2e-app": {
+    alias: "test:e2e:app:dev",
+    liveness: "health",
+    port: 8095,
+    spawn: { cmd: gulpBin, args: ["develop-e2e-test-app"] },
+  },
+  demo: {
+    alias: "dev:demo",
+    liveness: "health",
+    port: 8090,
+    spawn: { cmd: gulpBin, args: ["develop-demo"] },
+  },
+  gallery: {
+    alias: "dev:gallery",
+    liveness: "health",
+    port: 8100,
+    spawn: { cmd: gulpBin, args: ["develop-gallery"] },
+  },
+  app: {
+    alias: "dev",
+    liveness: "process",
+    readyLog: /Build done @/,
+    spawn: { cmd: gulpBin, args: ["develop-app"] },
+  },
+  "app-serve": {
+    alias: "dev:serve",
+    liveness: "process",
+    acceptsArgs: true,
+    readyLog: /Build done @/,
+    spawn: { cmd: developAndServeScript, args: [] },
+  },
+};

 // Cover a cold build on a slow machine before the server starts listening.
 // Override with HA_DEV_SERVER_TIMEOUT (seconds).
-const readyTimeoutSeconds = Number(process.env.HA_DEV_SERVER_TIMEOUT || "180");
 const READY_TIMEOUT_MS =
-  Number.isFinite(readyTimeoutSeconds) && readyTimeoutSeconds > 0
-    ? readyTimeoutSeconds * 1000
-    : 180_000;
+  Number(process.env.HA_DEV_SERVER_TIMEOUT || "180") * 1000;

 // Detect a coding agent from a small set of environment markers set by common
 // agent CLIs (env-only; no process-ancestry detection).
@@ -147,7 +104,7 @@ const detectAgent = () => {
 };

 const usage = () => {
-  const suites = [...SUITES.keys()].join("|");
+  const suites = Object.keys(SUITES).join("|");
  process.stderr.write(
    `Usage: node build-scripts/dev-server.mjs --suite <${suites}> ` +
      `[--background | --status | --stop | --logs [--follow]]\n`
@@ -158,7 +115,6 @@ const parseArgs = (argv) => {
  const args = {
    mode: "foreground",
    follow: false,
-    modes: [],
    suite: undefined,
    passthrough: [],
  };
@@ -168,99 +124,39 @@ const parseArgs = (argv) => {
      case "--suite":
        args.suite = argv[++i];
        break;
+      case "--background":
+        args.mode = "background";
+        break;
+      case "--status":
+        args.mode = "status";
+        break;
+      case "--stop":
+        args.mode = "stop";
+        break;
+      case "--logs":
+        args.mode = "logs";
+        break;
      case "--follow":
        args.follow = true;
        break;
      default:
-        if (LIFECYCLE_MODE_FLAGS.has(arg)) {
-          args.mode = LIFECYCLE_MODE_FLAGS.get(arg);
-          args.modes.push(arg);
-        } else {
-          // Anything unrecognised is forwarded to the underlying script.
-          args.passthrough.push(arg);
-        }
+        // Anything unrecognised is forwarded to the underlying script.
+        args.passthrough.push(arg);
    }
  }
  return args;
 };

-const logFileFor = (suite) => path.join(logDir, `${suite}.log`);
-const pidFileFor = (suite) =>
-  path.join(logDir, `${SUITES.get(suite).processKey ?? suite}.pid`);
-const removePidFileIf = (suite, matches) => {
-  const existing = readProcessRecord(pidFileFor(suite));
-  if (!existing) {
-    removeProcessRecord(pidFileFor(suite));
-    return true;
-  }
-  if (matches(existing)) {
-    releaseProcessRecord(outputLockFile, existing.token, () => {
-      if (readProcessRecord(pidFileFor(suite))?.token === existing.token) {
-        removeProcessRecord(pidFileFor(suite));
-      }
-    });
-    return true;
-  }
-  return false;
-};
-
-const acquireProcessSuite = (suite) => {
-  const pidFile = pidFileFor(suite);
-  const token = `${process.pid}-${Date.now()}-${Math.random()}`;
-  const record = {
-    pid: process.pid,
-    startTime: processStartTime(process.pid),
-    kind: "dev",
-    suite,
-    starting: true,
-    token,
-  };
-  const result = acquireProcessRecord(outputLockFile, record);
-  if (!result.acquired) {
-    return { existing: result.existing };
-  }
-  try {
-    writeProcessRecord(pidFile, record);
-  } catch (err) {
-    releaseProcessRecord(outputLockFile, token);
-    throw err;
-  }
-  return { token };
-};
-
-const updateProcessSuite = (suite, token, child) => {
-  const existing = readPidFile(suite);
-  if (existing?.token !== token) {
-    throw Error(
-      `Dev server (${suite}) process ownership was lost during startup.`
-    );
-  }
-  const record = {
-    ...existing,
-    pid: child.pid,
-    startTime: processStartTime(child.pid),
-    starting: false,
-  };
-  writePidFile(suite, record);
-  const outputOwner = readProcessRecord(outputLockFile);
-  if (outputOwner?.token !== token) {
-    throw Error(
-      `Dev server (${suite}) output ownership was lost during startup.`
-    );
-  }
-  writeProcessRecord(outputLockFile, record);
-};
-
-const releaseProcessSuite = (suite, token) => {
-  releaseProcessRecord(outputLockFile, token, () => {
-    if (readPidFile(suite)?.token === token) {
-      removeProcessRecord(pidFileFor(suite));
-    }
+const sleep = (ms) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, ms);
  });
-};
+
+const logFileFor = (suite) => path.join(logDir, `${suite}.log`);
+const pidFileFor = (suite) => path.join(logDir, `${suite}.pid`);

 const hints = (suite) => {
-  const alias = `yarn ${SUITES.get(suite).alias}`;
+  const alias = `yarn ${SUITES[suite].alias}`;
  return (
    `  Stop:   ${alias} --stop\n` +
    `  Status: ${alias} --status\n` +
@@ -268,26 +164,46 @@ const hints = (suite) => {
  );
 };

-const reportProcessConflict = (suite, existing) => {
-  if (existing?.kind === "build") {
-    process.stdout.write(
-      `Frontend build already running${existing.pid ? ` (pid ${existing.pid})` : ""}. ` +
-        "Stop it with yarn build --stop.\n"
-    );
-    return;
-  }
-  process.stdout.write(
-    `Dev server (${existing?.suite ?? suite}) already running` +
-      `${urlSuffix(existing?.port)} ` +
-      `${existing?.pid ? `(pid ${existing.pid})` : ""}\n` +
-      hints(existing?.suite ?? suite)
-  );
-};
-
 // --- shared spawning and lifecycle ------------------------------------------

+// Signal the whole process group (the background server is its group leader),
+// falling back to the bare pid if that is not permitted.
+const killProcessTree = (pid, sig) => {
+  try {
+    process.kill(-pid, sig);
+  } catch {
+    try {
+      process.kill(pid, sig);
+    } catch {
+      // Already gone.
+    }
+  }
+};
+
 const urlSuffix = (port) => (port ? ` at http://localhost:${port}` : "");

+// Run a server in the foreground, inheriting stdio; resolve with its exit code.
+const spawnInherit = (cmd, args) =>
+  new Promise((resolve) => {
+    const child = spawn(cmd, args, { cwd: repoRoot, stdio: "inherit" });
+    child.on("exit", (code) => resolve(code ?? 0));
+  });
+
+// Spawn a detached server that writes stdout and stderr to the suite's log file.
+const spawnDetachedToLog = (suite, cmd, args) => {
+  fs.mkdirSync(logDir, { recursive: true });
+  const logFile = logFileFor(suite);
+  const fd = fs.openSync(logFile, "w");
+  const child = spawn(cmd, args, {
+    cwd: repoRoot,
+    detached: true,
+    stdio: ["ignore", fd, fd],
+  });
+  fs.closeSync(fd);
+  child.unref();
+  return { child, logFile };
+};
+
 // Poll until the server is ready, the child exits, or we time out. Prints the
 // progress dots and outcome; returns 0 when ready, 1 otherwise. onExit runs if
 // the child dies before it is ready (used to clear a stale pidfile).
@@ -298,7 +214,8 @@ const awaitReady = async ({ suite, child, logFile, port, isReady, onExit }) => {
  });
  const deadline = Date.now() + READY_TIMEOUT_MS;
  process.stdout.write(`Starting ${suite} dev server`);
-  const poll = async () => {
+  /* eslint-disable no-await-in-loop -- poll until the server is ready */
+  while (Date.now() < deadline) {
    if (childExited) {
      process.stdout.write("\n");
      process.stderr.write(
@@ -315,37 +232,38 @@ const awaitReady = async ({ suite, child, logFile, port, isReady, onExit }) => {
      );
      return 0;
    }
-    if (Date.now() >= deadline) {
-      return undefined;
-    }
    process.stdout.write(".");
    await sleep(1000);
-    return poll();
-  };
-  const result = await poll();
-  if (result !== undefined) {
-    return result;
  }
+  /* eslint-enable no-await-in-loop */
  process.stdout.write("\n");
  process.stderr.write(
    `Dev server (${suite}) did not become ready within ${
      READY_TIMEOUT_MS / 1000
    }s. See ${logFile}\n`
  );
-  const stopped = await terminateProcess({
-    pid: child.pid,
-    isStopped: () => childExited,
-  });
-  if (stopped) {
-    onExit?.();
-  }
  return 1;
 };

 // Stop a running background server: SIGTERM, wait for it to go, then SIGKILL.
 // isStopped reports when it is gone; onStopped runs on success (pidfile cleanup).
 const terminate = async (suite, pid, isStopped, onStopped) => {
-  if (!(await terminateProcess({ pid, isStopped }))) {
+  killProcessTree(pid, "SIGTERM");
+  const deadline = Date.now() + 10_000;
+  /* eslint-disable no-await-in-loop -- poll until the server is gone */
+  while (Date.now() < deadline) {
+    await sleep(300);
+    if (await isStopped()) {
+      onStopped?.();
+      process.stdout.write(`Stopped dev server (${suite}) (pid ${pid}).\n`);
+      return 0;
+    }
+  }
+  /* eslint-enable no-await-in-loop */
+  // Escalate if it is still up.
+  killProcessTree(pid, "SIGKILL");
+  await sleep(300);
+  if (!(await isStopped())) {
    process.stderr.write(
      `Failed to stop dev server (${suite}) (pid ${pid}). Stop it manually.\n`
    );
@@ -366,11 +284,9 @@ const terminate = async (suite, pid, isStopped, onStopped) => {
 const PROBE_HOSTS = ["localhost", "127.0.0.1", "[::1]"];

 const probe = async (port, timeoutMs = 1000) => {
-  const probeHost = async (index, sawResponse) => {
-    const host = PROBE_HOSTS[index];
-    if (!host) {
-      return sawResponse ? { state: "foreign" } : { state: "free" };
-    }
+  let sawResponse = false;
+  /* eslint-disable no-await-in-loop -- probe localhost addresses in order, stopping at the first that answers */
+  for (const host of PROBE_HOSTS) {
    const controller = new AbortController();
    const timer = setTimeout(() => controller.abort(), timeoutMs);
    try {
@@ -389,9 +305,9 @@ const probe = async (port, timeoutMs = 1000) => {
    } finally {
      clearTimeout(timer);
    }
-    return probeHost(index + 1, sawResponse);
-  };
-  return probeHost(0, false);
+  }
+  /* eslint-enable no-await-in-loop */
+  return sawResponse ? { state: "foreign" } : { state: "free" };
 };

 // Find the pid listening on a port via the first available tool (no state file).
@@ -435,23 +351,13 @@ const runForegroundHealth = async (suite, cfg) => {
    );
    return 0;
  }
-  if (status.state === "ours") {
-    process.stderr.write(
-      `Port ${port} is serving the ${status.suite ?? "unknown"} dev server; not ${suite}.\n`
-    );
-    return 1;
-  }
  if (status.state === "foreign") {
    process.stderr.write(
      `Port ${port} is in use by another process; not the ${suite} dev server.\n`
    );
    return 1;
  }
-  return spawnForeground({
-    cmd: cfg.spawn.cmd,
-    args: cfg.spawn.args,
-    cwd: repoRoot,
-  });
+  return spawnInherit(cfg.spawn.cmd, cfg.spawn.args);
 };

 const runBackgroundHealth = async (suite, cfg) => {
@@ -465,12 +371,6 @@ const runBackgroundHealth = async (suite, cfg) => {
    );
    return 0;
  }
-  if (preflight.state === "ours") {
-    process.stderr.write(
-      `Port ${port} is serving the ${preflight.suite ?? "unknown"} dev server; not ${suite}.\n`
-    );
-    return 1;
-  }
  if (preflight.state === "foreign") {
    process.stderr.write(
      `Port ${port} is in use by another process; not the ${suite} dev server.\n`
@@ -478,13 +378,11 @@ const runBackgroundHealth = async (suite, cfg) => {
    return 1;
  }

-  const logFile = logFileFor(suite);
-  const child = await spawnDetachedToLog({
-    cmd: cfg.spawn.cmd,
-    args: cfg.spawn.args,
-    cwd: repoRoot,
-    logFile,
-  });
+  const { child, logFile } = spawnDetachedToLog(
+    suite,
+    cfg.spawn.cmd,
+    cfg.spawn.args
+  );
  return awaitReady({
    suite,
    child,
@@ -545,12 +443,42 @@ const runStopHealth = async (suite, cfg) => {

 // --- process liveness (pidfile + log-readiness) -----------------------------

+const isAlive = (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";
+  }
+};
+
 const readPidFile = (suite) => {
-  return readProcessRecord(pidFileFor(suite));
+  try {
+    const data = JSON.parse(fs.readFileSync(pidFileFor(suite), "utf8"));
+    if (data && Number.isInteger(data.pid)) {
+      return data;
+    }
+  } catch {
+    // Missing or corrupt.
+  }
+  return undefined;
 };

 const writePidFile = (suite, data) => {
-  writeProcessRecord(pidFileFor(suite), data);
+  fs.mkdirSync(logDir, { recursive: true });
+  fs.writeFileSync(pidFileFor(suite), JSON.stringify(data));
+};
+
+const removePidFile = (suite) => {
+  try {
+    fs.rmSync(pidFileFor(suite));
+  } catch {
+    // Already gone.
+  }
 };

 const logIsReady = (logFile, readyLog) => {
@@ -564,13 +492,11 @@ const logIsReady = (logFile, readyLog) => {
 // app-serve serves on 8124 by default (8123 in a devcontainer), or whatever -p
 // the caller passed. Used only to show a URL; liveness comes from the pidfile.
 const resolveServePort = (passthrough) => {
-  for (let i = passthrough.length - 1; i >= 0; i--) {
-    const arg = passthrough[i];
-    if (arg === "-p" || arg.startsWith("-p")) {
-      const port = Number(arg === "-p" ? passthrough[i + 1] : arg.slice(2));
-      if (Number.isInteger(port) && port > 0) {
-        return port;
-      }
+  const i = passthrough.indexOf("-p");
+  if (i !== -1) {
+    const port = Number(passthrough[i + 1]);
+    if (Number.isInteger(port) && port > 0) {
+      return port;
    }
  }
  return process.env.DEVCONTAINER ? 8123 : 8124;
@@ -582,72 +508,62 @@ const spawnArgs = (cfg, passthrough) => [
 ];

 const runForegroundProcess = async (suite, cfg, passthrough) => {
-  const lock = acquireProcessSuite(suite);
-  if (!lock.token) {
-    reportProcessConflict(suite, lock.existing);
+  const existing = readPidFile(suite);
+  if (existing && isAlive(existing.pid)) {
+    process.stdout.write(
+      `Dev server (${suite}) already running in the background ` +
+        `(pid ${existing.pid}). Stop it with yarn ${cfg.alias} --stop.\n`
+    );
    return 0;
  }
-  try {
-    return await spawnForeground({
-      cmd: cfg.spawn.cmd,
-      args: spawnArgs(cfg, passthrough),
-      cwd: repoRoot,
-      processGroup: true,
-      onSpawn: (child) => updateProcessSuite(suite, lock.token, child),
-    });
-  } finally {
-    releaseProcessSuite(suite, lock.token);
+  if (existing) {
+    removePidFile(suite);
  }
+  return spawnInherit(cfg.spawn.cmd, spawnArgs(cfg, passthrough));
 };

 const runBackgroundProcess = async (suite, cfg, passthrough) => {
-  const lock = acquireProcessSuite(suite);
-  if (!lock.token) {
-    reportProcessConflict(suite, lock.existing);
+  const existing = readPidFile(suite);
+  if (existing && isAlive(existing.pid)) {
+    process.stdout.write(
+      `Dev server (${suite}) already running${urlSuffix(existing.port)} ` +
+        `(pid ${existing.pid})\n${hints(suite)}`
+    );
    return 0;
  }
-
-  try {
-    const logFile = logFileFor(suite);
-    const child = await spawnDetachedToLog({
-      cmd: cfg.spawn.cmd,
-      args: spawnArgs(cfg, passthrough),
-      cwd: repoRoot,
-      logFile,
-    });
-
-    const port = cfg.acceptsArgs ? resolveServePort(passthrough) : cfg.port;
-    updateProcessSuite(suite, lock.token, child);
-    writePidFile(suite, { ...readPidFile(suite), port });
-
-    return awaitReady({
-      suite,
-      child,
-      logFile,
-      port,
-      isReady: () => logIsReady(logFile, cfg.readyLog),
-      onExit: () => releaseProcessSuite(suite, lock.token),
-    });
-  } catch (err) {
-    releaseProcessSuite(suite, lock.token);
-    throw err;
+  if (existing) {
+    removePidFile(suite);
  }
+
+  const { child, logFile } = spawnDetachedToLog(
+    suite,
+    cfg.spawn.cmd,
+    spawnArgs(cfg, passthrough)
+  );
+
+  const port = cfg.acceptsArgs ? resolveServePort(passthrough) : cfg.port;
+  writePidFile(suite, { pid: child.pid, port });
+
+  return awaitReady({
+    suite,
+    child,
+    logFile,
+    port,
+    isReady: () => logIsReady(logFile, cfg.readyLog),
+    onExit: () => removePidFile(suite),
+  });
 };

 const runStatusProcess = async (suite) => {
  const existing = readPidFile(suite);
-  if (existing && isProcessRecordAlive(existing)) {
+  if (existing && isAlive(existing.pid)) {
    process.stdout.write(
-      `Dev server (${existing.suite ?? suite}) running${urlSuffix(existing.port)} ` +
+      `Dev server (${suite}) running${urlSuffix(existing.port)} ` +
        `(pid ${existing.pid})\n`
    );
  } else {
    if (existing) {
-      removePidFileIf(
-        suite,
-        (current) =>
-          current.token === existing.token && !isProcessRecordAlive(current)
-      );
+      removePidFile(suite);
    }
    process.stdout.write(`Dev server (${suite}) not running.\n`);
  }
@@ -655,64 +571,56 @@ const runStatusProcess = async (suite) => {
 };

 const runStopProcess = async (suite) => {
-  let existing = readPidFile(suite);
-  if (existing?.starting) {
-    const token = existing.token;
-    await waitFor(
-      () => {
-        const current = readPidFile(suite);
-        return !current?.starting || current.token !== token;
-      },
-      100,
-      5000
-    );
-    existing = readPidFile(suite);
-  }
-  if (!existing || !isProcessRecordAlive(existing)) {
+  const existing = readPidFile(suite);
+  if (!existing || !isAlive(existing.pid)) {
    // Idempotent: stopping something that is not running is a success.
    if (existing) {
-      removePidFileIf(
-        suite,
-        (current) =>
-          current.token === existing.token && !isProcessRecordAlive(current)
-      );
+      removePidFile(suite);
    }
    process.stdout.write(`Dev server (${suite}) not running.\n`);
    return 0;
  }
  const { pid } = existing;
-  const activeSuite = existing.suite ?? suite;
  return terminate(
-    activeSuite,
+    suite,
    pid,
-    () => !isProcessRecordAlive(existing),
-    () => releaseProcessSuite(activeSuite, existing.token)
+    () => !isAlive(pid),
+    () => removePidFile(suite)
  );
 };

 // --- shared -----------------------------------------------------------------

 const runLogs = (suite, follow) => {
-  const activeSuite = readPidFile(suite)?.suite ?? suite;
-  return outputLog(
-    logFileFor(activeSuite),
-    follow,
-    `No log for the ${activeSuite} dev server yet (${logFileFor(activeSuite)}).\n`
-  );
+  const logFile = logFileFor(suite);
+  if (!fs.existsSync(logFile)) {
+    process.stdout.write(
+      `No log for the ${suite} dev server yet (${logFile}).\n`
+    );
+    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" });
+    tail.on("error", () => {
+      // No tail available; fall back to a one-shot dump.
+      process.stdout.write(fs.readFileSync(logFile, "utf8"));
+      resolve(0);
+    });
+    tail.on("exit", (code) => resolve(code ?? 0));
+  });
 };

 const main = async () => {
  const args = parseArgs(process.argv.slice(2));
-  const cfg = SUITES.get(args.suite);
+  const cfg = SUITES[args.suite];
  if (!cfg) {
    usage();
    return 1;
  }
-  if (args.modes.length > 1 || (args.follow && args.mode !== "logs")) {
-    process.stderr.write("Invalid combination of lifecycle arguments.\n");
-    usage();
-    return 1;
-  }
  if (args.passthrough.length && !cfg.acceptsArgs) {
    process.stderr.write(
      `Ignoring unexpected arguments: ${args.passthrough.join(" ")}\n`
@@ -736,26 +644,35 @@ const main = async () => {
    }
  }

-  if (mode === "logs") {
-    return runLogs(args.suite, args.follow);
+  const health = cfg.liveness === "health";
+  switch (mode) {
+    case "background":
+      return health
+        ? runBackgroundHealth(args.suite, cfg)
+        : runBackgroundProcess(args.suite, cfg, args.passthrough);
+    case "status":
+      return health
+        ? runStatusHealth(args.suite, cfg)
+        : runStatusProcess(args.suite);
+    case "stop":
+      return health
+        ? runStopHealth(args.suite, cfg)
+        : runStopProcess(args.suite);
+    case "logs":
+      return runLogs(args.suite, args.follow);
+    default:
+      return health
+        ? runForegroundHealth(args.suite, cfg)
+        : runForegroundProcess(args.suite, cfg, args.passthrough);
  }
-  const handlers =
-    cfg.liveness === "health"
-      ? {
-          foreground: () => runForegroundHealth(args.suite, cfg),
-          background: () => runBackgroundHealth(args.suite, cfg),
-          status: () => runStatusHealth(args.suite, cfg),
-          stop: () => runStopHealth(args.suite, cfg),
-        }
-      : {
-          foreground: () =>
-            runForegroundProcess(args.suite, cfg, args.passthrough),
-          background: () =>
-            runBackgroundProcess(args.suite, cfg, args.passthrough),
-          status: () => runStatusProcess(args.suite),
-          stop: () => runStopProcess(args.suite),
-        };
-  return handlers[mode]();
 };

-runCli(main);
+main().then(
+  (code) => {
+    process.exitCode = code;
+  },
+  (err) => {
+    process.stderr.write(`${err?.stack || err}\n`);
+    process.exitCode = 1;
+  }
+);
@@ -51,29 +51,6 @@ gulp.task(
  )
 );

-gulp.task(
-  "build-app-modern",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "production";
-    },
-    "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(
@@ -147,11 +147,9 @@ const genPagesProdTask =
        {
          ...commonVars,
          latestEntryJS: entries.map((entry) => latestManifest[`${entry}.js`]),
-          es5EntryJS: outputES5
-            ? entries.map((entry) => es5Manifest[`${entry}.js`])
-            : [],
+          es5EntryJS: entries.map((entry) => es5Manifest[`${entry}.js`]),
          latestCustomPanelJS: latestManifest["custom-panel.js"],
-          es5CustomPanelJS: outputES5 ? es5Manifest["custom-panel.js"] : "",
+          es5CustomPanelJS: es5Manifest["custom-panel.js"],
        }
      );
      minifiedHTML.push(
@@ -186,17 +184,6 @@ 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"],
@@ -52,23 +52,6 @@ gulp.task("fetch-nightly-translations", async function () {
    currentArtifact = null;
  }

-  try {
-    await fetchTranslations(currentArtifact);
-  } catch (err) {
-    // Local builds should work offline or without valid GitHub credentials,
-    // so fall back to English only. CI must fail instead of silently
-    // building without translations.
-    if (process.env.CI) {
-      throw err;
-    }
-    console.warn(
-      "Failed to fetch nightly translations, continuing with English only:",
-      err?.message || err
-    );
-  }
-});
-
-async function fetchTranslations(currentArtifact) {
  // To store file writing promises
  const createExtractDir = mkdir(EXTRACT_DIR, { recursive: true });
  const writings = [];
@@ -147,6 +130,11 @@ async function fetchTranslations(currentArtifact) {
  if (!latestArtifact) {
    throw Error("Latest nightly workflow run has no translations artifact");
  }
+  writings.push(
+    createExtractDir.then(
+      writeFile(ARTIFACT_FILE, JSON.stringify(latestArtifact, null, 2))
+    )
+  );

  // Remove the current translations
  const deleteCurrent = Promise.all(writings).then(
@@ -172,12 +160,7 @@ async function fetchTranslations(currentArtifact) {
  await new Promise((resolve, reject) => {
    extractStream.on("close", resolve).on("error", reject);
  });
-
-  // Record the artifact only after successful extraction, so a failed fetch
-  // is retried by the next build instead of being considered current.
-  await createExtractDir;
-  await writeFile(ARTIFACT_FILE, JSON.stringify(latestArtifact, null, 2));
-}
+});

 gulp.task(
  "setup-and-fetch-nightly-translations",
@@ -160,17 +160,6 @@ 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(
@@ -34,9 +34,9 @@ gulp.task("gen-service-worker-app-dev", async () => {
  );
 });

-const genServiceWorker = (builds) =>
+gulp.task("gen-service-worker-app-prod", () =>
  Promise.all(
-    builds.map(async ([outPath, build]) => {
+    Object.entries(SW_MAP).map(async ([outPath, build]) => {
      const manifest = JSON.parse(
        await readFile(join(outPath, "manifest.json"), "utf-8")
      );
@@ -83,12 +83,5 @@ const genServiceWorker = (builds) =>
        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"]])
+  )
 );
@@ -1,358 +0,0 @@
-import { spawn, execFileSync } from "node:child_process";
-import fs from "node:fs";
-import path from "node:path";
-
-export const LIFECYCLE_MODE_FLAGS = new Map([
-  ["--background", "background"],
-  ["--status", "status"],
-  ["--stop", "stop"],
-  ["--logs", "logs"],
-]);
-
-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,
-  processGroup = false,
-  onSpawn,
-}) =>
-  new Promise((resolve, reject) => {
-    const child = spawn(cmd, args, {
-      cwd,
-      detached: processGroup,
-      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, 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,
-        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();
-};
-
-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;
-    }
-  );
-};
@@ -12,42 +12,18 @@
 const remapping = require("@ampproject/remapping");

 // minify-literals is ESM-only, so load it via dynamic import from this CJS loader.
-// Also map to cache loader promises per environment (e.g., 'modern', 'legacy')
-const loaderInitPromises = new Map();
-const initLoader = (browserslistEnv) => {
-  if (!loaderInitPromises.has(browserslistEnv)) {
-    loaderInitPromises.set(
-      browserslistEnv,
-      Promise.all([
-        import("minify-literals"),
-        import("browserslist"),
-        import("lightningcss"),
-      ]).then(([minifyModule, browserslistModule, lightningcssModule]) => {
-        const browserslist = browserslistModule.default;
-        const { browserslistToTargets } = lightningcssModule;
-        const rawTargets = browserslist(null, { env: browserslistEnv });
-        if (!rawTargets.length) {
-          throw new Error(
-            `No browsers resolved for browserslist environment "${browserslistEnv}"`
-          );
-        }
-        const lightningcssTargets = browserslistToTargets(rawTargets);
-
-        return {
-          minifyHTMLLiterals: minifyModule.minifyHTMLLiterals,
-          lightningcssTargets,
-        };
-      })
-    );
+let minifyPromise;
+const getMinifier = () => {
+  if (!minifyPromise) {
+    minifyPromise = import("minify-literals").then((m) => m.minifyHTMLLiterals);
  }
-  return loaderInitPromises.get(browserslistEnv);
+  return minifyPromise;
 };

 // HTML options mirror the previous babel-plugin-template-html-minifier config
 // (html-minifier-next is option-compatible with html-minifier-terser). CSS in
-// css`` templates and inline <style> is handled by minify-literals'
-// lightningcss. We pass in the targets from browserslist so lightningcss
-// can minify CSS appropriately for the build environment.
+// css`` templates and inline <style> is handled by minify-literals' lightningcss
+// default.
 //
 // `keepClosingSlash` is required for `svg`` templates: SVG elements such as
 // `<path />` and `<circle />` are not void elements in HTML, so dropping the
@@ -64,16 +40,11 @@ const htmlOptions = {

 module.exports = function minifyTemplateLiteralsLoader(source, map, meta) {
  const callback = this.async();
-  const { browserslistEnv } = this.getOptions();
-
-  initLoader(browserslistEnv)
-    .then(({ minifyHTMLLiterals, lightningcssTargets }) =>
+  getMinifier()
+    .then((minifyHTMLLiterals) =>
      minifyHTMLLiterals(source, {
        fileName: this.resourcePath,
        html: htmlOptions,
-        css: {
-          targets: lightningcssTargets,
-        },
      })
    )
    .then((result) => {
@@ -96,11 +96,6 @@ const createRspackConfig = ({
                  __dirname,
                  "minify-template-literals-loader.cjs"
                ),
-                options: {
-                  browserslistEnv: latestBuild
-                    ? "modern"
-                    : `legacy${info.issuerLayer === "sw" ? "-sw" : ""}`,
-                },
              },
              !latestBuild &&
                info.resource.startsWith(
@@ -0,0 +1,46 @@
+# Demo Agent Instructions
+
+This file applies to all files under `demo/`. Follow the root `AGENTS.md` for repository-wide standards.
+
+The demo is the full Home Assistant frontend running against a mocked backend (published at https://demo.home-assistant.io). It needs no Home Assistant server, which makes it the easiest way to load the real UI in a browser, for example to take screenshots.
+
+## Running the demo
+
+Run from the repository root:
+
+```bash
+yarn dev:demo               # dev server on http://localhost:8090
+yarn dev:demo --background  # detached; also supports --status/--stop/--logs
+```
+
+## Opening a specific demo
+
+The demo contains multiple demo configurations. Select one directly with the `demo` query parameter, e.g. `http://localhost:8090/?demo=<slug>`. The valid slugs are defined in `demoConfigs` in `src/configs/demo-configs.ts`, so "the second demo" means the slug of the second entry in that list. An unknown slug falls back to the default (the first entry).
+
+## Opening a specific page
+
+The demo build uses hash-based routing: the frontend path goes in the URL hash, and the `demo` query parameter goes before the `#`. The URL format is:
+
+```
+http://localhost:8090/?demo=<slug>#/<path>
+```
+
+Useful paths:
+
+- `/lovelace/0` — the selected demo's dashboard (also the default when no hash is given)
+- `/energy` — energy dashboard. Its tabs are views: `/energy/overview` (Summary), `/energy/electricity`, `/energy/gas`, `/energy/water`, `/energy/now`
+- `/map`, `/history`, `/todo`, `/config` — other sidebar panels
+
+Example — the water tab of the energy dashboard of the second demo:
+
+```
+http://localhost:8090/?demo=<second slug>#/energy/water
+```
+
+## Structure
+
+- `src/ha-demo.ts`: Root element; sets up all backend mocks.
+- `src/configs/<slug>/`: One directory per demo configuration (entities, dashboard, theme).
+- `src/configs/demo-configs.ts`: Registry of demo configurations and URL slug handling.
+- `src/stubs/`: Mocked WebSocket/REST APIs.
+- `script/develop_demo`, `script/build_demo`: Dev server and static build wrappers.
@@ -0,0 +1 @@
+AGENTS.md
@@ -16,8 +16,6 @@ import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
 import { mockFloorRegistry, setDemoFloors } from "./stubs/floor_registry";
 import { mockFrontend } from "./stubs/frontend";
-import { mockHardware } from "./stubs/hardware";
-import { mockHassioSupervisor } from "./stubs/hassio_supervisor";
 import { mockIntegration } from "./stubs/integration";
 import { mockLabelRegistry } from "./stubs/label_registry";
 import { mockIcons } from "./stubs/icons";
@@ -75,6 +73,10 @@ export class HaDemo extends HomeAssistantAppEl {
    // `contextMixin`, so let provideHass skip them to avoid duplicate providers.
    const hass = provideHass(this, initial, true, false);

+    // The cloud account page only fetches backup config and the webhook count
+    // when those integrations are loaded. Enable them here (demo only) so the
+    // mocked backup/config/info and webhook/list are queried. usage_prediction
+    // is needed for common-controls sections in strategy dashboards.
    hass.updateHass({
      config: {
        ...hass.config,
@@ -84,8 +86,6 @@ export class HaDemo extends HomeAssistantAppEl {
          "webhook",
          "usage_prediction",
          "assist_pipeline",
-          "hassio",
-          "hardware",
        ],
      },
    });
@@ -113,8 +113,6 @@ export class HaDemo extends HomeAssistantAppEl {
    mockEvents(hass);
    mockMediaPlayer(hass);
    mockFrontend(hass);
-    mockHardware(hass);
-    mockHassioSupervisor(hass);
    mockIcons(hass);
    mockEnergy(hass);
    mockPersistentNotification(hass);
@@ -56,40 +56,15 @@
        padding: 0;
      }
      #ha-launch-screen {
-        font-family: ui-sans-serif, system-ui, sans-serif;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
-        user-select: none;
-        -webkit-user-select: none;
-        transition: opacity var(--ha-animation-duration-normal, 250ms) ease-out;
      }
-      #ha-launch-screen.removing {
-        opacity: 0;
-      }
-      @keyframes launch-lockup-in {
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
-      }
-      #ha-launch-screen .ha-lockup {
-        display: flex;
-        align-items: center;
+      #ha-launch-screen svg {
+        width: 112px;
        flex-shrink: 0;
-        animation: launch-lockup-in var(--ha-animation-duration-normal, 250ms) ease-out both;
-      }
-      #ha-launch-screen-info-box > *,
-      #ha-launch-screen .ohf-logo {
-        animation: launch-lockup-in var(--ha-animation-duration-normal, 250ms) ease-out both;
-      }
-      #ha-launch-screen .ha-logo {
-        width: 96px;
-        height: 96px;
      }
      #ha-launch-screen .ha-launch-screen-spacer-top {
        flex: 1;
@@ -98,39 +73,18 @@
      }
      #ha-launch-screen .ha-launch-screen-spacer-bottom {
        flex: 1;
-        padding-top: 16px;
+        padding-top: 48px;
      }
      .ohf-logo {
        margin: max(var(--safe-area-inset-bottom, 0px), 48px) 0;
        display: flex;
        flex-direction: column;
        align-items: center;
-        gap: 4px;
        opacity: .66;
      }
-      .ohf-logo span {
-        font-size: 12px;
-        line-height: 12px;
-        text-transform: uppercase;
-      }
-      .ohf-logo picture {
-        display: flex;
-      }
-      .ohf-logo img {
-        width: 237px;
-        aspect-ratio: 237 / 24;
-        height: auto;
-      }
-      @media (max-height: 560px) {
-        #ha-launch-screen .ha-launch-screen-spacer-top {
-          margin-top: 24px;
-          padding-top: 24px;
-        }
-        #ha-launch-screen .ha-launch-screen-spacer-bottom {
-          padding-top: 16px;
-        }
+      @media (prefers-color-scheme: dark) {
        .ohf-logo {
-          margin-block: 24px;
+          filter: invert(1);
        }
      }
    </style>
@@ -138,16 +92,13 @@
  <body>
    <div id="ha-launch-screen">
      <div class="ha-launch-screen-spacer-top"></div>
-      <div class="ha-lockup">
-        <img class="ha-logo" src="/static/images/home-assistant-logo-loading.svg" alt="Home Assistant">
-      </div>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+        <path fill="#18BCF2" d="M240 224.762a15 15 0 0 1-15 15H15a15 15 0 0 1-15-15v-90c0-8.25 4.77-19.769 10.61-25.609l98.78-98.7805c5.83-5.83 15.38-5.83 21.21 0l98.79 98.7895c5.83 5.83 10.61 17.36 10.61 25.61v90-.01Z"/>
+        <path fill="#F2F4F9" d="m107.27 239.762-40.63-40.63c-2.09.72-4.32 1.13-6.64 1.13-11.3 0-20.5-9.2-20.5-20.5s9.2-20.5 20.5-20.5 20.5 9.2 20.5 20.5c0 2.33-.41 4.56-1.13 6.65l31.63 31.63v-115.88c-6.8-3.3395-11.5-10.3195-11.5-18.3895 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5c0 8.07-4.7 15.05-11.5 18.3895v81.27l31.46-31.46c-.62-1.96-.96-4.04-.96-6.2 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5-9.2 20.5-20.5 20.5c-2.5 0-4.88-.47-7.09-1.29L129 208.892v30.88z"/>
+      </svg>
      <div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer-bottom"></div>
      <div class="ohf-logo">
-        <span id="ha-launch-screen-attribution">A project from the</span>
-        <picture>
-          <source media="(prefers-color-scheme: dark)" srcset="/static/images/open-home-foundation-on-dark.svg">
-          <img src="/static/images/open-home-foundation-on-light.svg" alt="Open Home Foundation" width="237" height="24">
-        </picture>
+        <img src="/static/images/ohf-badge.svg" alt="Home Assistant is a project by the Open Home Foundation" height="46">
      </div>
    </div>
    <ha-demo></ha-demo>
@@ -1,48 +0,0 @@
-import type {
-  HardwareInfo,
-  SystemStatusStreamMessage,
-} from "../../../src/data/hardware";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-// Mirrors what homeassistant_green reports, so the hardware page resolves the
-// board name and the brands image the same way it does on a real Green.
-const HARDWARE_INFO: HardwareInfo = {
-  hardware: [
-    {
-      board: {
-        hassio_board_id: "green",
-        manufacturer: "homeassistant",
-        model: "green",
-      },
-      dongle: null,
-      config_entries: [],
-      name: "Home Assistant Green",
-      url: "https://support.nabucasa.com/hc/en-us/categories/24638797677853-Home-Assistant-Green",
-    },
-  ],
-};
-
-export const mockHardware = (hass: MockHomeAssistant) => {
-  hass.mockWS("hardware/info", () => HARDWARE_INFO);
-
-  hass.mockWS(
-    "hardware/subscribe_system_status",
-    (_msg, _currentHass, onChange) => {
-      // Rounded like the hardware integration rounds psutil's values.
-      const send = () => {
-        const usedMb = 1560 + Math.round(Math.random() * 80);
-        const message: SystemStatusStreamMessage = {
-          cpu_percent: Math.round((8 + Math.random() * 6) * 10) / 10,
-          memory_free_mb: 4096 - usedMb,
-          memory_used_mb: usedMb,
-          memory_used_percent: Math.round((usedMb / 4096) * 1000) / 10,
-          timestamp: new Date().toISOString(),
-        };
-        onChange?.(message);
-      };
-      send();
-      const interval = window.setInterval(send, 1000);
-      return () => clearInterval(interval);
-    }
-  );
-};
@@ -1,385 +1,59 @@
-import type {
-  HassioAddonDetails,
-  HassioAddonInfo,
-  HassioAddonsInfo,
-} from "../../../src/data/hassio/addon";
-import type { HassioStats } from "../../../src/data/hassio/common";
-import type {
-  HassioHassOSInfo,
-  HassioHostInfo,
-  HostDisksUsage,
-} from "../../../src/data/hassio/host";
-import type { NetworkInfo } from "../../../src/data/hassio/network";
-import type {
-  HassioInfo,
-  HassioSupervisorInfo,
-} from "../../../src/data/hassio/supervisor";
-import type { SupervisorMounts } from "../../../src/data/supervisor/mounts";
-import type { SupervisorUpdateConfig } from "../../../src/data/supervisor/update";
+import type { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

-// `icon`/`logo` are false on purpose: the panel would otherwise request
-// /api/hassio/addons/<slug>/icon, which the demo has no backend for.
-const DEMO_ADDONS: HassioAddonInfo[] = [
-  {
-    name: "Music Assistant",
-    slug: "d5369777_music_assistant",
-    description:
-      "Music library manager for all your media sources and streaming services, with support for a wide range of players",
-    advanced: false,
-    available: true,
-    build: false,
-    detached: false,
-    homeassistant: "2025.7.0",
-    icon: false,
-    installed: true,
-    logo: false,
-    repository: "d5369777",
-    stage: "stable",
-    state: "started",
-    update_available: false,
-    url: "https://github.com/music-assistant/home-assistant-addon",
-    version: "2.6.3",
-    version_latest: "2.6.3",
-  },
-  {
-    name: "ESPHome Device Builder",
-    slug: "5c53de3b_esphome",
-    description:
-      "Manage and program your ESP8266/ESP32 based microcontrollers directly via WiFi and with a simple, yet powerful configuration file syntax",
-    advanced: false,
-    available: true,
-    build: false,
-    detached: false,
-    homeassistant: "2025.7.0",
-    icon: false,
-    installed: true,
-    logo: false,
-    repository: "5c53de3b",
-    stage: "stable",
-    state: "started",
-    update_available: false,
-    url: "https://esphome.io/",
-    version: "2025.7.3",
-    version_latest: "2025.7.3",
-  },
-];
-
-const LONG_DESCRIPTIONS: Record<string, string> = {
-  d5369777_music_assistant: `## Music Assistant
-
-Music Assistant brings all your music sources together in one library and streams
-them to the players you already own.
-
- Combines local files with streaming services into a single searchable library
- Plays to Sonos, Chromecast, AirPlay, Squeezebox, DLNA and Home Assistant media players
- Group players together for synced multi-room audio
- Exposes players and playlists to Home Assistant automations and voice assistants`,
-  "5c53de3b_esphome": `## ESPHome Device Builder
-
-ESPHome turns an ESP8266 or ESP32 into a Home Assistant device using a short YAML
-configuration instead of hand-written firmware.
-
- Compile and flash firmware straight from the browser, over WiFi after the first flash
- Hundreds of supported sensors, displays, lights and switches
- Devices are discovered by Home Assistant automatically, with no cloud in between
- Configuration lives next to your Home Assistant config, so it is covered by backups`,
-};
-
-// Supervisor schema format (converted to selectors by the config tab). Music
-// Assistant is configured in its own UI, so it has no add-on options.
-const CONFIG_SCHEMAS: Record<string, HassioAddonDetails["schema"]> = {
-  "5c53de3b_esphome": [
-    { name: "ssl", type: "boolean", required: true },
-    { name: "certfile", type: "string", required: true },
-    { name: "keyfile", type: "string", required: true },
-    { name: "leave_front_door_open", type: "boolean", required: false },
-    { name: "status_use_ping", type: "boolean", required: false },
-  ],
-};
-
-const CONFIG_OPTIONS: Record<string, Record<string, unknown>> = {
-  "5c53de3b_esphome": {
-    ssl: false,
-    certfile: "fullchain.pem",
-    keyfile: "privkey.pem",
-  },
-};
-
-const addonDetails = (addon: HassioAddonInfo): HassioAddonDetails => ({
-  ...addon,
-  apparmor: "default",
-  arch: ["aarch64", "amd64"],
-  audio_input: null,
-  audio_output: null,
-  audio: false,
-  auth_api: false,
-  auto_uart: false,
-  auto_update: false,
-  boot: "auto",
-  changelog: false,
-  devices: [],
-  devicetree: false,
-  discovery: [],
-  docker_api: false,
-  documentation: false,
-  full_access: false,
-  gpio: false,
-  hassio_api: false,
-  hassio_role: "default",
-  hostname: addon.slug.replace(/_/g, "-"),
-  homeassistant_api: false,
-  host_dbus: false,
-  host_ipc: false,
-  host_network: false,
-  host_pid: false,
-  ingress_entry: null,
-  ingress_panel: false,
-  ingress_url: null,
-  ingress: false,
-  ip_address: "172.30.33.2",
-  kernel_modules: false,
-  long_description: LONG_DESCRIPTIONS[addon.slug],
-  machine: [],
-  network_description: null,
-  network: null,
-  options: CONFIG_OPTIONS[addon.slug] ?? {},
-  privileged: [],
-  protected: true,
-  rating: 6,
-  schema: CONFIG_SCHEMAS[addon.slug] ?? null,
-  services_role: [],
-  signed: false,
-  startup: "application",
-  stdin: false,
-  system_managed: false,
-  system_managed_config_entry: null,
-  translations: {},
-  watchdog: true,
-  webui: null,
-});
-
-const LOGS: Record<string, string> = {
-  d5369777_music_assistant: `[server] Starting Music Assistant Server 2.6.3
-[server] Loaded provider: filesystem_local
-[server] Loaded provider: spotify
-[server] Loaded provider: sonos
-[players] Discovered player: Living Room (Sonos)
-[players] Discovered player: Kitchen (Chromecast)
-[server] Music Assistant is ready
-`,
-  "5c53de3b_esphome": `[esphome] Starting ESPHome Device Builder 2025.7.3
-[esphome] Dashboard running on port 6052
-[esphome] Found 3 configurations
-[esphome] bedroom-sensor is online (2025.7.3)
-[esphome] garage-door is online (2025.7.3)
-[esphome] office-display is online (2025.7.3)
-`,
-};
-
-const ADDON_STATS: HassioStats = {
-  blk_read: 12300000,
-  blk_write: 4500000,
-  cpu_percent: 1.4,
-  memory_limit: 3900000000,
-  memory_percent: 4.2,
-  memory_usage: 163000000,
-  network_rx: 8900000,
-  network_tx: 2300000,
-};
-
 export const mockHassioSupervisor = (hass: MockHomeAssistant) => {
-  // Gallery pages rely on this to enable the hassio-gated pickers. The demo
-  // lists hassio in its own components, hence the guard against duplicates.
-  if (!hass.config.components.includes("hassio")) {
-    hass.config.components.push("hassio");
-  }
-
+  hass.config.components.push("hassio");
  hass.mockWS("supervisor/api", (msg) => {
    if (msg.endpoint === "/supervisor/info") {
      const data: HassioSupervisorInfo = {
-        version: "2026.07.1",
-        version_latest: "2026.07.1",
-        update_available: false,
-        channel: "stable",
+        version: "2021.10.dev0805",
+        version_latest: "2021.10.dev0806",
+        update_available: true,
+        channel: "dev",
        arch: "aarch64",
        supported: true,
        healthy: true,
        ip_address: "172.30.32.2",
        wait_boot: 5,
-        timezone: "Europe/Amsterdam",
+        timezone: "America/Los_Angeles",
        logging: "info",
        debug: false,
        debug_block: false,
        diagnostics: true,
-        addons: DEMO_ADDONS as any,
+        addons: [
+          {
+            name: "Visual Studio Code",
+            slug: "a0d7b954_vscode",
+            description:
+              "Fully featured VSCode experience, to edit your HA config in the browser, including auto-completion!",
+            state: "started",
+            version: "3.6.2",
+            version_latest: "3.6.2",
+            update_available: false,
+            repository: "a0d7b954",
+            icon: false,
+            logo: true,
+          },
+          {
+            name: "Z-Wave JS",
+            slug: "core_zwave_js",
+            description:
+              "Control a ZWave network with Home Assistant Z-Wave JS",
+            state: "started",
+            version: "0.1.45",
+            version_latest: "0.1.45",
+            update_available: false,
+            repository: "core",
+            icon: true,
+            logo: true,
+          },
+        ] as any,
        addons_repositories: [
-          "https://github.com/music-assistant/home-assistant-addon",
-          "https://github.com/esphome/home-assistant-addon",
+          "https://github.com/hassio-addons/repository",
        ] as any,
      };
      return data;
    }
-
-    if (msg.endpoint === "/addons") {
-      const data: HassioAddonsInfo = {
-        addons: DEMO_ADDONS,
-        repositories: [
-          {
-            slug: "d5369777",
-            name: "Music Assistant",
-            source: "https://github.com/music-assistant/home-assistant-addon",
-            url: "https://github.com/music-assistant/home-assistant-addon",
-            maintainer: "Music Assistant",
-          },
-          {
-            slug: "5c53de3b",
-            name: "ESPHome",
-            source: "https://github.com/esphome/home-assistant-addon",
-            url: "https://esphome.io/",
-            maintainer: "ESPHome",
-          },
-        ],
-      };
-      return data;
-    }
-
-    const addonMatch = msg.endpoint.match(/^\/addons\/([^/]+)\/(info|stats)$/);
-    if (addonMatch) {
-      const addon = DEMO_ADDONS.find((item) => item.slug === addonMatch[1]);
-      if (!addon) {
-        return Promise.reject(`Addon ${addonMatch[1]} not found`);
-      }
-      return addonMatch[2] === "stats" ? ADDON_STATS : addonDetails(addon);
-    }
-
-    if (msg.endpoint === "/info") {
-      const data: HassioInfo = {
-        arch: "aarch64",
-        channel: "stable",
-        docker: "27.5.1",
-        features: ["reboot", "shutdown", "network", "hostname", "os_agent"],
-        hassos: null,
-        homeassistant: "2026.7.2",
-        hostname: "homeassistant",
-        logging: "info",
-        machine: "green",
-        state: "running",
-        operating_system: "Home Assistant OS 18.2",
-        supervisor: "2026.07.1",
-        supported: true,
-        supported_arch: ["aarch64", "armv7", "armhf"],
-        timezone: "Europe/Amsterdam",
-      };
-      return data;
-    }
-
-    if (msg.endpoint === "/host/info") {
-      const data: HassioHostInfo = {
-        agent_version: "1.8.0",
-        chassis: "embedded",
-        cpe: "cpe:2.3:o:home-assistant:haos:18.2:*:production:*:*:*:aarch64:*",
-        deployment: "production",
-        disk_life_time: 6,
-        disk_free: 22.3,
-        disk_total: 31.2,
-        disk_used: 8.9,
-        features: ["reboot", "shutdown", "network", "hostname", "os_agent"],
-        hostname: "homeassistant",
-        kernel: "6.12.48-haos",
-        operating_system: "Home Assistant OS 18.2",
-        boot_timestamp: 1751932800000000,
-        startup_time: 12.4,
-      };
-      return data;
-    }
-
-    if (msg.endpoint === "/os/info") {
-      const data: HassioHassOSInfo = {
-        board: "green",
-        boot: "A",
-        update_available: false,
-        version: "18.2",
-        version_latest: "18.2",
-        data_disk: "Home Assistant Green (mmcblk0)",
-      };
-      return data;
-    }
-
-    if (msg.endpoint === "/host/disks/default/usage") {
-      const data: HostDisksUsage = {
-        id: "root",
-        label: "Total",
-        total_bytes: 31200000000,
-        used_bytes: 8900000000,
-        children: [
-          { id: "media", label: "Media", used_bytes: 4100000000 },
-          { id: "addons", label: "Apps", used_bytes: 2600000000 },
-          { id: "backup", label: "Backups", used_bytes: 1400000000 },
-          { id: "share", label: "Share", used_bytes: 800000000 },
-        ],
-      };
-      return data;
-    }
-
-    if (msg.endpoint === "/mounts") {
-      const data: SupervisorMounts = {
-        default_backup_mount: null,
-        mounts: [],
-      };
-      return data;
-    }
-
-    if (msg.endpoint === "/network/info") {
-      const data: NetworkInfo = {
-        interfaces: [
-          {
-            primary: true,
-            privacy: false,
-            interface: "eth0",
-            enabled: true,
-            type: "ethernet",
-            ipv4: {
-              address: ["192.168.1.10/24"],
-              gateway: "192.168.1.1",
-              method: "auto",
-              nameservers: ["192.168.1.1"],
-            },
-            wifi: null,
-          },
-        ],
-        docker: {
-          address: "172.30.32.0/23",
-          dns: "172.30.32.3",
-          gateway: "172.30.32.1",
-          interface: "hassio",
-        },
-      };
-      return data;
-    }
-
-    if (msg.endpoint === "/store/reload") {
-      return null;
-    }
-
    return Promise.reject(`${msg.method} ${msg.endpoint} is not implemented`);
  });
-
-  hass.mockWS("hassio/update/config/info", (): SupervisorUpdateConfig => ({
-    add_on_backup_before_update: true,
-    add_on_backup_retain_copies: 1,
-    core_backup_before_update: true,
-  }));
-
-  hass.mockAPI(/^hassio\/host\/logs\/boots$/, () => ({
-    data: { boots: { "0": "2026-07-26T09:00:00.000000+00:00" } },
-  }));
-
-  hass.mockAPI(/^hassio\/addons\/[^/]+\/logs/, (_hass, _method, path) => {
-    const slug = path.split("/")[2];
-    // X-First-Cursor tells error-log-card there is nothing older to page to.
-    return new Response(LOGS[slug], {
-      headers: { "X-First-Cursor": "demo" },
-    });
-  });
 };
@@ -1,23 +0,0 @@
---
-title: Replaced device selectors
-subtitle: How device and target selectors surface devices that were split into separate devices
---
-
-A device that used to belong to multiple config entries is split into one
-device per config entry. The original composite device is removed from the
-registry, so existing references to it (targets in automations, device
-selectors) point at a device that no longer exists.
-
-When a selector holds such a reference, it shows a **replaced** state instead of
-a plain "not found", and offers to point the reference at the replacement
-device(s). The candidate replacements are filtered through the selector's own
-filters, so in practice usually a single device matches:
-
- **Target selector** — the replaced device row offers **Replace**, which adds
-  every replacement device that matches the target filters and removes the old
-  reference.
- **Device selector** — when exactly one replacement matches, **Replace** swaps
-  to it in one click; when several match, a dialog lets you pick one.
-
-All samples below reference the removed composite device `old_composite`, which
-was split into a light device and a switch device.
@@ -1,318 +0,0 @@
-import type { HassServiceTarget } from "home-assistant-js-websocket";
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
-import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
-import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
-import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import type { HASSDomEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-selector/ha-selector";
-import "../../../../src/components/ha-settings-row";
-import "../../../../src/components/ha-target-picker";
-import type { AreaRegistryEntry } from "../../../../src/data/area/area_registry";
-import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
-import type { EntityRegistryDisplayEntry } from "../../../../src/data/entity/entity_registry";
-import type { Selector } from "../../../../src/data/selector";
-import {
-  showDialog,
-  type ShowDialogParams,
-} from "../../../../src/dialogs/make-dialog-manager";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import type { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
-import type { HomeAssistant } from "../../../../src/types";
-import "../../components/demo-black-white-row";
-
-// The composite device "old_composite" is intentionally NOT in the registry:
-// it was split into "device_light" and "device_switch". References to the old
-// id (targets, device selectors) should surface a "replaced" state.
-const DEVICES: DeviceRegistryEntry[] = [
-  {
-    area_id: "bedroom",
-    configuration_url: null,
-    config_entries: ["config_entry_light"],
-    config_entries_subentries: {},
-    connections: [],
-    disabled_by: null,
-    entry_type: null,
-    id: "device_light",
-    identifiers: [["demo", "light"] as [string, string]],
-    manufacturer: null,
-    model: null,
-    model_id: null,
-    name_by_user: null,
-    name: "Living room lamp",
-    sw_version: null,
-    hw_version: null,
-    via_device_id: null,
-    serial_number: null,
-    labels: [],
-    created_at: 0,
-    modified_at: 0,
-    primary_config_entry: null,
-  },
-  {
-    area_id: "backyard",
-    configuration_url: null,
-    config_entries: ["config_entry_switch"],
-    config_entries_subentries: {},
-    connections: [],
-    disabled_by: null,
-    entry_type: null,
-    id: "device_switch",
-    identifiers: [["demo", "switch"] as [string, string]],
-    manufacturer: null,
-    model: null,
-    model_id: null,
-    name_by_user: null,
-    name: "Garden socket",
-    sw_version: null,
-    hw_version: null,
-    via_device_id: null,
-    serial_number: null,
-    labels: [],
-    created_at: 0,
-    modified_at: 0,
-    primary_config_entry: null,
-  },
-];
-
-const ENTITIES = [
-  {
-    entity_id: "light.living_room_lamp",
-    state: "on",
-    attributes: { friendly_name: "Living room lamp" },
-  },
-  {
-    entity_id: "switch.garden_socket",
-    state: "off",
-    attributes: { friendly_name: "Garden socket" },
-  },
-];
-
-// Registry display entries link the demo entities to the split devices so the
-// pickers can filter split candidates by domain.
-const ENTITY_REGISTRY: Record<string, EntityRegistryDisplayEntry> = {
-  "light.living_room_lamp": {
-    entity_id: "light.living_room_lamp",
-    name: "Living room lamp",
-    device_id: "device_light",
-    area_id: "bedroom",
-    platform: "demo",
-    labels: [],
-  },
-  "switch.garden_socket": {
-    entity_id: "switch.garden_socket",
-    name: "Garden socket",
-    device_id: "device_switch",
-    area_id: "backyard",
-    platform: "demo",
-    labels: [],
-  },
-};
-
-const AREAS: AreaRegistryEntry[] = [
-  {
-    area_id: "backyard",
-    floor_id: null,
-    name: "Backyard",
-    icon: null,
-    picture: null,
-    aliases: [],
-    labels: [],
-    temperature_entity_id: null,
-    humidity_entity_id: null,
-    created_at: 0,
-    modified_at: 0,
-  },
-  {
-    area_id: "bedroom",
-    floor_id: null,
-    name: "Bedroom",
-    icon: "mdi:bed",
-    picture: null,
-    aliases: [],
-    labels: [],
-    temperature_entity_id: null,
-    humidity_entity_id: null,
-    created_at: 0,
-    modified_at: 0,
-  },
-];
-
-// Maps the removed composite device to the devices that replaced it.
-const COMPOSITE_SPLITS = {
-  old_composite: {
-    split_ids: ["device_light", "device_switch"],
-    primary_id: "device_light",
-  },
-};
-
-interface Sample {
-  name: string;
-  description: string;
-  selector: Selector;
-  value: unknown;
-  // Render ha-target-picker directly in compact (chip) mode instead of the
-  // ha-selector, which does not expose the compact option.
-  compact?: boolean;
-}
-
-const SAMPLES: Sample[] = [
-  {
-    name: "Target",
-    description:
-      "Migrate adds every replacement device that matches the target filters (here both).",
-    selector: { target: {} },
-    value: { device_id: ["old_composite"] },
-  },
-  {
-    name: "Target (compact)",
-    description:
-      "In compact mode the replaced reference is shown as a warning chip.",
-    selector: { target: {} },
-    value: { device_id: ["old_composite"] },
-    compact: true,
-  },
-  {
-    name: "Device (unfiltered, multiple matches)",
-    description:
-      "Both replacement devices qualify, so Replace opens a dialog to pick one.",
-    selector: { device: {} },
-    value: "old_composite",
-  },
-  {
-    name: "Device (filtered to lights, single match)",
-    description:
-      "Only the light device passes the filter, so Replace swaps to it in one click.",
-    selector: { device: { entity: [{ domain: "light" }] } },
-    value: "old_composite",
-  },
-  {
-    name: "Device (multiple)",
-    description: "Each slot resolves independently to a matching replacement.",
-    selector: { device: { multiple: true } },
-    value: ["old_composite"],
-  },
-];
-
-@customElement("demo-components-ha-selector-replaced-device")
-class DemoHaSelectorReplacedDevice
-  extends LitElement
-  implements ProvideHassElement
-{
-  @state() public hass!: HomeAssistant;
-
-  private _values = SAMPLES.map((sample) => sample.value);
-
-  constructor() {
-    super();
-    const hass = provideHass(this);
-    hass.updateTranslations(null, "en");
-    hass.updateTranslations("config", "en");
-    hass.addEntities(ENTITIES);
-    mockEntityRegistry(hass);
-    mockDeviceRegistry(hass, DEVICES);
-    mockConfigEntries(hass);
-    mockHassioSupervisor(hass);
-    // Provide the demo areas and link the demo entities to the split devices.
-    // Set them directly via updateHass (typed against the real registry types)
-    // instead of the area stub, whose demo-specific type differs.
-    const areas: Record<string, AreaRegistryEntry> = {};
-    AREAS.forEach((area) => {
-      areas[area.area_id] = area;
-    });
-    hass.updateHass({ areas, entities: ENTITY_REGISTRY });
-    hass.mockWS(
-      "config/device_registry/list_composite_splits",
-      () => COMPOSITE_SPLITS
-    );
-    hass.mockWS("extract_from_target", () => ({
-      referenced_entities: [],
-      referenced_devices: [],
-      referenced_areas: [],
-    }));
-    hass.mockWS("auth/sign_path", (params) => params);
-  }
-
-  public provideHass(el) {
-    el.hass = this.hass;
-  }
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("show-dialog", this._dialogManager);
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("show-dialog", this._dialogManager);
-  }
-
-  private _dialogManager = (e: HASSDomEvent<ShowDialogParams<unknown>>) => {
-    const { dialogTag, dialogImport, dialogParams, addHistory, parentElement } =
-      e.detail;
-    showDialog(
-      this,
-      dialogTag,
-      dialogParams,
-      dialogImport,
-      parentElement,
-      addHistory
-    );
-  };
-
-  protected render(): TemplateResult {
-    return html`
-      ${SAMPLES.map(
-        (sample, idx) => html`
-          <demo-black-white-row .title=${sample.name}>
-            ${["light", "dark"].map(
-              (slot) => html`
-                <ha-settings-row narrow slot=${slot}>
-                  <span slot="heading">${sample.name}</span>
-                  <span slot="description">${sample.description}</span>
-                  ${
-                    sample.compact
-                      ? html`<ha-target-picker
-                          compact
-                          .hass=${this.hass}
-                          .value=${this._values[idx] as HassServiceTarget}
-                          .sampleIdx=${idx}
-                          @value-changed=${this._handleValueChanged}
-                        ></ha-target-picker>`
-                      : html`<ha-selector
-                          .hass=${this.hass}
-                          .selector=${sample.selector}
-                          .value=${this._values[idx]}
-                          .sampleIdx=${idx}
-                          @value-changed=${this._handleValueChanged}
-                        ></ha-selector>`
-                  }
-                </ha-settings-row>
-              `
-            )}
-          </demo-black-white-row>
-        `
-      )}
-    `;
-  }
-
-  private _handleValueChanged(ev) {
-    const idx = ev.target.sampleIdx;
-    this._values[idx] = ev.detail.value;
-    this.requestUpdate();
-  }
-
-  static styles = css`
-    ha-settings-row {
-      --settings-row-content-width: 100%;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-selector-replaced-device": DemoHaSelectorReplacedDevice;
-  }
-}
@@ -182,10 +182,12 @@ class HaLandingPage extends LandingPageBaseElement {
      this._networkInfoError = false;
      this._coreStatusChecked = false;
    } catch (err: any) {
-      if (await this._checkCoreAvailability()) {
-        // core is available, page reload in progress -> don't show an error
-        return;
+      if (!this._coreStatusChecked) {
+        // wait before show errors, because we assume that core is starting
+        this._coreCheckActive = true;
+        this._scheduleTurnOffCoreCheck();
      }
+      await this._checkCoreAvailability();

      // assume supervisor update if ping fails -> don't show an error
      if (!this._coreCheckActive && err.message !== "ping-failed") {
@@ -215,10 +217,7 @@ class HaLandingPage extends LandingPageBaseElement {
        this._progress = -1;
      }
    } catch (err: any) {
-      if (await this._checkCoreAvailability()) {
-        // core is available, page reload in progress -> stop polling
-        return;
-      }
+      await this._checkCoreAvailability();

      if (!this._coreCheckActive) {
        this._progress = -1;
@@ -230,22 +229,16 @@ class HaLandingPage extends LandingPageBaseElement {
    this._scheduleFetchSupervisorJobsInfo();
  }

-  private async _checkCoreAvailability(): Promise<boolean> {
+  private async _checkCoreAvailability() {
    try {
      const response = await fetch("/manifest.json");
-      if (!response.ok) {
+      if (response.ok) {
+        location.reload();
+      } else {
        throw new Error("Failed to fetch manifest");
      }
-      location.reload();
-      return true;
    } catch (_err) {
-      if (!this._coreStatusChecked) {
-        // wait before showing errors, because we assume that core is starting
-        this._coreStatusChecked = true;
-        this._coreCheckActive = true;
-        this._scheduleTurnOffCoreCheck();
-      }
-      return false;
+      this._coreStatusChecked = true;
    }
  }

@@ -7,7 +7,7 @@
  "name": "home-assistant-frontend",
  "version": "1.0.0",
  "scripts": {
-    "build": "node build-scripts/build-manager.mjs",
+    "build": "script/build_frontend",
    "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",
@@ -150,7 +150,7 @@
    "@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.61.1",
    "@rsdoctor/rspack-plugin": "1.6.1",
    "@rspack/core": "2.1.5",
    "@rspack/dev-server": "2.1.0",
@@ -174,7 +174,7 @@
    "babel-plugin-polyfill-corejs3": "1.0.0",
    "browserslist-useragent-regexp": "4.1.4",
    "del": "8.0.1",
-    "eslint": "10.8.0",
+    "eslint": "10.7.0",
    "eslint-config-prettier": "10.1.8",
    "eslint-import-resolver-webpack": "0.13.11",
    "eslint-plugin-import-x": "4.17.1",
@@ -186,14 +186,14 @@
    "fs-extra": "11.4.0",
    "generate-license-file": "4.2.1",
    "glob": "13.0.6",
-    "globals": "17.8.0",
+    "globals": "17.7.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": "30.0.0",
+    "jsdom": "29.1.1",
    "jszip": "3.10.1",
    "license-checker-rseidelsohn": "5.0.1",
    "lint-staged": "17.2.0",
@@ -207,7 +207,7 @@
    "rspack-manifest-plugin": "5.2.2",
    "serve": "14.2.6",
    "sinon": "22.1.0",
-    "tar": "7.5.22",
+    "tar": "7.5.21",
    "terser-webpack-plugin": "5.6.1",
    "ts-lit-plugin": "2.0.2",
    "typescript": "6.0.3",
@@ -224,12 +224,12 @@
    "clean-css": "5.3.3",
    "@lit/reactive-element": "2.1.2",
    "@fullcalendar/daygrid": "6.1.21",
-    "globals": "17.8.0",
+    "globals": "17.7.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",
  "volta": {
-    "node": "24.18.1"
+    "node": "24.18.0"
  }
 }
@@ -1,36 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" role="presentation">
-  <style>
-    .dot-left { animation: pulse-left 1300ms 350ms linear infinite; }
-    .dot-right { animation: pulse-right 1300ms 350ms linear infinite; }
-    .dot-top { animation: pulse-top 1300ms 350ms linear infinite; }
-    @keyframes pulse-left {
-      0% { transform: translate(50px, 69.634804px) scale(1); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
-      15.384615% { transform: translate(50px, 69.634804px) scale(1.3); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
-      38.461538%, 100% { transform: translate(50px, 69.634804px) scale(1); }
-    }
-    @keyframes pulse-right {
-      0%, 15.384615% { transform: translate(90px, 58.634798px) scale(1); }
-      15.384615% { animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
-      30.769231% { transform: translate(90px, 58.634798px) scale(1.3); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
-      53.846154%, 100% { transform: translate(90px, 58.634798px) scale(1); }
-    }
-    @keyframes pulse-top {
-      0%, 30.769231% { transform: translate(70px, 37.6348px) scale(1); }
-      30.769231% { animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
-      46.153846% { transform: translate(70px, 37.6348px) scale(1.3); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
-      69.230769%, 100% { transform: translate(70px, 37.6348px) scale(1); }
-    }
-  </style>
-  <g transform="matrix(.938408 0 0 .93841 -5.688557 -13.572944)">
-    <path fill="#18bcf2" d="M73.5367 13.0937 106.463 46.0524v.0033C108.41 48.0043 110 51.848 110 54.6007v30.0292c0 2.7527-2.25 5.0049-5 5.0049l-70-.0034c-2.75 0-5-2.2522-5-5.0048V54.5974c0-2.7527 1.5933-6.5998 3.5367-8.545l32.93-32.9587c1.9433-1.9452 5.1266-1.9452 7.07 0Z" transform="matrix(1.598452 0 0 1.598452 -41.89164 -.937304)"/>
-    <g mask="url(#logo-mask)" transform="matrix(1.598452 0 0 1.598452 -41.89164 -.937311)">
-      <path d="m70 89.6348-20-20M70 89.6348v-52M90 58.1348l-20 20" fill="none" stroke="#f2f4f9" stroke-linecap="round" stroke-width="6"/>
-      <circle class="dot-left" r="7" fill="#f2f4f9" transform="translate(50 69.634804)"/>
-      <circle class="dot-right" r="7" fill="#f2f4f9" transform="translate(90 58.634798)"/>
-      <circle class="dot-top" r="7" fill="#f2f4f9" transform="translate(70 37.6348)"/>
-    </g>
-    <mask id="logo-mask" x="-150%" y="-150%" width="400%" height="400%" mask-type="luminance">
-      <path fill="#f2f4f9" d="M73.5367 13.0937 106.463 46.0524v.0033C108.41 48.0043 110 51.848 110 54.6007v30.0292c0 2.7527-2.25 5.0049-5 5.0049l-70-.0034c-2.75 0-5-2.2522-5-5.0048V54.5974c0-2.7527 1.5933-6.5998 3.5367-8.545l32.93-32.9587c1.9433-1.9452 5.1266-1.9452 7.07 0Z"/>
-    </mask>
-  </g>
-</svg>
@@ -1,22 +0,0 @@
-<svg width="237" height="24" viewBox="0 0 237 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.54181 0.297615C8.14709 -0.0992051 7.5012 -0.0992051 7.1082 0.297615L0.717655 6.72232C0.322945 7.11914 0 7.90248 0 8.46249V14.2894C0 14.8494 0.456224 15.3098 1.01497 15.3098H14.635C15.1921 15.3098 15.65 14.8511 15.65 14.2894V8.46249C15.65 7.90248 15.3271 7.11914 14.9324 6.72232L8.54181 0.297615Z" fill="#F7F6F2"/>
-<path d="M14.8672 17.918C15.2993 17.918 15.6502 18.2682 15.6504 18.7002V22.417C15.6504 22.8492 15.2994 23.2002 14.8672 23.2002H13.8896C13.4575 23.2002 13.1064 22.8492 13.1064 22.417V20.4609H2.54297V22.417C2.54297 22.8491 2.19285 23.2001 1.76074 23.2002H0.782227C0.350189 23.2 0 22.8491 0 22.417V18.7002C0.000147852 18.2682 0.350281 17.9181 0.782227 17.918H14.8672Z" fill="#F7F6F2"/>
-<path d="M28.0439 5.24023C28.9236 5.24023 29.7386 5.39857 30.4891 5.71734C31.2396 6.03402 31.8754 6.47362 32.3965 7.03406C32.9177 7.5945 33.3242 8.26536 33.616 9.05081C33.9058 9.83625 34.0517 10.6842 34.0517 11.5967C34.0621 12.4989 33.9204 13.3447 33.6285 14.1385C33.3346 14.9323 32.9239 15.6094 32.3965 16.1719C31.8691 16.7344 31.227 17.1761 30.4724 17.4949C29.7178 17.8157 28.9027 17.9699 28.0272 17.9595C26.8702 17.9762 25.83 17.7095 24.9086 17.1616C23.9872 16.6136 23.2764 15.8532 22.7761 14.8802C22.2757 13.9073 22.0339 12.8176 22.0506 11.6134C22.0402 10.7113 22.1819 9.86542 22.4738 9.07164C22.7677 8.27786 23.1763 7.60075 23.7016 7.03406C24.2269 6.46945 24.8648 6.02568 25.6174 5.70692C26.3699 5.38816 27.1787 5.2319 28.0439 5.24232V5.24023ZM28.0584 15.524C29.0966 15.524 29.9179 15.1719 30.5245 14.4698C31.1312 13.7656 31.4334 12.8093 31.4334 11.5967C31.4334 10.3842 31.1312 9.41332 30.5287 8.71121C29.9262 8.01118 29.1028 7.66117 28.0584 7.66117C27.0141 7.66117 26.1906 8.01118 25.5882 8.71121C24.9857 9.41124 24.6835 10.3738 24.6835 11.5967C24.6835 12.8197 24.9857 13.7802 25.5882 14.4781C26.1906 15.1761 27.0141 15.5261 28.0584 15.5261V15.524Z" fill="#F7F6F2"/>
-<path d="M44.9854 9.52582C44.9854 10.7592 44.6123 11.7509 43.8681 12.503C43.1239 13.2551 42.1108 13.6322 40.8267 13.6322H38.3898V17.7553H35.9028V5.45899H40.86C42.1483 5.45899 43.1572 5.82151 43.8889 6.54654C44.6206 7.27157 44.9854 8.26536 44.9854 9.52374V9.52582ZM42.3588 9.47791C42.3588 8.95705 42.19 8.52578 41.8502 8.18619C41.5104 7.84659 41.0205 7.67783 40.3785 7.67783H38.3898V11.4676H40.3785C41.0247 11.4676 41.5167 11.2842 41.8544 10.9175C42.1921 10.5509 42.3588 10.0717 42.3588 9.47999V9.47791Z" fill="#F7F6F2"/>
-<path d="M54.4829 17.7553H46.7386V5.45899H54.4829V7.82159H49.2234V10.4446H53.895V12.6447H49.2234V15.4156H54.4829V17.7553Z" fill="#F7F6F2"/>
-<path d="M67.397 5.46108V17.7574H64.9268L59.5381 9.42999V17.7574H57.0678V5.46108H59.5381L64.9268 13.8052V5.46108H67.397Z" fill="#F7F6F2"/>
-<path d="M74.4409 5.46108H76.9279V10.4321L81.8037 10.4488V5.46108H84.3074V17.7574H81.8037V12.6655L76.9279 12.6322V17.7574H74.4409V5.46108Z" fill="#F7F6F2"/>
-<path d="M92.133 5.24023C93.0127 5.24023 93.8278 5.39857 94.5782 5.71734C95.3287 6.03402 95.9645 6.47362 96.4856 7.03406C97.0068 7.5945 97.4133 8.26536 97.7051 9.05081C97.9949 9.83625 98.1408 10.6842 98.1408 11.5967C98.1512 12.4989 98.0095 13.3447 97.7176 14.1385C97.4237 14.9323 97.013 15.6094 96.4856 16.1719C95.9582 16.7344 95.3162 17.1761 94.5615 17.4949C93.8069 17.8157 92.9918 17.9699 92.1163 17.9595C90.9593 17.9762 89.9191 17.7095 88.9977 17.1616C88.0763 16.6136 87.3655 15.8532 86.8652 14.8802C86.3649 13.9073 86.1231 12.8176 86.1397 11.6134C86.1293 10.7113 86.2711 9.86542 86.5629 9.07164C86.8568 8.27786 87.2654 7.60075 87.7907 7.03406C88.3161 6.46945 88.954 6.02568 89.7065 5.70692C90.459 5.38816 91.2679 5.2319 92.133 5.24232V5.24023ZM92.1476 15.524C93.1857 15.524 94.007 15.1719 94.6137 14.4698C95.2203 13.7656 95.5225 12.8093 95.5225 11.5967C95.5225 10.3842 95.2203 9.41332 94.6178 8.71121C94.0154 8.01118 93.192 7.66117 92.1476 7.66117C91.1032 7.66117 90.2798 8.01118 89.6773 8.71121C89.0749 9.41124 88.7726 10.3738 88.7726 11.5967C88.7726 12.8197 89.0749 13.7802 89.6773 14.4781C90.2798 15.1761 91.1032 15.5261 92.1476 15.5261V15.524Z" fill="#F7F6F2"/>
-<path d="M112.408 5.46108V17.7574H109.954V11.0342L107.321 17.7574H104.966L102.364 11.0842V17.7574H99.9919V5.46108H102.364L106.148 14.8552L109.954 5.46108H112.408Z" fill="#F7F6F2"/>
-<path d="M122.762 17.7553H115.018V5.45899H122.762V7.82159H117.503V10.4446H122.174V12.6447H117.503V15.4156H122.762V17.7553Z" fill="#F7F6F2"/>
-<path d="M131.526 7.21579V10.9075H136.254V12.5936H131.526V17.7408H129.65V5.44079H137.146V7.21579H131.526Z" fill="#F7F6F2"/>
-<path d="M144.303 5.24079C145.156 5.22968 145.956 5.38523 146.699 5.70468C147.441 6.02412 148.074 6.46579 148.597 7.02968C149.117 7.59357 149.525 8.27135 149.82 9.05746C150.114 9.84635 150.256 10.688 150.245 11.5852C150.256 12.488 150.114 13.338 149.82 14.1297C149.525 14.9241 149.117 15.5991 148.597 16.163C148.077 16.7241 147.443 17.1658 146.699 17.4852C145.954 17.8047 145.156 17.9602 144.303 17.9491C143.449 17.9602 142.652 17.8047 141.91 17.4852C141.168 17.1658 140.537 16.7241 140.017 16.1602C139.497 15.5963 139.089 14.9186 138.797 14.1325C138.505 13.3463 138.363 12.5019 138.374 11.6047C138.363 10.7075 138.505 9.86301 138.797 9.07412C139.089 8.28523 139.494 7.60746 140.017 7.04079C140.537 6.4769 141.168 6.03246 141.91 5.71023C142.652 5.38801 143.449 5.23246 144.303 5.24357V5.24079ZM141.44 14.8602C142.165 15.6825 143.124 16.0963 144.319 16.0963C145.515 16.0963 146.473 15.6852 147.196 14.8602C147.919 14.038 148.28 12.9463 148.28 11.5852C148.28 10.2241 147.919 9.12412 147.196 8.3019C146.473 7.47968 145.515 7.06579 144.319 7.06579C143.124 7.06579 142.163 7.47968 141.44 8.30468C140.715 9.12968 140.353 10.2241 140.353 11.5852C140.353 12.9463 140.715 14.038 141.44 14.8602Z" fill="#F7F6F2"/>
-<path d="M154.097 5.43801V13.3019C154.103 14.238 154.378 14.9463 154.923 15.4241C155.467 15.9047 156.184 16.1436 157.071 16.1436C157.958 16.1436 158.636 15.8908 159.203 15.388C159.77 14.8852 160.053 14.188 160.053 13.3019V5.43801H161.929V13.3769C161.929 14.0991 161.799 14.7519 161.54 15.338C161.282 15.9241 160.929 16.4075 160.487 16.7825C160.042 17.1602 159.531 17.4491 158.944 17.6547C158.358 17.8602 157.735 17.9602 157.068 17.9602C156.401 17.9602 155.804 17.8602 155.226 17.663C154.647 17.4658 154.131 17.1797 153.68 16.8075C153.227 16.4352 152.871 15.9547 152.61 15.363C152.349 14.7713 152.218 14.1075 152.218 13.3769V5.43801H154.097Z" fill="#F7F6F2"/>
-<path d="M174.473 5.43801V17.738H172.597L166.529 8.46857V17.738H164.653V5.43801H166.529L172.597 14.7241V5.43801H174.473Z" fill="#F7F6F2"/>
-<path d="M187.583 11.6019C187.588 12.4825 187.436 13.3102 187.124 14.0797C186.813 14.8519 186.382 15.5075 185.835 16.0463C185.287 16.5852 184.628 17.0075 183.859 17.3102C183.089 17.613 182.269 17.7575 181.391 17.7408H177.291V5.44079H181.391C182.547 5.42412 183.603 5.67968 184.553 6.21023C185.504 6.73801 186.249 7.4769 186.788 8.42412C187.327 9.37135 187.591 10.4325 187.583 11.6047V11.6019ZM185.59 11.6019C185.59 10.3019 185.204 9.24635 184.428 8.43523C183.653 7.62412 182.636 7.21579 181.374 7.21579H179.184V15.9963H181.374C182.647 15.9963 183.667 15.5936 184.437 14.7852C185.207 13.9797 185.59 12.9158 185.59 11.6019Z" fill="#F7F6F2"/>
-<path d="M195.821 14.7825H190.91L189.843 17.7408H187.916L192.363 5.44079H194.381L198.853 17.7408H196.869L195.818 14.7825H195.821ZM195.276 13.188L193.383 7.8269L191.474 13.188H195.276Z" fill="#F7F6F2"/>
-<path d="M207.278 7.21579H203.706V17.7408H201.813V7.21579H198.242V5.44079H207.275V7.21579H207.278Z" fill="#F7F6F2"/>
-<path d="M208.973 17.738V5.43801H210.866V17.738H208.973Z" fill="#F7F6F2"/>
-<path d="M218.873 5.24079C219.726 5.22968 220.527 5.38523 221.269 5.70468C222.014 6.02412 222.645 6.46579 223.167 7.02968C223.687 7.59357 224.095 8.27135 224.39 9.05746C224.685 9.84635 224.826 10.688 224.815 11.5852C224.826 12.488 224.685 13.338 224.39 14.1297C224.095 14.9241 223.687 15.5991 223.167 16.163C222.647 16.7241 222.014 17.1658 221.269 17.4852C220.524 17.8047 219.726 17.9602 218.873 17.9491C218.02 17.9602 217.222 17.8047 216.48 17.4852C215.738 17.1658 215.107 16.7241 214.587 16.1602C214.067 15.5963 213.659 14.9186 213.367 14.1325C213.075 13.3463 212.933 12.5019 212.945 11.6047C212.933 10.7075 213.075 9.86301 213.367 9.07412C213.659 8.28523 214.065 7.60746 214.587 7.04079C215.107 6.4769 215.738 6.03246 216.48 5.71023C217.222 5.38801 218.02 5.23246 218.873 5.24357V5.24079ZM216.01 14.8602C216.736 15.6825 217.695 16.0963 218.89 16.0963C220.085 16.0963 221.044 15.6852 221.766 14.8602C222.489 14.038 222.85 12.9463 222.85 11.5852C222.85 10.2241 222.489 9.12412 221.766 8.3019C221.044 7.47968 220.085 7.06579 218.89 7.06579C217.695 7.06579 216.733 7.47968 216.01 8.30468C215.285 9.12968 214.924 10.2241 214.924 11.5852C214.924 12.9463 215.285 14.038 216.01 14.8602Z" fill="#F7F6F2"/>
-<path d="M236.728 5.43801V17.738H234.852L228.784 8.46857V17.738H226.908V5.43801H228.784L234.852 14.7241V5.43801H236.728Z" fill="#F7F6F2"/>
-</svg>
@@ -1,22 +0,0 @@
-<svg width="237" height="24" viewBox="0 0 237 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.54181 0.297615C8.14709 -0.0992051 7.5012 -0.0992051 7.1082 0.297615L0.717655 6.72232C0.322945 7.11914 0 7.90248 0 8.46249V14.2894C0 14.8494 0.456224 15.3098 1.01497 15.3098H14.635C15.1921 15.3098 15.65 14.8511 15.65 14.2894V8.46249C15.65 7.90248 15.3271 7.11914 14.9324 6.72232L8.54181 0.297615Z" fill="#09202E"/>
-<path d="M14.8672 17.9182C15.2993 17.9182 15.6502 18.2684 15.6504 18.7004V22.4172C15.6504 22.8494 15.2994 23.2004 14.8672 23.2004H13.8896C13.4575 23.2004 13.1064 22.8494 13.1064 22.4172V20.4612H2.54297V22.4172C2.54297 22.8494 2.19285 23.2004 1.76074 23.2004H0.782227C0.350189 23.2003 0 22.8493 0 22.4172V18.7004C0.000147852 18.2685 0.350281 17.9184 0.782227 17.9182H14.8672Z" fill="#09202E"/>
-<path d="M28.0439 5.23999C28.9236 5.23999 29.7386 5.39833 30.4891 5.71709C31.2396 6.03377 31.8754 6.47337 32.3965 7.03381C32.9177 7.59425 33.3242 8.26511 33.616 9.05056C33.9058 9.83601 34.0517 10.684 34.0517 11.5965C34.0621 12.4986 33.9204 13.3445 33.6285 14.1383C33.3346 14.932 32.9239 15.6092 32.3965 16.1717C31.8691 16.7342 31.227 17.1759 30.4724 17.4947C29.7178 17.8155 28.9027 17.9697 28.0272 17.9593C26.8702 17.9759 25.83 17.7092 24.9086 17.1613C23.9872 16.6134 23.2764 15.8529 22.7761 14.88C22.2757 13.907 22.0339 12.8174 22.0506 11.6132C22.0402 10.711 22.1819 9.86518 22.4738 9.0714C22.7677 8.27761 23.1763 7.6005 23.7016 7.03381C24.2269 6.46921 24.8648 6.02544 25.6174 5.70668C26.3699 5.38791 27.1787 5.23166 28.0439 5.24207V5.23999ZM28.0584 15.5237C29.0966 15.5237 29.9179 15.1716 30.5245 14.4695C31.1312 13.7653 31.4334 12.809 31.4334 11.5965C31.4334 10.3839 31.1312 9.41308 30.5287 8.71096C29.9263 8.01094 29.1028 7.66092 28.0584 7.66092C27.0141 7.66092 26.1906 8.01094 25.5882 8.71096C24.9857 9.41099 24.6835 10.3735 24.6835 11.5965C24.6835 12.8195 24.9857 13.7799 25.5882 14.4779C26.1906 15.1758 27.0141 15.5258 28.0584 15.5258V15.5237Z" fill="#09202E"/>
-<path d="M44.9854 9.52558C44.9854 10.759 44.6123 11.7507 43.8681 12.5028C43.1239 13.2549 42.1108 13.632 40.8267 13.632H38.3898V17.7551H35.9028V5.45875H40.86C42.1483 5.45875 43.1572 5.82126 43.8889 6.54629C44.6206 7.27132 44.9854 8.26511 44.9854 9.5235V9.52558ZM42.3588 9.47766C42.3588 8.95681 42.19 8.52554 41.8502 8.18594C41.5104 7.84635 41.0205 7.67759 40.3785 7.67759H38.3898V11.4673H40.3785C41.0247 11.4673 41.5167 11.284 41.8544 10.9173C42.1921 10.5506 42.3588 10.0714 42.3588 9.47975V9.47766Z" fill="#09202E"/>
-<path d="M54.4829 17.7551H46.7386V5.45875H54.4829V7.82134H49.2234V10.4444H53.895V12.6445H49.2234V15.4154H54.4829V17.7551Z" fill="#09202E"/>
-<path d="M67.397 5.46083V17.7572H64.9268L59.5381 9.42974V17.7572H57.0678V5.46083H59.5381L64.9268 13.8049V5.46083H67.397Z" fill="#09202E"/>
-<path d="M74.4409 5.46083H76.9279V10.4319L81.8037 10.4485V5.46083H84.3074V17.7572H81.8037V12.6653L76.9279 12.632V17.7572H74.4409V5.46083Z" fill="#09202E"/>
-<path d="M92.133 5.23999C93.0127 5.23999 93.8278 5.39833 94.5782 5.71709C95.3287 6.03377 95.9645 6.47337 96.4856 7.03381C97.0068 7.59425 97.4133 8.26511 97.7051 9.05056C97.9949 9.83601 98.1408 10.684 98.1408 11.5965C98.1512 12.4986 98.0095 13.3445 97.7176 14.1383C97.4237 14.932 97.013 15.6092 96.4856 16.1717C95.9582 16.7342 95.3162 17.1759 94.5615 17.4947C93.8069 17.8155 92.9918 17.9697 92.1163 17.9593C90.9593 17.9759 89.9191 17.7092 88.9977 17.1613C88.0763 16.6134 87.3655 15.8529 86.8652 14.88C86.3649 13.907 86.1231 12.8174 86.1397 11.6132C86.1293 10.711 86.2711 9.86518 86.5629 9.0714C86.8568 8.27761 87.2654 7.6005 87.7907 7.03381C88.3161 6.46921 88.954 6.02544 89.7065 5.70668C90.459 5.38791 91.2679 5.23166 92.133 5.24207V5.23999ZM92.1476 15.5237C93.1857 15.5237 94.007 15.1716 94.6137 14.4695C95.2203 13.7653 95.5225 12.809 95.5225 11.5965C95.5225 10.3839 95.2203 9.41308 94.6178 8.71096C94.0154 8.01094 93.192 7.66092 92.1476 7.66092C91.1032 7.66092 90.2798 8.01094 89.6773 8.71096C89.0749 9.41099 88.7726 10.3735 88.7726 11.5965C88.7726 12.8195 89.0749 13.7799 89.6773 14.4779C90.2798 15.1758 91.1032 15.5258 92.1476 15.5258V15.5237Z" fill="#09202E"/>
-<path d="M112.408 5.46083V17.7572H109.954V11.034L107.321 17.7572H104.966L102.364 11.084V17.7572H99.9919V5.46083H102.364L106.148 14.855L109.954 5.46083H112.408Z" fill="#09202E"/>
-<path d="M122.762 17.7551H115.018V5.45875H122.762V7.82134H117.503V10.4444H122.174V12.6445H117.503V15.4154H122.762V17.7551Z" fill="#09202E"/>
-<path d="M131.526 7.21555V10.9072H136.254V12.5933H131.526V17.7405H129.65V5.44054H137.146V7.21555H131.526Z" fill="#09202E"/>
-<path d="M144.303 5.24055C145.156 5.22943 145.956 5.38499 146.699 5.70443C147.441 6.02388 148.074 6.46555 148.597 7.02943C149.117 7.59332 149.525 8.2711 149.82 9.05721C150.114 9.8461 150.256 10.6878 150.245 11.585C150.256 12.4878 150.114 13.3378 149.82 14.1294C149.525 14.9239 149.117 15.5989 148.597 16.1628C148.077 16.7239 147.443 17.1655 146.699 17.485C145.954 17.8044 145.156 17.96 144.303 17.9489C143.449 17.96 142.652 17.8044 141.91 17.485C141.168 17.1655 140.537 16.7239 140.017 16.16C139.497 15.5961 139.089 14.9183 138.797 14.1322C138.505 13.3461 138.363 12.5017 138.374 11.6044C138.363 10.7072 138.505 9.86277 138.797 9.07388C139.089 8.28499 139.494 7.60721 140.017 7.04055C140.537 6.47666 141.168 6.03221 141.91 5.70999C142.652 5.38777 143.449 5.23221 144.303 5.24332V5.24055ZM141.44 14.86C142.165 15.6822 143.124 16.0961 144.319 16.0961C145.515 16.0961 146.473 15.685 147.196 14.86C147.919 14.0378 148.28 12.9461 148.28 11.585C148.28 10.2239 147.919 9.12388 147.196 8.30166C146.473 7.47943 145.515 7.06555 144.319 7.06555C143.124 7.06555 142.163 7.47943 141.44 8.30443C140.715 9.12943 140.353 10.2239 140.353 11.585C140.353 12.9461 140.715 14.0378 141.44 14.86Z" fill="#09202E"/>
-<path d="M154.097 5.43777V13.3017C154.103 14.2378 154.378 14.9461 154.923 15.4239C155.467 15.9044 156.184 16.1433 157.071 16.1433C157.958 16.1433 158.636 15.8905 159.203 15.3878C159.77 14.885 160.053 14.1878 160.053 13.3017V5.43777H161.929V13.3767C161.929 14.0989 161.799 14.7517 161.54 15.3378C161.282 15.9239 160.929 16.4072 160.487 16.7822C160.042 17.16 159.531 17.4489 158.944 17.6544C158.358 17.86 157.735 17.96 157.068 17.96C156.401 17.96 155.804 17.86 155.226 17.6628C154.647 17.4655 154.131 17.1794 153.68 16.8072C153.227 16.435 152.871 15.9544 152.61 15.3628C152.349 14.7711 152.218 14.1072 152.218 13.3767V5.43777H154.097Z" fill="#09202E"/>
-<path d="M174.473 5.43777V17.7378H172.597L166.529 8.46832V17.7378H164.653V5.43777H166.529L172.597 14.7239V5.43777H174.473Z" fill="#09202E"/>
-<path d="M187.583 11.6017C187.588 12.4822 187.436 13.31 187.124 14.0794C186.813 14.8517 186.382 15.5072 185.835 16.0461C185.287 16.585 184.628 17.0072 183.859 17.31C183.089 17.6128 182.269 17.7572 181.391 17.7405H177.291V5.44054H181.391C182.547 5.42388 183.603 5.67943 184.553 6.20999C185.504 6.73777 186.249 7.47666 186.788 8.42388C187.327 9.3711 187.591 10.4322 187.583 11.6044V11.6017ZM185.59 11.6017C185.59 10.3017 185.204 9.2461 184.428 8.43499C183.653 7.62388 182.636 7.21555 181.374 7.21555H179.184V15.9961H181.374C182.647 15.9961 183.667 15.5933 184.437 14.785C185.207 13.9794 185.59 12.9155 185.59 11.6017Z" fill="#09202E"/>
-<path d="M195.821 14.7822H190.91L189.843 17.7405H187.916L192.363 5.44054H194.381L198.853 17.7405H196.869L195.818 14.7822H195.821ZM195.276 13.1878L193.383 7.82666L191.474 13.1878H195.276Z" fill="#09202E"/>
-<path d="M207.278 7.21555H203.706V17.7405H201.813V7.21555H198.242V5.44054H207.275V7.21555H207.278Z" fill="#09202E"/>
-<path d="M208.973 17.7378V5.43777H210.866V17.7378H208.973Z" fill="#09202E"/>
-<path d="M218.873 5.24055C219.726 5.22943 220.527 5.38499 221.269 5.70443C222.014 6.02388 222.645 6.46555 223.167 7.02943C223.687 7.59332 224.095 8.2711 224.39 9.05721C224.685 9.8461 224.826 10.6878 224.815 11.585C224.826 12.4878 224.685 13.3378 224.39 14.1294C224.095 14.9239 223.687 15.5989 223.167 16.1628C222.647 16.7239 222.014 17.1655 221.269 17.485C220.524 17.8044 219.726 17.96 218.873 17.9489C218.02 17.96 217.222 17.8044 216.48 17.485C215.738 17.1655 215.107 16.7239 214.587 16.16C214.067 15.5961 213.659 14.9183 213.367 14.1322C213.075 13.3461 212.933 12.5017 212.945 11.6044C212.933 10.7072 213.075 9.86277 213.367 9.07388C213.659 8.28499 214.065 7.60721 214.587 7.04055C215.107 6.47666 215.738 6.03221 216.48 5.70999C217.222 5.38777 218.02 5.23221 218.873 5.24332V5.24055ZM216.01 14.86C216.736 15.6822 217.695 16.0961 218.89 16.0961C220.085 16.0961 221.044 15.685 221.766 14.86C222.489 14.0378 222.85 12.9461 222.85 11.585C222.85 10.2239 222.489 9.12388 221.766 8.30166C221.044 7.47943 220.085 7.06555 218.89 7.06555C217.695 7.06555 216.733 7.47943 216.01 8.30443C215.285 9.12943 214.924 10.2239 214.924 11.585C214.924 12.9461 215.285 14.0378 216.01 14.86Z" fill="#09202E"/>
-<path d="M236.728 5.43777V17.7378H234.852L228.784 8.46832V17.7378H226.908V5.43777H228.784L234.852 14.7239V5.43777H236.728Z" fill="#09202E"/>
-</svg>
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20260729.0"
+version      = "20260624.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -106,8 +106,7 @@
    {
      "description": "Group Playwright package and CI container updates",
      "groupName": "Playwright",
-      "matchPackageNames": ["@playwright/test", "mcr.microsoft.com/playwright"],
-      "minimumGroupSize": 5
+      "matchPackageNames": ["@playwright/test", "mcr.microsoft.com/playwright"]
    }
  ]
 }
@@ -0,0 +1,113 @@
+# Build size comparison: old vs new `.browserslistrc`
+
+Both builds were produced on the `pass-browser-list` branch (which passes the browserslist
+config through to rspack/SWC and Lightning CSS), so the **only difference between the two
+builds is the `.browserslistrc` content**:
+
+- **Old** = `.browserslistrc` as committed at HEAD (`aa02a1117`)
+- **New** = the staged `.browserslistrc` on this branch
+
+Both full production builds (`yarn build` → `gulp build-app`) took ~18 min.
+
+## Resolved browser targets
+
+| Env       | Old          | New          |
+| --------- | ------------ | ------------ |
+| modern    | 75 browsers  | 124 browsers |
+| legacy    | 424 browsers | 181 browsers |
+| legacy-sw | 422 browsers | 181 browsers |
+
+Key minimum versions per env:
+
+| Browser          | modern old | modern new | legacy old | legacy new |
+| ---------------- | ---------- | ---------- | ---------- | ---------- |
+| Chrome           | 109        | 128        | 39         | 79         |
+| Edge             | 139        | 128        | 79         | 92         |
+| Firefox          | 140 (ESR)  | 129        | 69         | 78         |
+| Safari           | 26.0       | 17.6       | 13         | 13.1       |
+| iOS Safari       | 18.5       | 17.6       | 11.0       | 13.2       |
+| Samsung Internet | 29         | 27         | 10.1       | 24         |
+
+The new modern list (`last 2 years`) _lowers_ the Safari/Firefox floor but _raises_ the
+Chrome floor (the old `>= 0.5%` rule kept Chrome 109 alive). The new legacy list
+(`last 7 years and >= 0.001%`, intersection instead of union) raises the floor across the
+board — that is where the size win comes from.
+
+## Total JS output size
+
+All `.js` files in the output directory; gzip is `gzip -9` recomputed per file, brotli is
+the `.js.br` files the build itself emits (what is actually served).
+
+### `frontend_latest` (modern build)
+
+| Metric        | Old       | New       | Δ                  |
+| ------------- | --------- | --------- | ------------------ |
+| Raw JS        | 31.97 MiB | 31.89 MiB | −86.7 KiB (−0.3%)  |
+| Gzip          | 9.50 MiB  | 9.46 MiB  | −39.5 KiB (−0.4%)  |
+| Brotli        | 8.16 MiB  | 8.13 MiB  | −33.6 KiB (−0.4%)  |
+| Sourcemaps    | 28.18 MiB | 28.06 MiB | −126.8 KiB (−0.4%) |
+| JS file count | 1099      | 1096      | −3                 |
+
+### `frontend_es5` (legacy build)
+
+| Metric        | Old       | New       | Δ                      |
+| ------------- | --------- | --------- | ---------------------- |
+| Raw JS        | 35.31 MiB | 31.74 MiB | **−3.57 MiB (−10.1%)** |
+| Gzip          | 9.62 MiB  | 9.38 MiB  | −249.0 KiB (−2.5%)     |
+| Brotli        | 8.13 MiB  | 8.03 MiB  | −100.0 KiB (−1.2%)     |
+| Sourcemaps    | 32.05 MiB | 28.16 MiB | −3.89 MiB (−12.1%)     |
+| JS file count | 1151      | 1138      | −13                    |
+
+Total `hass_frontend/` on disk: 260.9 MiB → 252.7 MiB (−8.2 MiB).
+
+## Cold-load critical entrypoints (raw initial JS)
+
+These are the budget-tracked entrypoints from `build-scripts/check-bundle-size.cjs`
+(downloaded before anything interactive happens).
+
+### Modern
+
+| Entrypoint   | Old       | New       | Δ                |
+| ------------ | --------- | --------- | ---------------- |
+| app          | 542.0 KiB | 537.3 KiB | −4.8 KiB (−0.9%) |
+| core         | 52.4 KiB  | 50.2 KiB  | −2.2 KiB (−4.2%) |
+| authorize    | 520.7 KiB | 514.7 KiB | −6.0 KiB (−1.2%) |
+| onboarding   | 620.0 KiB | 613.0 KiB | −7.0 KiB (−1.1%) |
+| custom-panel | 63.3 KiB  | 61.1 KiB  | −2.2 KiB (−3.5%) |
+
+### Legacy
+
+| Entrypoint   | Old       | New       | Δ                       |
+| ------------ | --------- | --------- | ----------------------- |
+| app          | 822.5 KiB | 632.6 KiB | **−189.8 KiB (−23.1%)** |
+| core         | 229.0 KiB | 158.2 KiB | **−70.8 KiB (−30.9%)**  |
+| authorize    | 795.9 KiB | 617.1 KiB | −178.9 KiB (−22.5%)     |
+| onboarding   | 939.3 KiB | 722.7 KiB | −216.6 KiB (−23.1%)     |
+| custom-panel | 174.1 KiB | 106.9 KiB | **−67.2 KiB (−38.6%)**  |
+
+## Takeaways
+
+- **The modern build barely changes** (≈−0.4% across the board). Trading the old
+  usage-based floor for a clean `last 2 years` rule is roughly size-neutral: the lower
+  Safari floor costs a little, the higher Chrome floor saves a little more.
+- **The legacy build shrinks substantially**: −10% raw JS and −23% to −39% on the
+  cold-load entrypoints, because raising the floor (Chrome 39→79, Samsung 10→24,
+  iOS 11→13.2) drops a large amount of transpilation output and polyfills.
+- Over the wire the legacy win is smaller (−2.5% gzip / −1.2% brotli) since transpilation
+  boilerplate compresses very well — but parse/execute cost on the (typically slow)
+  devices that receive the legacy build scales with the raw size, so the −10% still
+  matters where it hurts most.
+- The legacy entrypoints land well under the current `build-scripts/bundle-budget.json`
+  budgets; those could be re-seeded (`node build-scripts/check-bundle-size.cjs --update
+--headroom=3`) once this browserslist change is final.
+
+## Method
+
+1. `yarn build` with the staged (new) `.browserslistrc`; recorded per-file raw and
+   `gzip -9` sizes of `hass_frontend/frontend_latest` + `frontend_es5` and the rspack
+   stats (`build/stats/frontend-{modern,legacy}.json`).
+2. Restored the HEAD (old) `.browserslistrc`, rebuilt, recorded the same.
+3. Restored the staged file. Entrypoint sizes are the initial entry-chunk JS as computed
+   by the same logic as `check-bundle-size.cjs`. Translations/static assets are identical
+   between builds and excluded from the JS numbers. The root service-worker files
+   (`sw-modern.js`, `sw-legacy.js`) were not compared separately.
@@ -1,120 +0,0 @@
-import type {
-  ReactiveController,
-  ReactiveControllerHost,
-} from "@lit/reactive-element/reactive-controller";
-import type { LitElement } from "lit";
-import type { Ref } from "lit/directives/ref";
-
-const scrollParent = (element: Element): HTMLElement | undefined => {
-  let node = element.parentElement;
-  while (node) {
-    const { overflowY } = getComputedStyle(node);
-    if (overflowY === "auto" || overflowY === "scroll") {
-      return node;
-    }
-    node = node.parentElement;
-  }
-  return undefined;
-};
-
-/**
- * Does what CSS scroll anchoring does in Chrome and Firefox but not in Safari.
- * Point the ref at the element that grows, not at the scroller. Turns native
- * anchoring off on that scroller, so growth elsewhere in it is no longer
- * compensated either.
- */
-export class PreserveScrollPositionController implements ReactiveController {
-  private _target: Ref<HTMLElement>;
-
-  private _element?: HTMLElement;
-
-  private _scroller?: HTMLElement;
-
-  private _observer?: ResizeObserver;
-
-  private _height = 0;
-
-  constructor(
-    host: ReactiveControllerHost & LitElement,
-    target: Ref<HTMLElement>
-  ) {
-    this._target = target;
-    host.addController(this);
-  }
-
-  hostConnected() {
-    this._sync();
-  }
-
-  hostUpdated() {
-    this._sync();
-  }
-
-  hostDisconnected() {
-    this._detach();
-  }
-
-  private _sync() {
-    const element = this._target.value;
-
-    if (element === this._element) {
-      return;
-    }
-
-    this._detach();
-    this._element = element;
-
-    if (element) {
-      this._height = element.getBoundingClientRect().height;
-      this._observer = new ResizeObserver((entries) =>
-        this._compensate(entries)
-      );
-      this._observer.observe(element);
-    }
-  }
-
-  private _detach() {
-    this._observer?.disconnect();
-    this._observer = undefined;
-    this._element = undefined;
-    if (this._scroller) {
-      this._scroller.style.removeProperty("overflow-anchor");
-      this._scroller = undefined;
-    }
-  }
-
-  private _resolveScroller(): HTMLElement | undefined {
-    if (!this._scroller && this._element) {
-      this._scroller = scrollParent(this._element);
-      if (this._scroller) {
-        // Chrome and Firefox would otherwise anchor on top of this controller
-        // and correct twice.
-        this._scroller.style.overflowAnchor = "none";
-      }
-    }
-    return this._scroller;
-  }
-
-  private _compensate(entries: ResizeObserverEntry[]) {
-    const element = this._element;
-    if (!element) {
-      return;
-    }
-
-    const height =
-      entries[0]?.borderBoxSize?.[0]?.blockSize ?? element.offsetHeight;
-    const delta = height - this._height;
-    this._height = height;
-    if (!delta) {
-      return;
-    }
-
-    const scroller = this._resolveScroller();
-    if (
-      scroller &&
-      element.getBoundingClientRect().top < scroller.getBoundingClientRect().top
-    ) {
-      scroller.scrollTop += delta;
-    }
-  }
-}
@@ -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";
-};
@@ -1,29 +1,8 @@
-let supported: boolean | undefined;
-
-const detect = (): boolean => {
-  if (
-    !globalThis.ElementInternals ||
-    !globalThis.HTMLElement?.prototype.attachInternals
-  ) {
-    return false;
-  }
-  // Native internals keep their WebIDL brand even when `attachInternals` is
-  // wrapped (e.g. by `@webcomponents/scoped-custom-element-registry`, which
-  // broke the previous `[native code]` source check in the app bundle).
-  // `element-internals-polyfill` swaps in a plain class, which has no brand,
-  // and must not count as native: login on legacy browsers relies on
-  // validation being skipped there (#51338).
-  return (
-    Object.prototype.toString.call(globalThis.ElementInternals.prototype) ===
-    "[object ElementInternals]"
-  );
-};
-
 /**
 * Indicates whether the current browser has native ElementInternals support.
- * Probed on first use so importing this module has no side effects.
 */
-export const supportsNativeElementInternals = (): boolean => {
-  supported ??= detect();
-  return supported;
-};
+export const nativeElementInternalsSupported =
+  Boolean(globalThis.ElementInternals) &&
+  globalThis.HTMLElement?.prototype.attachInternals
+    ?.toString()
+    .includes("[native code]");
@@ -1,26 +0,0 @@
-import { mainWindow } from "../dom/get_main_window";
-
-/**
- * Checks that a path resolves to the origin the frontend is served from, so it
- * is safe to use as a link target. Rejects URIs that carry their own scheme,
- * like `javascript:`, and URLs pointing at another origin. Resolves against the
- * main window, because that is where `navigate()` applies the path.
- */
-const isSameOriginPath = (path: string): boolean => {
-  try {
-    const { origin } = mainWindow.location;
-    return new URL(path, origin).origin === origin;
-  } catch (_err) {
-    return false;
-  }
-};
-
-/**
- * Returns the path if it is safe to navigate to, `undefined` otherwise. Use for
- * paths that can be influenced by a URL parameter or by dashboard config before
- * they end up in an `href` or in `navigate()`.
- */
-export const sanitizeNavigationPath = (
-  path: string | null | undefined
-): string | undefined =>
-  path != null && isSameOriginPath(path) ? path : undefined;
@@ -126,7 +126,7 @@ export class HaProgressButton extends LitElement {
      visibility: hidden;
    }

-    .progress ha-svg-icon {
+    :host([appearance="brand"]) ha-svg-icon {
      color: var(--white-color);
    }
  `;
@@ -27,7 +27,6 @@ export class HaInputChip extends InputChip {
        );
        --ha-input-chip-selected-container-opacity: 1;
        --md-input-chip-label-text-font: Roboto, sans-serif;
-        --md-input-chip-label-text-weight: 400;
      }
      /** Set the size of mdc icons **/
      ::slotted([slot="icon"]) {
@@ -12,7 +12,6 @@ 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";
@@ -484,7 +483,13 @@ export class HaDataTable extends LitElement {
                  : ""
              }
              ${Object.entries(columns).map(([key, column]) => {
-                if (!this._isColumnVisible(key, column)) {
+                if (
+                  column.hidden ||
+                  (this.columnOrder && this.columnOrder.includes(key)
+                    ? (this.hiddenColumns?.includes(key) ??
+                      column.defaultHidden)
+                    : column.defaultHidden)
+                ) {
                  return nothing;
                }
                const sorted = key === this.sortColumn;
@@ -652,7 +657,10 @@ export class HaDataTable extends LitElement {
        ${Object.entries(columns).map(([key, column]) => {
          if (
            (narrow && !column.main && !column.showNarrow) ||
-            !this._isColumnVisible(key, column)
+            column.hidden ||
+            (this.columnOrder && this.columnOrder.includes(key)
+              ? (this.hiddenColumns?.includes(key) ?? column.defaultHidden)
+              : column.defaultHidden)
          ) {
            return nothing;
          }
@@ -684,19 +692,28 @@ export class HaDataTable extends LitElement {
                  : narrow && column.main
                    ? html`<div class="primary">${row[key]}</div>
                        <div class="secondary">
-                          ${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
-                          )}
+                          ${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]
+                                }`
+                            )}
                        </div>
                        ${
                          column.extraTemplate
@@ -716,29 +733,6 @@ 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;
@@ -1,190 +0,0 @@
-import { mdiDevices } from "@mdi/js";
-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 { computeAreaName } from "../../common/entity/compute_area_name";
-import { computeDeviceName } from "../../common/entity/compute_device_name";
-import { getDeviceArea } from "../../common/entity/context/get_device_context";
-import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
-import { domainToName } from "../../data/integration";
-import type { HomeAssistant } from "../../types";
-import type { HassDialog } from "../../dialogs/make-dialog-manager";
-import { brandsUrl } from "../../util/brands-url";
-import "../ha-dialog";
-import "../ha-svg-icon";
-import "../item/ha-list-item-button";
-import "../list/ha-list-base";
-import type { DeviceReplacedDialogParams } from "./show-dialog-device-replaced";
-
-@customElement("dialog-device-replaced")
-export class DialogDeviceReplaced
-  extends LitElement
-  implements HassDialog<DeviceReplacedDialogParams>
-{
-  @state() private _params?: DeviceReplacedDialogParams;
-
-  @state() private _open = false;
-
-  @state() private _configEntryLookup?: Record<string, ConfigEntry>;
-
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  public async showDialog(params: DeviceReplacedDialogParams): Promise<void> {
-    this._params = params;
-    this._open = true;
-    this._loadConfigEntries();
-  }
-
-  private async _loadConfigEntries(): Promise<void> {
-    const configEntries = await getConfigEntries(this.hass);
-    this._configEntryLookup = Object.fromEntries(
-      configEntries.map((entry) => [entry.entry_id, entry])
-    );
-  }
-
-  public closeDialog(): boolean {
-    this._open = false;
-    return true;
-  }
-
-  private _dialogClosed(): void {
-    this._params = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  private _pick(ev: Event): void {
-    const item = (ev.target as HTMLElement).closest("ha-list-item-button") as
-      (HTMLElement & { deviceId?: string }) | null;
-    if (!item?.deviceId) {
-      return;
-    }
-    this._params?.onResolved(item.deviceId);
-    this.closeDialog();
-  }
-
-  private _items = memoizeOne(
-    (
-      candidates: string[],
-      primaryId: string | null,
-      devices: HomeAssistant["devices"],
-      areas: HomeAssistant["areas"],
-      configEntryLookup: Record<string, ConfigEntry> | undefined
-    ) =>
-      candidates.map((deviceId) => {
-        const device = devices[deviceId];
-        const area = device ? getDeviceArea(device, areas) : undefined;
-        const configEntry = device?.primary_config_entry
-          ? configEntryLookup?.[device.primary_config_entry]
-          : undefined;
-        return {
-          deviceId,
-          name: device ? computeDeviceName(device) : deviceId,
-          area: area ? computeAreaName(area) : undefined,
-          domain: configEntry?.domain,
-          domainName: configEntry
-            ? domainToName(this.hass.localize, configEntry.domain)
-            : undefined,
-          isPrimary: deviceId === primaryId,
-        };
-      })
-  );
-
-  protected render() {
-    if (!this._params || !this.hass) {
-      return nothing;
-    }
-
-    return html`
-      <ha-dialog
-        .open=${this._open}
-        .headerTitle=${this.hass.localize(
-          "ui.components.device-picker.replaced_dialog.title"
-        )}
-        @closed=${this._dialogClosed}
-      >
-        <p class="description">
-          ${this.hass.localize(
-            "ui.components.device-picker.replaced_dialog.description"
-          )}
-        </p>
-        <ha-list-base @click=${this._pick}>
-          ${this._items(
-            this._params.candidates,
-            this._params.primaryId,
-            this.hass.devices,
-            this.hass.areas,
-            this._configEntryLookup
-          ).map((item) => {
-            const supportingText = [
-              item.area,
-              item.domainName,
-              item.isPrimary
-                ? this.hass.localize(
-                    "ui.components.device-picker.replaced_dialog.recommended"
-                  )
-                : undefined,
-            ]
-              .filter(Boolean)
-              .join(" • ");
-            return html`
-              <ha-list-item-button .deviceId=${item.deviceId}>
-                ${
-                  item.domain
-                    ? html`<img
-                        slot="start"
-                        alt=""
-                        crossorigin="anonymous"
-                        referrerpolicy="no-referrer"
-                        src=${brandsUrl(
-                          {
-                            domain: item.domain,
-                            type: "icon",
-                            darkOptimized: this.hass.themes?.darkMode,
-                          },
-                          this.hass.auth.data.hassUrl
-                        )}
-                      />`
-                    : html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiDevices}
-                      ></ha-svg-icon>`
-                }
-                <span slot="headline">${item.name}</span>
-                ${
-                  supportingText
-                    ? html`<span slot="supporting-text"
-                        >${supportingText}</span
-                      >`
-                    : nothing
-                }
-              </ha-list-item-button>
-            `;
-          })}
-        </ha-list-base>
-      </ha-dialog>
-    `;
-  }
-
-  static styles = css`
-    ha-dialog {
-      --dialog-content-padding: 0;
-      --ha-row-item-padding-inline: var(--ha-space-6);
-    }
-    .description {
-      margin: 0;
-      padding: 0 var(--ha-space-6) var(--ha-space-4);
-      color: var(--secondary-text-color);
-    }
-    img[slot="start"] {
-      width: 24px;
-      height: 24px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-device-replaced": DialogDeviceReplaced;
-  }
-}
@@ -12,7 +12,6 @@ import { fullEntitiesContext } from "../../data/context";
 import type { DeviceAutomation } from "../../data/device/device_automation";
 import {
  deviceAutomationsEqual,
-  deviceAutomationsSimilar,
  sortDeviceAutomations,
 } from "../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
@@ -202,22 +201,12 @@ export abstract class HaDeviceAutomationPicker<
      : // No device, clear the list of automations
        [];

-    // If there is no value, or if we have changed the device ID, reset the
-    // value. When the device changed (for example after replacing a removed
-    // device), try to keep the same automation type/subtype on the new device
-    // before falling back to the first available automation.
+    // If there is no value, or if we have changed the device ID, reset the value.
    if (!this.value || this.value.device_id !== this.deviceId) {
-      const equivalent =
-        this.value && this.deviceId
-          ? this._automations.find((automation) =>
-              deviceAutomationsSimilar(automation, this.value!)
-            )
-          : undefined;
      this._setValue(
-        equivalent ||
-          (this._automations.length
-            ? this._automations[0]
-            : this._createNoAutomation(this.deviceId))
+        this._automations.length
+          ? this._automations[0]
+          : this._createNoAutomation(this.deviceId)
      );
    }
    this._renderEmpty = true;
@@ -1,7 +1,6 @@
-import { mdiAlertOutline } from "@mdi/js";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import type { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing, type PropertyValues } from "lit";
+import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -14,20 +13,12 @@ import {
  getDevices,
  type DevicePickerItem,
 } from "../../data/device/device_picker";
-import {
-  fetchDeviceCompositeSplits,
-  type DeviceCompositeSplits,
-  type DeviceRegistryEntry,
-} from "../../data/device/device_registry";
+import type { DeviceRegistryEntry } from "../../data/device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
-import "../ha-alert";
-import "../ha-button";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
-import "../ha-svg-icon";
-import { showDeviceReplacedDialog } from "./show-dialog-device-replaced";

 export type HaDevicePickerDeviceFilterFunc = (
  device: DeviceRegistryEntry
@@ -104,10 +95,6 @@ export class HaDevicePicker extends LitElement {

  @state() private _configEntryLookup: Record<string, ConfigEntry> = {};

-  @state() private _compositeSplits?: DeviceCompositeSplits;
-
-  private _loadingCompositeSplits = false;
-
  private _getDevicesMemoized = memoizeOne(
    (
      _devices: HomeAssistant["devices"],
@@ -136,29 +123,6 @@ export class HaDevicePicker extends LitElement {
    this._loadConfigEntries();
  }

-  protected willUpdate(changedProperties: PropertyValues<this>): void {
-    if (
-      !this.hass ||
-      !this.value ||
-      this._compositeSplits !== undefined ||
-      this._loadingCompositeSplits
-    ) {
-      return;
-    }
-    const oldHass = changedProperties.get("hass") as HomeAssistant | undefined;
-    const devicesChanged =
-      changedProperties.has("hass") && this.hass.devices !== oldHass?.devices;
-    if (
-      (changedProperties.has("value") || devicesChanged) &&
-      !this.hass.devices[this.value]
-    ) {
-      // The selected device is not in the registry; it might be a legacy
-      // composite device that was split into separate devices. Fetch the
-      // split map so we can offer to replace the reference.
-      this._loadCompositeSplits();
-    }
-  }
-
  private async _loadConfigEntries() {
    const configEntries = await getConfigEntries(this.hass);
    this._configEntryLookup = Object.fromEntries(
@@ -166,43 +130,6 @@ export class HaDevicePicker extends LitElement {
    );
  }

-  private async _loadCompositeSplits() {
-    this._loadingCompositeSplits = true;
-    try {
-      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
-    } catch (_err) {
-      this._compositeSplits = {};
-    } finally {
-      this._loadingCompositeSplits = false;
-    }
-  }
-
-  private _getReplacement = memoizeOne(
-    (
-      value: string | undefined,
-      _devices: HomeAssistant["devices"],
-      compositeSplits: DeviceCompositeSplits | undefined,
-      items: (DevicePickerItem | string)[]
-    ) => {
-      if (!value || !compositeSplits || this.hass.devices[value]) {
-        return undefined;
-      }
-      const split = compositeSplits[value];
-      if (!split) {
-        return undefined;
-      }
-      // Keep only the split devices that pass this picker's filters. In
-      // practice usually exactly one of the split devices matches.
-      const selectableIds = new Set(
-        items
-          .filter((item): item is DevicePickerItem => typeof item !== "string")
-          .map((item) => item.id)
-      );
-      const candidates = split.split_ids.filter((id) => selectableIds.has(id));
-      return { candidates, primaryId: split.primary_id };
-    }
-  );
-
  private _getItems = () =>
    this._getDevicesMemoized(
      this.hass.devices,
@@ -217,66 +144,49 @@ export class HaDevicePicker extends LitElement {
    );

  private _valueRenderer = memoizeOne(
-    (
-      configEntriesLookup: Record<string, ConfigEntry>,
-      replacementName: string | undefined
-    ) =>
-      (value: string) => {
-        const deviceId = value;
-        const device = this.hass.devices[deviceId];
+    (configEntriesLookup: Record<string, ConfigEntry>) => (value: string) => {
+      const deviceId = value;
+      const device = this.hass.devices[deviceId];

-        if (!device) {
-          // When the device was replaced and a replacement is available, show
-          // the replacement device's name. Otherwise fall back to the normal
-          // "not found" display of the raw id.
-          if (replacementName) {
-            return html`
-              <ha-svg-icon
-                slot="start"
-                style="color: var(--warning-color)"
-                .path=${mdiAlertOutline}
-              ></ha-svg-icon>
-              <span slot="headline">${replacementName}</span>
-            `;
-          }
-          return html`<span slot="headline">${deviceId}</span>`;
-        }
-
-        const area = getDeviceArea(device, this.hass.areas);
-
-        const deviceName = device ? computeDeviceName(device) : undefined;
-        const areaName = area ? computeAreaName(area) : undefined;
-
-        const primary = deviceName;
-        const secondary = areaName;
-
-        const configEntry = device.primary_config_entry
-          ? configEntriesLookup[device.primary_config_entry]
-          : undefined;
-
-        return html`
-          ${
-            configEntry
-              ? html`<img
-                  slot="start"
-                  alt=""
-                  crossorigin="anonymous"
-                  referrerpolicy="no-referrer"
-                  src=${brandsUrl(
-                    {
-                      domain: configEntry.domain,
-                      type: "icon",
-                      darkOptimized: this.hass.themes?.darkMode,
-                    },
-                    this.hass.auth.data.hassUrl
-                  )}
-                />`
-              : nothing
-          }
-          <span slot="headline">${primary}</span>
-          <span slot="supporting-text">${secondary}</span>
-        `;
+      if (!device) {
+        return html`<span slot="headline">${deviceId}</span>`;
      }
+
+      const area = getDeviceArea(device, this.hass.areas);
+
+      const deviceName = device ? computeDeviceName(device) : undefined;
+      const areaName = area ? computeAreaName(area) : undefined;
+
+      const primary = deviceName;
+      const secondary = areaName;
+
+      const configEntry = device.primary_config_entry
+        ? configEntriesLookup[device.primary_config_entry]
+        : undefined;
+
+      return html`
+        ${
+          configEntry
+            ? html`<img
+                slot="start"
+                alt=""
+                crossorigin="anonymous"
+                referrerpolicy="no-referrer"
+                src=${brandsUrl(
+                  {
+                    domain: configEntry.domain,
+                    type: "icon",
+                    darkOptimized: this.hass.themes?.darkMode,
+                  },
+                  this.hass.auth.data.hassUrl
+                )}
+              />`
+            : nothing
+        }
+        <span slot="headline">${primary}</span>
+        <span slot="supporting-text">${secondary}</span>
+      `;
+    }
  );

  private _rowRenderer: RenderItemFunction<DevicePickerItem> = (item) => html`
@@ -325,39 +235,7 @@ export class HaDevicePicker extends LitElement {
      this.placeholder ??
      this.hass.localize("ui.components.device-picker.placeholder");

-    // Only resolve a replacement (which needs the full item list) when the
-    // value is a missing device that we know was replaced, to avoid computing
-    // the item list on every render for the common case.
-    const replacement =
-      this.value &&
-      !this.hass.devices[this.value] &&
-      this._compositeSplits?.[this.value]
-        ? this._getReplacement(
-            this.value,
-            this.hass.devices,
-            this._compositeSplits,
-            this._getItems()
-          )
-        : undefined;
-
-    // Only treat the value as "replaced" when there is an available
-    // replacement device; otherwise fall back to normal "not found" behavior.
-    const canReplace = !!replacement?.candidates.length;
-    const replacementName = canReplace
-      ? computeDeviceName(
-          this.hass.devices[
-            replacement!.primaryId &&
-            replacement!.candidates.includes(replacement!.primaryId)
-              ? replacement!.primaryId
-              : replacement!.candidates[0]
-          ]
-        )
-      : undefined;
-
-    const valueRenderer = this._valueRenderer(
-      this._configEntryLookup,
-      replacementName
-    );
+    const valueRenderer = this._valueRenderer(this._configEntryLookup);

    return html`
      <ha-generic-picker
@@ -378,84 +256,15 @@ export class HaDevicePicker extends LitElement {
        .hideClearIcon=${this.hideClearIcon}
        .valueRenderer=${valueRenderer}
        .searchKeys=${deviceComboBoxKeys}
-        .unknownItemText=${
-          replacement?.candidates.length
-            ? this.hass.localize(
-                "ui.components.device-picker.device_replaced_count",
-                { count: replacement.candidates.length }
-              )
-            : this.hass.localize("ui.components.device-picker.unknown")
-        }
+        .unknownItemText=${this.hass.localize(
+          "ui.components.device-picker.unknown"
+        )}
        @value-changed=${this._valueChanged}
      >
      </ha-generic-picker>
-      ${canReplace ? this._renderReplacedAlert(replacement!) : nothing}
    `;
  }

-  private _renderReplacedAlert(replacement: {
-    candidates: string[];
-    primaryId: string | null;
-  }) {
-    const { candidates } = replacement;
-
-    const replacementName =
-      candidates.length === 1
-        ? computeDeviceName(this.hass.devices[candidates[0]])
-        : undefined;
-
-    return html`
-      <ha-alert alert-type="warning">
-        ${
-          replacementName
-            ? this.hass.localize(
-                "ui.components.device-picker.device_replaced_by_one",
-                { device: replacementName }
-              )
-            : this.hass.localize(
-                "ui.components.device-picker.device_replaced_by_multiple",
-                { count: candidates.length }
-              )
-        }
-        <ha-button
-          slot="action"
-          appearance="plain"
-          @click=${this._handleReplace}
-        >
-          ${this.hass.localize("ui.components.device-picker.replace_device")}
-        </ha-button>
-      </ha-alert>
-    `;
-  }
-
-  private _handleReplace = () => {
-    const replacement = this._getReplacement(
-      this.value,
-      this.hass.devices,
-      this._compositeSplits,
-      this._getItems()
-    );
-    if (!replacement?.candidates.length) {
-      return;
-    }
-    const { candidates, primaryId } = replacement;
-    if (candidates.length === 1) {
-      this._setValue(candidates[0]);
-      return;
-    }
-    showDeviceReplacedDialog(this, {
-      originalDeviceId: this.value!,
-      candidates,
-      primaryId,
-      onResolved: (deviceId) => this._setValue(deviceId),
-    });
-  };
-
-  private _setValue(value: string) {
-    this.value = value;
-    fireEvent(this, "value-changed", { value });
-  }
-
  public async open() {
    await this.updateComplete;
    await this._picker?.open();
@@ -472,13 +281,6 @@ export class HaDevicePicker extends LitElement {
    this.hass.localize("ui.components.device-picker.no_match", {
      term: html`<b>‘${search}’</b>`,
    });
-
-  static styles = css`
-    ha-alert {
-      display: block;
-      margin-top: 8px;
-    }
-  `;
 }

 declare global {
@@ -1,22 +0,0 @@
-import { fireEvent } from "../../common/dom/fire_event";
-
-export interface DeviceReplacedDialogParams {
-  /** The removed composite device that is being referenced. */
-  originalDeviceId: string;
-  /** The split devices the reference can be pointed at. */
-  candidates: string[];
-  /** The split device that took over the composite's primary config entry. */
-  primaryId: string | null;
-  /** Called with the device the user picked as replacement. */
-  onResolved: (deviceId: string) => void;
-}
-
-export const showDeviceReplacedDialog = (
-  element: HTMLElement,
-  params: DeviceReplacedDialogParams
-) =>
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-device-replaced",
-    dialogImport: () => import("./dialog-device-replaced"),
-    dialogParams: params,
-  });
@@ -57,10 +57,7 @@ import "./ha-code-editor-completion-items";
 import type { CompletionItem } from "./ha-code-editor-completion-items";
 import "./ha-icon";
 import "./ha-icon-button-toolbar";
-import type {
-  HaIconButtonToolbar,
-  HaIconButtonToolbarItem,
-} from "./ha-icon-button-toolbar";
+import type { HaIconButtonToolbar } from "./ha-icon-button-toolbar";

 declare global {
  interface HASSDomEvents {
@@ -118,9 +115,6 @@ export class HaCodeEditor extends ReactiveElement {
  @property({ type: Boolean, attribute: "has-test" })
  public hasTest = false;

-  @property({ attribute: false })
-  public toolbarItems?: (HaIconButtonToolbarItem | string)[];
-
  @property({ attribute: false }) public testing = false;

  @property({ type: String }) public placeholder?: string;
@@ -357,8 +351,7 @@ export class HaCodeEditor extends ReactiveElement {
      changedProps.has("_canCopy") ||
      changedProps.has("_canUndo") ||
      changedProps.has("_canRedo") ||
-      changedProps.has("testing") ||
-      changedProps.has("toolbarItems")
+      changedProps.has("testing")
    ) {
      this._updateToolbarButtons();
    }
@@ -536,7 +529,6 @@ export class HaCodeEditor extends ReactiveElement {
    }

    this._editorToolbar.items = [
-      ...(this.toolbarItems ?? []),
      ...(this.hasTest && !this._isFullscreen
        ? [
            {
@@ -1,7 +1,6 @@
-import { ResizeController } from "@lit-labs/observers/resize-controller";
 import type { PropertyValues } from "lit";
 import { css, LitElement, svg } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { formatNumber } from "../common/number/format_number";
 import { blankBeforePercent } from "../common/translations/blank_before_percent";
@@ -47,32 +46,15 @@ export class HaGauge extends LitElement {

  @state() private _segment_label?: string = "";

-  @query(".text") private _textSvg?: SVGSVGElement;
-
-  @query(".value-text") private _valueText?: SVGTextElement;
-
  private _sortedLevels?: LevelDefinition[];

-  // Set when the value text could not be measured because we have no layout box
-  // yet, either disconnected or inside a hidden container.
-  private _rescalePending = false;
-
-  // Measure again once we get a layout box, e.g. when a section hidden by a
-  // visibility condition is revealed. Nothing else re-renders the gauge then.
-  // @ts-ignore side-effect-only controller, its value is never read
-  private _resizeController = new ResizeController(this, {
-    skipInitial: true,
-    callback: (entries) => {
-      if (this._rescalePending && entries[0]?.contentRect.width) {
-        this._rescaleSvg();
-      }
-    },
-  });
+  private _rescaleOnConnect = false;

  public connectedCallback(): void {
    super.connectedCallback();
-    if (this._rescalePending && this.hasUpdated) {
+    if (this._rescaleOnConnect) {
      this._rescaleSvg();
+      this._rescaleOnConnect = false;
    }
  }

@@ -239,22 +221,15 @@ export class HaGauge extends LitElement {
    // fit the text
    // That way it will auto-scale correctly

-    if (!this._textSvg || !this._valueText || !this.isConnected) {
-      this._rescalePending = true;
+    if (!this.isConnected) {
+      // Retry this later if we're disconnected, otherwise we get a 0 bbox and missing label
+      this._rescaleOnConnect = true;
      return;
    }

-    const box = this._valueText.getBBox();
-
-    // An empty box means we have no layout, so keep the last known good viewBox
-    // and retry later. A viewBox with a 0 width or height would hide the label.
-    if (!box.width || !box.height) {
-      this._rescalePending = true;
-      return;
-    }
-
-    this._rescalePending = false;
-    this._textSvg.setAttribute(
+    const svgRoot = this.shadowRoot!.querySelector(".text")!;
+    const box = svgRoot.querySelector("text")!.getBBox()!;
+    svgRoot.setAttribute(
      "viewBox",
      `${box.x} ${box.y} ${box.width} ${box.height}`
    );
@@ -273,8 +248,6 @@ export class HaGauge extends LitElement {

  static styles = css`
    :host {
-      /* a non replaced inline element never reports a size to a resize observer */
-      display: block;
      position: relative;
    }

@@ -542,14 +542,20 @@ export class HaServiceControl extends LitElement {
    }
    ${
      serviceData && "target" in serviceData
-        ? html`<ha-selector
-            class="target-selector"
-            .hass=${this.hass}
-            .selector=${targetSelector}
-            .disabled=${this.disabled}
-            @value-changed=${this._targetChanged}
-            .value=${this._value?.target}
-          ></ha-selector>`
+        ? html`<ha-settings-row
+            .narrow=${this.narrow || isFullWidthSelector(targetSelector)}
+          >
+            <span slot="heading"
+              >${this.hass.localize("ui.components.service-control.target")}</span
+            >
+            <ha-selector
+              .hass=${this.hass}
+              .selector=${targetSelector}
+              .disabled=${this.disabled}
+              @value-changed=${this._targetChanged}
+              .value=${this._value?.target}
+            ></ha-selector
+          ></ha-settings-row>`
        : entityId
          ? html`<ha-entity-picker
              .disabled=${this.disabled}
@@ -1053,14 +1059,6 @@ export class HaServiceControl extends LitElement {
      display: block;
      margin: var(--service-control-padding, 0 var(--ha-space-4));
    }
-    ha-selector.target-selector {
-      display: block;
-      padding: var(--ha-space-2) var(--ha-space-4);
-      border-top: var(
-        --service-control-items-border-top,
-        1px solid var(--divider-color)
-      );
-    }
    ha-yaml-editor {
      padding: var(--ha-space-4) 0;
    }
@@ -1,7 +1,6 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
 import type { HomeAssistant } from "../types";
 import { subscribeLabFeature } from "../data/labs";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
@@ -82,14 +81,14 @@ export class HaSnowflakes extends SubscribeMixin(LitElement) {
              class="snowflake ${
                this.narrow && flake.id >= 30 ? "hide-narrow" : ""
              }"
-              style=${styleMap({
-                left: `${flake.left}%`,
-                width: `${flake.size}px`,
-                height: `${flake.size}px`,
-                "animation-duration": `${flake.duration}s`,
-                "animation-delay": `${flake.delay}s`,
-                "--rotation": `${flake.rotation}deg`,
-              })}
+              style="
+                left: ${flake.left}%;
+                width: ${flake.size}px;
+                height: ${flake.size}px;
+                animation-duration: ${flake.duration}s;
+                animation-delay: ${flake.delay}s;
+                --rotation: ${flake.rotation}deg;
+              "
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
@@ -1,68 +0,0 @@
-import SplitPanel from "@home-assistant/webawesome/dist/components/split-panel/split-panel";
-import type { CSSResultGroup } from "lit";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-split-panel")
-export class HaSplitPanel extends SplitPanel {
-  static get styles(): CSSResultGroup {
-    return [
-      SplitPanel.styles,
-      css`
-        :host {
-          --divider-width: var(--ha-split-panel-divider-width, 2px);
-          --divider-hit-area: var(--ha-split-panel-divider-hit-area, 12px);
-          --min: var(--ha-split-panel-min, 0);
-          --max: var(--ha-split-panel-max, 100%);
-        }
-
-        .divider {
-          background-color: var(--divider-color);
-          transition: background-color var(--ha-animation-duration-fast)
-            ease-out;
-        }
-
-        /* Grip affordance so the divider reads as draggable. The divider
-           already centers its children via flexbox, so keep this in flow.
-           Consumers slotting their own divider handle can hide it with
-           --ha-split-panel-grip-display: none. */
-        .divider::before {
-          content: "";
-          width: 2px;
-          height: var(--ha-space-8);
-          display: var(--ha-split-panel-grip-display, block);
-          border-radius: var(--ha-border-radius-pill, 9999px);
-          background-color: var(--secondary-text-color);
-          opacity: 0.5;
-          transition: opacity var(--ha-animation-duration-fast) ease-out;
-        }
-
-        /* In vertical orientation the divider is horizontal, so the grip pill
-           lies flat instead of standing upright. */
-        :host([orientation="vertical"]) .divider::before {
-          width: var(--ha-space-8);
-          height: 2px;
-        }
-
-        @media (hover: hover) {
-          :host(:not([disabled])) .divider:hover {
-            background-color: var(--primary-color);
-          }
-          :host(:not([disabled])) .divider:hover::before {
-            opacity: 1;
-          }
-        }
-
-        :host(:not([disabled])) .divider:focus-visible {
-          background-color: var(--primary-color);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-split-panel": HaSplitPanel;
-  }
-}
@@ -27,10 +27,6 @@ import {
  getDevices,
  type DevicePickerItem,
 } from "../data/device/device_picker";
-import {
-  fetchDeviceCompositeSplits,
-  type DeviceCompositeSplits,
-} from "../data/device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../data/entity/entity";
 import {
  entityComboBoxKeys,
@@ -126,10 +122,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {

  @state() private _configEntryLookup: Record<string, ConfigEntry> = {};

-  @state() private _compositeSplits?: DeviceCompositeSplits;
-
-  private _loadingCompositeSplits = false;
-
  @state()
  @consume({ context: labelsContext, subscribe: true })
  private _labelRegistry!: LabelRegistryEntry[];
@@ -219,24 +211,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
      this._loadConfigEntries();
    }

-    const devicesChanged =
-      changedProps.has("hass") &&
-      this.hass.devices !== changedProps.get("hass")?.devices;
-    if (
-      (changedProps.has("value") || devicesChanged) &&
-      this.hass &&
-      this._compositeSplits === undefined &&
-      !this._loadingCompositeSplits &&
-      this.value?.device_id &&
-      ensureArray(this.value.device_id).some(
-        (deviceId) => !this.hass.devices[deviceId]
-      )
-    ) {
-      // A referenced device is missing from the registry; it might be a legacy
-      // composite device that was split. Fetch the split map to offer a fix.
-      this._loadCompositeSplits();
-    }
-
    if (
      this._pendingEntityId &&
      changedProps.has("hass") &&
@@ -323,7 +297,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                    .hass=${this.hass}
                    type="device"
                    .itemId=${device_id}
-                    .compositeSplits=${this._compositeSplits}
                    @remove-target-item=${this._handleRemove}
                    @expand-target-item=${this._handleExpand}
                  ></ha-target-picker-value-chip>
@@ -417,7 +390,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                <ha-target-picker-item-group
                  @remove-target-item=${this._handleRemove}
                  @replace-target-item=${this._handleReplace}
-                  @migrate-target-item=${this._handleMigrate}
                  type="device"
                  .hass=${this.hass}
                  .items=${{ device: deviceIds }}
@@ -426,7 +398,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                  .includeDomains=${this.includeDomains}
                  .includeDeviceClasses=${this.includeDeviceClasses}
                  .primaryEntitiesOnly=${this.primaryEntitiesOnly}
-                  .compositeSplits=${this._compositeSplits}
                >
                </ha-target-picker-item-group>
              `
@@ -1204,31 +1175,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
    );
  }

-  private async _loadCompositeSplits() {
-    this._loadingCompositeSplits = true;
-    try {
-      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
-    } catch (_err) {
-      this._compositeSplits = {};
-    } finally {
-      this._loadingCompositeSplits = false;
-    }
-  }
-
-  private _handleMigrate(
-    ev: HASSDomEvent<HASSDomEvents["migrate-target-item"]>
-  ) {
-    const { id, replacements } = ev.detail;
-    let value = this._removeItem(this.value, "device", id);
-    for (const replacement of replacements) {
-      value = this._addTargetToValue(value, {
-        type: "device",
-        id: replacement,
-      });
-    }
-    fireEvent(this, "value-changed", { value });
-  }
-
  private _renderRow = (
    item:
      | PickerComboBoxItem
@@ -1396,7 +1342,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
    }
    .item-groups {
      overflow: hidden;
-      border: var(--ha-border-width-sm) solid var(--divider-color);
+      border: 2px solid var(--divider-color);
      border-radius: var(--ha-border-radius-lg);
    }
  `;
@@ -1411,7 +1357,6 @@ declare global {
    "remove-target-item": TargetItem;
    "expand-target-item": TargetItem;
    "replace-target-item": TargetItem;
-    "migrate-target-item": { id: string; replacements: string[] };
    "remove-target-group": string;
  }
 }
@@ -1,7 +1,7 @@
 import { type LitElement, css } from "lit";
 import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { supportsNativeElementInternals } from "../../common/feature-detect/support-native-element-internals";
+import { nativeElementInternalsSupported } from "../../common/feature-detect/support-native-element-internals";
 import type { Constructor } from "../../types";

 /**
@@ -198,7 +198,7 @@ export const WaInputMixin = <T extends Constructor<LitElement>>(
    }

    public checkValidity(): boolean {
-      return supportsNativeElementInternals()
+      return nativeElementInternalsSupported
        ? (this._formControl?.checkValidity() ?? true)
        : true;
    }
@@ -211,7 +211,7 @@ export const WaInputMixin = <T extends Constructor<LitElement>>(

    protected _handleInput(): void {
      this.value = this._formControl?.value ?? undefined;
-      if (this._invalid && this.checkValidity()) {
+      if (this._invalid && this._formControl?.checkValidity()) {
        this._invalid = false;
      }
    }
@@ -222,16 +222,12 @@ export const WaInputMixin = <T extends Constructor<LitElement>>(

    protected _handleBlur(): void {
      if (this.autoValidate) {
-        this._invalid = !this.checkValidity();
+        this._invalid = !this._formControl?.checkValidity();
      }
    }

    protected _handleInvalid(): void {
-      // Polyfilled internals dispatch `invalid` themselves, so only trust the
-      // event when validity comes from the platform (#51338).
-      if (supportsNativeElementInternals()) {
-        this._invalid = true;
-      }
+      this._invalid = true;
    }

    protected _renderLabel = memoizeOne((label: string, required: boolean) => {
@@ -1,13 +1,7 @@
 import type { LitVirtualizer } from "@lit-labs/virtualizer";
 import { grid } from "@lit-labs/virtualizer/layouts/grid";

-import {
-  mdiArrowUpRight,
-  mdiFilterVariant,
-  mdiKeyboard,
-  mdiPlay,
-  mdiPlus,
-} from "@mdi/js";
+import { mdiArrowUpRight, mdiKeyboard, mdiPlay, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import {
@@ -20,7 +14,6 @@ import {
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../../common/dom/fire_event";
-import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import { slugify } from "../../common/string/slugify";
 import { debounce } from "../../common/util/debounce";
 import { UNAVAILABLE } from "../../data/entity/entity";
@@ -39,7 +32,6 @@ import {
  browseLocalMediaPlayer,
  isManualMediaSourceContentId,
  MANUAL_MEDIA_SOURCE_PREFIX,
-  searchMedia,
 } from "../../data/media_source";
 import { isTTSMediaSource } from "../../data/tts";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
@@ -51,14 +43,9 @@ import "../entity/ha-entity-picker";
 import "../ha-alert";
 import "../ha-button";
 import "../ha-card";
-import "../ha-dropdown";
-import type { HaDropdownSelectEvent } from "../ha-dropdown";
-import "../ha-dropdown-item";
 import "../ha-icon-button";
 import "../ha-list";
 import "../ha-list-item";
-import "../input/ha-input-search";
-import type { HaInputSearch } from "../input/ha-input-search";
 import "./ha-media-browser-thumbnail";
 import "../ha-spinner";
 import "../ha-svg-icon";
@@ -87,8 +74,6 @@ export interface MediaPlayerItemId {
  media_content_type?: string | undefined;
 }

-type MediaClass = MediaPlayerItem["media_class"];
-
 const MANUAL_ITEM_BASE: Omit<MediaPlayerItem, "title"> = {
  can_expand: true,
  can_play: false,
@@ -137,16 +122,6 @@ export class HaMediaPlayerBrowse extends LitElement {

  @state() private _currentItem?: MediaPlayerItem;

-  @state() private _searchQuery = "";
-
-  @state() private _searchResults?: MediaPlayerItem[];
-
-  @state() private _searching = false;
-
-  @state() private _mediaClassFilter: MediaClass[] = [];
-
-  private _searchRequestId = 0;
-
  @query(".header") private _header?: HTMLDivElement;

  @query(".content") private _content?: HTMLDivElement;
@@ -222,10 +197,6 @@ export class HaMediaPlayerBrowse extends LitElement {
    const oldParentItem = this._parentItem;
    this._currentItem = undefined;
    this._parentItem = undefined;
-    this._abortSearch();
-    this._searchQuery = "";
-    this._searchResults = undefined;
-    this._mediaClassFilter = [];
    const currentId = navigateIds[navigateIds.length - 1];
    const parentId =
      navigateIds.length > 1 ? navigateIds[navigateIds.length - 2] : undefined;
@@ -357,14 +328,11 @@ export class HaMediaPlayerBrowse extends LitElement {
  protected updated(changedProps: PropertyValues): void {
    super.updated(changedProps);

-    if (changedProps.has("_scrolled") || changedProps.has("_currentItem")) {
-      // Re-measure across frames rather than once: the search input sizes
-      // asynchronously, so a single measurement can be too small and the
-      // content would clip under the header.
+    if (changedProps.has("_scrolled")) {
      this._animateHeaderHeight();
-    }
+    } else if (changedProps.has("_currentItem")) {
+      this._setHeaderHeight();

-    if (changedProps.has("_currentItem")) {
      // This fixes a race condition for resizing of the cards using the grid layout
      if (this._observed) {
        return;
@@ -397,15 +365,10 @@ export class HaMediaPlayerBrowse extends LitElement {

    const currentItem = this._currentItem;

-    const isSearching = this._searchResults !== undefined;
-
    const subtitle = this.hass.localize(
      `ui.components.media-browser.class.${currentItem.media_class}`
    );
-    let children = isSearching
-      ? this._searchResults!
-      : currentItem.children || [];
-    const notShown = isSearching ? 0 : currentItem.not_shown || 0;
+    let children = currentItem.children || [];
    const canPlayChildren = new Set<string>();

    // Filter children based on accept property if provided
@@ -436,26 +399,6 @@ export class HaMediaPlayerBrowse extends LitElement {
      });
    }

-    // Search is available on non-root pages that opt in via can_search, aside
-    // from the manual-entry and TTS pseudo-sources.
-    const showSearch =
-      this.navigateIds.length > 1 &&
-      !isManualMediaSourceContentId(currentItem.media_content_id) &&
-      !isTTSMediaSource(currentItem.media_content_id) &&
-      currentItem.can_search;
-    // The backend reports which media classes are worth filtering by for this
-    // item; without them we still allow searching, just without the filter.
-    const mediaClassFilterOptions =
-      showSearch && currentItem.search_media_classes
-        ? [...currentItem.search_media_classes].sort((a, b) =>
-            caseInsensitiveStringCompare(
-              this._localizeMediaClass(a),
-              this._localizeMediaClass(b),
-              this.hass.locale.language
-            )
-          )
-        : [];
-
    const mediaClass = MediaClassBrowserSettings[currentItem.media_class];
    const childrenMediaClass = currentItem.children_media_class
      ? MediaClassBrowserSettings[currentItem.children_media_class]
@@ -463,109 +406,94 @@ export class HaMediaPlayerBrowse extends LitElement {

    return html`
              ${
-                currentItem.can_play || showSearch
+                currentItem.can_play
                  ? html`
                      <div
                        class="header ${classMap({
                          "no-img": !currentItem.thumbnail,
                          "no-dialog": !this.dialog,
-                          "search-only": !currentItem.can_play,
                        })}"
                        @transitionend=${this._setHeaderHeight}
                      >
-                        ${
-                          showSearch
-                            ? this._renderSearchRow(
-                                currentItem,
-                                mediaClassFilterOptions
-                              )
-                            : nothing
-                        }
-                        ${
-                          currentItem.can_play
-                            ? html`<div class="header-content">
-                                ${
-                                  currentItem.thumbnail
-                                    ? html`
-                                        <div class="img">
-                                          <ha-media-browser-thumbnail
-                                            .hass=${this.hass}
-                                            .url=${currentItem.thumbnail}
-                                          ></ha-media-browser-thumbnail>
-                                          ${
-                                            this.narrow &&
-                                            currentItem?.can_play &&
-                                            (!this.accept ||
-                                              canPlayChildren.has(
-                                                currentItem.media_content_id
-                                              ))
-                                              ? html`
-                                                  <ha-button
-                                                    class="fab"
-                                                    .item=${currentItem}
-                                                    @click=${this._actionClicked}
-                                                    .title=${this.hass.localize(
-                                                      `ui.components.media-browser.${this.action}`
-                                                    )}
-                                                  >
-                                                    <ha-svg-icon
-                                                      .path=${
-                                                        this.action === "play"
-                                                          ? mdiPlay
-                                                          : mdiPlus
-                                                      }
-                                                    ></ha-svg-icon>
-                                                  </ha-button>
-                                                `
-                                              : ""
-                                          }
-                                        </div>
-                                      `
-                                    : nothing
-                                }
-                                <div class="header-info">
-                                  <div class="breadcrumb">
-                                    <h1 class="title">${currentItem.title}</h1>
+                        <div class="header-content">
+                          ${
+                            currentItem.thumbnail
+                              ? html`
+                                  <div class="img">
+                                    <ha-media-browser-thumbnail
+                                      .hass=${this.hass}
+                                      .url=${currentItem.thumbnail}
+                                    ></ha-media-browser-thumbnail>
                                    ${
-                                      subtitle
+                                      this.narrow &&
+                                      currentItem?.can_play &&
+                                      (!this.accept ||
+                                        canPlayChildren.has(
+                                          currentItem.media_content_id
+                                        ))
                                        ? html`
-                                            <h2 class="subtitle">
-                                              ${subtitle}
-                                            </h2>
+                                            <ha-button
+                                              class="fab"
+                                              .item=${currentItem}
+                                              @click=${this._actionClicked}
+                                              .title=${this.hass.localize(
+                                                `ui.components.media-browser.${this.action}`
+                                              )}
+                                            >
+                                              <ha-svg-icon
+                                                .path=${
+                                                  this.action === "play"
+                                                    ? mdiPlay
+                                                    : mdiPlus
+                                                }
+                                              ></ha-svg-icon>
+                                            </ha-button>
                                          `
                                        : ""
                                    }
                                  </div>
-                                  ${
-                                    currentItem.can_play &&
-                                    (!currentItem.thumbnail || !this.narrow)
-                                      ? html`
-                                          <ha-button
-                                            .item=${currentItem}
-                                            @click=${this._actionClicked}
-                                          >
-                                            <ha-svg-icon
-                                              .label=${this.hass.localize(
-                                                `ui.components.media-browser.${this.action}-media`
-                                              )}
-                                              .path=${
-                                                this.action === "play"
-                                                  ? mdiPlay
-                                                  : mdiPlus
-                                              }
-                                              slot="start"
-                                            ></ha-svg-icon>
-                                            ${this.hass.localize(
-                                              `ui.components.media-browser.${this.action}`
-                                            )}
-                                          </ha-button>
-                                        `
-                                      : ""
-                                  }
-                                </div>
-                              </div>`
-                            : nothing
-                        }
+                                `
+                              : nothing
+                          }
+                          <div class="header-info">
+                            <div class="breadcrumb">
+                              <h1 class="title">${currentItem.title}</h1>
+                              ${
+                                subtitle
+                                  ? html`
+                                      <h2 class="subtitle">${subtitle}</h2>
+                                    `
+                                  : ""
+                              }
+                            </div>
+                            ${
+                              currentItem.can_play &&
+                              (!currentItem.thumbnail || !this.narrow)
+                                ? html`
+                                    <ha-button
+                                      .item=${currentItem}
+                                      @click=${this._actionClicked}
+                                    >
+                                      <ha-svg-icon
+                                        .label=${this.hass.localize(
+                                          `ui.components.media-browser.${this.action}-media`
+                                        )}
+                                        .path=${
+                                          this.action === "play"
+                                            ? mdiPlay
+                                            : mdiPlus
+                                        }
+                                        slot="start"
+                                      ></ha-svg-icon>
+                                      ${this.hass.localize(
+                                        `ui.components.media-browser.${this.action}`
+                                      )}
+                                    </ha-button>
+                                  `
+                                : ""
+                            }
+                          </div>
+                        </div>
                      </div>
                    `
                  : ""
@@ -576,10 +504,12 @@ export class HaMediaPlayerBrowse extends LitElement {
            @touchmove=${this._scroll}
          >
            ${
-              this._searching
+              this._error
                ? html`
                    <div class="container">
-                      <ha-spinner></ha-spinner>
+                      <ha-alert alert-type="error">
+                        ${this._renderError(this._error)}
+                      </ha-alert>
                    </div>
                  `
                : isManualMediaSourceContentId(currentItem.media_content_id)
@@ -602,33 +532,29 @@ export class HaMediaPlayerBrowse extends LitElement {
                          @tts-picked=${this._ttsPicked}
                        ></ha-browse-media-tts>
                      `
-                    : !children.length && !notShown
+                    : !children.length && !currentItem.not_shown
                      ? html`
                          <div class="container no-items">
                            ${
-                              isSearching
-                                ? this.hass.localize(
-                                    "ui.components.media-browser.search.no_results"
+                              currentItem.media_content_id ===
+                              "media-source://media_source/local/."
+                                ? html`
+                                    <div class="highlight-add-button">
+                                      <span>
+                                        <ha-svg-icon
+                                          .path=${mdiArrowUpRight}
+                                        ></ha-svg-icon>
+                                      </span>
+                                      <span>
+                                        ${this.hass.localize(
+                                          "ui.components.media-browser.file_management.highlight_button"
+                                        )}
+                                      </span>
+                                    </div>
+                                  `
+                                : this.hass.localize(
+                                    "ui.components.media-browser.no_items"
                                  )
-                                : currentItem.media_content_id ===
-                                    "media-source://media_source/local/."
-                                  ? html`
-                                      <div class="highlight-add-button">
-                                        <span>
-                                          <ha-svg-icon
-                                            .path=${mdiArrowUpRight}
-                                          ></ha-svg-icon>
-                                        </span>
-                                        <span>
-                                          ${this.hass.localize(
-                                            "ui.components.media-browser.file_management.highlight_button"
-                                          )}
-                                        </span>
-                                      </div>
-                                    `
-                                  : this.hass.localize(
-                                      "ui.components.media-browser.no_items"
-                                    )
                            }
                          </div>
                        `
@@ -658,17 +584,17 @@ export class HaMediaPlayerBrowse extends LitElement {
                                portrait:
                                  childrenMediaClass.thumbnail_ratio ===
                                  "portrait",
-                                not_shown: !!notShown,
+                                not_shown: !!currentItem.not_shown,
                              })}"
                            ></lit-virtualizer>
                            ${
-                              notShown
+                              currentItem.not_shown
                                ? html`
                                    <div class="grid not-shown">
                                      <div class="title">
                                        ${this.hass.localize(
                                          "ui.components.media-browser.not_shown",
-                                          { count: notShown }
+                                          { count: currentItem.not_shown }
                                        )}
                                      </div>
                                    </div>
@@ -688,7 +614,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                                .renderItem=${this._renderListItem}
                              ></lit-virtualizer>
                              ${
-                                notShown
+                                currentItem.not_shown
                                  ? html`
                                      <ha-list-item
                                        noninteractive
@@ -702,7 +628,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                                        <span class="title">
                                          ${this.hass.localize(
                                            "ui.components.media-browser.not_shown",
-                                            { count: notShown }
+                                            { count: currentItem.not_shown }
                                          )}
                                        </span>
                                      </ha-list-item>
@@ -718,188 +644,6 @@ export class HaMediaPlayerBrowse extends LitElement {
    `;
  }

-  private _renderSearchRow(
-    currentItem: MediaPlayerItem,
-    mediaClassFilterOptions: MediaClass[]
-  ): TemplateResult {
-    return html`
-      <div class="search-row">
-        ${
-          currentItem.can_search
-            ? html`
-                <ha-input-search
-                  class="search-input"
-                  appearance="outlined"
-                  .value=${this._searchQuery}
-                  .placeholder=${this.hass.localize(
-                    "ui.components.media-browser.search.search_placeholder",
-                    { name: currentItem.title }
-                  )}
-                  @input=${this._handleSearchInput}
-                  @keydown=${this._handleSearchKeydown}
-                ></ha-input-search>
-                ${
-                  mediaClassFilterOptions.length
-                    ? this._renderMediaClassFilter(mediaClassFilterOptions)
-                    : nothing
-                }
-                <ha-button
-                  class="search-button"
-                  appearance="filled"
-                  .disabled=${!this._searchQuery.trim()}
-                  @click=${this._search}
-                >
-                  ${this.hass.localize("ui.common.search")}
-                </ha-button>
-              `
-            : nothing
-        }
-      </div>
-    `;
-  }
-
-  private _renderMediaClassFilter(
-    mediaClassFilterOptions: MediaClass[]
-  ): TemplateResult {
-    const selectedCount = this._mediaClassFilter.length;
-    return html`
-      <div class="media-class-filter">
-        <ha-dropdown
-          placement="bottom-end"
-          @wa-select=${this._toggleMediaClassFilter}
-        >
-          <ha-icon-button
-            slot="trigger"
-            class="filter-button ${classMap({ active: selectedCount > 0 })}"
-            .path=${mdiFilterVariant}
-            .label=${this.hass.localize(
-              "ui.components.media-browser.filter_media_type"
-            )}
-          ></ha-icon-button>
-          ${mediaClassFilterOptions.map((mediaClass) => {
-            const selected = this._mediaClassFilter.includes(mediaClass);
-            return html`
-              <ha-dropdown-item
-                .value=${mediaClass}
-                .action=${selected ? "remove" : "add"}
-                type="checkbox"
-                .checked=${selected}
-              >
-                ${this._localizeMediaClass(mediaClass)}
-              </ha-dropdown-item>
-            `;
-          })}
-        </ha-dropdown>
-        ${
-          selectedCount
-            ? html`<div class="filter-badge">${selectedCount}</div>`
-            : nothing
-        }
-      </div>
-    `;
-  }
-
-  private _localizeMediaClass(mediaClass: MediaClass): string {
-    return (
-      this.hass.localize(`ui.components.media-browser.class.${mediaClass}`) ||
-      mediaClass
-    );
-  }
-
-  private _toggleMediaClassFilter(ev: HaDropdownSelectEvent<MediaClass>): void {
-    ev.preventDefault(); // keep the dropdown open for multi-select
-    const value = ev.detail.item.value;
-    const action = (ev.detail.item as { action?: "add" | "remove" }).action;
-    this._mediaClassFilter =
-      action === "add"
-        ? [...this._mediaClassFilter, value]
-        : this._mediaClassFilter.filter((mediaClass) => mediaClass !== value);
-    // Only refine results already on screen; before a search has run, the
-    // filter is just staged for the next Enter/search-button submission.
-    if (this._searchResults !== undefined) {
-      this._search();
-    }
-  }
-
-  private _handleSearchInput(ev: InputEvent): void {
-    const value = (ev.target as HaInputSearch).value ?? "";
-    this._searchQuery = value;
-    // Searching is explicit (Enter or the search button). Emptying the field —
-    // e.g. via the clear button — returns to the browse view.
-    if (!value) {
-      this._clearSearch();
-    }
-  }
-
-  private _handleSearchKeydown(ev: KeyboardEvent): void {
-    if (ev.key === "Enter") {
-      ev.preventDefault();
-      this._search();
-    }
-  }
-
-  private _abortSearch(): void {
-    // Invalidate any in-flight search so a late response is ignored, and clear
-    // the loading state.
-    this._searchRequestId++;
-    this._searching = false;
-  }
-
-  private _clearSearch(): void {
-    this._abortSearch();
-    this._searchQuery = "";
-    this._searchResults = undefined;
-  }
-
-  private async _search(): Promise<void> {
-    const searchQuery = this._searchQuery.trim();
-    if (!searchQuery) {
-      // Nothing to search; drop any stale results but keep the input.
-      this._abortSearch();
-      this._searchResults = undefined;
-      return;
-    }
-
-    const navigateId = this.navigateIds[this.navigateIds.length - 1];
-    const requestId = ++this._searchRequestId;
-
-    this._searching = true;
-    // Clear previous results so stale data isn't shown while searching or on error
-    this._searchResults = undefined;
-    const mediaFilterClasses = this._mediaClassFilter.length
-      ? this._mediaClassFilter
-      : undefined;
-    try {
-      const { result } = await searchMedia(
-        this.hass,
-        navigateId.media_content_id,
-        searchQuery,
-        mediaFilterClasses
-      );
-      // Ignore the response if a newer search started or we navigated away
-      if (requestId !== this._searchRequestId) {
-        return;
-      }
-      this._searchResults = result;
-    } catch (err) {
-      // Ignore errors from superseded searches
-      if (requestId !== this._searchRequestId) {
-        return;
-      }
-      showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.components.media-browser.media_browsing_error"
-        ),
-        text: err instanceof Error ? err.message : String(err),
-      });
-    } finally {
-      // Only the most recent search controls the loading state
-      if (requestId === this._searchRequestId) {
-        this._searching = false;
-      }
-    }
-  }
-
  private _renderGridItem = (child: MediaPlayerItem): TemplateResult => {
    return html`
      <div class="child" .item=${child} @click=${this._childClicked}>
@@ -1265,8 +1009,7 @@ export class HaMediaPlayerBrowse extends LitElement {

        .header {
          display: flex;
-          flex-direction: column;
-          gap: var(--ha-space-2);
+          justify-content: space-between;
          border-bottom: 1px solid var(--divider-color);
          background-color: var(--card-background-color);
          position: absolute;
@@ -1276,56 +1019,6 @@ export class HaMediaPlayerBrowse extends LitElement {
          z-index: 3;
          padding: 16px;
        }
-        .header.search-only {
-          padding: 8px 16px;
-        }
-        .search-row {
-          display: flex;
-          align-items: center;
-          justify-content: flex-end;
-          gap: var(--ha-space-2);
-        }
-        .search-input {
-          flex: 1;
-          --ha-input-padding-top: 0;
-          --ha-input-padding-bottom: 0;
-        }
-        .search-button {
-          flex: none;
-        }
-        :host([narrow]) .search-row {
-          box-sizing: border-box;
-          padding: 8px 16px;
-        }
-        .media-class-filter {
-          position: relative;
-          flex: none;
-        }
-        .filter-button {
-          --ha-icon-button-size: 40px;
-          color: var(--secondary-text-color);
-        }
-        .filter-button.active {
-          color: var(--primary-color);
-        }
-        .filter-badge {
-          position: absolute;
-          top: -4px;
-          right: -4px;
-          inset-inline-end: -4px;
-          inset-inline-start: initial;
-          min-width: 16px;
-          box-sizing: border-box;
-          border-radius: var(--ha-border-radius-circle);
-          font-size: var(--ha-font-size-xs);
-          font-weight: var(--ha-font-weight-normal);
-          background-color: var(--primary-color);
-          line-height: var(--ha-line-height-normal);
-          text-align: center;
-          padding: 0px 2px;
-          color: var(--text-primary-color);
-          pointer-events: none;
-        }
        .header_button {
          position: relative;
          right: -8px;
@@ -1,6 +1,5 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { DeviceCompositeSplits } from "../../data/device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { TargetType, TargetTypeFloorless } from "../../data/target";
 import type { HomeAssistant } from "../../types";
@@ -9,13 +8,6 @@ import "../ha-expansion-panel";
 import "../list/ha-list-base";
 import "./ha-target-picker-item-row";

-const TYPE_PLURAL = {
-  entity: "entities",
-  device: "devices",
-  area: "areas",
-  label: "labels",
-} as const satisfies Record<TargetTypeFloorless, string>;
-
@customElement("ha-target-picker-item-group")
 export class HaTargetPickerItemGroup extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -53,9 +45,6 @@ export class HaTargetPickerItemGroup extends LitElement {
  @property({ type: Boolean, attribute: "primary-entities-only" })
  public primaryEntitiesOnly?: boolean;

-  @property({ attribute: false })
-  public compositeSplits?: DeviceCompositeSplits;
-
  protected render() {
    let count = 0;
    Object.values(this.items).forEach((items) => {
@@ -71,11 +60,11 @@ export class HaTargetPickerItemGroup extends LitElement {
    >
      <div slot="header" class="heading">
        ${this.hass.localize(
-          `ui.components.target-picker.type.${TYPE_PLURAL[this.type]}`
+          `ui.components.target-picker.selected.${this.type}`,
+          {
+            count,
+          }
        )}
-        ${
-          this.collapsed ? html`<span class="count">(${count})</span>` : nothing
-        }
      </div>
      <ha-list-base>
        ${Object.entries(this.items).map(([type, items]) =>
@@ -91,7 +80,6 @@ export class HaTargetPickerItemGroup extends LitElement {
                    .includeDomains=${this.includeDomains}
                    .includeDeviceClasses=${this.includeDeviceClasses}
                    .primaryEntitiesOnly=${this.primaryEntitiesOnly}
-                    .compositeSplits=${this.compositeSplits}
                  ></ha-target-picker-item-row>`
              )
            : nothing
@@ -118,10 +106,6 @@ export class HaTargetPickerItemGroup extends LitElement {
      justify-content: space-between;
      min-height: unset;
    }
-    .count {
-      color: var(--secondary-text-color);
-      font-weight: var(--ha-font-weight-normal);
-    }
  `;
 }

@@ -34,10 +34,7 @@ import { computeRTL } from "../../common/util/compute_rtl";
 import type { AreaRegistryEntry } from "../../data/area/area_registry";
 import { getConfigEntry } from "../../data/config_entries";
 import { labelsContext } from "../../data/context";
-import type {
-  DeviceCompositeSplits,
-  DeviceRegistryEntry,
-} from "../../data/device/device_registry";
+import type { DeviceRegistryEntry } from "../../data/device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { FloorRegistryEntry } from "../../data/floor_registry";
 import { domainToName } from "../../data/integration";
@@ -57,7 +54,6 @@ import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
 import { floorDefaultIconPath } from "../ha-floor-icon";
-import "../ha-button";
 import "../ha-icon-button";
 import "../ha-state-icon";
 import "../ha-svg-icon";
@@ -112,9 +108,6 @@ export class HaTargetPickerItemRow extends LitElement {
  @property({ type: Boolean, attribute: "primary-entities-only" })
  public primaryEntitiesOnly?: boolean;

-  @property({ attribute: false })
-  public compositeSplits?: DeviceCompositeSplits;
-
  @state() private _iconImg?: string;

  @state() private _domainName?: string;
@@ -135,15 +128,6 @@ export class HaTargetPickerItemRow extends LitElement {
    const { name, context, iconPath, fallbackIconPath, stateObject, notFound } =
      this._itemData(this.type, this.itemId);

-    const replacement =
-      this.type === "device" && notFound
-        ? this._getReplacement(this.itemId)
-        : undefined;
-    // Only surface the "replaced" state when there is at least one available
-    // replacement device to migrate to. If every replacement device was
-    // deleted (or filtered out), fall back to the plain "not found" state.
-    const canMigrate = !!replacement?.candidates.length;
-
    const showEntities = this.type !== "entity" && !notFound;

    const entries = this.parentEntries || this._entries;
@@ -190,20 +174,15 @@ export class HaTargetPickerItemRow extends LitElement {
        }
      </div>

-      <div slot="headline">${(canMigrate && replacement?.name) || name}</div>
+      <div slot="headline">${name}</div>
      ${
        notFound || (context && !this.hideContext)
          ? html`<span slot="supporting-text"
              >${
                notFound
-                  ? canMigrate
-                    ? this.hass.localize(
-                        "ui.components.target-picker.device_replaced",
-                        { count: replacement!.candidates.length }
-                      )
-                    : this.hass.localize(
-                        `ui.components.target-picker.${this.type}_not_found`
-                      )
+                  ? this.hass.localize(
+                      `ui.components.target-picker.${this.type}_not_found`
+                    )
                  : context
              }</span
            >`
@@ -250,24 +229,6 @@ export class HaTargetPickerItemRow extends LitElement {
            `
          : nothing
      }
-      ${
-        canMigrate
-          ? html`
-              <ha-button
-                class="migrate"
-                slot="end"
-                appearance="plain"
-                variant="warning"
-                size="s"
-                @click=${this._migrate}
-              >
-                ${this.hass.localize(
-                  "ui.components.target-picker.replace_device"
-                )}
-              </ha-button>
-            `
-          : nothing
-      }
      ${
        !this.expand && !this.subEntry
          ? html`
@@ -746,51 +707,6 @@ export class HaTargetPickerItemRow extends LitElement {
    });
  }

-  // Returns the split devices that replaced a removed composite device and
-  // pass this row's filters, or undefined if the item is not a replaced device.
-  private _getReplacement(item: string) {
-    const split = this.compositeSplits?.[item];
-    if (!split || this.hass.devices[item]) {
-      return undefined;
-    }
-    const candidates = split.split_ids.filter((id) => {
-      const device = this.hass.devices[id];
-      return (
-        device &&
-        deviceMeetsFilter(
-          device,
-          this.hass.entities,
-          this.deviceFilter,
-          this.includeDomains,
-          this.includeDeviceClasses,
-          this.hass.states,
-          this.entityFilter,
-          !this.primaryEntitiesOnly
-        )
-      );
-    });
-    // Display the replaced reference using the primary replacement device's
-    // name instead of the removed composite device id. Fall back to the first
-    // available candidate if the primary device itself was deleted.
-    const nameDevice =
-      (split.primary_id && this.hass.devices[split.primary_id]) ||
-      (candidates.length ? this.hass.devices[candidates[0]] : undefined);
-    const name = nameDevice ? computeDeviceName(nameDevice) : undefined;
-    return { candidates, name };
-  }
-
-  private _migrate = (ev: MouseEvent) => {
-    ev.stopPropagation();
-    const replacement = this._getReplacement(this.itemId);
-    if (!replacement?.candidates.length) {
-      return;
-    }
-    fireEvent(this, "migrate-target-item", {
-      id: this.itemId,
-      replacements: replacement.candidates,
-    });
-  };
-
  private _openDetails(ev: MouseEvent) {
    ev.stopPropagation();
    showTargetDetailsDialog(this, {
@@ -830,11 +746,6 @@ export class HaTargetPickerItemRow extends LitElement {
        color: var(--ha-color-on-warning-normal);
      }

-      .migrate {
-        align-self: center;
-        white-space: nowrap;
-      }
-
      .replaceable {
        cursor: pointer;
      }
@@ -1,7 +1,6 @@
 import "@home-assistant/webawesome/dist/components/tag/tag";
 import { consume } from "@lit/context";
 import {
-  mdiAlertOutline,
  mdiDevices,
  mdiHome,
  mdiLabel,
@@ -10,7 +9,6 @@ import {
 } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../common/color/compute-color";
 import { hex2rgb } from "../../common/color/convert-color";
@@ -21,7 +19,6 @@ import { computeStateName } from "../../common/entity/compute_state_name";
 import { slugify } from "../../common/string/slugify";
 import { getConfigEntry } from "../../data/config_entries";
 import { labelsContext } from "../../data/context";
-import type { DeviceCompositeSplits } from "../../data/device/device_registry";
 import { domainToName } from "../../data/integration";
 import type { LabelRegistryEntry } from "../../data/label/label_registry";
 import type { TargetType } from "../../data/target";
@@ -42,9 +39,6 @@ export class HaTargetPickerValueChip extends LitElement {

  @property({ attribute: "item-id" }) public itemId!: string;

-  @property({ attribute: false })
-  public compositeSplits?: DeviceCompositeSplits;
-
  @state() private _domainName?: string;

  @state() private _iconImg?: string;
@@ -57,74 +51,38 @@ export class HaTargetPickerValueChip extends LitElement {
    const { name, iconPath, fallbackIconPath, stateObject, color } =
      this._itemData(this.type, this.itemId);

-    const split =
-      this.type === "device" && !this.hass.devices?.[this.itemId]
-        ? this.compositeSplits?.[this.itemId]
-        : undefined;
-    // Show the replaced reference using the primary replacement device's name,
-    // falling back to the first still-existing split device if the primary
-    // device itself was deleted. If no replacement device exists at all, fall
-    // back to the normal "not found" display.
-    const replacementDevice = split
-      ? (split.primary_id && this.hass.devices?.[split.primary_id]) ||
-        split.split_ids
-          .map((id) => this.hass.devices?.[id])
-          .find((device) => device)
-      : undefined;
-    const replaced = !!replacementDevice;
-    const replacedName = replacementDevice
-      ? computeDeviceNameDisplay(
-          replacementDevice,
-          this.hass.localize,
-          this.hass.states
-        )
-      : undefined;
-
    return html`
      <wa-tag
        pill
        with-remove
-        class=${classMap({ [this.type]: true, replaced })}
+        class=${this.type}
        style=${color ? `--color: rgb(${color});` : ""}
        @wa-remove=${this._removeItem}
      >
        <div class="icon">
          ${
-            replaced
-              ? html`<ha-svg-icon .path=${mdiAlertOutline}></ha-svg-icon>`
-              : iconPath
-                ? html`<ha-icon .icon=${iconPath}></ha-icon>`
-                : this._iconImg
-                  ? html`<img
-                      alt=${this._domainName || ""}
-                      width="24"
-                      crossorigin="anonymous"
-                      referrerpolicy="no-referrer"
-                      src=${this._iconImg}
-                    />`
-                  : fallbackIconPath
-                    ? html`<ha-svg-icon
-                        .path=${fallbackIconPath}
-                      ></ha-svg-icon>`
-                    : stateObject
-                      ? html`<ha-state-icon
-                          .stateObj=${stateObject}
-                        ></ha-state-icon>`
-                      : nothing
+            iconPath
+              ? html`<ha-icon .icon=${iconPath}></ha-icon>`
+              : this._iconImg
+                ? html`<img
+                    alt=${this._domainName || ""}
+                    width="24"
+                    crossorigin="anonymous"
+                    referrerpolicy="no-referrer"
+                    src=${this._iconImg}
+                  />`
+                : fallbackIconPath
+                  ? html`<ha-svg-icon .path=${fallbackIconPath}></ha-svg-icon>`
+                  : stateObject
+                    ? html`<ha-state-icon
+                        .stateObj=${stateObject}
+                      ></ha-state-icon>`
+                    : nothing
          }
        </div>
-        <span class="name">
-          ${
-            replaced
-              ? replacedName ||
-                this.hass.localize(
-                  "ui.components.target-picker.replaced_device"
-                )
-              : name
-          }
-        </span>
+        <span class="name"> ${name} </span>
        ${
-          this.type === "entity" || replaced
+          this.type === "entity"
            ? nothing
            : html`<ha-tooltip .for="expand-${slugify(this.itemId)}"
                  >${this.hass.localize(
@@ -167,7 +125,7 @@ export class HaTargetPickerValueChip extends LitElement {
    if (type === "device") {
      const device = this.hass.devices?.[itemId];

-      if (device?.primary_config_entry) {
+      if (device.primary_config_entry) {
        this._getDeviceDomain(device.primary_config_entry);
      }

@@ -282,11 +240,6 @@ export class HaTargetPickerValueChip extends LitElement {
      --background-color: var(--color);
      --icon-primary-color: var(--primary-text-color);
    }
-    wa-tag.replaced {
-      border-color: var(--ha-color-border-warning-normal, var(--warning-color));
-      --background-color: var(--warning-color);
-      color: var(--ha-color-on-warning-normal, var(--warning-color));
-    }

    .name {
      overflow: hidden;
@@ -15,10 +15,6 @@ export class HaTileContainer extends LitElement {
  @property({ type: Boolean })
  public vertical = false;

-  /* reserve a consistent height for the info block instead of sizing to content, so sibling tiles stay aligned */
-  @property({ type: Boolean, attribute: "fixed-info-height" })
-  public fixedInfoHeight = false;
-
  @property({ attribute: false })
  public interactive = false;

@@ -38,10 +34,7 @@ export class HaTileContainer extends LitElement {
  protected render() {
    const containerOrientationClass =
      this.featurePosition === "inline" ? "horizontal" : "";
-    const contentClasses = {
-      vertical: this.vertical,
-      "fixed-info-height": this.fixedInfoHeight,
-    };
+    const contentClasses = { vertical: this.vertical };

    return html`
      <div
@@ -119,15 +112,7 @@ export class HaTileContainer extends LitElement {
      flex-direction: column;
      text-align: center;
      justify-content: center;
-      padding: 10px var(--ha-space-2);
-    }
-    .vertical.fixed-info-height {
-      /* pin sizing so every tile in a grid reserves the same height, wrapping or not, secondary or not */
-      gap: 2px;
-      --ha-tile-info-gap: 2px;
-      --ha-tile-info-primary-line-height: var(--ha-space-4);
-      --ha-tile-info-primary-min-height: var(--ha-space-8);
-      --ha-tile-info-min-height: var(--ha-space-12);
+      padding: 10px 0;
    }
    .vertical ::slotted([slot="info"]) {
      width: 100%;
@@ -15,13 +15,9 @@ import { customElement, property } from "lit/decorators";
 *
 * @property {boolean} secondaryLoading - Whether the secondary text is loading. Shows a skeleton placeholder.
 *
- * @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-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)`.
@@ -63,8 +59,6 @@ export class HaTileInfo extends LitElement {
      display: block;
      width: 100%;
      min-width: 0;
-      --tile-info-gap: var(--ha-tile-info-gap, 0);
-      --tile-info-min-height: var(--ha-tile-info-min-height, auto);
      --tile-info-primary-font-size: var(
        --ha-tile-info-primary-font-size,
        var(--ha-font-size-m)
@@ -77,11 +71,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
-      );
      --tile-info-primary-letter-spacing: var(
        --ha-tile-info-primary-letter-spacing,
        0.1px
@@ -117,45 +106,28 @@ export class HaTileInfo extends LitElement {
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
-      gap: var(--tile-info-gap);
-      min-height: var(--tile-info-min-height);
    }
-    .secondary span,
-    ::slotted([slot="secondary"]) {
+    span,
+    ::slotted(*) {
      text-overflow: ellipsis;
      overflow: hidden;
      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;
-      width: 100%;
      font-size: var(--tile-info-primary-font-size);
      font-weight: var(--tile-info-primary-font-weight);
      line-height: var(--tile-info-primary-line-height);
      letter-spacing: var(--tile-info-primary-letter-spacing);
      color: var(--tile-info-primary-color);
-      min-height: var(--tile-info-primary-min-height);
    }
    .secondary {
-      display: flex;
-      align-items: center;
-      width: 100%;
      font-size: var(--tile-info-secondary-font-size);
      font-weight: var(--tile-info-secondary-font-weight);
      line-height: var(--tile-info-secondary-line-height);
      letter-spacing: var(--tile-info-secondary-letter-spacing);
      color: var(--tile-info-secondary-color);
+      width: 100%;
    }
    .placeholder {
      width: 140px;
@@ -49,25 +49,23 @@ export const YAML_ONLY_ACTION_TYPES = new Set<keyof typeof ACTION_ICONS>([
 export const ACTION_COLLECTIONS: AutomationElementGroupCollection[] = [
  {
    groups: {
+      device_id: {},
      dynamicGroups: {},
-      event: {},
-      service: {},
-      set_conversation_response: {},
+    },
+  },
+  {
+    titleKey: "ui.panel.config.automation.editor.actions.groups.helpers.label",
+    groups: {
      helpers: {},
    },
  },
  {
-    titleKey: "ui.panel.config.automation.editor.actions.groups.generic.label",
-    generic: true,
+    titleKey: "ui.panel.config.automation.editor.actions.groups.other.label",
    groups: {
-      device_id: {},
-    },
-  },
-  {
-    titleKey:
-      "ui.panel.config.automation.editor.actions.groups.integrations.label",
-    groups: {
-      integrationGroups: {},
+      event: {},
+      service: {},
+      set_conversation_response: {},
+      other: {},
    },
  },
 ] as const;
@@ -21,6 +21,7 @@ export const CONDITION_COLLECTIONS: AutomationElementGroupCollection[] = [
      helpers: {},
      template: {},
      trigger: {},
+      other: {},
    },
  },
  {
@@ -34,9 +35,9 @@ export const CONDITION_COLLECTIONS: AutomationElementGroupCollection[] = [
  },
  {
    titleKey:
-      "ui.panel.config.automation.editor.conditions.groups.integrations.label",
+      "ui.panel.config.automation.editor.conditions.groups.custom_integrations.label",
    groups: {
-      integrationGroups: {},
+      customDynamicGroups: {},
    },
  },
 ] as const;
@@ -2,10 +2,9 @@ import type { HassEntities } from "home-assistant-js-websocket";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import type { LocalizeFunc } from "../../common/translations/localize";
 import type { HaFormSchema } from "../../components/ha-form/types";
-import type { CallWS, HomeAssistant } from "../../types";
+import type { CallWS } from "../../types";
 import type { BaseTrigger } from "../automation";
 import { migrateAutomationTrigger } from "../automation";
-import type { DeviceCompositeSplits } from "./device_registry";
 import type { EntityRegistryEntry } from "../entity/entity_registry";
 import {
  entityRegistryByEntityId,
@@ -159,51 +158,6 @@ export const deviceAutomationsEqual = (
  return true;
 };

-// Decides how a device automation editor should handle its referenced device.
-// A missing device that was replaced by a split device stays editable so the
-// device picker can offer to fix the reference; a genuinely unknown device
-// cannot be edited visually. Returns "loading" while the split map is unknown.
-export const deviceAutomationEditorMode = (
-  hass: HomeAssistant,
-  deviceId: string | undefined,
-  compositeSplits: DeviceCompositeSplits | undefined
-): "editable" | "loading" | "unknown-device" => {
-  if (!deviceId || deviceId in hass.devices) {
-    return "editable";
-  }
-  if (compositeSplits === undefined) {
-    return "loading";
-  }
-  // Only editable if at least one of the split (replacement) devices still
-  // exists; otherwise the reference is stale and cannot be fixed here.
-  const split = compositeSplits[deviceId];
-  return split?.split_ids.some((id) => id in hass.devices)
-    ? "editable"
-    : "unknown-device";
-};
-
-// Like deviceAutomationsEqual, but ignores device_id and entity_id so an
-// automation can be matched to the equivalent one on a different device (for
-// example when a referenced device was replaced by a split device).
-export const deviceAutomationsSimilar = (
-  a: DeviceAutomation,
-  b: DeviceAutomation
-) => {
-  if (typeof a !== typeof b) {
-    return false;
-  }
-  return deviceAutomationIdentifiers
-    .filter((property) => property !== "device_id" && property !== "entity_id")
-    .every((property) => {
-      const inA = property in a;
-      const inB = property in b;
-      if (!inA && !inB) {
-        return true;
-      }
-      return Object.is(a[property], b[property]);
-    });
-};
-
 const compareEntityIdWithEntityRegId = (
  entityRegistry: EntityRegistryEntry[],
  entityIdA?: string,
@@ -1,4 +1,3 @@
-import type { Connection } from "home-assistant-js-websocket";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import type { HomeAssistant } from "../../types";
@@ -55,69 +54,6 @@ export interface DeviceRegistryEntryMutableParams {
  labels?: string[];
 }

-/**
- * Describes how a legacy composite device (that lived on multiple config
- * entries) was split into separate devices. The composite device no longer
- * exists in the registry; references to it (in automations, targets, ...) now
- * need to point at one or more of the split devices instead.
- */
-export interface DeviceCompositeSplit {
-  /** Ids of the devices that replaced the composite device. */
-  split_ids: string[];
-  /** The split device that took over the composite's primary config entry. */
-  primary_id: string | null;
-}
-
-/** Map of removed composite device id -> its split information. */
-export type DeviceCompositeSplits = Record<string, DeviceCompositeSplit>;
-
-// The composite split migration in core is a one-time operation, so the split
-// map is static for the lifetime of the connection. Cache the request per
-// connection so it is fetched once and shared across all pickers, instead of
-// being requested again by every device/target picker.
-const compositeSplitsCache = new WeakMap<
-  Connection,
-  Promise<DeviceCompositeSplits>
->();
-
-export const fetchDeviceCompositeSplits = (
-  hass: Pick<HomeAssistant, "connection" | "callWS">
-): Promise<DeviceCompositeSplits> => {
-  const conn = hass.connection;
-
-  let request = compositeSplitsCache.get(conn);
-  if (!request) {
-    request = hass
-      .callWS<DeviceCompositeSplits>({
-        type: "config/device_registry/list_composite_splits",
-      })
-      .catch((err) => {
-        // Don't cache failures so the next caller retries.
-        compositeSplitsCache.delete(conn);
-        throw err;
-      });
-    compositeSplitsCache.set(conn, request);
-  }
-  return request;
-};
-
-/**
- * Fetch the devices that are linked to the given device because they share at
- * least one connection or identifier. These are separate devices (one per
- * config entry) that represent the same physical hardware, managed by
- * different integrations.
- */
-export const fetchLinkedDevices = (
-  hass: Pick<HomeAssistant, "callWS">,
-  deviceId: string
-): Promise<string[]> =>
-  hass
-    .callWS<{ linked_devices: string[] }>({
-      type: "config/device_registry/list_linked_devices",
-      device_id: deviceId,
-    })
-    .then((result) => result.linked_devices);
-
 export const fallbackDeviceName = (
  hass: HomeAssistant,
  entities: EntityRegistryEntry[] | EntityRegistryDisplayEntry[] | string[]
@@ -1,22 +0,0 @@
-import type { HomeAssistantApi } from "../../types";
-import type { EntityIdFormat } from "../entity_id_format";
-
-export interface EntityRegistrySettings {
-  entity_id_parts: EntityIdFormat | null;
-}
-
-export const fetchEntityRegistrySettings = (
-  api: HomeAssistantApi
-): Promise<EntityRegistrySettings> =>
-  api.callWS<EntityRegistrySettings>({
-    type: "config/entity_registry/settings/get",
-  });
-
-export const updateEntityRegistrySettings = (
-  api: HomeAssistantApi,
-  updates: Partial<EntityRegistrySettings>
-): Promise<EntityRegistrySettings> =>
-  api.callWS<EntityRegistrySettings>({
-    type: "config/entity_registry/settings/update",
-    ...updates,
-  });
@@ -1,12 +0,0 @@
-export type EntityIdPart = "area" | "device" | "entity" | "floor";
-
-export type EntityIdFormat = EntityIdPart[];
-
-export const DEFAULT_ENTITY_ID_FORMAT: EntityIdFormat = [
-  "area",
-  "device",
-  "entity",
-];
-
-export const isDefaultEntityIdFormat = (format: EntityIdFormat): boolean =>
-  JSON.stringify(format) === JSON.stringify(DEFAULT_ENTITY_ID_FORMAT);
@@ -10,7 +10,6 @@ export interface CoreFrontendUserData {
  showEntityIdPicker?: boolean;
  default_panel?: string;
  apps_info_dismissed?: boolean;
-  dashboard_favorite_card_types?: string[];
 }

 export interface SidebarFrontendUserData {
@@ -95,7 +95,7 @@ export interface HassioAddonDetails extends HassioAddonInfo {
  options: Record<string, unknown>;
  privileged: any;
  protected: boolean;
-  rating: number;
+  rating: "1-8";
  schema: HaFormSchema[] | null;
  services_role: string[];
  signed: boolean;
@@ -186,9 +186,6 @@ export interface MediaPlayerItem {
  can_play: boolean;
  can_expand: boolean;
  can_search: boolean;
-  search_media_classes?:
-    | (keyof TranslationDict["ui"]["components"]["media-browser"]["class"])[]
-    | null;
  thumbnail?: string;
  iconPath?: string;
  children?: MediaPlayerItem[];
@@ -24,23 +24,6 @@ export const browseLocalMediaPlayer = (
    media_content_id: mediaContentId,
  });

-export interface SearchMediaResult {
-  result: MediaPlayerItem[];
-}
-
-export const searchMedia = (
-  hass: HomeAssistant,
-  mediaContentId: string | undefined,
-  searchQuery: string,
-  mediaFilterClasses?: string[]
-): Promise<SearchMediaResult> =>
-  hass.callWS<SearchMediaResult>({
-    type: "media_source/search_media",
-    media_content_id: mediaContentId,
-    search_query: searchQuery,
-    media_filter_classes: mediaFilterClasses,
-  });
-
 export const MANUAL_MEDIA_SOURCE_PREFIX = "__MANUAL_ENTRY__";

 export const isManualMediaSourceContentId = (mediaContentId: string) =>
@@ -26,7 +26,6 @@ export interface StoreAddonDetails extends StoreAddon {
  apparmor: boolean;
  arch: SupervisorArch[];
  auth_api: boolean;
-  changelog: boolean;
  detached: boolean;
  docker_api: boolean;
  documentation: boolean;
@@ -35,6 +35,7 @@ export const TRIGGER_COLLECTIONS: AutomationElementGroupCollection[] = [
      webhook: {},
      persistent_notification: {},
      helpers: {},
+      other: {},
    },
  },
  {
@@ -47,9 +48,9 @@ export const TRIGGER_COLLECTIONS: AutomationElementGroupCollection[] = [
  },
  {
    titleKey:
-      "ui.panel.config.automation.editor.triggers.groups.integrations.label",
+      "ui.panel.config.automation.editor.triggers.groups.custom_integrations.label",
    groups: {
-      integrationGroups: {},
+      customDynamicGroups: {},
    },
  },
 ] as const;
@@ -314,11 +314,6 @@ export interface ZWaveJSSetConfigParamResult {
  error?: string;
 }

-export interface ZwaveJSNodeConfigParameterUpdate {
-  id: string;
-  value: number | null;
-}
-
 export interface ZWaveJSDataCollectionStatus {
  enabled: boolean;
  opted_in: boolean;
@@ -737,16 +732,6 @@ 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,
@@ -481,17 +481,6 @@ export const provideHass = (
        ? response[1](hass(), method, path, parameters)
        : Promise.reject(`API Mock for ${path} is not implemented`);
    },
-    // Mocks return a plain body; wrap it so callers can stream it like a fetch
-    // Response. Callbacks may return a Response themselves to set headers.
-    async callApiRaw(method, path, parameters, headers) {
-      const result = await hassObj.callApi<any>(
-        method,
-        path,
-        parameters,
-        headers
-      );
-      return result instanceof Response ? result : new Response(result);
-    },
    hassUrl: (path?) => path,
    fetchWithAuth: () => Promise.reject("Not implemented"),
    sendWS: (msg) => hassObj.connection.sendMessage(msg),
@@ -20,13 +20,27 @@
    <meta name="color-scheme" content="dark light" />
    <%= renderTemplate("_style_base.html.template") %>
    <style>
+      @keyframes fade-out {
+        from {
+          opacity: 1;
+        }
+        to {
+          opacity: 0;
+        }
+      }
+      ::view-transition-group(launch-screen) {
+        animation-duration: var(--ha-animation-duration-slow, 350ms);
+        animation-timing-function: ease-out;
+      }
+      ::view-transition-old(launch-screen) {
+        animation: fade-out var(--ha-animation-duration-slow, 350ms) ease-out;
+      }
      html {
        background-color: var(--primary-background-color, #fafafa);
        color: var(--primary-text-color, #212121);
        height: 100vh;
      }
      #ha-launch-screen {
-        font-family: ui-sans-serif, system-ui, sans-serif;
        position: fixed;
        top: 0;
        left: 0;
@@ -38,36 +52,16 @@
        flex-direction: column;
        justify-content: center;
        align-items: center;
-        user-select: none;
-        -webkit-user-select: none;
+        view-transition-name: launch-screen;
        background-color: var(--primary-background-color, #fafafa);
        z-index: 100;
-        transition: opacity var(--ha-animation-duration-normal, 250ms) ease-out;
      }
      #ha-launch-screen.removing {
        opacity: 0;
      }
-      @keyframes launch-lockup-in {
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
-      }
-      #ha-launch-screen .ha-lockup {
-        display: flex;
-        align-items: center;
+      #ha-launch-screen svg {
+        width: 112px;
        flex-shrink: 0;
-        animation: launch-lockup-in var(--ha-animation-duration-normal, 250ms) ease-out both;
-      }
-      #ha-launch-screen-info-box > *,
-      #ha-launch-screen .ohf-logo {
-        animation: launch-lockup-in var(--ha-animation-duration-normal, 250ms) ease-out both;
-      }
-      #ha-launch-screen .ha-logo {
-        width: 96px;
-        height: 96px;
      }
      #ha-launch-screen .ha-launch-screen-spacer-top {
        flex: 1;
@@ -76,29 +70,15 @@
      }
      #ha-launch-screen .ha-launch-screen-spacer-bottom {
        flex: 1;
-        padding-top: 16px;
+        padding-top: 48px;
      }
      .ohf-logo {
        margin: max(var(--safe-area-inset-bottom, 0px), 48px) 0;
        display: flex;
        flex-direction: column;
        align-items: center;
-        gap: 4px;
        opacity: .66;
      }
-      .ohf-logo span {
-        font-size: 12px;
-        line-height: 12px;
-        text-transform: uppercase;
-      }
-      .ohf-logo picture {
-        display: flex;
-      }
-      .ohf-logo img {
-        width: 237px;
-        aspect-ratio: 237 / 24;
-        height: auto;
-      }
      @media (prefers-color-scheme: dark) {
        html {
          background-color: var(--primary-background-color, #111111);
@@ -108,18 +88,8 @@
        body #ha-launch-screen {
          background-color: var(--primary-background-color, #111111);
        }
-      }
-      @media (max-height: 560px) {
-        /* body selector to avoid minification causing bad jinja2 */
-        body #ha-launch-screen .ha-launch-screen-spacer-top {
-          margin-top: 24px;
-          padding-top: 24px;
-        }
-        body #ha-launch-screen .ha-launch-screen-spacer-bottom {
-          padding-top: 16px;
-        }
        .ohf-logo {
-          margin-block: 24px;
+          filter: invert(1);
        }
      }
    </style>
@@ -127,16 +97,13 @@
  <body>
    <div id="ha-launch-screen">
      <div class="ha-launch-screen-spacer-top"></div>
-      <div class="ha-lockup">
-        <img class="ha-logo" src="/static/images/home-assistant-logo-loading.svg" alt="Home Assistant">
-      </div>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+        <path fill="#18BCF2" d="M240 224.762a15 15 0 0 1-15 15H15a15 15 0 0 1-15-15v-90c0-8.25 4.77-19.769 10.61-25.609l98.78-98.7805c5.83-5.83 15.38-5.83 21.21 0l98.79 98.7895c5.83 5.83 10.61 17.36 10.61 25.61v90-.01Z"/>
+        <path fill="#F2F4F9" d="m107.27 239.762-40.63-40.63c-2.09.72-4.32 1.13-6.64 1.13-11.3 0-20.5-9.2-20.5-20.5s9.2-20.5 20.5-20.5 20.5 9.2 20.5 20.5c0 2.33-.41 4.56-1.13 6.65l31.63 31.63v-115.88c-6.8-3.3395-11.5-10.3195-11.5-18.3895 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5c0 8.07-4.7 15.05-11.5 18.3895v81.27l31.46-31.46c-.62-1.96-.96-4.04-.96-6.2 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5-9.2 20.5-20.5 20.5c-2.5 0-4.88-.47-7.09-1.29L129 208.892v30.88z"/>
+      </svg>
      <div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer-bottom"></div>
      <div class="ohf-logo">
-        <span id="ha-launch-screen-attribution">A project from the</span>
-        <picture>
-          <source media="(prefers-color-scheme: dark)" srcset="/static/images/open-home-foundation-on-dark.svg">
-          <img src="/static/images/open-home-foundation-on-light.svg" alt="Open Home Foundation" width="237" height="24">
-        </picture>
+        <img src="/static/images/ohf-badge.svg" alt="Home Assistant is a project by the Open Home Foundation" height="46">
      </div>
    </div>
    <home-assistant></home-assistant>
@@ -1,92 +1,91 @@
-import { css, html, LitElement, nothing } from "lit";
+import type { PropertyValues } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import type { LocalizeFunc } from "../common/translations/localize";
+import "../components/ha-spinner";
 import "../components/ha-button";

@customElement("ha-init-page")
-export class HaInitPage extends LitElement {
+class HaInitPage extends LitElement {
  @property({ type: Boolean }) public error = false;

  @property({ type: Boolean }) public migration = false;

-  @property({ attribute: false }) public localize?: LocalizeFunc;
-
  @state() private _retryInSeconds = 60;

+  private _showProgressIndicatorTimeout?: number;
+
  private _retryInterval?: number;

  protected render() {
    return this.error
      ? html`
-          <p>
-            ${
-              this.localize?.("ui.init.error.title") ||
-              "Unable to connect to Home Assistant."
-            }
-          </p>
+          <p>Unable to connect to Home Assistant.</p>
          <p class="retry-text">
-            ${
-              this.localize?.("ui.init.error.retrying", {
-                seconds: this._retryInSeconds,
-              }) || `Retrying in ${this._retryInSeconds} seconds...`
-            }
+            Retrying in ${this._retryInSeconds} seconds...
          </p>
          <ha-button size="s" appearance="plain" @click=${this._retry}
-            >${
-              this.localize?.("ui.init.error.retry_now") || "Retry now"
-            }</ha-button
+            >Retry now</ha-button
          >
          ${
            location.host.includes("ui.nabu.casa")
-              ? html`<p>
-                  ${
-                    this.localize?.("ui.init.error.nabu_casa", {
-                      account_link: html`<a href="https://account.nabucasa.com/"
-                        >${
-                          this.localize?.("ui.init.error.nabu_casa_account") ||
-                          "Nabu Casa account page"
-                        }</a
-                      >`,
-                    }) ||
-                    html`It is possible that you are seeing this screen because
-                      your Home Assistant is not currently connected. You can
-                      ask it to come online from your
-                      <a href="https://account.nabucasa.com/"
-                        >Nabu Casa account page</a
-                      >.`
-                  }
-                </p>`
-              : nothing
+              ? html`
+                  <p>
+                    It is possible that you are seeing this screen because your
+                    Home Assistant is not currently connected. You can ask it to
+                    come online from your
+                    <a href="https://account.nabucasa.com/"
+                      >Nabu Casa account page</a
+                    >.
+                  </p>
+                `
+              : ""
          }
        `
-      : html`<p class=${classMap({ "loading-text": !this.migration })}>
-          ${
-            this.migration
-              ? html`<span class="migration-text"
-                  >${
-                    this.localize?.("ui.init.migration") ||
-                    "Database upgrade is in progress, Home Assistant will not start until the upgrade is completed.\n\nThe upgrade may need a long time to complete, please be patient."
-                  }</span
-                >`
-              : this.localize?.("ui.init.loading") || "Loading..."
-          }
-        </p>`;
+      : html`
+          <div id="progress-indicator-wrapper">
+            <ha-spinner></ha-spinner>
+          </div>
+          <div id="loading-text">
+            ${
+              this.migration
+                ? html`
+                    Database upgrade is in progress, Home Assistant will not
+                    start until the upgrade is completed.
+                    <br /><br />
+                    The upgrade may need a long time to complete, please be
+                    patient.
+                  `
+                : "Loading data"
+            }
+          </div>
+        `;
  }

  disconnectedCallback() {
    super.disconnectedCallback();
+    if (this._showProgressIndicatorTimeout) {
+      clearTimeout(this._showProgressIndicatorTimeout);
+    }
    if (this._retryInterval) {
      clearInterval(this._retryInterval);
    }
  }

+  protected willUpdate(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has("error") && this.error) {
+      import("../components/ha-button");
+    }
+  }
+
  protected firstUpdated() {
+    this._showProgressIndicatorTimeout = window.setTimeout(() => {
+      import("../components/ha-spinner");
+    }, 5000);
+
    this._retryInterval = window.setInterval(() => {
-      if (this._retryInSeconds <= 1) {
+      const remainingSeconds = this._retryInSeconds--;
+      if (remainingSeconds <= 0) {
        this._retry();
-      } else {
-        this._retryInSeconds -= 1;
      }
    }, 1000);
  }
@@ -105,25 +104,24 @@ export class HaInitPage extends LitElement {
      flex-direction: column;
      align-items: center;
    }
+    #progress-indicator-wrapper {
+      display: flex;
+      align-items: center;
+      margin: 25px 0;
+      height: 50px;
+    }
    a {
      color: var(--primary-color);
    }
    .retry-text {
      margin-top: 0;
    }
-    p {
+    p,
+    #loading-text {
      max-width: 350px;
-      margin: var(--ha-space-3, 12px) var(--ha-space-4, 16px);
      color: var(--primary-text-color);
-      font-size: var(--ha-font-size-m, 14px);
      text-align: center;
    }
-    .migration-text {
-      white-space: pre-line;
-    }
-    .loading-text {
-      opacity: 0.66;
-    }
  `;
 }

@@ -5,7 +5,6 @@ import memoizeOne from "memoize-one";
 import { navigate } from "../common/navigate";
 import { computeRouteTail } from "../common/url/route";
 import type { Route } from "../types";
-import { PanelReady } from "./panel-ready";

 const extractPage = (path: string, defaultPage: string) => {
  if (path === "") {
@@ -23,7 +22,6 @@ export interface RouteOptions {
  // Function to load the page.
  load?: () => Promise<unknown>;
  cache?: boolean;
-  waitForReady?: boolean;
 }

 export interface RouterOptions {
@@ -55,8 +53,6 @@ export class HassRouterPage extends ReactiveElement {

  private _currentLoadProm?: Promise<void>;

-  private _panelReady = new PanelReady();
-
  private _cache = {};

  private _initialLoadDone = false;
@@ -184,10 +180,6 @@ export class HassRouterPage extends ReactiveElement {
    // If we don't show loading screen, just show the panel.
    // It will be automatically upgraded when loading done.
    if (!routerOptions.showLoading) {
-      const loadComplete = () => {
-        this._currentLoadProm = undefined;
-      };
-      this._currentLoadProm = loadProm.then(loadComplete, loadComplete);
      this._createPanel(routerOptions, newPage, routeOptions);
      return;
    }
@@ -295,15 +287,7 @@ export class HassRouterPage extends ReactiveElement {
   * Promise that resolves when the page has rendered.
   */
  protected get pageRendered(): Promise<void> {
-    return this.updateComplete
-      .then(() => this._currentLoadProm)
-      .then(() => {
-        const page = this.lastElementChild;
-        return Promise.all([
-          this._panelReady.ready,
-          page instanceof HassRouterPage ? page.pageRendered : undefined,
-        ]).then(() => undefined);
-      });
+    return this.updateComplete.then(() => this._currentLoadProm);
  }

  protected createElement(tag: string) {
@@ -328,7 +312,6 @@ export class HassRouterPage extends ReactiveElement {
    }

    const panelEl = this._cache[page] || this.createElement(routeOptions.tag);
-    this._panelReady.track(panelEl, routeOptions.waitForReady);
    this.updatePageEl(panelEl);
    this.appendChild(panelEl);

@@ -4,7 +4,6 @@ import { customElement, eventOptions, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import { goBack } from "../common/navigate";
-import { sanitizeNavigationPath } from "../common/url/sanitize-navigation-path";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import { haStyleScrollbar } from "../resources/styles";
@@ -30,18 +29,16 @@ class HassSubpage extends LitElement {
  @restoreScroll(".content") private _savedScrollPos?: number;

  protected render(): TemplateResult {
-    const backPath = sanitizeNavigationPath(this.backPath);
-
    return html`
      <div class="toolbar ${classMap({ narrow: this.narrow })}">
        <div class="toolbar-content">
          ${
            this.mainPage || history.state?.root
              ? html`<ha-menu-button></ha-menu-button>`
-              : backPath
+              : this.backPath
                ? html`
                    <ha-icon-button-arrow-prev
-                      href=${backPath}
+                      href=${this.backPath}
                    ></ha-icon-button-arrow-prev>
                  `
                : html`
@@ -15,7 +15,6 @@ import { restoreScroll } from "../common/decorators/restore-scroll";
 import { isNavigationClick } from "../common/dom/is-navigation-click";
 import { goBack, navigate } from "../common/navigate";
 import type { LocalizeFunc } from "../common/translations/localize";
-import { sanitizeNavigationPath } from "../common/url/sanitize-navigation-path";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import "../components/ha-svg-icon";
@@ -165,19 +164,17 @@ export class HassTabsSubpage extends LitElement {
      this._narrow,
      this.localizeFunc || this.hass.localize
    );
-    const backPath = sanitizeNavigationPath(this.backPath);
-
    return html`
      <div class="toolbar ${classMap({ narrow: this._narrow })}">
        <slot name="toolbar">
          <div class="toolbar-content">
            ${
-              this.mainPage || (!backPath && history.state?.root)
+              this.mainPage || (!this.backPath && history.state?.root)
                ? html`<ha-menu-button></ha-menu-button>`
-                : backPath
+                : this.backPath
                  ? html`
                      <ha-icon-button-arrow-prev
-                        .href=${backPath}
+                        .href=${this.backPath}
                      ></ha-icon-button-arrow-prev>
                    `
                  : html`
@@ -5,7 +5,6 @@ import { customElement, state } from "lit/decorators";
 import { storage } from "../common/decorators/storage";
 import { isNavigationClick } from "../common/dom/is-navigation-click";
 import { navigate } from "../common/navigate";
-import type { LocalizeFunc } from "../common/translations/localize";
 import { fetchHttpConfig } from "../data/http";
 import type { HttpConfigState } from "../data/http";
 import type { WindowWithPreloads } from "../data/preloads";
@@ -17,7 +16,10 @@ import { HassElement } from "../state/hass-element";
 import QuickBarMixin from "../state/quick-bar-mixin";
 import type { HomeAssistant, Route } from "../types";
 import { storeState } from "../util/ha-pref-storage";
-import { renderLaunchScreenContent } from "../util/launch-screen";
+import {
+  removeLaunchScreen,
+  renderLaunchScreenInfoBox,
+} from "../util/launch-screen";
 import { checkOnboardingSurveyToast } from "../util/onboarding-survey";
 import {
  registerServiceWorker,
@@ -58,8 +60,6 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {

  private _httpPendingDialogOpen = false;

-  private _initError = false;
-
  private _onboardingSurveyChecked = false;

  private _panelUrl: string;
@@ -133,9 +133,13 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
    ) {
      this.render = this.renderHass;
      this.update = super.update;
-      // partial-panel-resolver removes the launch screen after the first panel
-      // is ready. Native apps request instant removal because their own splash
-      // screen covers the frontend until frontend/loaded is sent.
+      // Apps with a native splash screen keep covering the frontend until
+      // frontend/loaded, so the launch screen stays up (invisibly) until the
+      // first panel has rendered and partial-panel-resolver removes it.
+      if (!this.hass.auth.external?.config.hasSplashscreen) {
+        removeLaunchScreen();
+      }
+      this.hass.auth.external?.fireMessage({ type: "frontend/loaded" });
    }
    super.update(changedProps);
  }
@@ -184,11 +188,6 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
    if (this.render !== this.renderHass) {
      this._renderInitInfo(false);
    }
-    this.addEventListener("translations-updated", () => {
-      if (this.render !== this.renderHass) {
-        this._renderInitInfo(this._initError);
-      }
-    });
  }

  protected updated(changedProps: PropertyValues): void {
@@ -316,7 +315,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {

  protected async _initializeHass() {
    try {
-      let result: Awaited<Window["hassConnection"]>;
+      let result;

      if (window.hassConnection) {
        result = await window.hassConnection;
@@ -389,25 +388,11 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
  }

  private _renderInitInfo(error: boolean) {
-    this._initError = error;
-    renderLaunchScreenContent(
+    renderLaunchScreenInfoBox(
      html`<ha-init-page
        .error=${error}
        .migration=${this._databaseMigration}
-        .localize=${this._launchScreenLocalize}
-      ></ha-init-page>`,
-      this._launchScreenAttribution
-    );
-  }
-
-  private get _launchScreenLocalize(): LocalizeFunc | undefined {
-    return (this.hass ?? this._pendingHass).localize;
-  }
-
-  private get _launchScreenAttribution() {
-    return (
-      this._launchScreenLocalize?.("ui.init.project_from") ||
-      "A project from the"
+      ></ha-init-page>`
    );
  }
 }
@@ -1,66 +0,0 @@
-import { ContextProvider, createContext } from "@lit/context";
-import type { ReactiveController, ReactiveControllerHost } from "lit";
-import { ReactiveElement } from "lit";
-import { fireEvent } from "../common/dom/fire_event";
-
-declare global {
-  interface HASSDomEvents {
-    "hass-panel-ready": undefined;
-  }
-}
-
-export const panelIsReady = async (element: HTMLElement) => {
-  if (element instanceof ReactiveElement) {
-    // Ensure pending Lit changes are rendered before revealing the panel.
-    await element.updateComplete;
-  }
-  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;
-
-  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() {
-    Promise.allSettled(this._promises).then(() => {
-      this._resolveReady?.();
-      return panelIsReady(this._host);
-    });
-    this._host.removeController(this);
-  }
-}
-
-export class PanelReady {
-  public ready?: Promise<void>;
-
-  public track(element: HTMLElement, waitForReady = false) {
-    this.ready = waitForReady
-      ? new Promise((resolve) => {
-          element.addEventListener("hass-panel-ready", () => resolve(), {
-            once: true,
-          });
-        })
-      : undefined;
-  }
-}
@@ -8,7 +8,6 @@ import type { PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { deepActiveElement } from "../common/dom/deep-active-element";
 import { deepEqual } from "../common/util/deep-equal";
-import { promiseTimeout } from "../common/util/promise-timeout";
 import { narrowViewportContext } from "../data/context";
 import { getDefaultPanel } from "../data/panel";
 import type { CustomPanelInfo } from "../data/panel_custom";
@@ -18,7 +17,6 @@ import type { RouteOptions, RouterOptions } from "./hass-router-page";
 import { HassRouterPage } from "./hass-router-page";

 const CACHE_URL_PATHS = ["lovelace", "home", "config"];
-const PANEL_READY_TIMEOUT = 2000;
 const COMPONENTS = {
  app: () => import("../panels/app/ha-panel-app"),
  energy: () => import("../panels/energy/ha-panel-energy"),
@@ -221,17 +219,9 @@ class PartialPanelResolver extends HassRouterPage {
      )
    ) {
      await this.rebuild();
-      await promiseTimeout(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.
-      if (
-        removeLaunchScreen(!!this.hass.auth.external?.config.hasSplashscreen)
-      ) {
-        this.hass.auth.external?.fireMessage({ type: "frontend/loaded" });
-      }
+      await this.pageRendered;
+      removeLaunchScreen(!!this.hass.auth.external?.config.hasSplashscreen);
+      this.hass.auth.external?.fireMessage({ type: "frontend/loaded" });
    }
  }
 }
@@ -225,33 +225,20 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
                        "ui.panel.config.apps.dashboard.current_version",
                        { version: this._currentAddon.version }
                      )}
-                      ${
-                        this._currentAddon.changelog
-                          ? html`<div
-                              class="changelog"
-                              @click=${this._openChangelog}
-                            >
-                              (<span class="changelog-link"
-                                >${this.i18n.localize(
-                                  "ui.panel.config.apps.dashboard.changelog"
-                                )}</span
-                              >)
-                            </div>`
-                          : nothing
-                      }
+                      <div class="changelog" @click=${this._openChangelog}>
+                        (<span class="changelog-link"
+                          >${this.i18n.localize(
+                            "ui.panel.config.apps.dashboard.changelog"
+                          )}</span
+                        >)
+                      </div>
                    `
                  : html`${this._currentAddon.version_latest}
-                    ${
-                      this._currentAddon.changelog
-                        ? html`<span
-                            class="changelog-link"
-                            @click=${this._openChangelog}
-                            >${this.i18n.localize(
-                              "ui.panel.config.apps.dashboard.changelog"
-                            )}</span
-                          >`
-                        : nothing
-                    }`
+                      <span class="changelog-link" @click=${this._openChangelog}
+                        >${this.i18n.localize(
+                          "ui.panel.config.apps.dashboard.changelog"
+                        )}</span
+                      >`
              }
            </div>
          </div>
@@ -13,16 +13,11 @@ import type {
  DeviceCapabilities,
 } from "../../../../../data/device/device_automation";
 import {
-  deviceAutomationEditorMode,
  deviceAutomationsEqual,
  fetchDeviceActionCapabilities,
  localizeExtraFieldsComputeHelperCallback,
  localizeExtraFieldsComputeLabelCallback,
 } from "../../../../../data/device/device_automation";
-import {
-  fetchDeviceCompositeSplits,
-  type DeviceCompositeSplits,
-} from "../../../../../data/device/device_registry";
 import type { EntityRegistryEntry } from "../../../../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../../../../types";

@@ -38,10 +33,6 @@ export class HaDeviceAction extends LitElement {

  @state() private _capabilities?: DeviceCapabilities;

-  @state() private _compositeSplits?: DeviceCompositeSplits;
-
-  private _loadingCompositeSplits = false;
-
  @state()
  @consume({ context: fullEntitiesContext, subscribe: true })
  _entityReg: EntityRegistryEntry[] = [];
@@ -68,19 +59,14 @@ export class HaDeviceAction extends LitElement {
    }
  );

-  public shouldUpdate(_changedProperties: PropertyValues<this>) {
-    const mode = deviceAutomationEditorMode(
-      this.hass,
-      this.action.device_id,
-      this._compositeSplits
-    );
-    if (mode === "loading") {
-      // The device is missing; wait for the composite split map before deciding
-      // whether it is a replaced device (editable) or genuinely unknown (YAML).
-      this._loadCompositeSplits();
-      return false;
+  public shouldUpdate(changedProperties: PropertyValues<this>) {
+    if (!changedProperties.has("action")) {
+      return true;
    }
-    if (mode === "unknown-device") {
+    if (
+      this.action.device_id &&
+      !(this.action.device_id in this.hass.devices)
+    ) {
      fireEvent(
        this,
        "ui-mode-not-available",
@@ -95,20 +81,6 @@ export class HaDeviceAction extends LitElement {
    return true;
  }

-  private async _loadCompositeSplits() {
-    if (this._loadingCompositeSplits) {
-      return;
-    }
-    this._loadingCompositeSplits = true;
-    try {
-      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
-    } catch (_err) {
-      this._compositeSplits = {};
-    } finally {
-      this._loadingCompositeSplits = false;
-    }
-  }
-
  protected render() {
    const deviceId = this._deviceId || this.action.device_id;

@@ -183,7 +183,12 @@ const ENTITY_DOMAINS_OTHER = new Set([

 const ENTITY_DOMAINS_MAIN = new Set(["notify"]);

-const DYNAMIC_KEYWORDS = ["dynamicGroups", "helpers", "integrationGroups"];
+const DYNAMIC_KEYWORDS = [
+  "dynamicGroups",
+  "helpers",
+  "other",
+  "customDynamicGroups",
+];

 const DYNAMIC_TO_GENERIC = new Set([`${DYNAMIC_PREFIX}event`]);

@@ -192,13 +197,7 @@ const DYNAMIC_TO_GENERIC = new Set([`${DYNAMIC_PREFIX}event`]);
 // drills into its items, like selecting the matching group in the "by type" tab.
 const TIME_LOCATION_GROUPS = ["time", "sun"];

-type CollectionGroupType = "helper" | "dynamic" | "integration";
-
-interface DomainClassificationOptions {
-  type: AddAutomationElementDialogParams["type"];
-  usedDomains?: Set<string>;
-  activeSystemDomains?: Set<string>;
-}
+type CollectionGroupType = "helper" | "other" | "dynamic" | "customDynamic";

@customElement("add-automation-element-dialog")
 class DialogAddAutomationElement
@@ -502,9 +501,7 @@ class DialogAddAutomationElement
  );

  private get _systemDomains() {
-    // System domains are derived from trigger/condition descriptions, so
-    // they don't apply to actions.
-    if (!this._manifests || this._params?.type === "action") {
+    if (!this._manifests) {
      return undefined;
    }
    const descriptions =
@@ -1032,6 +1029,7 @@ class DialogAddAutomationElement
                this._params!.type,
                this._selectedGroup,
                this._selectedCollectionIndex ?? 0,
+                this._domains,
                this.hass.localize,
                this.hass.services,
                this._manifests,
@@ -1125,13 +1123,6 @@ class DialogAddAutomationElement

      const exclusiveDomains = this._getExclusiveDomains(type);

-      const domainList =
-        type === "trigger"
-          ? Object.keys(triggerDescriptions ?? {}).map(getTriggerDomain)
-          : type === "condition"
-            ? Object.keys(conditionDescriptions ?? {}).map(getConditionDomain)
-            : Object.keys(services ?? {});
-
      collections.forEach((collection, index) => {
        let collectionGroups = Object.entries(collection.groups);
        const groups: AddAutomationElementListItem[] = [];
@@ -1143,23 +1134,70 @@ class DialogAddAutomationElement
        if (collection.groups.helpers) {
          types.push("helper");
        }
-        if (collection.groups.integrationGroups) {
-          types.push("integration");
+        if (collection.groups.other) {
+          types.push("other");
+        }
+        if (collection.groups.customDynamicGroups) {
+          types.push("customDynamic");
        }

-        if (types.length) {
+        if (
+          type === "trigger" &&
+          Object.keys(collection.groups).some((item) =>
+            DYNAMIC_KEYWORDS.includes(item)
+          )
+        ) {
          groups.push(
-            ...this._dynamicDomainGroups(
+            ...this._triggerGroups(
              localize,
-              domainList,
+              triggerDescriptions,
              manifests,
+              domains,
              types,
-              {
-                type,
-                usedDomains: domains,
-                activeSystemDomains: this._systemDomains?.active,
-                exclusiveDomains,
-              }
+              exclusiveDomains
+            )
+          );
+
+          collectionGroups = collectionGroups.filter(
+            ([key]) => !DYNAMIC_KEYWORDS.includes(key)
+          );
+        } else if (
+          type === "condition" &&
+          Object.keys(collection.groups).some((item) =>
+            DYNAMIC_KEYWORDS.includes(item)
+          )
+        ) {
+          groups.push(
+            ...this._conditionGroups(
+              localize,
+              conditionDescriptions,
+              manifests,
+              domains,
+              types,
+              exclusiveDomains
+            )
+          );
+
+          collectionGroups = collectionGroups.filter(
+            ([key]) => !DYNAMIC_KEYWORDS.includes(key)
+          );
+        } else if (
+          type === "action" &&
+          Object.keys(collection.groups).some((item) =>
+            DYNAMIC_KEYWORDS.includes(item)
+          )
+        ) {
+          groups.push(
+            ...this._serviceGroups(
+              localize,
+              services,
+              manifests,
+              domains,
+              collection.groups.dynamicGroups
+                ? undefined
+                : collection.groups.helpers
+                  ? "helper"
+                  : "other"
            )
          );

@@ -1251,6 +1289,7 @@ class DialogAddAutomationElement
      type: AddAutomationElementDialogParams["type"],
      group: string,
      collectionIndex: number,
+      domains: Set<string> | undefined,
      localize: LocalizeFunc,
      services: HomeAssistant["services"],
      manifests?: DomainManifestLookup,
@@ -1300,69 +1339,144 @@ class DialogAddAutomationElement
        }
      }

+      if (type === "action") {
+        if (!this._selectedGroup) {
+          result.unshift(
+            ...this._serviceGroups(
+              localize,
+              services,
+              manifests,
+              domains,
+              undefined
+            )
+          );
+        } else if (this._selectedGroup === "helpers") {
+          result.unshift(
+            ...this._serviceGroups(
+              localize,
+              services,
+              manifests,
+              domains,
+              "helper"
+            )
+          );
+        } else if (this._selectedGroup === "other") {
+          result.unshift(
+            ...this._serviceGroups(
+              localize,
+              services,
+              manifests,
+              domains,
+              "other"
+            )
+          );
+        }
+      }
+
      return result.sort((a, b) =>
        stringCompare(a.name, b.name, this.hass.locale.language)
      );
    }
  );

-  private _classifyDomain(
+  private _serviceGroups = (
+    localize: LocalizeFunc,
+    services: HomeAssistant["services"],
+    manifests: DomainManifestLookup | undefined,
+    domains: Set<string> | undefined,
+    type: "helper" | "other" | undefined
+  ): AddAutomationElementListItem[] => {
+    if (!services || !manifests) {
+      return [];
+    }
+    const result: AddAutomationElementListItem[] = [];
+    Object.keys(services).forEach((domain) => {
+      const manifest = manifests[domain];
+      const domainUsed = !domains ? true : domains.has(domain);
+      if (
+        (type === undefined &&
+          (ENTITY_DOMAINS_MAIN.has(domain) ||
+            (manifest?.integration_type === "entity" &&
+              domainUsed &&
+              !ENTITY_DOMAINS_OTHER.has(domain)))) ||
+        (type === "helper" && manifest?.integration_type === "helper") ||
+        (type === "other" &&
+          !ENTITY_DOMAINS_MAIN.has(domain) &&
+          (ENTITY_DOMAINS_OTHER.has(domain) ||
+            (!domainUsed && manifest?.integration_type === "entity") ||
+            !["helper", "entity"].includes(manifest?.integration_type || "")))
+      ) {
+        result.push({
+          icon: html`
+            <ha-domain-icon .domain=${domain} brand-fallback></ha-domain-icon>
+          `,
+          key: `${DYNAMIC_PREFIX}${domain}`,
+          name: domainToName(localize, domain, manifest),
+          description: "",
+        });
+      }
+    });
+    return result.sort((a, b) =>
+      stringCompare(a.name, b.name, this.hass.locale.language)
+    );
+  };
+
+  private _domainMatchesGroupType(
    domain: string,
    manifest: DomainManifestLookup[string] | undefined,
-    options: DomainClassificationOptions
-  ): CollectionGroupType | undefined {
-    const integrationType = manifest?.integration_type;
+    domainUsed: boolean,
+    types: CollectionGroupType[]
+  ): boolean {
+    const matchDynamic =
+      ((types.includes("dynamic") && (!manifest || manifest.is_built_in)) ||
+        (types.includes("customDynamic") &&
+          !(manifest?.is_built_in ?? true))) &&
+      (ENTITY_DOMAINS_MAIN.has(domain) ||
+        (manifest?.integration_type === "entity" &&
+          !ENTITY_DOMAINS_OTHER.has(domain) &&
+          (domainUsed || (this._systemDomains?.active.has(domain) ?? false))) ||
+        (manifest?.integration_type === "system" &&
+          (this._systemDomains?.active.has(domain) ?? false)));

-    if (integrationType === "helper") {
-      return "helper";
-    }
+    const matchHelper =
+      types.includes("helper") && manifest?.integration_type === "helper";

-    if (ENTITY_DOMAINS_MAIN.has(domain) || integrationType === "entity") {
-      // Core entity domains. Actions always list them; triggers/conditions
-      // only when matching entities exist or a system domain covers them.
-      if (
-        options.type === "action" ||
-        !options.usedDomains ||
-        options.usedDomains.has(domain) ||
-        ENTITY_DOMAINS_OTHER.has(domain) ||
-        (options.activeSystemDomains?.has(domain) ?? false)
-      ) {
-        return "dynamic";
-      }
-      return undefined;
-    }
+    const matchOther =
+      types.includes("other") &&
+      !ENTITY_DOMAINS_MAIN.has(domain) &&
+      (ENTITY_DOMAINS_OTHER.has(domain) ||
+        !["helper", "entity", "system"].includes(
+          manifest?.integration_type || ""
+        ));

-    if (integrationType === "system" && options.type !== "action") {
-      return options.activeSystemDomains?.has(domain) ? "dynamic" : undefined;
-    }
-
-    // Integrations that bring their own elements, built-in (like Apple TV,
-    // FFmpeg) and custom (like HACS) alike.
-    return "integration";
+    return matchDynamic || matchHelper || matchOther;
  }

-  private _dynamicDomainGroups = (
+  private _triggerGroups = (
    localize: LocalizeFunc,
-    domains: string[],
+    triggers: TriggerDescriptions,
    manifests: DomainManifestLookup | undefined,
+    domains: Set<string> | undefined,
    types: CollectionGroupType[],
-    options: DomainClassificationOptions & { exclusiveDomains?: Set<string> }
+    exclusiveDomains: Set<string>
  ): AddAutomationElementListItem[] => {
-    if (!manifests) {
+    if (!triggers || !manifests) {
      return [];
    }
    const result: AddAutomationElementListItem[] = [];
    const addedDomains = new Set<string>();
-    domains.forEach((domain) => {
-      if (addedDomains.has(domain) || options.exclusiveDomains?.has(domain)) {
+    Object.keys(triggers).forEach((trigger) => {
+      const domain = getTriggerDomain(trigger);
+
+      if (addedDomains.has(domain) || exclusiveDomains.has(domain)) {
        return;
      }
      addedDomains.add(domain);

      const manifest = manifests[domain];
-      const groupType = this._classifyDomain(domain, manifest, options);
+      const domainUsed = !domains ? true : domains.has(domain);

-      if (groupType && types.includes(groupType)) {
+      if (this._domainMatchesGroupType(domain, manifest, domainUsed, types)) {
        result.push({
          icon: html`
            <ha-domain-icon .domain=${domain} brand-fallback></ha-domain-icon>
@@ -1411,6 +1525,46 @@ class DialogAddAutomationElement
    }
  );

+  private _conditionGroups = (
+    localize: LocalizeFunc,
+    conditions: ConditionDescriptions,
+    manifests: DomainManifestLookup | undefined,
+    domains: Set<string> | undefined,
+    types: CollectionGroupType[],
+    exclusiveDomains: Set<string>
+  ): AddAutomationElementListItem[] => {
+    if (!conditions || !manifests) {
+      return [];
+    }
+    const result: AddAutomationElementListItem[] = [];
+    const addedDomains = new Set<string>();
+    Object.keys(conditions).forEach((condition) => {
+      const domain = getConditionDomain(condition);
+
+      if (addedDomains.has(domain) || exclusiveDomains.has(domain)) {
+        return;
+      }
+      addedDomains.add(domain);
+
+      const manifest = manifests[domain];
+      const domainUsed = !domains ? true : domains.has(domain);
+
+      if (this._domainMatchesGroupType(domain, manifest, domainUsed, types)) {
+        result.push({
+          icon: html`
+            <ha-domain-icon .domain=${domain} brand-fallback></ha-domain-icon>
+          `,
+          key: `${DYNAMIC_PREFIX}${domain}`,
+          name: domainToName(localize, domain, manifest),
+          description: "",
+        });
+      }
+    });
+    return result.sort((a, b) =>
+      stringCompare(a.name, b.name, this.hass.locale.language)
+    );
+  };
+
  private _conditions = memoizeOne(
    (
      localize: LocalizeFunc,
@@ -1511,13 +1665,26 @@ class DialogAddAutomationElement
        );
      }

-      if (group) {
+      if (group && !["helpers", "other"].includes(group)) {
        return [];
      }

      Object.keys(services)
        .sort()
-        .forEach((dmn) => addDomain(dmn));
+        .forEach((dmn) => {
+          const manifest = manifests?.[dmn];
+          if (group === "helpers" && manifest?.integration_type !== "helper") {
+            return;
+          }
+          if (
+            group === "other" &&
+            (ENTITY_DOMAINS_OTHER.has(dmn) ||
+              ["helper", "entity"].includes(manifest?.integration_type || ""))
+          ) {
+            return;
+          }
+          addDomain(dmn);
+        });

      return result;
    }
@@ -1528,20 +1695,25 @@ class DialogAddAutomationElement
  );

  private _getDomainType(domain: string) {
-    const groupType = this._classifyDomain(domain, this._manifests?.[domain], {
-      type: this._params!.type,
-      usedDomains: this._domains,
-      activeSystemDomains: this._systemDomains?.active,
-    });
-    if (groupType === "helper") {
+    if (
+      ENTITY_DOMAINS_MAIN.has(domain) ||
+      (this._manifests?.[domain]?.integration_type === "entity" &&
+        !ENTITY_DOMAINS_OTHER.has(domain) &&
+        (this._domains?.has(domain) ||
+          (this._systemDomains?.active.has(domain) ?? false)))
+    ) {
+      return "dynamicGroups";
+    }
+    if (this._manifests?.[domain]?.integration_type === "helper") {
      return "helpers";
    }
-    if (groupType === "integration") {
-      return "integrationGroups";
+    if (
+      this._manifests?.[domain]?.integration_type === "system" &&
+      this._systemDomains?.active.has(domain)
+    ) {
+      return "dynamicGroups";
    }
-    // "dynamic", plus domains hidden in the by-type list (like unused entity
-    // domains) that can still surface when browsing by target.
-    return "dynamicGroups";
+    return "other";
  }

  private _sortDomainsByCollection(
@@ -1,7 +1,7 @@
 import type { LitVirtualizer } from "@lit-labs/virtualizer";
 import { consume } from "@lit/context";
 import "@material/mwc-list/mwc-list";
-import { mdiPlus, mdiTextureBox, mdiUnfoldMoreHorizontal } from "@mdi/js";
+import { mdiPlus, mdiTextureBox } from "@mdi/js";
 import Fuse from "fuse.js";
 import { css, html, LitElement, nothing, type PropertyValues } from "lit";
 import {
@@ -98,16 +98,8 @@ export const ITEM_SEARCH_KEYS: FuseWeightedKey[] = [
  },
 ];

-const MAX_SEARCH_ITEMS_PER_SECTION = 5;
-
 type SearchSection = "item" | "block" | "entity" | "device" | "area" | "label";

-interface SearchMoreComboBoxItem extends PickerComboBoxItem {
-  type: "more";
-  section: "entity" | "device" | "item";
-  label: string;
-}
-
@customElement("ha-automation-add-search")
 export class HaAutomationAddSearch extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -296,8 +288,7 @@ export class HaAutomationAddSearch extends LitElement {
      | (FloorComboBoxItem & { last?: boolean | undefined })
      | EntityComboBoxItem
      | DevicePickerItem
-      | AutomationItemComboBoxItem
-      | SearchMoreComboBoxItem,
+      | AutomationItemComboBoxItem,
    index: number
  ) => {
    if (!item) {
@@ -308,24 +299,6 @@ export class HaAutomationAddSearch extends LitElement {
      return html`<ha-section-title>${item}</ha-section-title>`;
    }

-    if ("type" in item && item.type === "more") {
-      return html`<ha-combo-box-item
-        id=${`search-list-item-${index}`}
-        type="button"
-        tabindex="-1"
-        .section-id=${item.section}
-        .value=${`more-${item.section}`}
-        @click=${this._toggleSection}
-      >
-        <ha-svg-icon
-          slot="start"
-          .path=${mdiUnfoldMoreHorizontal}
-        ></ha-svg-icon>
-        <span slot="headline"></span>
-        <span slot="supporting-text">${item.label}</span>
-      </ha-combo-box-item>`;
-    }
-
    const type = ["trigger", "condition", "action", "block"].includes(
      (item as AutomationItemComboBoxItem).type
    )
@@ -539,17 +512,10 @@ export class HaAutomationAddSearch extends LitElement {
      selectedSection?: SearchSection,
      relatedIdSets?: RelatedIdSets
    ) => {
-      type ResultItem =
-        | string
-        | FloorComboBoxItem
-        | EntityComboBoxItem
-        | PickerComboBoxItem
-        | SearchMoreComboBoxItem;
-      const resultSections: {
-        title: string;
-        type: string;
-        items: ResultItem[];
-      }[] = [];
+      const resultItems: (
+        string | FloorComboBoxItem | EntityComboBoxItem | PickerComboBoxItem
+      )[] = [];
+
      if (!selectedSection || selectedSection === "item") {
        let items = this._convertItemsToComboBoxItems(automationItems, type);
        if (searchTerm) {
@@ -560,13 +526,15 @@ export class HaAutomationAddSearch extends LitElement {
            ITEM_SEARCH_KEYS
          ) as AutomationItemComboBoxItem[];
        }
-        if (items.length) {
-          resultSections.push({
-            title: localize(`ui.panel.config.automation.editor.${type}s.name`),
-            type: "item",
-            items: items,
-          });
+
+        if (!selectedSection && items.length) {
+          // show group title
+          resultItems.push(
+            localize(`ui.panel.config.automation.editor.${type}s.name`)
+          );
        }
+
+        resultItems.push(...items);
      }

      if (
@@ -596,13 +564,13 @@ export class HaAutomationAddSearch extends LitElement {
          ) as AutomationItemComboBoxItem[];
        }

-        if (blocks.length) {
-          resultSections.push({
-            title: localize("ui.panel.config.automation.editor.blocks"),
-            type: "block",
-            items: blocks,
-          });
+        if (!selectedSection && blocks.length) {
+          // show group title
+          resultItems.push(
+            localize("ui.panel.config.automation.editor.blocks")
+          );
        }
+        resultItems.push(...blocks);
      }

      if (!selectedSection || selectedSection === "entity") {
@@ -633,13 +601,14 @@ export class HaAutomationAddSearch extends LitElement {
          entityItems = sortRelatedFirst(entityItems) as EntityComboBoxItem[];
        }

-        if (entityItems.length) {
-          resultSections.push({
-            title: localize("ui.components.target-picker.type.entities"),
-            type: "entity",
-            items: entityItems,
-          });
+        if (!selectedSection && entityItems.length) {
+          // show group title
+          resultItems.push(
+            localize("ui.components.target-picker.type.entities")
+          );
        }
+
+        resultItems.push(...entityItems);
      }

      if (!selectedSection || selectedSection === "device") {
@@ -671,13 +640,14 @@ export class HaAutomationAddSearch extends LitElement {
          deviceItems = sortRelatedFirst(deviceItems);
        }

-        if (deviceItems.length) {
-          resultSections.push({
-            title: localize("ui.components.target-picker.type.devices"),
-            type: "device",
-            items: deviceItems,
-          });
+        if (!selectedSection && deviceItems.length) {
+          // show group title
+          resultItems.push(
+            localize("ui.components.target-picker.type.devices")
+          );
        }
+
+        resultItems.push(...deviceItems);
      }

      if (!selectedSection || selectedSection === "area") {
@@ -727,9 +697,15 @@ export class HaAutomationAddSearch extends LitElement {
          ) as FloorComboBoxItem[];
        }

-        if (areasAndFloors.length) {
-          const areaItems = areasAndFloors.map((item, index) => {
+        if (!selectedSection && areasAndFloors.length) {
+          // show group title
+          resultItems.push(localize("ui.components.target-picker.type.areas"));
+        }
+
+        resultItems.push(
+          ...areasAndFloors.map((item, index) => {
            const nextItem = areasAndFloors[index + 1];
+
            if (
              !nextItem ||
              (item.type === "area" && nextItem.type === "floor")
@@ -739,15 +715,10 @@ export class HaAutomationAddSearch extends LitElement {
                last: true,
              };
            }
-            return item;
-          });

-          resultSections.push({
-            title: localize("ui.components.target-picker.type.areas"),
-            type: "area",
-            items: areaItems,
-          });
-        }
+            return item;
+          })
+        );
      }

      if (!selectedSection || selectedSection === "label") {
@@ -775,47 +746,13 @@ export class HaAutomationAddSearch extends LitElement {
          );
        }

-        if (labels.length) {
-          resultSections.push({
-            title: localize("ui.components.target-picker.type.labels"),
-            type: "label",
-            items: labels,
-          });
+        if (!selectedSection && labels.length) {
+          // show group title
+          resultItems.push(localize("ui.components.target-picker.type.labels"));
        }
-      }

-      const resultItems: ResultItem[] = [];
-      resultSections.forEach((section, index) => {
-        if (selectedSection) {
-          resultItems.push(...section.items);
-          return;
-        }
-        resultItems.push(section.title);
-        if (
-          index !== resultSections.length - 1 &&
-          (section.type === "item" ||
-            section.type === "entity" ||
-            section.type === "device") &&
-          section.items.length > MAX_SEARCH_ITEMS_PER_SECTION + 1
-        ) {
-          resultItems.push(
-            ...section.items.slice(0, MAX_SEARCH_ITEMS_PER_SECTION)
-          );
-          const typeKey = section.type === "item" ? type : section.type;
-          resultItems.push({
-            primary: "",
-            id: `search-more-${section.type}`,
-            type: "more",
-            section: section.type,
-            label: localize(
-              `ui.panel.config.automation.editor.show_more_search.${typeKey}`,
-              { count: section.items.length - MAX_SEARCH_ITEMS_PER_SECTION }
-            ),
-          });
-        } else {
-          resultItems.push(...section.items);
-        }
-      });
+        resultItems.push(...labels);
+      }

      return resultItems;
    }
@@ -853,22 +790,18 @@ export class HaAutomationAddSearch extends LitElement {
    );
  }

-  private _toggleSection = (ev: Event) => {
+  private _toggleSection(ev: Event) {
    ev.stopPropagation();
    // this._resetSelectedItem();
    this._searchSectionTitle = undefined;
-    const section = (ev.currentTarget as HTMLElement)["section-id"] as string;
+    const section = (ev.target as HTMLElement)["section-id"] as string;
    if (!section) {
      return;
    }
-    this._toggleSectionType(section);
-  };
-
-  private _toggleSectionType(type: string) {
-    if (this._selectedSearchSection === type) {
+    if (this._selectedSearchSection === section) {
      this._selectedSearchSection = undefined;
    } else {
-      this._selectedSearchSection = type as SearchSection;
+      this._selectedSearchSection = section as SearchSection;
    }

    // Reset scroll position when filter changes
@@ -1086,13 +1019,9 @@ export class HaAutomationAddSearch extends LitElement {

    const item = this._virtualizerElement?.items[
      this._selectedSearchItemIndex
-    ] as PickerComboBoxItem | SearchMoreComboBoxItem;
+    ] as PickerComboBoxItem;
    if (item) {
-      if ("type" in item && item.type === "more") {
-        this._toggleSectionType((item as SearchMoreComboBoxItem).section);
-      } else {
-        this._selectSearchItem(item as PickerComboBoxItem);
-      }
+      this._selectSearchItem(item);
    }
  };

@@ -13,16 +13,11 @@ import type {
  DeviceCondition,
 } from "../../../../../data/device/device_automation";
 import {
-  deviceAutomationEditorMode,
  deviceAutomationsEqual,
  fetchDeviceConditionCapabilities,
  localizeExtraFieldsComputeHelperCallback,
  localizeExtraFieldsComputeLabelCallback,
 } from "../../../../../data/device/device_automation";
-import {
-  fetchDeviceCompositeSplits,
-  type DeviceCompositeSplits,
-} from "../../../../../data/device/device_registry";
 import type { EntityRegistryEntry } from "../../../../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../../../../types";

@@ -38,10 +33,6 @@ export class HaDeviceCondition extends LitElement {

  @state() private _capabilities?: DeviceCapabilities;

-  @state() private _compositeSplits?: DeviceCompositeSplits;
-
-  private _loadingCompositeSplits = false;
-
  @state()
  @consume({ context: fullEntitiesContext, subscribe: true })
  _entityReg: EntityRegistryEntry[] = [];
@@ -69,19 +60,14 @@ export class HaDeviceCondition extends LitElement {
    }
  );

-  public shouldUpdate(_changedProperties: PropertyValues<this>) {
-    const mode = deviceAutomationEditorMode(
-      this.hass,
-      this.condition.device_id,
-      this._compositeSplits
-    );
-    if (mode === "loading") {
-      // The device is missing; wait for the composite split map before deciding
-      // whether it is a replaced device (editable) or genuinely unknown (YAML).
-      this._loadCompositeSplits();
-      return false;
+  public shouldUpdate(changedProperties: PropertyValues<this>) {
+    if (!changedProperties.has("condition")) {
+      return true;
    }
-    if (mode === "unknown-device") {
+    if (
+      this.condition.device_id &&
+      !(this.condition.device_id in this.hass.devices)
+    ) {
      fireEvent(
        this,
        "ui-mode-not-available",
@@ -96,20 +82,6 @@ export class HaDeviceCondition extends LitElement {
    return true;
  }

-  private async _loadCompositeSplits() {
-    if (this._loadingCompositeSplits) {
-      return;
-    }
-    this._loadingCompositeSplits = true;
-    try {
-      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
-    } catch (_err) {
-      this._compositeSplits = {};
-    } finally {
-      this._loadingCompositeSplits = false;
-    }
-  }
-
  protected render() {
    const deviceId = this._deviceId || this.condition.device_id;

@@ -218,14 +218,20 @@ export class HaPlatformCondition extends LitElement {
      </div>
      ${
        conditionDesc && "target" in conditionDesc
-          ? html`<ha-selector
-              class="target-selector"
-              .hass=${this.hass}
-              .selector=${this._targetSelector(conditionDesc.target)}
-              .disabled=${this.disabled}
-              @value-changed=${this._targetChanged}
-              .value=${this.condition?.target}
-            ></ha-selector>`
+          ? html`<ha-settings-row narrow>
+              <span slot="heading"
+                >${this.hass.localize(
+                  "ui.components.service-control.target"
+                )}</span
+              >
+              <ha-selector
+                .hass=${this.hass}
+                .selector=${this._targetSelector(conditionDesc.target)}
+                .disabled=${this.disabled}
+                @value-changed=${this._targetChanged}
+                .value=${this.condition?.target}
+              ></ha-selector
+            ></ha-settings-row>`
          : nothing
      }
      ${
@@ -664,14 +670,6 @@ export class HaPlatformCondition extends LitElement {
      display: block;
      margin: 0 var(--ha-space-4);
    }
-    ha-selector.target-selector {
-      display: block;
-      padding: var(--ha-space-2) var(--ha-space-4);
-      border-top: var(
-        --service-control-items-border-top,
-        1px solid var(--divider-color)
-      );
-    }
    ha-yaml-editor {
      padding: var(--ha-space-4) 0;
    }
@@ -346,19 +346,17 @@ 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) =>
-            narrow
-              ? automation.formatted_state
-              : html`
-                  <ha-switch
-                    @click=${stopPropagation}
-                    @change=${this._handleSwitchToggle}
-                    .automation=${automation}
-                    .checked=${automation.state === "on"}
-                  ></ha-switch>
-                `,
+          template: (automation) => html`
+            <ha-switch
+              @click=${stopPropagation}
+              @change=${this._handleSwitchToggle}
+              .automation=${automation}
+              .checked=${automation.state === "on"}
+            ></ha-switch>
+          `,
        },
        actions: {
          lastFixed: true,
@@ -33,16 +33,11 @@ import type { ConfigEntry } from "../../../../data/config_entries";
 import {
  apiContext,
  configEntriesContext,
-  connectionContext,
  internationalizationContext,
  labelsContext,
  registriesContext,
  statesContext,
 } from "../../../../data/context";
-import {
-  fetchDeviceCompositeSplits,
-  type DeviceCompositeSplits,
-} from "../../../../data/device/device_registry";
 import type { LabelRegistryEntry } from "../../../../data/label/label_registry";
 import {
  deviceMeetsTargetSelector,
@@ -94,16 +89,9 @@ export class HaAutomationRowTargets extends LitElement {
  @consume({ context: apiContext, subscribe: true })
  private _api!: ContextType<typeof apiContext>;

-  @consume({ context: connectionContext, subscribe: true })
-  private _connection!: ContextType<typeof connectionContext>;
-
  @consume({ context: statesContext, subscribe: true })
  private _states!: ContextType<typeof statesContext>;

-  @state() private _compositeSplits?: DeviceCompositeSplits;
-
-  private _loadingCompositeSplits = false;
-
  private _countCache = new Map<
    string,
    Promise<number | undefined> | number | undefined
@@ -120,43 +108,6 @@ export class HaAutomationRowTargets extends LitElement {
    ) {
      this._rerenderCount = true;
    }
-
-    if (
-      (changedProps.has("target") || changedProps.has("_registries")) &&
-      this._compositeSplits === undefined &&
-      !this._loadingCompositeSplits &&
-      this._hasMissingDevice()
-    ) {
-      // A referenced device is missing from the registry; it might be a legacy
-      // composite device that was split. Fetch the split map so we can flag it.
-      this._loadCompositeSplits();
-    }
-  }
-
-  private _hasMissingDevice(): boolean {
-    const deviceIds = this.target?.device_id
-      ? ensureArray(this.target.device_id)
-      : [];
-    return deviceIds.some(
-      (id) => !isTemplate(id) && !this._registries?.devices?.[id]
-    );
-  }
-
-  private async _loadCompositeSplits() {
-    if (!this._api || !this._connection) {
-      return;
-    }
-    this._loadingCompositeSplits = true;
-    try {
-      this._compositeSplits = await fetchDeviceCompositeSplits({
-        connection: this._connection.connection,
-        callWS: this._api.callWS,
-      });
-    } catch (_err) {
-      this._compositeSplits = {};
-    } finally {
-      this._loadingCompositeSplits = false;
-    }
  }

  protected updated(changedProps: PropertyValues) {
@@ -391,8 +342,7 @@ export class HaAutomationRowTargets extends LitElement {
    error = false,
    targetId?: string,
    targetType?: string,
-    countTemplate: unknown = nothing,
-    title?: string
+    countTemplate: unknown = nothing
  ) {
    if (!this.interactive || !targetId || !targetType) {
      return html`<div
@@ -401,7 +351,6 @@ export class HaAutomationRowTargets extends LitElement {
          warning,
          error,
        })}
-        title=${title ?? nothing}
        .targetId=${targetId}
        .targetType=${targetType}
        .label=${label}
@@ -417,7 +366,6 @@ export class HaAutomationRowTargets extends LitElement {
        warning,
        error,
      })}
-      title=${title ?? nothing}
      .targetId=${targetId}
      .targetType=${targetType}
      .label=${label}
@@ -437,7 +385,6 @@ export class HaAutomationRowTargets extends LitElement {
    let icon: string | undefined;
    let label: string;
    let warning = false;
-    let title: string | undefined;
    let badgeTargetId: string | undefined = targetId;
    let badgeTargetType: string | undefined = targetType;
    let countTemplate: unknown = nothing;
@@ -461,28 +408,17 @@ export class HaAutomationRowTargets extends LitElement {
      const exists = this._checkTargetExists(targetType, targetId);
      if (!exists) {
        icon = mdiAlert;
+        label = getTargetText(
+          this._registries,
+          this._states,
+          this._i18n.localize,
+          targetType,
+          targetId,
+          this._getLabel
+        );
        warning = true;
        badgeTargetId = undefined;
        badgeTargetType = undefined;
-        if (targetType === "device" && this._compositeSplits?.[targetId]) {
-          // The device was replaced by one or more split devices; make clear
-          // this reference needs to be updated, distinct from "unknown device".
-          label = this._i18n.localize(
-            "ui.panel.config.automation.editor.target_summary.device_replaced"
-          );
-          title = this._i18n.localize(
-            "ui.panel.config.automation.editor.target_summary.device_replaced_description"
-          );
-        } else {
-          label = getTargetText(
-            this._registries,
-            this._states,
-            this._i18n.localize,
-            targetType,
-            targetId,
-            this._getLabel
-          );
-        }
      } else {
        label = getTargetText(
          this._registries,
@@ -520,7 +456,6 @@ export class HaAutomationRowTargets extends LitElement {
          targetType: badgeTargetType,
          label,
        }}
-        title=${title ?? nothing}
        class=${classMap({
          warning,
        })}
@@ -535,8 +470,7 @@ export class HaAutomationRowTargets extends LitElement {
      false,
      badgeTargetId,
      badgeTargetType,
-      countTemplate,
-      title
+      countTemplate
    );
  }

@@ -15,16 +15,11 @@ import type {
  DeviceTrigger,
 } from "../../../../../data/device/device_automation";
 import {
-  deviceAutomationEditorMode,
  deviceAutomationsEqual,
  fetchDeviceTriggerCapabilities,
  localizeExtraFieldsComputeHelperCallback,
  localizeExtraFieldsComputeLabelCallback,
 } from "../../../../../data/device/device_automation";
-import {
-  fetchDeviceCompositeSplits,
-  type DeviceCompositeSplits,
-} from "../../../../../data/device/device_registry";
 import type { EntityRegistryEntry } from "../../../../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../../../../types";

@@ -40,10 +35,6 @@ export class HaDeviceTrigger extends LitElement {

  @state() private _capabilities?: DeviceCapabilities;

-  @state() private _compositeSplits?: DeviceCompositeSplits;
-
-  private _loadingCompositeSplits = false;
-
  @state()
  @consume({ context: fullEntitiesContext, subscribe: true })
  _entityReg: EntityRegistryEntry[] = [];
@@ -73,19 +64,14 @@ export class HaDeviceTrigger extends LitElement {
    }
  );

-  public shouldUpdate(_changedProperties: PropertyValues<this>) {
-    const mode = deviceAutomationEditorMode(
-      this.hass,
-      this.trigger.device_id,
-      this._compositeSplits
-    );
-    if (mode === "loading") {
-      // The device is missing; wait for the composite split map before deciding
-      // whether it is a replaced device (editable) or genuinely unknown (YAML).
-      this._loadCompositeSplits();
-      return false;
+  public shouldUpdate(changedProperties: PropertyValues<this>) {
+    if (!changedProperties.has("trigger")) {
+      return true;
    }
-    if (mode === "unknown-device") {
+    if (
+      this.trigger.device_id &&
+      !(this.trigger.device_id in this.hass.devices)
+    ) {
      fireEvent(
        this,
        "ui-mode-not-available",
@@ -100,20 +86,6 @@ export class HaDeviceTrigger extends LitElement {
    return true;
  }

-  private async _loadCompositeSplits() {
-    if (this._loadingCompositeSplits) {
-      return;
-    }
-    this._loadingCompositeSplits = true;
-    try {
-      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
-    } catch (_err) {
-      this._compositeSplits = {};
-    } finally {
-      this._loadingCompositeSplits = false;
-    }
-  }
-
  protected render() {
    const deviceId = this._deviceId || this.trigger.device_id;

@@ -213,14 +213,19 @@ export class HaPlatformTrigger extends LitElement {
      </div>
      ${
        triggerDesc && "target" in triggerDesc
-          ? html`<ha-selector
-              class="target-selector"
-              .hass=${this.hass}
-              .selector=${this._targetSelector(triggerDesc.target)}
-              .disabled=${this.disabled}
-              @value-changed=${this._targetChanged}
-              .value=${this.trigger?.target}
-            ></ha-selector>`
+          ? html`<ha-settings-row narrow>
+              <span slot="heading"
+                >${this.hass.localize(
+                  "ui.components.service-control.target"
+                )}</span
+              ><ha-selector
+                .hass=${this.hass}
+                .selector=${this._targetSelector(triggerDesc.target)}
+                .disabled=${this.disabled}
+                @value-changed=${this._targetChanged}
+                .value=${this.trigger?.target}
+              ></ha-selector
+            ></ha-settings-row>`
          : nothing
      }
      ${
@@ -543,14 +548,6 @@ export class HaPlatformTrigger extends LitElement {
      display: block;
      margin: 0 var(--ha-space-4);
    }
-    ha-selector.target-selector {
-      display: block;
-      padding: var(--ha-space-2) var(--ha-space-4);
-      border-top: var(
-        --service-control-items-border-top,
-        1px solid var(--divider-color)
-      );
-    }
    ha-yaml-editor {
      padding: var(--ha-space-4) 0;
    }
@@ -203,10 +203,12 @@ export function getModifiedAtTableColumn<T>(
 }

 const renderDateTimeColumn = (valueDateTime: number, hass: HomeAssistant) =>
-  valueDateTime
-    ? formatShortDateTimeWithConditionalYear(
-        new Date(valueDateTime * 1000),
-        hass.locale,
-        hass.config
-      )
-    : nothing;
+  html`${
+    valueDateTime
+      ? formatShortDateTimeWithConditionalYear(
+          new Date(valueDateTime * 1000),
+          hass.locale,
+          hass.config
+        )
+      : nothing
+  }`;
@@ -22,7 +22,6 @@ import {
  mdiPuzzle,
  mdiRadioTower,
  mdiRemote,
-  mdiRenameOutline,
  mdiRobot,
  mdiScrewdriver,
  mdiScriptText,
@@ -495,14 +494,6 @@ export const configSections: Record<string, PageNavigation[]> = {
      component: "backup",
      adminOnly: true,
    },
-    {
-      path: "/config/entity-id-format",
-      translationKey: "entity_id_format",
-      iconPath: mdiRenameOutline,
-      iconColor: "#24a5cb",
-      core: true,
-      adminOnly: true,
-    },
    {
      path: "/config/analytics",
      translationKey: "analytics",
@@ -1,215 +0,0 @@
-import { consume, type ContextType } from "@lit/context";
-import { mdiRestore } from "@mdi/js";
-import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, state } from "lit/decorators";
-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 type { HaProgressButton } from "../../../components/buttons/ha-progress-button";
-import "../../../components/buttons/ha-progress-button";
-import "../../../components/ha-alert";
-import "../../../components/ha-button";
-import "../../../components/ha-card";
-import "../../../components/ha-svg-icon";
-import { apiContext, configContext } from "../../../data/context";
-import {
-  fetchEntityRegistrySettings,
-  updateEntityRegistrySettings,
-} from "../../../data/entity/entity_registry_settings";
-import {
-  DEFAULT_ENTITY_ID_FORMAT,
-  isDefaultEntityIdFormat,
-  type EntityIdFormat,
-  type EntityIdPart,
-} from "../../../data/entity_id_format";
-import { haStyle } from "../../../resources/styles";
-import { documentationUrl } from "../../../util/documentation-url";
-import "./ha-entity-id-format-editor";
-
-const EXAMPLE_DOMAIN = "sensor";
-
-@customElement("ha-config-entity-id-format")
-export class HaConfigEntityIdFormat extends LitElement {
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  @state()
-  @consume({ context: apiContext, subscribe: true })
-  private _api!: ContextType<typeof apiContext>;
-
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _config!: ContextType<typeof configContext>;
-
-  @state() private _format?: EntityIdFormat;
-
-  @state() private _error?: string;
-
-  protected async firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    try {
-      const settings = await fetchEntityRegistrySettings(this._api);
-      this._format = settings.entity_id_parts ?? DEFAULT_ENTITY_ID_FORMAT;
-    } catch (err: any) {
-      this._error = err.message;
-    }
-  }
-
-  private _examples: Record<EntityIdPart, string> = {
-    area: "Living room",
-    device: "Thermostat",
-    entity: "Temperature",
-    floor: "Ground floor",
-  };
-
-  protected render() {
-    return html`
-      <ha-card
-        outlined
-        .header=${this._localize(
-          "ui.panel.config.entity_id_format.card.header"
-        )}
-      >
-        <div class="card-content">
-          ${
-            this._error
-              ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-              : nothing
-          }
-          <p class="description">
-            ${this._localize(
-              "ui.panel.config.entity_id_format.card.description"
-            )}
-            <a
-              href=${documentationUrl(
-                this._config,
-                "/docs/configuration/customizing-devices/"
-              )}
-              target="_blank"
-              rel="noreferrer"
-              >${this._localize(
-                "ui.panel.config.entity_id_format.card.learn_more"
-              )}</a
-            >
-          </p>
-          ${
-            this._format
-              ? html`
-                  <ha-entity-id-format-editor
-                    .value=${this._format}
-                    .label=${this._localize(
-                      "ui.panel.config.entity_id_format.card.editor.label"
-                    )}
-                    @value-changed=${this._formatChanged}
-                  ></ha-entity-id-format-editor>
-                  ${this._renderPreview()}
-                `
-              : nothing
-          }
-        </div>
-        <div class="card-actions">
-          <ha-button
-            appearance="plain"
-            @click=${this._reset}
-            .disabled=${!this._format || isDefaultEntityIdFormat(this._format)}
-          >
-            <ha-svg-icon slot="start" .path=${mdiRestore}></ha-svg-icon>
-            ${this._localize("ui.panel.config.entity_id_format.card.reset")}
-          </ha-button>
-          <ha-progress-button
-            appearance="filled"
-            @click=${this._save}
-            .disabled=${!this._format}
-          >
-            ${this._localize("ui.common.save")}
-          </ha-progress-button>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  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>
-      </div>
-    `;
-  }
-
-  private _formatChanged(ev: CustomEvent) {
-    this._format = ev.detail.value;
-  }
-
-  private _reset() {
-    this._format = [...DEFAULT_ENTITY_ID_FORMAT];
-  }
-
-  private async _save(ev: Event) {
-    const button = ev.currentTarget as HaProgressButton;
-    if (button.progress) {
-      return;
-    }
-    button.progress = true;
-    this._error = undefined;
-    try {
-      const format = this._format!;
-      const settings = await updateEntityRegistrySettings(this._api, {
-        entity_id_parts: isDefaultEntityIdFormat(format) ? null : format,
-      });
-      this._format = settings.entity_id_parts ?? DEFAULT_ENTITY_ID_FORMAT;
-      button.actionSuccess();
-    } catch (err: any) {
-      button.actionError();
-      this._error = err.message;
-    } finally {
-      button.progress = false;
-    }
-  }
-
-  static styles = [
-    haStyle,
-    css`
-      :host {
-        display: block;
-      }
-      .description {
-        margin-top: 0;
-        color: var(--secondary-text-color);
-      }
-      .preview {
-        display: flex;
-        flex-direction: column;
-        gap: var(--ha-space-1);
-        margin-top: var(--ha-space-5);
-      }
-      .preview-label {
-        font-weight: 500;
-      }
-      .preview code {
-        display: block;
-        padding: var(--ha-space-3);
-        border-radius: var(--ha-border-radius-md);
-        background-color: var(--secondary-background-color);
-        font-family: var(--ha-font-family-code);
-        overflow-wrap: anywhere;
-      }
-      .card-actions {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-config-entity-id-format": HaConfigEntityIdFormat;
-  }
-}
@@ -1,51 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../../layouts/hass-subpage";
-import type { HomeAssistant } from "../../../types";
-import "./ha-config-entity-id-format";
-
-@customElement("ha-config-section-entity-id-format")
-export class HaConfigSectionEntityIdFormat extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  protected render() {
-    return html`
-      <hass-subpage
-        back-path="/config/system"
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .header=${this.hass.localize(
-          "ui.panel.config.entity_id_format.caption"
-        )}
-      >
-        <div class="content">
-          <ha-config-entity-id-format></ha-config-entity-id-format>
-        </div>
-      </hass-subpage>
-    `;
-  }
-
-  static styles = css`
-    .content {
-      padding: var(--ha-space-7) var(--ha-space-5) 0;
-      max-width: 1040px;
-      margin: 0 auto;
-      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-5);
-    }
-    ha-config-entity-id-format {
-      max-width: 600px;
-      margin: 0 auto;
-      width: 100%;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-config-section-entity-id-format": HaConfigSectionEntityIdFormat;
-  }
-}
@@ -1,348 +0,0 @@
-import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
-import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
-import { consumeLocalize } from "../../../common/decorators/consume-context-entry";
-import { fireEvent } from "../../../common/dom/fire_event";
-import type { LocalizeFunc } from "../../../common/translations/localize";
-import "../../../components/chips/ha-assist-chip";
-import "../../../components/chips/ha-chip-set";
-import "../../../components/chips/ha-input-chip";
-import "../../../components/ha-combo-box-item";
-import "../../../components/ha-generic-picker";
-import type { HaGenericPicker } from "../../../components/ha-generic-picker";
-import type { PickerComboBoxItem } from "../../../components/ha-picker-combo-box";
-import "../../../components/ha-sortable";
-import "../../../components/ha-svg-icon";
-import type {
-  EntityIdFormat,
-  EntityIdPart,
-} from "../../../data/entity_id_format";
-import type { ValueChangedEvent } from "../../../types";
-
-const STRUCTURAL_TYPES = ["area", "device", "entity", "floor"] as const;
-
-const REQUIRED_TYPES: readonly EntityIdPart[] = ["device", "entity"];
-
-const rowRenderer: RenderItemFunction<PickerComboBoxItem> = (item) => html`
-  <ha-combo-box-item type="button" compact>
-    <span slot="headline">${item.primary}</span>
-  </ha-combo-box-item>
-`;
-
-const encodeType = (type: EntityIdPart) => `___${type}___`;
-
-const decodeType = (value: string): EntityIdPart | undefined => {
-  const type =
-    value.startsWith("___") && value.endsWith("___")
-      ? value.slice(3, -3)
-      : value;
-  return (STRUCTURAL_TYPES as readonly string[]).includes(type)
-    ? (type as EntityIdPart)
-    : undefined;
-};
-
-@customElement("ha-entity-id-format-editor")
-export class HaEntityIdFormatEditor extends LitElement {
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  @property({ attribute: false }) public value: EntityIdFormat = [];
-
-  @property() public label?: string;
-
-  @property({ type: Boolean, reflect: true }) public disabled = false;
-
-  @query("ha-generic-picker") private _picker?: HaGenericPicker;
-
-  @state() private _editIndex?: number;
-
-  protected render() {
-    return html`
-      <div class="container">
-        ${this.label ? html`<label>${this.label}</label>` : nothing}
-        <ha-generic-picker
-          .disabled=${this.disabled}
-          .getItems=${this._getFilteredItems}
-          .rowRenderer=${rowRenderer}
-          .value=${this._getPickerValue()}
-          @value-changed=${this._pickerValueChanged}
-          .searchLabel=${this._localize(
-            "ui.panel.config.entity_id_format.card.editor.search"
-          )}
-        >
-          <div slot="field" class="field">
-            <ha-sortable
-              no-style
-              @item-moved=${this._moveItem}
-              .disabled=${this.disabled}
-              handle-selector="button.primary.action"
-              filter=".add"
-            >
-              <ha-chip-set>
-                ${repeat(
-                  this.value,
-                  (item) => item,
-                  (item: EntityIdPart, idx) => {
-                    const label = this._formatType(item);
-                    if (REQUIRED_TYPES.includes(item)) {
-                      return html`
-                        <ha-assist-chip
-                          filled
-                          class="required"
-                          .label=${label}
-                          .disabled=${this.disabled}
-                        >
-                          <ha-svg-icon
-                            slot="icon"
-                            .path=${mdiDragHorizontalVariant}
-                          ></ha-svg-icon>
-                        </ha-assist-chip>
-                      `;
-                    }
-                    return html`
-                      <ha-input-chip
-                        data-idx=${idx}
-                        @remove=${this._removeItem}
-                        @click=${this._editItem}
-                        .label=${label}
-                        .selected=${!this.disabled}
-                        .disabled=${this.disabled}
-                      >
-                        <ha-svg-icon
-                          slot="icon"
-                          .path=${mdiDragHorizontalVariant}
-                        ></ha-svg-icon>
-                      </ha-input-chip>
-                    `;
-                  }
-                )}
-                ${
-                  this.disabled
-                    ? nothing
-                    : html`
-                        <ha-assist-chip
-                          @click=${this._addItem}
-                          .disabled=${this.disabled}
-                          label=${this._localize(
-                            "ui.panel.config.entity_id_format.card.editor.add"
-                          )}
-                          class="add"
-                        >
-                          <ha-svg-icon
-                            slot="icon"
-                            .path=${mdiPlus}
-                          ></ha-svg-icon>
-                        </ha-assist-chip>
-                      `
-                }
-              </ha-chip-set>
-            </ha-sortable>
-          </div>
-        </ha-generic-picker>
-      </div>
-    `;
-  }
-
-  private async _addItem(ev: Event) {
-    ev.stopPropagation();
-    this._editIndex = undefined;
-    await this.updateComplete;
-    await this._picker?.open();
-  }
-
-  private async _editItem(ev: Event) {
-    ev.stopPropagation();
-    const idx = parseInt(
-      (ev.currentTarget as HTMLElement).dataset.idx || "",
-      10
-    );
-    this._editIndex = idx;
-    await this.updateComplete;
-    await this._picker?.open();
-  }
-
-  private _moveItem(ev: CustomEvent) {
-    ev.stopPropagation();
-    const { oldIndex, newIndex } = ev.detail;
-    const newValue = this.value.concat();
-    const element = newValue.splice(oldIndex, 1)[0];
-    newValue.splice(newIndex, 0, element);
-    this._setValue(newValue);
-  }
-
-  private _removeItem(ev: Event) {
-    ev.stopPropagation();
-    const value = [...this.value];
-    const idx = parseInt((ev.target as HTMLElement).dataset.idx || "", 10);
-    value.splice(idx, 1);
-    this._setValue(value);
-  }
-
-  private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
-    ev.stopPropagation();
-    const value = ev.detail.value;
-
-    if (this.disabled || !value) {
-      return;
-    }
-
-    const type = decodeType(value);
-    if (!type) {
-      return;
-    }
-
-    const newValue = [...this.value];
-
-    if (this._editIndex != null) {
-      newValue[this._editIndex] = type;
-      this._editIndex = undefined;
-    } else {
-      newValue.push(type);
-    }
-
-    this._setValue(newValue);
-
-    if (this._picker) {
-      this._picker.value = undefined;
-    }
-  }
-
-  private _setValue(value: EntityIdFormat) {
-    this.value = value;
-    fireEvent(this, "value-changed", { value });
-  }
-
-  private _formatType = (type: EntityIdPart) =>
-    this._localize(`ui.components.entity.entity-name-picker.types.${type}`);
-
-  private _getItems = memoizeOne(
-    (localize: LocalizeFunc): PickerComboBoxItem[] =>
-      STRUCTURAL_TYPES.map((type) => {
-        const primary = localize(
-          `ui.components.entity.entity-name-picker.types.${type}`
-        );
-        const id = encodeType(type);
-        return {
-          id,
-          primary,
-          search_labels: { primary, id },
-          sorting_label: primary,
-        };
-      })
-  );
-
-  private _getPickerValue(): string | undefined {
-    if (this._editIndex != null) {
-      const item = this.value[this._editIndex];
-      return item ? encodeType(item) : undefined;
-    }
-    return undefined;
-  }
-
-  private _getFilteredItems = (): PickerComboBoxItem[] => {
-    const items = this._getItems(this._localize);
-    const currentValue =
-      this._editIndex != null
-        ? encodeType(this.value[this._editIndex])
-        : undefined;
-
-    const usedValues = new Set(this.value.map((item) => encodeType(item)));
-
-    return items.filter(
-      (item) => !usedValues.has(item.id) || item.id === currentValue
-    );
-  };
-
-  static styles = css`
-    :host {
-      position: relative;
-      width: 100%;
-    }
-
-    .container {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-2);
-    }
-
-    label {
-      display: block;
-      font-weight: 500;
-    }
-
-    ha-generic-picker {
-      width: 100%;
-    }
-
-    .field {
-      position: relative;
-      background-color: var(--mdc-text-field-fill-color, whitesmoke);
-      border-radius: var(--ha-border-radius-sm);
-      border-end-end-radius: var(--ha-border-radius-square);
-      border-end-start-radius: var(--ha-border-radius-square);
-    }
-    .field:after {
-      display: block;
-      content: "";
-      position: absolute;
-      pointer-events: none;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 1px;
-      width: 100%;
-      background-color: var(
-        --mdc-text-field-idle-line-color,
-        rgba(0, 0, 0, 0.42)
-      );
-    }
-    :host([disabled]) .field:after {
-      background-color: var(
-        --mdc-text-field-disabled-line-color,
-        rgba(0, 0, 0, 0.42)
-      );
-    }
-    .field:focus-within:after {
-      height: 2px;
-      background-color: var(--mdc-theme-primary);
-    }
-
-    ha-chip-set {
-      padding: var(--ha-space-3);
-    }
-
-    ha-assist-chip.required {
-      --ha-assist-chip-filled-container-color: rgba(
-        var(--rgb-primary-text-color),
-        0.15
-      );
-    }
-
-    .add {
-      order: 1;
-    }
-
-    .sortable-fallback {
-      display: none;
-      opacity: 0;
-    }
-
-    .sortable-ghost {
-      opacity: 0.4;
-    }
-
-    .sortable-drag {
-      cursor: grabbing;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-entity-id-format-editor": HaEntityIdFormatEditor;
-  }
-}
@@ -36,7 +36,6 @@ 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";
@@ -158,11 +157,6 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
    total: 0,
  };

-  public constructor() {
-    super();
-    new ChildPanelReady(this);
-  }
-
  private _pages = memoizeOne(
    (
      cloudStatus,
@@ -1,5 +1,4 @@
-import { consume } from "@lit/context";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { filterNavigationPages } from "../../../common/config/filter_navigation_pages";
@@ -8,10 +7,6 @@ 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";

@@ -23,31 +18,21 @@ class HaConfigNavigation extends LitElement {

  @property({ attribute: false }) public pages!: PageNavigation[];

-  @state() private _visiblePages?: PageNavigation[];
+  @state() private _hasBluetoothConfigEntries = false;

-  private _hasBluetoothConfigEntries = false;
-
-  private _bluetoothEntriesLoaded?: Promise<void>;
-
-  private _childReadyRegistered = false;
-
-  @consume({ context: childPanelReadyContext })
-  private _registerChildPanelReady?: RegisterChildPanelReady;
-
-  protected override updated(changedProps: Map<PropertyKey, unknown>) {
-    super.updated(changedProps);
-
-    if (changedProps.has("pages") || changedProps.has("hass")) {
-      const ready = this._resolveVisiblePages();
-      if (!this._childReadyRegistered) {
-        this._registerChildPanelReady?.(ready);
-        this._childReadyRegistered = true;
-      }
-    }
+  protected firstUpdated(changedProps: PropertyValues<this>) {
+    super.firstUpdated(changedProps);
+    getConfigEntries(this.hass, {
+      domain: "bluetooth",
+    }).then((bluetoothEntries) => {
+      this._hasBluetoothConfigEntries = bluetoothEntries.length > 0;
+    });
  }

  protected render(): TemplateResult {
-    const pages = (this._visiblePages ?? []).map((page) => ({
+    const pages = filterNavigationPages(this.hass, this.pages, {
+      hasBluetoothConfigEntries: this._hasBluetoothConfigEntries,
+    }).map((page) => ({
      ...page,
      name:
        page.name ||
@@ -90,28 +75,6 @@ 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;
-      });
-    }
-    return this._bluetoothEntriesLoaded;
-  }
-
-  private async _resolveVisiblePages(): Promise<void> {
-    if (this.pages.some((page) => page.component === "bluetooth")) {
-      await this._loadBluetoothEntries();
-    }
-
-    this._visiblePages = filterNavigationPages(this.hass, this.pages, {
-      hasBluetoothConfigEntries: this._hasBluetoothConfigEntries,
-    });
-    await this.updateComplete;
-  }
-
  static styles: CSSResultGroup = css`
    /* Accessibility */
    .visually-hidden {
@@ -1,196 +0,0 @@
-import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { computeDeviceNameDisplay } from "../../../../common/entity/compute_device_name";
-import { caseInsensitiveStringCompare } from "../../../../common/string/compare";
-import "../../../../components/ha-card";
-import "../../../../components/ha-icon-next";
-import "../../../../components/ha-list-item";
-import type { ConfigEntry } from "../../../../data/config_entries";
-import type { DeviceRegistryEntry } from "../../../../data/device/device_registry";
-import { fetchLinkedDevices } from "../../../../data/device/device_registry";
-import { domainToName } from "../../../../data/integration";
-import type { HomeAssistant } from "../../../../types";
-import { brandsUrl } from "../../../../util/brands-url";
-
-@customElement("ha-device-linked-devices-card")
-export class HaDeviceLinkedDevicesCard extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public deviceId!: string;
-
-  @property({ attribute: false }) public entries!: ConfigEntry[];
-
-  @state() private _linkedDeviceIds: string[] = [];
-
-  private _entryLookup = memoizeOne(
-    (entries: ConfigEntry[]): Record<string, ConfigEntry> => {
-      const lookup: Record<string, ConfigEntry> = {};
-      for (const entry of entries) {
-        lookup[entry.entry_id] = entry;
-      }
-      return lookup;
-    }
-  );
-
-  private _linkedDevices = memoizeOne(
-    (
-      linkedDeviceIds: string[],
-      devices: Record<string, DeviceRegistryEntry>
-    ): DeviceRegistryEntry[] =>
-      linkedDeviceIds
-        .map((id) => devices[id])
-        .filter((device): device is DeviceRegistryEntry => Boolean(device))
-        .sort((d1, d2) =>
-          caseInsensitiveStringCompare(
-            computeDeviceNameDisplay(d1, this.hass.localize, this.hass.states),
-            computeDeviceNameDisplay(d2, this.hass.localize, this.hass.states),
-            this.hass.locale.language
-          )
-        )
-  );
-
-  protected willUpdate(changedProps: PropertyValues<this>) {
-    super.willUpdate(changedProps);
-    if (changedProps.has("deviceId")) {
-      this._fetchLinkedDevices();
-    }
-  }
-
-  protected render() {
-    const linkedDevices = this._linkedDevices(
-      this._linkedDeviceIds,
-      this.hass.devices
-    );
-
-    if (linkedDevices.length === 0) {
-      return nothing;
-    }
-
-    const entryLookup = this._entryLookup(this.entries ?? []);
-
-    return html`
-      <ha-card>
-        <h1 class="card-header">
-          ${this.hass.localize("ui.panel.config.devices.linked_devices.heading")}
-        </h1>
-        <div class="card-content">
-          ${this.hass.localize(
-            "ui.panel.config.devices.linked_devices.description"
-          )}
-        </div>
-        ${linkedDevices.map((linkedDevice) => {
-          const domain = this._deviceDomain(linkedDevice, entryLookup);
-          const integrationName = domain
-            ? domainToName(this.hass.localize, domain)
-            : undefined;
-          return html`
-            <a href=${`/config/devices/device/${linkedDevice.id}`}>
-              <ha-list-item
-                graphic=${domain ? "icon" : nothing}
-                hasMeta
-                .twoline=${!!integrationName}
-              >
-                ${
-                  domain
-                    ? html`<img
-                        slot="graphic"
-                        loading="lazy"
-                        alt=""
-                        src=${brandsUrl(
-                          {
-                            domain,
-                            type: "icon",
-                            darkOptimized: this.hass.themes?.darkMode,
-                          },
-                          this.hass.auth.data.hassUrl
-                        )}
-                        crossorigin="anonymous"
-                        referrerpolicy="no-referrer"
-                      />`
-                    : nothing
-                }
-                ${computeDeviceNameDisplay(
-                  linkedDevice,
-                  this.hass.localize,
-                  this.hass.states
-                )}
-                ${
-                  integrationName
-                    ? html`<span slot="secondary">${integrationName}</span>`
-                    : nothing
-                }
-                <ha-icon-next slot="meta"></ha-icon-next>
-              </ha-list-item>
-            </a>
-          `;
-        })}
-      </ha-card>
-    `;
-  }
-
-  private _deviceDomain(
-    device: DeviceRegistryEntry,
-    entryLookup: Record<string, ConfigEntry>
-  ): string | undefined {
-    const entryId =
-      device.primary_config_entry ?? device.config_entries[0] ?? undefined;
-    const entry = entryId ? entryLookup[entryId] : undefined;
-    return entry?.domain;
-  }
-
-  private async _fetchLinkedDevices() {
-    const deviceId = this.deviceId;
-    if (!deviceId) {
-      this._linkedDeviceIds = [];
-      return;
-    }
-    let linkedDeviceIds: string[];
-    try {
-      linkedDeviceIds = await fetchLinkedDevices(this.hass, deviceId);
-    } catch (_err) {
-      linkedDeviceIds = [];
-    }
-    if (this.deviceId !== deviceId) {
-      // Device changed while fetching, ignore stale result.
-      return;
-    }
-    this._linkedDeviceIds = linkedDeviceIds;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-    }
-
-    ha-card {
-      overflow: hidden;
-    }
-
-    .card-header {
-      padding-bottom: 0;
-    }
-
-    .card-content {
-      color: var(--secondary-text-color);
-      padding-bottom: var(--ha-space-2);
-    }
-
-    a {
-      text-decoration: none;
-      color: var(--primary-text-color);
-    }
-
-    ha-list-item img {
-      width: 24px;
-      height: 24px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-device-linked-devices-card": HaDeviceLinkedDevicesCard;
-  }
-}
@@ -102,7 +102,6 @@ import { fileDownload } from "../../../util/file_download";
 import "../../logbook/ha-logbook";
 import "./device-detail/ha-device-entities-card";
 import "./device-detail/ha-device-info-card";
-import "./device-detail/ha-device-linked-devices-card";
 import "./device-detail/ha-device-via-devices-card";
 import { showDeviceAddToDialog } from "./device-detail/show-dialog-device-add-to";
 import {
@@ -893,11 +892,6 @@ export class HaConfigDevicePage extends LitElement {
            : ""
        }
      </ha-device-info-card>
-      <ha-device-linked-devices-card
-        .hass=${this.hass}
-        .deviceId=${this.deviceId}
-        .entries=${this.entries}
-      ></ha-device-linked-devices-card>
    `;

    const entitiesColumn = html`
@@ -1,6 +1,6 @@
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-statistic-picker";
 import "../../../../components/ha-button";
@@ -29,11 +29,10 @@ import "./ha-energy-power-config";
 import {
  buildPowerExcludeList,
  getInitialPowerConfig,
-  getPowerHelperEntityId,
  getPowerTypeFromConfig,
-  isPowerConfigValid,
+  type HaEnergyPowerConfig,
  type PowerType,
-} from "./power-config";
+} from "./ha-energy-power-config";
 import type { EnergySettingsBatteryDialogParams } from "./show-dialogs-energy";
 import type { HaInput } from "../../../../components/input/ha-input";

@@ -68,6 +67,8 @@ export class DialogEnergyBatterySettings

  @state() private _error?: string;

+  @query("ha-energy-power-config") private _powerConfigEl?: HaEnergyPowerConfig;
+
  private _excludeList?: string[];

  private _excludeListPower?: string[];
@@ -228,10 +229,6 @@ export class DialogEnergyBatterySettings
          .powerType=${this._powerType}
          .powerConfig=${this._powerConfig}
          .excludeList=${this._excludeListPower}
-          .helperEntityId=${getPowerHelperEntityId(
-            this._params.source,
-            this._powerConfig
-          )}
          .localizeBaseKey=${"ui.panel.config.energy.battery.dialog"}
          @power-config-changed=${this._handlePowerConfigChanged}
        ></ha-energy-power-config>
@@ -252,9 +249,9 @@ export class DialogEnergyBatterySettings
        ></ha-statistic-picker>

        <ha-input
-          .value=${
-            this._source.capacity != null ? String(this._source.capacity) : ""
-          }
+          .value=${this._source.capacity != null
+            ? String(this._source.capacity)
+            : ""}
          .label=${this.hass.localize(
            "ui.panel.config.energy.battery.dialog.capacity"
          )}
@@ -298,7 +295,11 @@ export class DialogEnergyBatterySettings
    }

    // Check power config validity
-    return isPowerConfigValid(this._powerType, this._powerConfig);
+    if (this._powerConfigEl && !this._powerConfigEl.isValid()) {
+      return false;
+    }
+
+    return true;
  }

  private async _updateMetadata(statId: string) {
@@ -373,7 +374,6 @@ export class DialogEnergyBatterySettings
    if (this._source.capacity === undefined) {
      delete this._source.capacity;
    }
-    this._updateFormDirtyState();
  }

  private async _save() {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Maarten Lakerveld	21303baa0a	add results of bundle changes	2026-07-30 09:33:59 +02:00
Maarten Lakerveld	009d634085	update browserlist for better packaging	2026-07-27 13:36:56 +02:00
@@ -1 +1 @@
 .18.1
 .18.0