Address managed build review feedback

Co-authored-by: timmo001 <28114703+timmo001@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,24 @@ Never run `tsc` or `yarn lint:types` with file arguments. File arguments make `t
 
 For focused type feedback on one file, use editor diagnostics instead of a file-scoped `tsc` command.
 
+## Production Builds
+
+Production builds support foreground and managed background execution:
+
+```bash
+yarn build                         # Full foreground build
+yarn build --background            # Full managed background build
+yarn build --modern                # Modern frontend_latest bundle only
+yarn build --modern --background   # Modern managed background build
+yarn build --status
+yarn build --logs [--follow]
+yarn build --stop
+```
+
+Use `yarn build --modern --background` for production bundle-size or browser performance comparisons that only need modern browser output. It runs the normal metadata and static preparation, minifies and compresses the modern `frontend_latest` bundle and shared static assets, and generates modern-only entry pages and service workers. It deliberately skips the legacy bundle and its service worker.
+
+Do not pass `--help`, `--background`, or `--modern` to `script/build_frontend`; that raw script does not parse arguments and always starts the full foreground build. Use `yarn build` for managed builds. It prevents another foreground or background build from starting while one is using the shared generated files under `build/` and `hass_frontend/`.
+
 ## Unit And Utility Tests
 
 - Add or update Vitest tests for data processing, utility code, and behavior that can be tested without a browser.
@@ -41,7 +60,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
 

.nvmrc

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

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

build-scripts/dev-server.mjs

@@ -20,10 +20,27 @@
 //            no health endpoint, and plain yarn dev has no port at all, so these
 //            track a pidfile and treat the first "Build done" log line as ready.
 
-import { spawn, execFileSync } from "node:child_process";
+import { execFileSync } from "node:child_process";
 import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
+import {
+  LIFECYCLE_MODE_FLAGS,
+  acquireProcessRecord,
+  isProcessRecordAlive,
+  outputLog,
+  processStartTime,
+  readProcessRecord,
+  releaseProcessRecord,
+  removeProcessRecord,
+  runCli,
+  sleep,
+  spawnDetachedToLog,
+  spawnForeground,
+  terminateProcess,
+  waitFor,
+  writeProcessRecord,
+} from "./managed-process.mjs";
 
 const repoRoot = path.resolve(
   path.dirname(fileURLToPath(import.meta.url)),
@@ -36,48 +53,74 @@ const developAndServeScript = path.join(
   "develop_and_serve"
 );
 const logDir = path.join(repoRoot, "node_modules", ".cache", "ha-dev-server");
+const outputLockFile = path.join(
+  repoRoot,
+  "node_modules",
+  ".cache",
+  "ha-generated-output.lock"
+);
 
 // Each suite names its yarn alias (for hints), a liveness model, and how to
 // spawn it. health suites carry a fixed port; process suites carry the log line
 // that means "ready" and, for app-serve, forward extra args to the script.
-const SUITES = {
-  "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"] },
+      processKey: "app",
+    },
+  ],
+  [
+    "app-serve",
+    {
+      alias: "dev:serve",
+      liveness: "process",
+      acceptsArgs: true,
+      readyLog: /Build done @/,
+      spawn: { cmd: developAndServeScript, args: [] },
+      processKey: "app",
+    },
+  ],
+]);
 
 // 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 +147,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 +158,7 @@ const parseArgs = (argv) => {
   const args = {
     mode: "foreground",
     follow: false,
+    modes: [],
     suite: undefined,
     passthrough: [],
   };
@@ -124,39 +168,99 @@ 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 pidFileFor = (suite) =>
+  path.join(logDir, `${SUITES.get(suite).processKey ?? suite}.pid`);
+const removePidFileIf = (suite, matches) => {
+  const existing = readProcessRecord(pidFileFor(suite));
+  if (!existing) {
+    removeProcessRecord(pidFileFor(suite));
+    return true;
+  }
+  if (matches(existing)) {
+    releaseProcessRecord(outputLockFile, existing.token, () => {
+      if (readProcessRecord(pidFileFor(suite))?.token === existing.token) {
+        removeProcessRecord(pidFileFor(suite));
+      }
+    });
+    return true;
+  }
+  return false;
+};
+
+const acquireProcessSuite = (suite) => {
+  const pidFile = pidFileFor(suite);
+  const token = `${process.pid}-${Date.now()}-${Math.random()}`;
+  const record = {
+    pid: process.pid,
+    startTime: processStartTime(process.pid),
+    kind: "dev",
+    suite,
+    starting: true,
+    token,
+  };
+  const result = acquireProcessRecord(outputLockFile, record);
+  if (!result.acquired) {
+    return { existing: result.existing };
+  }
+  try {
+    writeProcessRecord(pidFile, record);
+  } catch (err) {
+    releaseProcessRecord(outputLockFile, token);
+    throw err;
+  }
+  return { token };
+};
+
+const updateProcessSuite = (suite, token, child) => {
+  const existing = readPidFile(suite);
+  if (existing?.token !== token) {
+    throw Error(
+      `Dev server (${suite}) process ownership was lost during startup.`
+    );
+  }
+  const record = {
+    ...existing,
+    pid: child.pid,
+    startTime: processStartTime(child.pid),
+    starting: false,
+  };
+  writePidFile(suite, record);
+  const outputOwner = readProcessRecord(outputLockFile);
+  if (outputOwner?.token !== token) {
+    throw Error(
+      `Dev server (${suite}) output ownership was lost during startup.`
+    );
+  }
+  writeProcessRecord(outputLockFile, record);
+};
+
+const releaseProcessSuite = (suite, token) => {
+  releaseProcessRecord(outputLockFile, token, () => {
+    if (readPidFile(suite)?.token === token) {
+      removeProcessRecord(pidFileFor(suite));
+    }
+  });
+};
 
 const 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 +268,26 @@ const hints = (suite) => {
   );
 };
 
+const reportProcessConflict = (suite, existing) => {
+  if (existing?.kind === "build") {
+    process.stdout.write(
+      `Frontend build already running${existing.pid ? ` (pid ${existing.pid})` : ""}. ` +
+        "Stop it with yarn build --stop.\n"
+    );
+    return;
+  }
+  process.stdout.write(
+    `Dev server (${existing?.suite ?? suite}) already running` +
+      `${urlSuffix(existing?.port)} ` +
+      `${existing?.pid ? `(pid ${existing.pid})` : ""}\n` +
+      hints(existing?.suite ?? suite)
+  );
+};
+
 // --- shared spawning and lifecycle ------------------------------------------
 
-// Signal the whole process group (the background server is its group leader),
-// falling back to the bare pid if that is not permitted.
-const killProcessTree = (pid, sig) => {
-  try {
-    process.kill(-pid, sig);
-  } catch {
-    try {
-      process.kill(pid, sig);
-    } catch {
-      // Already gone.
-    }
-  }
-};
-
 const urlSuffix = (port) => (port ? ` at http://localhost:${port}` : "");
 
