Consolidate dev server lifecycle handlers

* Add managed modern production builds

* Harden managed build process controls

* Update managed process testing guidance

* Harden managed process file operations

* Share generated output process ownership

* Clean stale build state on status

* Address managed build review feedback

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

* Use single compress task

* 1

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* Forward SIGHUP to foreground processes

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

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

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

.nvmrc

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

README.md

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

build-scripts/build-manager.mjs

@@ -0,0 +1,293 @@
+// 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,
+  terminateDetachedProcess,
+  terminateProcess,
+  waitFor,
+  writeProcessRecord,
+} from "./managed-process.mjs";
+import {
+  buildCacheDir,
+  describeOutputOwner,
+  workflowLockEnv,
+  workflowLockFile,
+} from "./output-lock.mjs";
+
+const repoRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  ".."
+);
+const gulpBin = path.join(repoRoot, "node_modules", ".bin", "gulp");
+const stateDir = path.join(buildCacheDir, "ha-build");
+const logFile = path.join(stateDir, "build.log");
+const lockFile = workflowLockFile;
+
+const usage = () => {
+  process.stderr.write(
+    "Usage: node build-scripts/build-manager.mjs [--modern] " +
+      "[--background | --status | --stop | --logs [--follow]]\n"
+  );
+};
+
+const parseArgs = (argv) => {
+  const args = {
+    mode: "foreground",
+    modes: [],
+    follow: false,
+    modern: false,
+    unknown: [],
+  };
+  for (const arg of argv) {
+    if (LIFECYCLE_MODE_FLAGS.has(arg)) {
+      args.mode = LIFECYCLE_MODE_FLAGS.get(arg);
+      args.modes.push(arg);
+    } else if (arg === "--modern") {
+      args.modern = true;
+    } else if (arg === "--follow") {
+      args.follow = true;
+    } else {
+      args.unknown.push(arg);
+    }
+  }
+  return args;
+};
+
+const hints = () =>
+  "  Stop:   yarn build --stop\n" +
+  "  Status: yarn build --status\n" +
+  "  Logs:   yarn build --logs\n";
+
+const devCommand = (suite) => {
+  switch (suite) {
+    case "app-serve":
+      return "dev:serve";
+    case "demo":
+      return "dev:demo";
+    case "gallery":
+      return "dev:gallery";
+    case "e2e-app":
+      return "test:e2e:app:dev";
+    default:
+      return "dev";
+  }
+};
+
+const readBuild = () => readProcessRecord(lockFile);
+
+const releaseBuild = (token) => releaseProcessRecord(lockFile, token);
+
+const 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 === "output") {
+    process.stdout.write(
+      `${describeOutputOwner(existing)} already owns the build and development workflow` +
+        `${existing.pid ? ` (pid ${existing.pid})` : ""}.\n`
+    );
+    return;
+  }
+  if (existing?.kind === "dev") {
+    const command = devCommand(existing.suite);
+    process.stdout.write(
+      `Dev server (${existing.suite}) already running` +
+        `${existing.pid ? ` (pid ${existing.pid})` : ""}.\n` +
+        `  Stop:   yarn ${command} --stop\n` +
+        `  Status: yarn ${command} --status\n` +
+        `  Logs:   yarn ${command} --logs\n`
+    );
+    return;
+  }
+  process.stdout.write(
+    `Frontend ${existing?.modern ? "modern " : ""}build already running` +
+      `${existing?.pid ? ` (pid ${existing.pid})` : ""}.\n${hints()}`
+  );
+};
+
+const runForeground = async (modern) => {
+  const lock = acquireBuild(modern, true);
+  if (!lock.token) {
+    reportExisting(lock.existing);
+    return 1;
+  }
+  try {
+    return await spawnForeground({
+      cmd: gulpBin,
+      args: [taskFor(modern)],
+      cwd: repoRoot,
+      env: workflowLockEnv(lock.token),
+      processGroup: true,
+      onSpawn: (child) => updateBuild(lock.token, child, true),
+    });
+  } finally {
+    releaseBuild(lock.token);
+  }
+};
+
+const runBackground = async (modern) => {
+  const lock = acquireBuild(modern, false);
+  if (!lock.token) {
+    reportExisting(lock.existing);
+    return 1;
+  }
+  let child;
+  try {
+    child = await spawnDetachedToLog({
+      cmd: gulpBin,
+      args: [taskFor(modern)],
+      cwd: repoRoot,
+      env: workflowLockEnv(lock.token),
+      logFile,
+    });
+    updateBuild(lock.token, child, true);
+    process.stdout.write(
+      `Started ${modern ? "modern " : ""}frontend build (pid ${child.pid})\n` +
+        hints()
+    );
+    return 0;
+  } catch (err) {
+    if (child) {
+      await terminateDetachedProcess(child);
+    }
+    releaseBuild(lock.token);
+    throw err;
+  }
+};
+
+const runStatus = () => {
+  const existing = readBuild();
+  if (existing?.kind === "build" && isProcessRecordAlive(existing)) {
+    process.stdout.write(
+      `Frontend ${existing.modern ? "modern " : ""}build running (pid ${existing.pid}).\n`
+    );
+  } else {
+    if (existing?.kind === "build") {
+      releaseBuild(existing.token);
+    }
+    process.stdout.write("Frontend build not running.\n");
+  }
+  return 0;
+};
+
+const runStop = async () => {
+  let existing = readBuild();
+  if (existing?.kind !== "build") {
+    process.stdout.write("Frontend build not running.\n");
+    return 0;
+  }
+  if (existing?.starting) {
+    const token = existing.token;
+    await waitFor(
+      () => {
+        const current = readBuild();
+        return !current?.starting || current.token !== token;
+      },
+      100,
+      5000
+    );
+    existing = readBuild();
+  }
+  if (
+    !existing ||
+    existing.kind !== "build" ||
+    !isProcessRecordAlive(existing)
+  ) {
+    if (existing) releaseBuild(existing.token);
+    process.stdout.write("Frontend build not running.\n");
+    return 0;
+  }
+  if (
+    !(await terminateProcess({
+      pid: existing.pid,
+      processGroup: existing.processGroup,
+      isStopped: () => !isProcessRecordAlive(existing),
+    }))
+  ) {
+    process.stderr.write(
+      `Failed to stop frontend build (pid ${existing.pid}). Stop it manually.\n`
+    );
+    return 1;
+  }
+  releaseBuild(existing.token);
+  process.stdout.write(`Stopped frontend build (pid ${existing.pid}).\n`);
+  return 0;
+};
+
+const runLogs = (follow) =>
+  outputLog(logFile, follow, `No frontend build log yet (${logFile}).\n`);
+
+const main = async () => {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.unknown.length) {
+    process.stderr.write(`Unknown arguments: ${args.unknown.join(" ")}\n`);
+    usage();
+    return 1;
+  }
+  if (args.modes.length > 1 || (args.follow && args.mode !== "logs")) {
+    process.stderr.write("Invalid combination of build arguments.\n");
+    usage();
+    return 1;
+  }
+  const handlers = {
+    foreground: () => runForeground(args.modern),
+    background: () => runBackground(args.modern),
+    status: runStatus,
+    stop: runStop,
+    logs: () => runLogs(args.follow),
+  };
+  return handlers[args.mode]();
+};
+
+runCli(main);

build-scripts/dev-server.mjs

@@ -14,16 +14,35 @@
 //
 //   health   demo, gallery, e2e-app: a fixed port plus the /__ha_dev_status
 //            endpoint each dev server exposes (see runDevServer in
-//            build-scripts/gulp/rspack.js). The port is the source of truth and
-//            the pid is found from it; no state file.
-//   process  app (yarn dev) and app-serve (yarn dev:serve): the app watcher has
-//            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.
+//            build-scripts/gulp/rspack.js).
+//   process  app (yarn dev) and app-serve (yarn dev:serve): plain yarn dev has
+//            no port, so these treat the first "Build done" log line as ready.
 
-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,
+  runCli,
+  sleep,
+  spawnDetachedToLog,
+  spawnForeground,
+  terminateDetachedProcess,
+  terminateProcess,
+  writeProcessRecord,
+} from "./managed-process.mjs";
+import {
+  buildCacheDir,
+  describeOutputOwner,
+  workflowLockEnv,
+  workflowLockFile,
+} from "./output-lock.mjs";
 
 const repoRoot = path.resolve(
   path.dirname(fileURLToPath(import.meta.url)),
@@ -35,49 +54,67 @@ const developAndServeScript = path.join(
   "script",
   "develop_and_serve"
 );
-const logDir = path.join(repoRoot, "node_modules", ".cache", "ha-dev-server");
+const logDir = path.join(buildCacheDir, "ha-dev-server");
 
 // 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 = {
-  "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: [] },
-  },
-};
+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"] },
+    },
+  ],
+  [
+    "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(process.env.HA_DEV_SERVER_TIMEOUT || "180") * 1000;
+  Number.isFinite(readyTimeoutSeconds) && readyTimeoutSeconds > 0
+    ? readyTimeoutSeconds * 1000
+    : 180_000;
 
 // Detect a coding agent from a small set of environment markers set by common
 // agent CLIs (env-only; no process-ancestry detection).
@@ -104,7 +141,7 @@ const detectAgent = () => {
 };
 
 const usage = () => {
-  const suites = Object.keys(SUITES).join("|");
+  const suites = [...SUITES.keys()].join("|");
   process.stderr.write(
     `Usage: node build-scripts/dev-server.mjs --suite <${suites}> ` +
       `[--background | --status | --stop | --logs [--follow]]\n`
@@ -115,6 +152,7 @@ const parseArgs = (argv) => {
   const args = {
     mode: "foreground",
     follow: false,
+    modes: [],
     suite: undefined,
     passthrough: [],
   };
@@ -124,39 +162,68 @@ 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:
-        // Anything unrecognised is forwarded to the underlying script.
-        args.passthrough.push(arg);
+        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);
+        }
     }
   }
   return args;
 };
 
-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 acquireSuite = (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(workflowLockFile, record);
+  return result.acquired ? { token } : { existing: result.existing };
+};
+
+const updateSuite = (suite, token, child, port) => {
+  const existing = readProcessRecord(workflowLockFile);
+  if (existing?.token !== token) {
+    throw Error(`Dev server (${suite}) ownership was lost during startup.`);
+  }
+  writeProcessRecord(workflowLockFile, {
+    ...existing,
+    pid: child.pid,
+    startTime: processStartTime(child.pid),
+    processGroup: true,
+    starting: false,
+    port,
+  });
+};
+
+const releaseSuite = (token) => releaseProcessRecord(workflowLockFile, token);
+
+const readSuite = (suite) => {
+  const existing = readProcessRecord(workflowLockFile);
+  if (existing?.kind !== "dev" || existing.suite !== suite) {
+    return undefined;
+  }
+  if (isProcessRecordAlive(existing)) {
+    return existing;
+  }
+  releaseSuite(existing.token);
+  return undefined;
+};
 
 const hints = (suite) => {
-  const alias = `yarn ${SUITES[suite].alias}`;
+  const alias = `yarn ${SUITES.get(suite).alias}`;
   return (
     `  Stop:   ${alias} --stop\n` +
     `  Status: ${alias} --status\n` +
@@ -164,46 +231,49 @@ const hints = (suite) => {
   );
 };
 
+const reportProcessConflict = (suite, existing) => {
+  if (existing?.kind === "output") {
+    process.stdout.write(
+      `${describeOutputOwner(existing)} already owns the app output` +
+        `${existing.pid ? ` (pid ${existing.pid})` : ""}.\n`
+    );
+    return;
+  }
+  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)
+  );
+};
+
+const acquireSuiteForStart = (suite) => {
+  const lock = acquireSuite(suite);
+  if (lock.token) {
+    return lock;
+  }
+  reportProcessConflict(suite, lock.existing);
+  return {
+    code:
+      lock.existing?.kind === "dev" &&
+      lock.existing.suite === suite &&
+      !lock.existing.starting
+        ? 0
+        : 1,
+  };
+};
+
 // --- 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).
@@ -214,8 +284,7 @@ const awaitReady = async ({ suite, child, logFile, port, isReady, onExit }) => {
   });
   const deadline = Date.now() + READY_TIMEOUT_MS;
   process.stdout.write(`Starting ${suite} dev server`);