-// Run a server in the foreground, inheriting stdio; resolve with its exit code.
-const spawnInherit = (cmd, args) =>
-  new Promise((resolve) => {
-    const child = spawn(cmd, args, { cwd: repoRoot, stdio: "inherit" });
-    child.on("exit", (code) => resolve(code ?? 0));
-  });
-
-// Spawn a detached server that writes stdout and stderr to the suite's log file.
-const spawnDetachedToLog = (suite, cmd, args) => {
-  fs.mkdirSync(logDir, { recursive: true });
-  const logFile = logFileFor(suite);
-  const fd = fs.openSync(logFile, "w");
-  const child = spawn(cmd, args, {
-    cwd: repoRoot,
-    detached: true,
-    stdio: ["ignore", fd, fd],
-  });
-  fs.closeSync(fd);
-  child.unref();
-  return { child, logFile };
-};
-
 // Poll until the server is ready, the child exits, or we time out. Prints the
 // progress dots and outcome; returns 0 when ready, 1 otherwise. onExit runs if
 // the child dies before it is ready (used to clear a stale pidfile).
@@ -214,8 +298,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 +315,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 +366,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,9 +389,9 @@ 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).
@@ -351,13 +435,23 @@ const runForegroundHealth = async (suite, cfg) => {
     );
     return 0;
   }