-  /* eslint-disable no-await-in-loop -- poll until the server is ready */
-  while (Date.now() < deadline) {
+  const poll = async () => {
     if (childExited) {
       process.stdout.write("\n");
       process.stderr.write(
@@ -232,38 +301,37 @@ 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) => {
-  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())) {
+  if (!(await terminateProcess({ pid, isStopped }))) {
     process.stderr.write(
       `Failed to stop dev server (${suite}) (pid ${pid}). Stop it manually.\n`
     );
@@ -284,9 +352,11 @@ const terminate = async (suite, pid, isStopped, onStopped) => {
 const PROBE_HOSTS = ["localhost", "127.0.0.1", "[::1]"];
 
 const probe = async (port, timeoutMs = 1000) => {
-  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 probeHost = async (index, sawResponse) => {
+    const host = PROBE_HOSTS[index];
+    if (!host) {
+      return sawResponse ? { state: "foreign" } : { state: "free" };
+    }
     const controller = new AbortController();
     const timer = setTimeout(() => controller.abort(), timeoutMs);
     try {
@@ -305,179 +375,120 @@ const probe = async (port, timeoutMs = 1000) => {
     } finally {
       clearTimeout(timer);
     }
-  }
-  /* eslint-enable no-await-in-loop */
-  return sawResponse ? { state: "foreign" } : { state: "free" };
+    return probeHost(index + 1, sawResponse);
+  };
+  return probeHost(0, false);
 };
 
-// Find the pid listening on a port via the first available tool (no state file).
-const pidFromPort = (port) => {
-  const attempts = [
-    [
-      "lsof",
-      ["-ti", `tcp:${port}`, "-sTCP:LISTEN"],
-      (out) => out.trim().split("\n")[0],
-    ],
-    [
-      "ss",
-      ["-ltnpH", `sport = :${port}`],
-      (out) => out.match(/pid=(\d+)/)?.[1],
-    ],
-    ["fuser", [`${port}/tcp`], (out) => out.trim().split(/\s+/)[0]],
-  ];
-  for (const [cmd, cmdArgs, extract] of attempts) {
+const isHttpServing = async (port, timeoutMs = 1000) => {
+  const probeHost = async (index) => {
+    const host = PROBE_HOSTS[index];
+    if (!host) {
+      return false;
+    }
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), timeoutMs);
     try {
-      const out = execFileSync(cmd, cmdArgs, {
-        encoding: "utf8",
-        stdio: ["ignore", "pipe", "ignore"],
+      const response = await fetch(`http://${host}:${port}`, {
+        signal: controller.signal,
       });
-      const pid = Number(extract(out));
-      if (Number.isInteger(pid) && pid > 0) {
-        return pid;
+      if (response.ok) {
+        return true;
       }
     } catch {
-      // Try the next tool.
+      // Try the next address.
+    } finally {
+      clearTimeout(timer);
     }
-  }
-  return undefined;
+    return probeHost(index + 1);
+  };
+  return probeHost(0);
 };
 
 const runForegroundHealth = async (suite, cfg) => {
   const { port } = cfg;
+  const lock = acquireSuiteForStart(suite);
+  if (!lock.token) {
+    return lock.code;
+  }
   const status = await probe(port);
-  if (status.state === "ours" && status.suite === suite) {
-    process.stdout.write(
-      `Dev server (${suite}) is already running at http://localhost:${port}\n`
+  if (status.state === "ours") {
+    releaseSuite(lock.token);
+    process.stderr.write(
+      `Port ${port} is already serving the ${status.suite ?? "unknown"} dev server.\n`
     );
-    return 0;
+    return 1;
   }
   if (status.state === "foreign") {
+    releaseSuite(lock.token);
     process.stderr.write(
       `Port ${port} is in use by another process; not the ${suite} dev server.\n`
     );
     return 1;
   }
-  return spawnInherit(cfg.spawn.cmd, cfg.spawn.args);
+  try {
+    return await spawnForeground({
+      cmd: cfg.spawn.cmd,
+      args: cfg.spawn.args,
+      cwd: repoRoot,
+      env: workflowLockEnv(lock.token),
+      processGroup: true,
+      onSpawn: (child) => updateSuite(suite, lock.token, child, port),
+    });
+  } finally {
+    releaseSuite(lock.token);
+  }
 };
 
 const runBackgroundHealth = async (suite, cfg) => {
   const { port } = cfg;
+  const lock = acquireSuiteForStart(suite);
+  if (!lock.token) {
+    return lock.code;
+  }
   const preflight = await probe(port);
-  if (preflight.state === "ours" && preflight.suite === suite) {
-    const pid = pidFromPort(port);
-    process.stdout.write(
-      `Dev server (${suite}) already running at http://localhost:${port}` +
-        `${pid ? ` (pid ${pid})` : ""}\n${hints(suite)}`
+  if (preflight.state === "ours") {
+    releaseSuite(lock.token);
+    process.stderr.write(
+      `Port ${port} is already serving the ${preflight.suite ?? "unknown"} dev server.\n`
     );
-    return 0;
+    return 1;
   }
   if (preflight.state === "foreign") {
+    releaseSuite(lock.token);
     process.stderr.write(
       `Port ${port} is in use by another process; not the ${suite} dev server.\n`
     );
     return 1;
   }
-
-  const { child, logFile } = spawnDetachedToLog(
-    suite,
-    cfg.spawn.cmd,
-    cfg.spawn.args
-  );
-  return awaitReady({
-    suite,
-    child,
-    logFile,
-    port,
-    isReady: async () => {
-      const status = await probe(port, 1000);
-      return status.state === "ours" && status.suite === suite;
-    },
-  });
-};
-
-const runStatusHealth = async (suite, cfg) => {
-  const { port } = cfg;
-  const status = await probe(port);
-  if (status.state === "ours" && status.suite === suite) {
-    const pid = pidFromPort(port);
-    process.stdout.write(
-      `Dev server (${suite}) running at http://localhost:${port}` +
-        `${pid ? ` (pid ${pid})` : ""}\n`
-    );
-  } else if (status.state === "ours") {
-    process.stdout.write(
-      `Port ${port} is serving a different Home Assistant frontend dev server (suite ${status.suite ?? "unknown"}); not ${suite}.\n`
-    );
-  } else if (status.state === "foreign") {
-    process.stdout.write(
-      `Port ${port} is in use by another process; not the ${suite} dev server.\n`
-    );
-  } else {
-    process.stdout.write(`Dev server (${suite}) not running.\n`);
-  }
-  return 0;
-};
-
-const runStopHealth = async (suite, cfg) => {
-  const { port } = cfg;
-  const status = await probe(port);
-  if (!(status.state === "ours" && status.suite === suite)) {
-    // Idempotent: stopping something that is not running is a success.
-    process.stdout.write(`Dev server (${suite}) not running.\n`);
-    return 0;
-  }
-  const pid = pidFromPort(port);
-  if (!pid) {
-    process.stderr.write(
-      `Dev server (${suite}) is running but its pid could not be found ` +
-        `(no lsof/ss/fuser?). Stop it manually.\n`
-    );
-    return 1;
-  }
-  return terminate(
-    suite,
-    pid,
-    async () => (await probe(port, 800)).state === "free"
-  );
-};
-
-// --- process liveness (pidfile + log-readiness) -----------------------------
-
-const isAlive = (pid) => {
-  if (!Number.isInteger(pid) || pid <= 0) {
-    return false;
-  }
+  let child;
   try {
-    process.kill(pid, 0);
-    return true;
+    const logFile = logFileFor(suite);
+    child = await spawnDetachedToLog({
+      cmd: cfg.spawn.cmd,
+      args: cfg.spawn.args,
+      cwd: repoRoot,
+      env: workflowLockEnv(lock.token),
+      logFile,
+    });
+    updateSuite(suite, lock.token, child, port);
+    return awaitReady({
+      suite,
+      child,
+      logFile,
+      port,
+      isReady: async () => {
+        const status = await probe(port, 1000);
+        return status.state === "ours" && status.suite === suite;
+      },
+      onExit: () => releaseSuite(lock.token),
+    });
   } catch (err) {
-    // EPERM means the process exists but is owned by someone else.
-    return err.code === "EPERM";
-  }
-};
-
-const readPidFile = (suite) => {
-  try {
-    const data = JSON.parse(fs.readFileSync(pidFileFor(suite), "utf8"));
-    if (data && Number.isInteger(data.pid)) {
-      return data;
+    if (child) {
+      await terminateDetachedProcess(child);
     }
-  } catch {
-    // Missing or corrupt.
-  }
-  return undefined;
-};
-
-const writePidFile = (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.
+    releaseSuite(lock.token);
+    throw err;
   }
 };
 
@@ -492,11 +503,13 @@ 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) => {
-  const i = passthrough.indexOf("-p");
-  if (i !== -1) {
-    const port = Number(passthrough[i + 1]);
-    if (Number.isInteger(port) && port > 0) {
-      return port;
+  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;
+      }
     }
   }
   return process.env.DEVCONTAINER ? 8123 : 8124;
@@ -508,119 +521,115 @@ const spawnArgs = (cfg, passthrough) => [
 ];
 
 const runForegroundProcess = async (suite, cfg, passthrough) => {
-  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;
+  const lock = acquireSuiteForStart(suite);
+  if (!lock.token) {
+    return lock.code;
   }
-  if (existing) {
-    removePidFile(suite);
+  try {
+    return await spawnForeground({
+      cmd: cfg.spawn.cmd,
+      args: spawnArgs(cfg, passthrough),
+      cwd: repoRoot,
+      env: workflowLockEnv(lock.token),
+      processGroup: true,
+      onSpawn: (child) => updateSuite(suite, lock.token, child),
+    });
+  } finally {
+    releaseSuite(lock.token);
   }
-  return spawnInherit(cfg.spawn.cmd, spawnArgs(cfg, passthrough));
 };
 
 const runBackgroundProcess = async (suite, cfg, passthrough) => {
-  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;
-  }
-  if (existing) {
-    removePidFile(suite);
+  const lock = acquireSuiteForStart(suite);
+  if (!lock.token) {
+    return lock.code;
   }
 
-  const { child, logFile } = spawnDetachedToLog(
-    suite,
-    cfg.spawn.cmd,
-    spawnArgs(cfg, passthrough)
-  );
+  let child;
+  try {
+    const logFile = logFileFor(suite);
+    child = await spawnDetachedToLog({
+      cmd: cfg.spawn.cmd,
+      args: spawnArgs(cfg, passthrough),
+      cwd: repoRoot,
+      env: workflowLockEnv(lock.token),
+      logFile,
+    });
 
-  const port = cfg.acceptsArgs ? resolveServePort(passthrough) : cfg.port;
-  writePidFile(suite, { pid: child.pid, port });
+    const port = cfg.acceptsArgs ? resolveServePort(passthrough) : cfg.port;
+    updateSuite(suite, lock.token, child, port);
 
-  return awaitReady({
-    suite,
-    child,
-    logFile,
-    port,
-    isReady: () => logIsReady(logFile, cfg.readyLog),
-    onExit: () => removePidFile(suite),
-  });
+    return awaitReady({
+      suite,
+      child,
+      logFile,
+      port,
+      isReady: async () =>
+        logIsReady(logFile, cfg.readyLog) &&
+        (!cfg.acceptsArgs || (await isHttpServing(port))),
+      onExit: () => releaseSuite(lock.token),
+    });
+  } catch (err) {
+    if (child) {
+      await terminateDetachedProcess(child);
+    }
+    releaseSuite(lock.token);
+    throw err;
+  }
 };
 
-const runStatusProcess = async (suite) => {
-  const existing = readPidFile(suite);
-  if (existing && isAlive(existing.pid)) {
+const runStatusSuite = async (suite, cfg) => {
+  const existing = readSuite(suite);
+  if (existing) {
     process.stdout.write(
-      `Dev server (${suite}) running${urlSuffix(existing.port)} ` +
+      `Dev server (${existing.suite ?? suite}) running${urlSuffix(existing.port ?? cfg.port)} ` +
         `(pid ${existing.pid})\n`
     );
   } else {
-    if (existing) {
-      removePidFile(suite);
-    }
     process.stdout.write(`Dev server (${suite}) not running.\n`);
   }
   return 0;
 };
 
-const runStopProcess = async (suite) => {
-  const existing = readPidFile(suite);
-  if (!existing || !isAlive(existing.pid)) {
-    // Idempotent: stopping something that is not running is a success.
-    if (existing) {
-      removePidFile(suite);
-    }
+const runStopSuite = async (suite) => {
+  const existing = readSuite(suite);
+  if (!existing) {
     process.stdout.write(`Dev server (${suite}) not running.\n`);
     return 0;
   }
   const { pid } = existing;
+  const activeSuite = existing.suite ?? suite;
   return terminate(
-    suite,
+    activeSuite,
     pid,
-    () => !isAlive(pid),
-    () => removePidFile(suite)
+    () => !isProcessRecordAlive(existing),
+    () => releaseSuite(existing.token)
   );
 };
 
 // --- shared -----------------------------------------------------------------
 
 const runLogs = (suite, follow) => {
-  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 activeSuite = readSuite(suite)?.suite ?? suite;
+  return outputLog(
+    logFileFor(activeSuite),
+    follow,
+    `No log for the ${activeSuite} dev server yet (${logFileFor(activeSuite)}).\n`
+  );
 };
 
 const main = async () => {
   const args = parseArgs(process.argv.slice(2));
-  const cfg = SUITES[args.suite];
+  const cfg = SUITES.get(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`
@@ -644,35 +653,28 @@ const main = async () => {
     }
   }
 
-  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);
+  if (mode === "logs") {
+    return runLogs(args.suite, args.follow);
   }
+  if (mode === "status") {
+    return runStatusSuite(args.suite, cfg);
+  }
+  if (mode === "stop") {
+    return runStopSuite(args.suite);
+  }
+  const handlers =
+    cfg.liveness === "health"
+      ? {
+          foreground: () => runForegroundHealth(args.suite, cfg),
+          background: () => runBackgroundHealth(args.suite, cfg),
+        }
+      : {
+          foreground: () =>
+            runForegroundProcess(args.suite, cfg, args.passthrough),
+          background: () =>
+            runBackgroundProcess(args.suite, cfg, args.passthrough),
+        };
+  return handlers[mode]();
 };
 
-main().then(
-  (code) => {
-    process.exitCode = code;
-  },
-  (err) => {
-    process.stderr.write(`${err?.stack || err}\n`);
-    process.exitCode = 1;
-  }
-);
+runCli(main);

build-scripts/gulp/app.js

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

build-scripts/gulp/demo.js

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

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

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

build-scripts/gulp/entry-html.js

@@ -147,9 +147,11 @@ const genPagesProdTask =
         {
           ...commonVars,
           latestEntryJS: entries.map((entry) => latestManifest[`${entry}.js`]),
-          es5EntryJS: entries.map((entry) => es5Manifest[`${entry}.js`]),
+          es5EntryJS: outputES5
+            ? entries.map((entry) => es5Manifest[`${entry}.js`])
+            : [],
           latestCustomPanelJS: latestManifest["custom-panel.js"],
-          es5CustomPanelJS: es5Manifest["custom-panel.js"],
+          es5CustomPanelJS: outputES5 ? es5Manifest["custom-panel.js"] : "",
         }
       );
       minifiedHTML.push(
@@ -184,6 +186,17 @@ gulp.task(
   )
 );
 
+gulp.task(
+  "gen-pages-app-prod-modern",
+  genPagesProdTask(
+    APP_PAGE_ENTRIES,
+    paths.root_dir,
+    paths.app_output_root,
+    paths.app_output_latest,
+    undefined
+  )
+);
+
 const CAST_PAGE_ENTRIES = {
   "faq.html": ["launcher"],
   "index.html": ["launcher"],

build-scripts/gulp/gallery.js

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

build-scripts/gulp/rspack.js

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

build-scripts/gulp/service-worker.js

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

build-scripts/gulp/translations.js

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

build-scripts/managed-process.mjs

@@ -0,0 +1,368 @@
+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,
+  env,
+  processGroup = false,
+  onSpawn,
+}) =>
+  new Promise((resolve, reject) => {
+    const child = spawn(cmd, args, {
+      cwd,
+      detached: processGroup,
+      env,
+      stdio: "inherit",
+    });
+    let settled = false;
+    const forwardSigint = () =>
+      signalProcess(child.pid, "SIGINT", processGroup);
+    const forwardSigterm = () =>
+      signalProcess(child.pid, "SIGTERM", processGroup);
+    const forwardSighup = () =>
+      signalProcess(child.pid, "SIGHUP", processGroup);
+    const removeSignalHandlers = () => {
+      process.off("SIGINT", forwardSigint);
+      process.off("SIGTERM", forwardSigterm);
+      process.off("SIGHUP", forwardSighup);
+    };
+    if (processGroup) {
+      process.on("SIGINT", forwardSigint);
+      process.on("SIGTERM", forwardSigterm);
+      process.on("SIGHUP", forwardSighup);
+    }
+    child.once("spawn", () => {
+      try {
+        onSpawn?.(child);
+      } catch (err) {
+        settled = true;
+        signalProcess(child.pid, "SIGTERM", processGroup);
+        removeSignalHandlers();
+        reject(err);
+      }
+    });
+    child.once("error", (err) => {
+      if (!settled) {
+        settled = true;
+        removeSignalHandlers();
+        process.stderr.write(`Failed to start ${cmd}: ${err.message}\n`);
+        resolve(1);
+      }
+    });
+    child.once("exit", (code) => {
+      if (!settled) {
+        settled = true;
+        removeSignalHandlers();
+        resolve(code ?? 1);
+      }
+    });
+  });
+
+export const spawnDetachedToLog = ({ cmd, args, cwd, env, logFile }) =>
+  new Promise((resolve, reject) => {
+    fs.mkdirSync(path.dirname(logFile), { recursive: true });
+    const fd = fs.openSync(logFile, "w");
+    let child;
+    try {
+      child = spawn(cmd, args, {
+        cwd,
+        detached: true,
+        env,
+        stdio: ["ignore", fd, fd],
+      });
+    } finally {
+      fs.closeSync(fd);
+    }
+    child.once("spawn", () => {
+      child.unref();
+      resolve(child);
+    });
+    child.once("error", reject);
+  });
+
+const signalProcess = (pid, signal, processGroup) => {
+  if (processGroup) {
+    try {
+      process.kill(-pid, signal);
+      return;
+    } catch {
+      // Fall back to the process itself.
+    }
+  }
+  try {
+    process.kill(pid, signal);
+  } catch {
+    // Already gone.
+  }
+};
+
+export const terminateProcess = async ({
+  pid,
+  isStopped,
+  processGroup = true,
+  graceMs = 10_000,
+}) => {
+  signalProcess(pid, "SIGTERM", processGroup);
+  if (await waitFor(isStopped, 300, graceMs)) {
+    return true;
+  }
+  signalProcess(pid, "SIGKILL", processGroup);
+  await sleep(300);
+  return await isStopped();
+};
+
+export const terminateDetachedProcess = (child) =>
+  terminateProcess({
+    pid: child.pid,
+    processGroup: true,
+    isStopped: () => !isProcessAlive(child.pid),
+  });
+
+export const outputLog = (logFile, follow, missingMessage) => {
+  if (!fs.existsSync(logFile)) {
+    process.stdout.write(missingMessage);
+    return Promise.resolve(0);
+  }
+  if (!follow) {
+    process.stdout.write(fs.readFileSync(logFile, "utf8"));
+    return Promise.resolve(0);
+  }
+  return new Promise((resolve) => {
+    const tail = spawn("tail", ["-f", logFile], { stdio: "inherit" });
+    let settled = false;
+    tail.once("error", () => {
+      if (!settled) {
+        settled = true;
+        process.stdout.write(fs.readFileSync(logFile, "utf8"));
+        resolve(0);
+      }
+    });
+    tail.once("exit", (code) => {
+      if (!settled) {
+        settled = true;
+        resolve(code ?? 1);
+      }
+    });
+  });
+};
+
+export const runCli = (main) => {
+  main().then(
+    (code) => {
+      process.exitCode = code;
+    },
+    (err) => {
+      process.stderr.write(`${err?.stack || err}\n`);
+      process.exitCode = 1;
+    }
+  );
+};

build-scripts/output-lock.mjs

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

package.json

@@ -7,7 +7,7 @@
   "name": "home-assistant-frontend",
   "version": "1.0.0",
   "scripts": {
-    "build": "script/build_frontend",
+    "build": "node build-scripts/build-manager.mjs",
     "lint:eslint": "eslint \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --max-warnings=0",
     "format:eslint": "eslint \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --fix",
     "lint:prettier": "prettier . --cache --check",
@@ -186,14 +186,14 @@
     "fs-extra": "11.4.0",
     "generate-license-file": "4.2.1",
     "glob": "13.0.6",
-    "globals": "17.7.0",
+    "globals": "17.8.0",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "29.1.1",
+    "jsdom": "30.0.0",
     "jszip": "3.10.1",
     "license-checker-rseidelsohn": "5.0.1",
     "lint-staged": "17.2.0",
@@ -224,12 +224,12 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.21",
-    "globals": "17.7.0",
+    "globals": "17.8.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },
   "packageManager": "yarn@4.17.1",
   "volta": {
-    "node": "24.18.0"
+    "node": "24.18.1"
   }
 }

pyproject.toml

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

script/develop_and_serve

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

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

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

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

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

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

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

src/components/ha-generic-picker.ts

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

src/components/ha-service-control.ts

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

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

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

src/data/integration.ts

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

src/data/media-player.ts

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

src/data/media_source.ts

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

src/data/zwave_js.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/panels/lovelace/strategies/home/home-overview-view-strategy.ts

@@ -9,6 +9,7 @@ import {
 } from "../../../../common/entity/entity_filter";
 import { floorDefaultIcon } from "../../../../components/ha-floor-icon";
 import type { AreaRegistryEntry } from "../../../../data/area/area_registry";
+import type { EnergyPreferences } from "../../../../data/energy";
 import { getEnergyPreferences } from "../../../../data/energy";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type {
@@ -50,6 +51,26 @@ export interface HomeOverviewViewStrategyConfig {
   shortcuts?: ShortcutItem[];
 }
 
+const energyPreferencesPromises = new WeakMap<
+  HomeAssistant["connection"],
+  Promise<EnergyPreferences | undefined>
+>();
+
+export const preloadHomeEnergyPreferences = (hass: HomeAssistant) => {
+  if (!isComponentLoaded(hass.config, "energy")) {
+    return Promise.resolve(undefined);
+  }
+
+  const existing = energyPreferencesPromises.get(hass.connection);
+  if (existing) {
+    return existing;
+  }
+
+  const request = getEnergyPreferences(hass).catch(() => undefined);
+  energyPreferencesPromises.set(hass.connection, request);
+  return request;
+};
+
 const computeAreaCard = (
   areaId: string,
   hass: HomeAssistant
@@ -305,10 +326,8 @@ export class HomeOverviewViewStrategy extends ReactiveElement {
       .filter(weatherFilter)
       .sort()[0];
 
-    const energyPrefs = isComponentLoaded(hass.config, "energy")
-      ? // It raises if not configured, just swallow that.
-        await getEnergyPreferences(hass).catch(() => undefined)
-      : undefined;
+    const energyPrefs = await preloadHomeEnergyPreferences(hass);
+    energyPreferencesPromises.delete(hass.connection);
 
     const hasEnergy =
       hass.panels.energy &&

test/build-scripts/build-management.test.js

@@ -0,0 +1,139 @@
+/**
+ * @vitest-environment node
+ */
+
+import { execFile, spawn } from "node:child_process";
+import { mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import process from "node:process";
+import { fileURLToPath } from "node:url";
+import { afterEach, describe, expect, it } from "vitest";
+import { processStartTime } from "../../build-scripts/managed-process.mjs";
+
+const repoRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  "../.."
+);
+const temporaryDirectories = [];
+
+const runNode = (args, env = {}) =>
+  new Promise((resolve) => {
+    execFile(
+      process.execPath,
+      args,
+      {
+        cwd: repoRoot,
+        env: { ...process.env, ...env },
+      },
+      (error, stdout, stderr) => {
+        resolve({ code: error?.code ?? 0, stdout, stderr });
+      }
+    );
+  });
+
+const temporaryDirectory = async () => {
+  const directory = await mkdtemp(path.join(tmpdir(), "ha-build-cli-test-"));
+  temporaryDirectories.push(directory);
+  return directory;
+};
+
+const writeOwner = async (owner) => {
+  const cache = await temporaryDirectory();
+  const lockFile = path.join(cache, "ha-workflow.lock");
+  const record = {
+    pid: process.pid,
+    startTime: processStartTime(process.pid),
+    ...owner,
+  };
+  await writeFile(lockFile, JSON.stringify(record));
+  return { cache, lockFile, record };
+};
+
+afterEach(async () => {
+  await Promise.all(
+    temporaryDirectories
+      .splice(0)
+      .map((directory) => rm(directory, { recursive: true, force: true }))
+  );
+});
+
+describe("build management CLIs", () => {
+  it("blocks a managed workflow when another owns the output", async () => {
+    const { cache } = await writeOwner({ kind: "build", token: "build" });
+
+    const result = await runNode(
+      ["build-scripts/dev-server.mjs", "--suite", "app", "--background"],
+      { HA_BUILD_CACHE_DIR: cache }
+    );
+
+    expect(result.code).toBe(1);
+    expect(result.stdout).toContain("Frontend build already running");
+  });
+
+  it("does not stop another development suite", async () => {
+    const { cache, lockFile, record } = await writeOwner({
+      kind: "dev",
+      suite: "demo",
+      token: "demo",
+    });
+
+    const result = await runNode(
+      ["build-scripts/dev-server.mjs", "--suite", "gallery", "--stop"],
+      { HA_BUILD_CACHE_DIR: cache }
+    );
+
+    expect(result.code).toBe(0);
+    expect(result.stdout).toContain("Dev server (gallery) not running");
+    expect(JSON.parse(await readFile(lockFile, "utf8"))).toEqual(record);
+  });
+
+  it("keeps an exact process suite start idempotent", async () => {
+    const { cache } = await writeOwner({
+      kind: "dev",
+      suite: "app",
+      token: "app",
+    });
+
+    const result = await runNode(
+      ["build-scripts/dev-server.mjs", "--suite", "app", "--background"],
+      { HA_BUILD_CACHE_DIR: cache }
+    );
+
+    expect(result.code).toBe(0);
+    expect(result.stdout).toContain("Dev server (app) already running");
+  });
+});
+
+describe("workflow ownership", () => {
+  it("removes owned locks when the child is terminated", async () => {
+    const cache = await temporaryDirectory();
+    const lockFile = path.join(cache, "ha-workflow.lock");
+    const script = [
+      'import { createWorkflowLockTask } from "./build-scripts/output-lock.mjs";',
+      'await createWorkflowLockTask("test")();',
+      'process.stdout.write("ready\\n");',
+      "setInterval(() => {}, 10000);",
+    ].join("");
+    const child = spawn(
+      process.execPath,
+      ["--input-type=module", "-e", script],
+      {
+        cwd: repoRoot,
+        env: { ...process.env, HA_BUILD_CACHE_DIR: cache },
+        stdio: ["ignore", "pipe", "inherit"],
+      }
+    );
+    await new Promise((resolve, reject) => {
+      child.stdout.once("data", resolve);
+      child.once("error", reject);
+    });
+
+    child.kill("SIGTERM");
+    await new Promise((resolve) => {
+      child.once("exit", resolve);
+    });
+
+    await expect(readFile(lockFile)).rejects.toMatchObject({ code: "ENOENT" });
+  });
+});

test/build-scripts/managed-process.test.js

@@ -0,0 +1,64 @@
+/**
+ * @vitest-environment node
+ */
+
+import { mkdtemp, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import process from "node:process";
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  acquireProcessRecord,
+  processStartTime,
+  readProcessRecord,
+  releaseProcessRecord,
+} from "../../build-scripts/managed-process.mjs";
+
+const temporaryDirectories = [];
+
+const temporaryFile = async (name) => {
+  const directory = await mkdtemp(path.join(tmpdir(), "ha-build-test-"));
+  temporaryDirectories.push(directory);
+  return path.join(directory, name);
+};
+
+afterEach(async () => {
+  await Promise.all(
+    temporaryDirectories
+      .splice(0)
+      .map((directory) => rm(directory, { recursive: true, force: true }))
+  );
+});
+
+describe("managed process records", () => {
+  it("recovers a stale owner", async () => {
+    const file = await temporaryFile("stale.lock");
+    await writeFile(
+      file,
+      JSON.stringify({ pid: 2147483647, startTime: "stale", token: "stale" })
+    );
+    const owner = {
+      pid: process.pid,
+      startTime: processStartTime(process.pid),
+      token: "current",
+    };
+
+    expect(acquireProcessRecord(file, owner).acquired).toBe(true);
+    expect(readProcessRecord(file)).toEqual(owner);
+  });
+
+  it("releases only for the owning token", async () => {
+    const file = await temporaryFile("token.lock");
+    const owner = {
+      pid: process.pid,
+      startTime: processStartTime(process.pid),
+      token: "owner",
+    };
+    acquireProcessRecord(file, owner);
+
+    releaseProcessRecord(file, "other");
+    expect(readProcessRecord(file)).toEqual(owner);
+    releaseProcessRecord(file, owner.token);
+    expect(readProcessRecord(file)).toBeUndefined();
+  });
+});

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

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

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

@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest";
+import { html, nothing, render } from "lit";
+import "../../src/components/data-table/ha-data-table";
+import type {
+  DataTableColumnContainer,
+  DataTableRowData,
+  HaDataTable,
+} from "../../src/components/data-table/ha-data-table";
+
+const columns: DataTableColumnContainer = {
+  name: { title: "Name", main: true },
+  area: { title: "Area" },
+  category: { title: "Category" },
+  empty_template: { title: "Empty", template: () => nothing },
+  filled_template: { title: "Filled", template: () => html`filled` },
+};
+
+// The narrow row puts every non-main column on a secondary line, joined by dots.
+const renderNarrowSecondary = (row: DataTableRowData) => {
+  const el = document.createElement("ha-data-table") as HaDataTable;
+  const container = document.createElement("div");
+  render((el as any)._renderRow(columns, true, row, 0), container);
+  return container.querySelector(".secondary")!.textContent!.trim();
+};
+
+describe("ha-data-table narrow secondary line", () => {
+  it("does not render separators for empty columns", () => {
+    expect(renderNarrowSecondary({ id: "1", name: "Test" })).toBe("filled");
+  });
+
+  it("separates only the columns that have a value", () => {
+    expect(
+      renderNarrowSecondary({ id: "1", name: "Test", area: "Kitchen" })
+    ).toBe("Kitchen · filled");
+  });
+
+  it("renders a blank secondary line when all secondary columns are empty", () => {
+    const emptyColumns: DataTableColumnContainer = {
+      name: { title: "Name", main: true },
+      area: { title: "Area" },
+      category: { title: "Category" },
+      empty_template: { title: "Empty", template: () => nothing },
+    };
+    const el = document.createElement("ha-data-table") as HaDataTable;
+    const container = document.createElement("div");
+    render(
+      (el as any)._renderRow(emptyColumns, true, { id: "1", name: "Test" }, 0),
+      container
+    );
+    expect(container.querySelector(".secondary")!.textContent!.trim()).toBe("");
+  });
+});

test/data/integration.test.ts

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

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

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

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

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

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

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

test/setup.ts

@@ -1,5 +1,11 @@
 global.window = (global.window ?? {}) as any;
-global.navigator = (global.navigator ?? {}) as any;
+if (!global.navigator) {
+  Object.defineProperty(global, "navigator", {
+    value: {},
+    configurable: true,
+    writable: true,
+  });
+}
 
 global.__DEMO__ = false;
 global.__DEV__ = false;

yarn.lock

@@ -27,43 +27,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@asamuzakjp/css-color@npm:^5.1.11":
-  version: 5.1.11
-  resolution: "@asamuzakjp/css-color@npm:5.1.11"
+"@asamuzakjp/css-color@npm:^6.0.5":
+  version: 6.0.5
+  resolution: "@asamuzakjp/css-color@npm:6.0.5"
   dependencies:
-    "@asamuzakjp/generational-cache": "npm:^1.0.1"
-    "@csstools/css-calc": "npm:^3.2.0"
-    "@csstools/css-color-parser": "npm:^4.1.0"
+    "@csstools/css-calc": "npm:^3.2.1"
+    "@csstools/css-color-parser": "npm:^4.1.9"
     "@csstools/css-parser-algorithms": "npm:^4.0.0"
     "@csstools/css-tokenizer": "npm:^4.0.0"
-  checksum: 10/2e337cc94b5a3f9741a27f92b4e4b7dc467a76b1dcf66c40e71808fed71695f10c8cf07c8b13313cbb637154314ca1d8626bb9a045fe94b404b242a390cf3bd3
+    lru-cache: "npm:^11.5.2"
+  checksum: 10/bd88a9a1d00711f5f63c4288a82489c33e28de43dee37f418cd30a42517d7b7e2040dc79fc223ececf290e7b3f12bbd2dd8ce7450f73b03bf0613df449b9563f
   languageName: node
   linkType: hard
 
-"@asamuzakjp/dom-selector@npm:^7.1.1":
-  version: 7.1.1
-  resolution: "@asamuzakjp/dom-selector@npm:7.1.1"
+"@asamuzakjp/dom-selector@npm:^8.2.5":
+  version: 8.3.0
+  resolution: "@asamuzakjp/dom-selector@npm:8.3.0"
   dependencies:
-    "@asamuzakjp/generational-cache": "npm:^1.0.1"
-    "@asamuzakjp/nwsapi": "npm:^2.3.9"
     bidi-js: "npm:^1.0.3"
     css-tree: "npm:^3.2.1"
     is-potential-custom-element-name: "npm:^1.0.1"
-  checksum: 10/49a065a64db5f53a3008c231d09606e4b67f509fa20148a67419451c2dc91a421202ed17bfc4bc679ad2f0432d7260720d602c1d5c9c5e165931fff5199c3f12
-  languageName: node
-  linkType: hard
-
-"@asamuzakjp/generational-cache@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "@asamuzakjp/generational-cache@npm:1.0.1"
-  checksum: 10/e1cf3f1916a334c6153f624982f0eb3d50fa3048435ea5c5b0f441f8f1ab74a0fe992dac214b612d22c0acafad3cd1a1f6b45d99c7b6e3b63cfdf7f6ca5fc144
-  languageName: node
-  linkType: hard
-
-"@asamuzakjp/nwsapi@npm:^2.3.9":
-  version: 2.3.9
-  resolution: "@asamuzakjp/nwsapi@npm:2.3.9"
-  checksum: 10/95a6d1c102e1117fe818da087fcc5b914d23e0699855991bae50b891435dd1945ad7d384198f8bcf616207fd85b7ec32e3db6b96e9309d84c6903b8dc4151e34
+    lru-cache: "npm:^11.5.2"
+  checksum: 10/458632671954613e1bd653c9c9d2e8ded44701f19ca8a9641ec3fa0df9eb60089769e0c98dd7991afd53b86e40f8a720024653f451af71ee644d6cf3241c9ec0
   languageName: node
   linkType: hard
 
@@ -2482,26 +2467,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/css-calc@npm:^3.2.0, @csstools/css-calc@npm:^3.2.1":
-  version: 3.2.1
-  resolution: "@csstools/css-calc@npm:3.2.1"
+"@csstools/css-calc@npm:^3.2.1, @csstools/css-calc@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "@csstools/css-calc@npm:3.3.0"
   peerDependencies:
     "@csstools/css-parser-algorithms": ^4.0.0
     "@csstools/css-tokenizer": ^4.0.0
-  checksum: 10/39042a9382cbd7c4fa241c1a6c10d64c23fa7653970fc11df532e9bc42a366a8b50c3ac3036bd5f2a77b94144e7f804f19d2b52800ad2f48bd9a3840377165d8
+  checksum: 10/46dde1c26c8a62d7b849a616a521cb97abc2d6c8c480f7be6f14c70fe60689a2a58c1f5f905aae237250ad27172968e10c70f6f83864c7dc48d8f8921f55f6a9
   languageName: node
   linkType: hard
 
-"@csstools/css-color-parser@npm:^4.1.0":
-  version: 4.1.9
-  resolution: "@csstools/css-color-parser@npm:4.1.9"
+"@csstools/css-color-parser@npm:^4.1.9":
+  version: 4.1.10
+  resolution: "@csstools/css-color-parser@npm:4.1.10"
   dependencies:
     "@csstools/color-helpers": "npm:^6.1.0"
-    "@csstools/css-calc": "npm:^3.2.1"
+    "@csstools/css-calc": "npm:^3.3.0"
   peerDependencies:
     "@csstools/css-parser-algorithms": ^4.0.0
     "@csstools/css-tokenizer": ^4.0.0
-  checksum: 10/6369b601bcd3a8ce58dbcdc389a732b754c8f3fc35421b37169f6d4b07c7261f7b8c23e7d04e457da5e5e0bb082e680acb137d8c86fa1f7d6ff14ea873bf02a2
+  checksum: 10/92f5f590617a2cc9ff358b2d79716cbe15dd4cc7537cdc45ffc55878282677a9ef6c8bfb215a7dc0731f302c32bf1b0d1b7fc3c550147fd8a6d85f7c3cfb0cdd
   languageName: node
   linkType: hard
 
@@ -2514,15 +2499,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/css-syntax-patches-for-csstree@npm:^1.1.3":
-  version: 1.1.6
-  resolution: "@csstools/css-syntax-patches-for-csstree@npm:1.1.6"
+"@csstools/css-syntax-patches-for-csstree@npm:^1.1.6":
+  version: 1.1.7
+  resolution: "@csstools/css-syntax-patches-for-csstree@npm:1.1.7"
   peerDependencies:
     css-tree: ^3.2.1
   peerDependenciesMeta:
     css-tree:
       optional: true
-  checksum: 10/8747268b42f1afbe450d38b7f388a4983c810883f8c0716fa24f5b1eef0f9cbaa3a0f4ea72d1e5cbd015dc4fd5af9cc96ade42792912ed2dcc1d4054de102163
+  checksum: 10/ba372ab41c351509d47e77f58eb56112fe6fd42e104b70c9c9c797faf4fbb3e837a5df5c9d7e3464b04607ee42e91701e34f935aeec8abb94f24be67cfa1b707
   languageName: node
   linkType: hard
 
@@ -2726,7 +2711,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@exodus/bytes@npm:^1.11.0, @exodus/bytes@npm:^1.15.0, @exodus/bytes@npm:^1.6.0":
+"@exodus/bytes@npm:^1.11.0, @exodus/bytes@npm:^1.15.1, @exodus/bytes@npm:^1.6.0":
   version: 1.15.1
   resolution: "@exodus/bytes@npm:1.15.1"
   peerDependencies:
@@ -9675,10 +9660,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globals@npm:17.7.0":
-  version: 17.7.0
-  resolution: "globals@npm:17.7.0"
-  checksum: 10/79304ccc4d2ca167ea15bdb25da346aa34ce3847b18fbd6c3cad182e152505305db3c9722fd5e292c62f6db97a8fa06e0c110a1e7703d7325498e5351d08cab4
+"globals@npm:17.8.0":
+  version: 17.8.0
+  resolution: "globals@npm:17.8.0"
+  checksum: 10/b7b854b2052d2608d1878884bf730c027e17b9e2d194834f48c3280a7f0005b06d5f51dba362d3149cc05eb90d36d990e5c996728ecd3585a43dc3b4a286ed85
   languageName: node
   linkType: hard
 
@@ -10011,7 +9996,7 @@ __metadata:
     fuse.js: "npm:7.5.0"
     generate-license-file: "npm:4.2.1"
     glob: "npm:13.0.6"
-    globals: "npm:17.7.0"
+    globals: "npm:17.8.0"
     gulp: "npm:5.0.1"
     gulp-brotli: "npm:3.0.0"
     gulp-json-transform: "npm:0.5.0"
@@ -10024,7 +10009,7 @@ __metadata:
     idb-keyval: "npm:6.3.0"
     intl-messageformat: "npm:11.2.12"
     js-yaml: "npm:5.2.2"
-    jsdom: "npm:29.1.1"
+    jsdom: "npm:30.0.0"
     jszip: "npm:3.10.1"
     leaflet: "npm:1.9.4"
     leaflet-draw: "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch"
@@ -10979,37 +10964,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsdom@npm:29.1.1":
-  version: 29.1.1
-  resolution: "jsdom@npm:29.1.1"
+"jsdom@npm:30.0.0":
+  version: 30.0.0
+  resolution: "jsdom@npm:30.0.0"
   dependencies:
-    "@asamuzakjp/css-color": "npm:^5.1.11"
-    "@asamuzakjp/dom-selector": "npm:^7.1.1"
+    "@asamuzakjp/css-color": "npm:^6.0.5"
+    "@asamuzakjp/dom-selector": "npm:^8.2.5"
     "@bramus/specificity": "npm:^2.4.2"
-    "@csstools/css-syntax-patches-for-csstree": "npm:^1.1.3"
-    "@exodus/bytes": "npm:^1.15.0"
+    "@csstools/css-syntax-patches-for-csstree": "npm:^1.1.6"
+    "@exodus/bytes": "npm:^1.15.1"
     css-tree: "npm:^3.2.1"
     data-urls: "npm:^7.0.0"
     decimal.js: "npm:^10.6.0"
     html-encoding-sniffer: "npm:^6.0.0"
     is-potential-custom-element-name: "npm:^1.0.1"
-    lru-cache: "npm:^11.3.5"
+    lru-cache: "npm:^11.5.2"
     parse5: "npm:^8.0.1"
     saxes: "npm:^6.0.0"
     symbol-tree: "npm:^3.2.4"
-    tough-cookie: "npm:^6.0.1"
-    undici: "npm:^7.25.0"
+    tough-cookie: "npm:^6.0.2"
+    undici: "npm:^8.7.0"
     w3c-xmlserializer: "npm:^5.0.0"
     webidl-conversions: "npm:^8.0.1"
     whatwg-mimetype: "npm:^5.0.0"
-    whatwg-url: "npm:^16.0.1"
+    whatwg-url: "npm:^17.1.0"
     xml-name-validator: "npm:^5.0.0"
   peerDependencies:
-    canvas: ^3.0.0
+    canvas: ^3.2.3
   peerDependenciesMeta:
     canvas:
       optional: true
-  checksum: 10/344aed7f91839b6c7d1b40778c5542d6ded7d42d88e1b787e10bf12d4ccd65464a5f23f774eb84350885c75a48efc99f6972adbb94dffe324a1b065d3650843c
+  checksum: 10/dc73c071e67224465018733525047d05772667bd8e00a3703a6f6515238c027b6ca768bf86874a53d512fd0bb962d72cc6a6c31c1bc38e52318f9d412ad0bb90
   languageName: node
   linkType: hard
 
@@ -11595,7 +11580,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^11.0.0, lru-cache@npm:^11.1.0, lru-cache@npm:^11.2.1, lru-cache@npm:^11.3.5":
+"lru-cache@npm:^11.0.0, lru-cache@npm:^11.1.0, lru-cache@npm:^11.2.1, lru-cache@npm:^11.5.2":
   version: 11.5.2
   resolution: "lru-cache@npm:11.5.2"
   checksum: 10/122789c66605ddf29df58ff279e9e2c9499499d0b80b895ec524496f14bcde045d1582e3e38008f3457226d98067556719573b352119d6be8bdb1f8849f85681
@@ -14745,7 +14730,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tough-cookie@npm:^6.0.1":
+"tough-cookie@npm:^6.0.2":
   version: 6.0.2
   resolution: "tough-cookie@npm:6.0.2"
   dependencies:
@@ -15071,17 +15056,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"undici@npm:^7.25.0":
-  version: 7.28.0
-  resolution: "undici@npm:7.28.0"
-  checksum: 10/154423b280d623278a61decb437f8a7e581fb18b8c95556ef956b32a58cd668eadbb812d28e20678cb2dc545a566f35a3afc0962307ca801da30f4741117986d
-  languageName: node
-  linkType: hard
-
-"undici@npm:^8.4.1":
-  version: 8.7.0
-  resolution: "undici@npm:8.7.0"
-  checksum: 10/e9644903bda97f825228b4c7bee95b3586609f94df685b598c32bdaf3ac795928cbd25b0ed2690c3ea0b5abd324f5a9641b63b6c81c9b19f3ef4d5b3e402a48c
+"undici@npm:^8.4.1, undici@npm:^8.7.0":
+  version: 8.9.0
+  resolution: "undici@npm:8.9.0"
+  checksum: 10/dfad3e233087eafdf1d361acd17c4d45a9590d5db9400458f1c03f47d8f1ef68647e2109ebb982c862e50c227093abd2d5f44b154904fc0b3d22576b6e95cfe7
   languageName: node
   linkType: hard
 
@@ -15710,7 +15688,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whatwg-url@npm:^16.0.0, whatwg-url@npm:^16.0.1":
+"whatwg-url@npm:^16.0.0":
   version: 16.0.1
   resolution: "whatwg-url@npm:16.0.1"
   dependencies:
@@ -15721,6 +15699,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"whatwg-url@npm:^17.1.0":
+  version: 17.1.0
+  resolution: "whatwg-url@npm:17.1.0"
+  dependencies:
+    "@exodus/bytes": "npm:^1.15.1"
+    tr46: "npm:^6.0.0"
+    webidl-conversions: "npm:^8.0.1"
+  checksum: 10/52052ba12a63e7665ee49d84d251a3d4776be4777fb259155ea3ca9bc49cdbbd18cbb5fce50f187e8450ce81d7abbbc4c39cfb15207c6d11d5c2539f9b87d426
+  languageName: node
+  linkType: hard
+
 "whatwg-url@npm:^5.0.0":
   version: 5.0.0
   resolution: "whatwg-url@npm:5.0.0"