+  if (status.state === "ours") {
+    process.stderr.write(
+      `Port ${port} is serving the ${status.suite ?? "unknown"} dev server; not ${suite}.\n`
+    );
+    return 1;
+  }
   if (status.state === "foreign") {
     process.stderr.write(
       `Port ${port} is in use by another process; not the ${suite} dev server.\n`
     );
     return 1;
   }
-  return spawnInherit(cfg.spawn.cmd, cfg.spawn.args);
+  return spawnForeground({
+    cmd: cfg.spawn.cmd,
+    args: cfg.spawn.args,
+    cwd: repoRoot,
+  });
 };
 
 const runBackgroundHealth = async (suite, cfg) => {
@@ -371,6 +465,12 @@ const runBackgroundHealth = async (suite, cfg) => {
     );
     return 0;
   }
+  if (preflight.state === "ours") {
+    process.stderr.write(
+      `Port ${port} is serving the ${preflight.suite ?? "unknown"} dev server; not ${suite}.\n`
+    );
+    return 1;
+  }
   if (preflight.state === "foreign") {
     process.stderr.write(
       `Port ${port} is in use by another process; not the ${suite} dev server.\n`
@@ -378,11 +478,13 @@ const runBackgroundHealth = async (suite, cfg) => {
     return 1;
   }
 
-  const { child, logFile } = spawnDetachedToLog(
-    suite,
-    cfg.spawn.cmd,
-    cfg.spawn.args
-  );
+  const logFile = logFileFor(suite);
+  const child = await spawnDetachedToLog({
+    cmd: cfg.spawn.cmd,
+    args: cfg.spawn.args,
+    cwd: repoRoot,
+    logFile,
+  });
   return awaitReady({
     suite,
     child,
@@ -443,42 +545,12 @@ const runStopHealth = async (suite, cfg) => {
 
 // --- process liveness (pidfile + log-readiness) -----------------------------
 
-const isAlive = (pid) => {
-  if (!Number.isInteger(pid) || pid <= 0) {
-    return false;
-  }
-  try {
-    process.kill(pid, 0);
-    return true;
-  } catch (err) {
-    // EPERM means the process exists but is owned by someone else.
-    return err.code === "EPERM";
-  }
-};
-
 const readPidFile = (suite) => {
-  try {
-    const data = JSON.parse(fs.readFileSync(pidFileFor(suite), "utf8"));
-    if (data && Number.isInteger(data.pid)) {
-      return data;
-    }
-  } catch {
-    // Missing or corrupt.
-  }
-  return undefined;
+  return readProcessRecord(pidFileFor(suite));
 };
 
 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.
-  }
+  writeProcessRecord(pidFileFor(suite), data);
 };
 
 const logIsReady = (logFile, readyLog) => {
@@ -492,11 +564,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,62 +582,72 @@ 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`
-    );
+  const lock = acquireProcessSuite(suite);
+  if (!lock.token) {
+    reportProcessConflict(suite, lock.existing);
     return 0;
   }
-  if (existing) {
-    removePidFile(suite);
+  try {
+    return await spawnForeground({
+      cmd: cfg.spawn.cmd,
+      args: spawnArgs(cfg, passthrough),
+      cwd: repoRoot,
+      processGroup: true,
+      onSpawn: (child) => updateProcessSuite(suite, lock.token, child),
+    });
+  } finally {
+    releaseProcessSuite(suite, lock.token);
   }
-  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)}`
-    );
+  const lock = acquireProcessSuite(suite);
+  if (!lock.token) {
+    reportProcessConflict(suite, lock.existing);
     return 0;
   }
-  if (existing) {
-    removePidFile(suite);
+
+  try {
+    const logFile = logFileFor(suite);
+    const child = await spawnDetachedToLog({
+      cmd: cfg.spawn.cmd,
+      args: spawnArgs(cfg, passthrough),
+      cwd: repoRoot,
+      logFile,
+    });
+
+    const port = cfg.acceptsArgs ? resolveServePort(passthrough) : cfg.port;
+    updateProcessSuite(suite, lock.token, child);
+    writePidFile(suite, { ...readPidFile(suite), port });
+
+    return awaitReady({
+      suite,
+      child,
+      logFile,
+      port,
+      isReady: () => logIsReady(logFile, cfg.readyLog),
+      onExit: () => releaseProcessSuite(suite, lock.token),
+    });
+  } catch (err) {
+    releaseProcessSuite(suite, lock.token);
+    throw err;
   }
-
-  const { child, logFile } = spawnDetachedToLog(
-    suite,
-    cfg.spawn.cmd,
-    spawnArgs(cfg, passthrough)
-  );
-
-  const port = cfg.acceptsArgs ? resolveServePort(passthrough) : cfg.port;
-  writePidFile(suite, { pid: child.pid, port });
-
-  return awaitReady({
-    suite,
-    child,
-    logFile,
-    port,
-    isReady: () => logIsReady(logFile, cfg.readyLog),
-    onExit: () => removePidFile(suite),
-  });
 };
 
 const runStatusProcess = async (suite) => {
   const existing = readPidFile(suite);
-  if (existing && isAlive(existing.pid)) {
+  if (existing && isProcessRecordAlive(existing)) {
     process.stdout.write(
-      `Dev server (${suite}) running${urlSuffix(existing.port)} ` +
+      `Dev server (${existing.suite ?? suite}) running${urlSuffix(existing.port)} ` +
         `(pid ${existing.pid})\n`
     );
   } else {
     if (existing) {
-      removePidFile(suite);
+      removePidFileIf(
+        suite,
+        (current) =>
+          current.token === existing.token && !isProcessRecordAlive(current)
+      );
     }
     process.stdout.write(`Dev server (${suite}) not running.\n`);
   }
@@ -571,56 +655,64 @@ const runStatusProcess = async (suite) => {
 };
 
 const runStopProcess = async (suite) => {
-  const existing = readPidFile(suite);
-  if (!existing || !isAlive(existing.pid)) {
+  let existing = readPidFile(suite);
+  if (existing?.starting) {
+    const token = existing.token;
+    await waitFor(
+      () => {
+        const current = readPidFile(suite);
+        return !current?.starting || current.token !== token;
+      },
+      100,
+      5000
+    );
+    existing = readPidFile(suite);
+  }
+  if (!existing || !isProcessRecordAlive(existing)) {
     // Idempotent: stopping something that is not running is a success.
     if (existing) {
-      removePidFile(suite);
+      removePidFileIf(
+        suite,
+        (current) =>
+          current.token === existing.token && !isProcessRecordAlive(current)
+      );
     }
     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),
+    () => releaseProcessSuite(activeSuite, 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 = readPidFile(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 +736,26 @@ 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);
   }
+  const handlers =
+    cfg.liveness === "health"
+      ? {
+          foreground: () => runForegroundHealth(args.suite, cfg),
+          background: () => runBackgroundHealth(args.suite, cfg),
+          status: () => runStatusHealth(args.suite, cfg),
+          stop: () => runStopHealth(args.suite, cfg),
+        }
+      : {
+          foreground: () =>
+            runForegroundProcess(args.suite, cfg, args.passthrough),
+          background: () =>
+            runBackgroundProcess(args.suite, cfg, args.passthrough),
+          status: () => runStatusProcess(args.suite),
+          stop: () => runStopProcess(args.suite),
+        };
+  return handlers[mode]();
 };
 
-main().then(
-  (code) => {
-    process.exitCode = code;
-  },
-  (err) => {
-    process.stderr.write(`${err?.stack || err}\n`);
-    process.exitCode = 1;
-  }
-);
+runCli(main);

build-scripts/gulp/app.js

@@ -51,6 +51,29 @@ gulp.task(
   )
 );
 
+gulp.task(
+  "build-app-modern",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean",
+    gulp.parallel(
+      "gen-icons-json",
+      "build-translations",
+      "build-locale-data",
+      "gen-licenses"
+    ),
+    "copy-static-app",
+    "rspack-prod-app-modern",
+    gulp.parallel(
+      "gen-pages-app-prod-modern",
+      "gen-service-worker-app-prod-modern"
+    ),
+    ...(env.isTestBuild() || env.isStatsBuild() ? [] : ["compress-app-modern"])
+  )
+);
+
 gulp.task(
   "analyze-app",
   gulp.series(

build-scripts/gulp/compress.js

@@ -48,6 +48,16 @@ const compressAppOtherBrotli = () =>
 const compressAppOtherZopfli = () =>
   compressOther(paths.app_output_root, paths.app_output_latest, "zopfli");
 
+gulp.task(
+  "compress-app-modern",
+  gulp.parallel(
+    compressAppModernBrotli,
+    compressAppOtherBrotli,
+    compressAppModernZopfli,
+    compressAppOtherZopfli
+  )
+);
+
 gulp.task(
   "compress-app",
   gulp.parallel(

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/rspack.js

@@ -160,6 +160,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/managed-process.mjs

@@ -0,0 +1,354 @@
+import { spawn, execFileSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+
+export const LIFECYCLE_MODE_FLAGS = new Map([
+  ["--background", "background"],
+  ["--status", "status"],
+  ["--stop", "stop"],
+  ["--logs", "logs"],
+]);
+
+export const sleep = (ms) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
+export const waitFor = async (predicate, intervalMs, timeoutMs) => {
+  const deadline = Date.now() + timeoutMs;
+  const poll = async () => {
+    if (await predicate()) {
+      return true;
+    }
+    if (Date.now() >= deadline) {
+      return false;
+    }
+    await sleep(intervalMs);
+    return poll();
+  };
+  return poll();
+};
+
+export const isProcessAlive = (pid) => {
+  if (!Number.isInteger(pid) || pid <= 0) {
+    return false;
+  }
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch (err) {
+    // EPERM means the process exists but is owned by someone else.
+    return err.code === "EPERM";
+  }
+};
+
+export const processStartTime = (pid) => {
+  if (!isProcessAlive(pid)) {
+    return undefined;
+  }
+  try {
+    const stat = fs.readFileSync(`/proc/${pid}/stat`, "utf8");
+    return stat.slice(stat.lastIndexOf(")") + 2).split(" ")[19];
+  } catch {
+    try {
+      return execFileSync("ps", ["-o", "lstart=", "-p", String(pid)], {
+        encoding: "utf8",
+        stdio: ["ignore", "pipe", "ignore"],
+      }).trim();
+    } catch {
+      return undefined;
+    }
+  }
+};
+
+export const isProcessRecordAlive = ({ pid, startTime }) =>
+  Boolean(startTime) && processStartTime(pid) === startTime;
+
+export const readProcessRecord = (file) => {
+  try {
+    const data = JSON.parse(fs.readFileSync(file, "utf8"));
+    return data && Number.isInteger(data.pid) ? data : undefined;
+  } catch (err) {
+    if (err.code === "ENOENT" || err instanceof SyntaxError) {
+      return undefined;
+    }
+    throw err;
+  }
+};
+
+export const writeProcessRecord = (file, data) => {
+  fs.mkdirSync(path.dirname(file), { recursive: true });
+  const temporary = `${file}.${process.pid}.${Date.now()}.tmp`;
+  try {
+    fs.writeFileSync(temporary, JSON.stringify(data));
+    fs.renameSync(temporary, file);
+  } finally {
+    removeFileIfExists(temporary);
+  }
+};
+
+export const removeProcessRecord = (file) => {
+  removeFileIfExists(file);
+};
+
+export const acquireProcessRecord = (file, data) => {
+  fs.mkdirSync(path.dirname(file), { recursive: true });
+  for (let attempt = 0; attempt < 2; attempt++) {
+    try {
+      const fd = fs.openSync(file, "wx");
+      try {
+        fs.writeFileSync(fd, JSON.stringify(data));
+      } finally {
+        fs.closeSync(fd);
+      }
+      return { acquired: true };
+    } catch (err) {
+      if (err.code !== "EEXIST") {
+        throw err;
+      }
+      const existing = readProcessRecord(file);
+      if (existing && isProcessRecordAlive(existing)) {
+        return { acquired: false, existing };
+      }
+      if (!existing && isRecentFile(file)) {
+        return { acquired: false };
+      }
+      const removed = withExclusiveFileLockSync(`${file}.cleanup`, () => {
+        const current = readProcessRecord(file);
+        if (
+          current &&
+          (current.token !== existing?.token || isProcessRecordAlive(current))
+        ) {
+          return false;
+        }
+        removeProcessRecord(file);
+        return true;
+      });
+      if (!removed.acquired || !removed.value) {
+        return { acquired: false, existing: readProcessRecord(file) };
+      }
+    }
+  }
+  return { acquired: false, existing: readProcessRecord(file) };
+};
+
+export const releaseProcessRecord = (file, token, onRelease) => {
+  if (!token) {
+    return;
+  }
+  withExclusiveFileLockSync(`${file}.cleanup`, () => {
+    const existing = readProcessRecord(file);
+    if (!existing || existing.token === token) {
+      onRelease?.();
+      if (existing) {
+        removeProcessRecord(file);
+      }
+    }
+  });
+};
+
+const removeFileIfExists = (file) => {
+  try {
+    fs.rmSync(file);
+  } catch (err) {
+    if (err.code !== "ENOENT") {
+      throw err;
+    }
+  }
+};
+
+const isRecentFile = (file) => {
+  try {
+    return Date.now() - fs.statSync(file).mtimeMs < 5000;
+  } catch (err) {
+    if (err.code === "ENOENT") {
+      return false;
+    }
+    throw err;
+  }
+};
+
+export const withExclusiveFileLockSync = (file, operation) => {
+  fs.mkdirSync(path.dirname(file), { recursive: true });
+  for (let attempt = 0; attempt < 2; attempt++) {
+    let fd;
+    try {
+      fd = fs.openSync(file, "wx");
+    } catch (err) {
+      if (err.code !== "EEXIST") {
+        throw err;
+      }
+      const owner = readProcessRecord(file);
+      if (owner && isProcessRecordAlive(owner)) {
+        return { acquired: false };
+      }
+      if (!owner && isRecentFile(file)) {
+        return { acquired: false };
+      }
+      removeFileIfExists(file);
+      continue;
+    }
+    try {
+      fs.writeFileSync(
+        fd,
+        JSON.stringify({
+          pid: process.pid,
+          startTime: processStartTime(process.pid),
+        })
+      );
+      return { acquired: true, value: operation() };
+    } finally {
+      try {
+        fs.closeSync(fd);
+      } finally {
+        removeFileIfExists(file);
+      }
+    }
+  }
+  return { acquired: false };
+};
+
+export const spawnForeground = ({
+  cmd,
+  args,
+  cwd,
+  processGroup = false,
+  onSpawn,
+}) =>
+  new Promise((resolve, reject) => {
+    const child = spawn(cmd, args, {
+      cwd,
+      detached: processGroup,
+      stdio: "inherit",
+    });
+    let settled = false;
+    const forwardSigint = () =>
+      signalProcess(child.pid, "SIGINT", processGroup);
+    const forwardSigterm = () =>
+      signalProcess(child.pid, "SIGTERM", processGroup);
+    const removeSignalHandlers = () => {
+      process.off("SIGINT", forwardSigint);
+      process.off("SIGTERM", forwardSigterm);
+    };
+    if (processGroup) {
+      process.on("SIGINT", forwardSigint);
+      process.on("SIGTERM", forwardSigterm);
+    }
+    child.once("spawn", () => {
+      try {
+        onSpawn?.(child);
+      } catch (err) {
+        settled = true;
+        signalProcess(child.pid, "SIGTERM", processGroup);
+        removeSignalHandlers();
+        reject(err);
+      }
+    });
+    child.once("error", (err) => {
+      if (!settled) {
+        settled = true;
+        removeSignalHandlers();
+        process.stderr.write(`Failed to start ${cmd}: ${err.message}\n`);
+        resolve(1);
+      }
+    });
+    child.once("exit", (code) => {
+      if (!settled) {
+        settled = true;
+        removeSignalHandlers();
+        resolve(code ?? 1);
+      }
+    });
+  });
+
+export const spawnDetachedToLog = ({ cmd, args, cwd, logFile }) =>
+  new Promise((resolve, reject) => {
+    fs.mkdirSync(path.dirname(logFile), { recursive: true });
+    const fd = fs.openSync(logFile, "w");
+    let child;
+    try {
+      child = spawn(cmd, args, {
+        cwd,
+        detached: true,
+        stdio: ["ignore", fd, fd],
+      });
+    } finally {
+      fs.closeSync(fd);
+    }
+    child.once("spawn", () => {
+      child.unref();
+      resolve(child);
+    });
+    child.once("error", reject);
+  });
+
+const signalProcess = (pid, signal, processGroup) => {
+  if (processGroup) {
+    try {
+      process.kill(-pid, signal);
+      return;
+    } catch {
+      // Fall back to the process itself.
+    }
+  }
+  try {
+    process.kill(pid, signal);
+  } catch {
+    // Already gone.
+  }
+};
+
+export const terminateProcess = async ({
+  pid,
+  isStopped,
+  processGroup = true,
+  graceMs = 10_000,
+}) => {
+  signalProcess(pid, "SIGTERM", processGroup);
+  if (await waitFor(isStopped, 300, graceMs)) {
+    return true;
+  }
+  signalProcess(pid, "SIGKILL", processGroup);
+  await sleep(300);
+  return await isStopped();
+};
+
+export const outputLog = (logFile, follow, missingMessage) => {
+  if (!fs.existsSync(logFile)) {
+    process.stdout.write(missingMessage);
+    return Promise.resolve(0);
+  }
+  if (!follow) {
+    process.stdout.write(fs.readFileSync(logFile, "utf8"));
+    return Promise.resolve(0);
+  }
+  return new Promise((resolve) => {
+    const tail = spawn("tail", ["-f", logFile], { stdio: "inherit" });
+    let settled = false;
+    tail.once("error", () => {
+      if (!settled) {
+        settled = true;
+        process.stdout.write(fs.readFileSync(logFile, "utf8"));
+        resolve(0);
+      }
+    });
+    tail.once("exit", (code) => {
+      if (!settled) {
+        settled = true;
+        resolve(code ?? 1);
+      }
+    });
+  });
+};
+
+export const runCli = (main) => {
+  main().then(
+    (code) => {
+      process.exitCode = code;
+    },
+    (err) => {
+      process.stderr.write(`${err?.stack || err}\n`);
+      process.exitCode = 1;
+    }
+  );
+};

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,7 +186,7 @@
     "fs-extra": "11.4.0",
     "generate-license-file": "4.2.1",
     "glob": "13.0.6",
-    "globals": "17.8.0",
+    "globals": "17.7.0",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
@@ -224,12 +224,12 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.21",
-    "globals": "17.8.0",
+    "globals": "17.7.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },
   "packageManager": "yarn@4.17.1",
   "volta": {
-    "node": "24.18.1"
+    "node": "24.18.0"
   }
 }

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

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

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

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

yarn.lock

@@ -9675,10 +9675,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globals@npm:17.8.0":
-  version: 17.8.0
-  resolution: "globals@npm:17.8.0"
-  checksum: 10/b7b854b2052d2608d1878884bf730c027e17b9e2d194834f48c3280a7f0005b06d5f51dba362d3149cc05eb90d36d990e5c996728ecd3585a43dc3b4a286ed85
+"globals@npm:17.7.0":
+  version: 17.7.0
+  resolution: "globals@npm:17.7.0"
+  checksum: 10/79304ccc4d2ca167ea15bdb25da346aa34ce3847b18fbd6c3cad182e152505305db3c9722fd5e292c62f6db97a8fa06e0c110a1e7703d7325498e5351d08cab4
   languageName: node
   linkType: hard
 
@@ -10011,7 +10011,7 @@ __metadata:
     fuse.js: "npm:7.5.0"
     generate-license-file: "npm:4.2.1"
     glob: "npm:13.0.6"
-    globals: "npm:17.8.0"
+    globals: "npm:17.7.0"
     gulp: "npm:5.0.1"
     gulp-brotli: "npm:3.0.0"
     gulp-json-transform: "npm:0.5.0"