Add BrowserStack cross-browser/device e2e runs

Layers BrowserStack on top of the local Playwright e2e suites:
- browserstack.yml (Windows Chrome, macOS Firefox, iPad/iPhone WebKit,
  Galaxy S23) driven by the BrowserStack Node SDK and Local tunnel
- :browserstack package scripts and the gated E2E (BrowserStack) CI job
  (runs on manual dispatch or the e2e-browserstack PR label)
- tunnel/iOS-WebKit resilience in the specs (bs-local.com host, single
  shared mobile context, dynamic-import + CDP "Internal error" skips)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

.github/ISSUE_TEMPLATE.md

@@ -67,7 +67,7 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 <!--
   If your issue is about how an entity is shown in the UI, please add the state
   and attributes for all situations with a screenshot of the UI.
-  You can find this information at `/config/tools/state`
+  You can find this information at `/config/developer-tools/state`
 -->
 
 ```yaml

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -94,8 +94,8 @@ body:
       label: State of relevant entities
       description: >
         If your issue is about how an entity is shown in the UI, please add the
-        state and attributes for all situations. You can find this
-        information in the Details view of the More info dialog.
+        state and attributes for all situations. You can find this information
+        at Developer Tools -> States.
       render: txt
   - type: textarea
     attributes:

.github/copilot-instructions.md

@@ -25,8 +25,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 dev           # Dev server (app; --background/--status/--stop/--logs)
-yarn dev:serve     # Dev server with serve (-c core URL, -p port; --background/--status/--stop/--logs)
+script/develop     # Development server
 ```
 
 > **WARNING:** Never run `tsc` or `yarn lint:types` with file arguments (e.g., `yarn lint:types src/file.ts`). When `tsc` receives file arguments, it ignores `tsconfig.json` and emits `.js` files into `src/`, polluting the codebase. Always run `yarn lint:types` without arguments. For individual file type checking, rely on IDE diagnostics. If `.js` files are accidentally generated, clean up with `git clean -fd src/`.
@@ -496,26 +495,6 @@ this.hass.localize("ui.panel.config.updates.update_available", {
 4. **Test**: `yarn test` - Add and run tests
 5. **Build**: `script/build_frontend` - Test production build
 
-### Dev servers
-
-`yarn dev` builds and watches the app, served by a running Home Assistant core (`development_repo` setting). `yarn dev:serve` also serves it locally (`-c` core URL, `-p` port, default 8124).
-
-These and the e2e dev servers below take `--background`, `--status`, `--stop`, and `--logs [--follow]`.
-
-### End-to-end (e2e) tests
-
-Each Playwright suite has a dev server on its own port. Playwright reuses a server already on the port (`reuseExistingServer` locally); otherwise it does a slow full build. The rspack watcher recompiles on save, so re-runs need no restart.
-
-Start the suite's dev server, then run the suite:
-
-- **App** (8095): `yarn test:e2e:app:dev`, then `yarn test:e2e:app`
-- **Demo** (8090): `yarn dev:demo`, then `yarn test:e2e:demo`
-- **Gallery** (8100): `yarn dev:gallery`, then `yarn test:e2e:gallery`
-
-Server reuse and `--stop` key off a `/__ha_dev_status` health check, so starting or stopping twice is harmless. The app suite uses a stripped-down harness built only for e2e; demo and gallery use their normal dev servers.
-
-Add `-g "<title>" --project=chromium` to narrow a run; `yarn test:e2e` runs all three. Run the suite directly, since piping through `tail`/`head` hides progress and truncates results.
-
 ### Gallery
 
 For Gallery-specific structure, page/demo naming, sidebar behavior, content standards, and commands, see [`gallery/AGENTS.md`](gallery/AGENTS.md).

.github/scripts/check-blocking-labels.mjs

@@ -1,38 +0,0 @@
-#!/usr/bin/env node
-// Fails the check when a pull request carries a label that blocks merging, and
-// writes the outcome to the job summary. Invoked from the `check` job in
-// .github/workflows/blocking-labels.yaml via actions/github-script:
-//
-//   const { default: checkBlockingLabels } =
-//     await import(`${process.env.GITHUB_WORKSPACE}/.github/scripts/check-blocking-labels.mjs`);
-//   await checkBlockingLabels({ github, context, core });
-
-export default async function checkBlockingLabels({ context, core }) {
-  const blockingLabels = [
-    "wait for backend",
-    "Needs UX",
-    "Do Not Review",
-    "Blocked",
-    "has-parent",
-  ];
-  const prLabels = context.payload.pull_request.labels.map((l) => l.name);
-  const found = blockingLabels.filter((bl) => prLabels.includes(bl));
-  if (found.length > 0) {
-    const message = `This Pull Request is blocked by label${found.length > 1 ? "s" : ""}: ${found.join(", ")}`;
-    await core.summary
-      .addHeading(":no_entry_sign: Pull Request is blocked", 2)
-      .addRaw(message)
-      .write();
-    core.setFailed(message);
-  } else {
-    await core.summary
-      .addHeading(
-        ":white_check_mark: Pull Request is clear to merge after review",
-        2
-      )
-      .addRaw(
-        "This Pull Request is not blocked by any labels which prevent it from being merged."
-      )
-      .write();
-  }
-}

.github/scripts/check-pull-request-standards.mjs

@@ -1,195 +0,0 @@
-#!/usr/bin/env node
-// Checks that a pull request follows the contribution standards: it must use the
-// PR template, tick exactly one "Type of change" option, and describe the change.
-// Labels and comments the PR when it does not, and fails the check so it blocks
-// merging. Invoked from the `check` job in .github/workflows/pull-request-standards.yaml
-// via actions/github-script:
-//
-//   const { default: checkStandards } =
-//     await import(`${process.env.GITHUB_WORKSPACE}/.github/scripts/check-pull-request-standards.mjs`);
-//   await checkStandards({ github, context, core });
-
-export default async function checkPullRequestStandards({
-  github,
-  context,
-  core,
-}) {
-  const pr = context.payload.pull_request;
-
-  // Exempt bots (Copilot agent, dependabot), drafts, and maintainers.
-  if (pr.user.type === "Bot") {
-    core.info(`Skipping bot author: ${pr.user.login}`);
-    return;
-  }
-  if (pr.draft) {
-    core.info("Skipping draft pull request");
-    return;
-  }
-  try {
-    await github.rest.orgs.checkMembershipForUser({
-      org: "home-assistant",
-      username: pr.user.login,
-    });
-    core.info(`Skipping organization member: ${pr.user.login}`);
-    return;
-  } catch (_error) {
-    core.info(
-      `${pr.user.login} is not an organization member, checking standards`
-    );
-  }
-
-  const label = "Needs Template";
-  const marker = "<!-- pr-standards-check -->";
-  const { owner, repo } = context.repo;
-  const issue_number = pr.number;
-
-  let body = pr.body || "";
-  let previous;
-  do {
-    previous = body;
-    body = body.replace(/<!--[\s\S]*?-->/g, "");
-  } while (body !== previous);
-  const normalized = body.toLowerCase();
-
-  // Ignore 404s from mutations that race manual edits or cancelled runs.
-  const ignoreMissing = async (fn) => {
-    try {
-      await fn();
-    } catch (error) {
-      if (error.status === 404) {
-        core.info("Target already removed, nothing to do");
-        return;
-      }
-      throw error;
-    }
-  };
-
-  // Hide/restore our comment via GraphQL (REST cannot minimize).
-  const setMinimized = async (subjectId, minimized) => {
-    const mutation = minimized
-      ? `mutation($id: ID!) {
-           minimizeComment(input: { subjectId: $id, classifier: RESOLVED }) {
-             clientMutationId
-           }
-         }`
-      : `mutation($id: ID!) {
-           unminimizeComment(input: { subjectId: $id }) {
-             clientMutationId
-           }
-         }`;
-    try {
-      await github.graphql(mutation, { id: subjectId });
-    } catch (error) {
-      core.info(
-        `Could not ${minimized ? "minimize" : "restore"} comment: ${error.message}`
-      );
-    }
-  };
-
-  // Content of a "## <name>" section, or null when the heading is absent.
-  const section = (name) => {
-    const match = body.match(
-      new RegExp(`##\\s${name}([\\s\\S]*?)(?=\\n##\\s|$)`, "i")
-    );
-    return match ? match[1] : null;
-  };
-
-  const problems = [];
-
-  const requiredHeadings = [
-    "## proposed change",
-    "## type of change",
-    "## checklist",
-  ];
-  if (requiredHeadings.some((h) => !normalized.includes(h))) {
-    problems.push(
-      "Use the pull request template without removing its sections."
-    );
-  }
-
-  const typeOfChange = section("type of change");
-  if (typeOfChange !== null) {
-    const ticked = (typeOfChange.match(/-\s*\[[xX]\]/g) || []).length;
-    if (ticked !== 1) {
-      problems.push('Select exactly one option under "Type of change".');
-    }
-  }
-
-  const proposedChange = section("proposed change");
-  if (proposedChange !== null && proposedChange.trim().length === 0) {
-    problems.push('Describe your changes under "Proposed change".');
-  }
-
-  const isValid = problems.length === 0;
-
-  const comments = await github.paginate(github.rest.issues.listComments, {
-    owner,
-    repo,
-    issue_number,
-    per_page: 100,
-  });
-  const existing = comments.find((c) => c.body.includes(marker));
-  const hasLabel = pr.labels.some((l) => l.name === label);
-
-  if (isValid) {
-    core.info("Pull request standards met");
-
-    if (hasLabel) {
-      await ignoreMissing(() =>
-        github.rest.issues.removeLabel({
-          owner,
-          repo,
-          issue_number,
-          name: label,
-        })
-      );
-    }
-    if (existing) {
-      await setMinimized(existing.node_id, true);
-    }
-    return;
-  }
-
-  core.info(`Pull request standards not met:\n- ${problems.join("\n- ")}`);
-
-  if (!hasLabel) {
-    await github.rest.issues.addLabels({
-      owner,
-      repo,
-      issue_number,
-      labels: [label],
-    });
-  }
-
-  const message =
-    `${marker}\n` +
-    `Hey @${pr.user.login}!\n\n` +
-    `Thank you for your contribution! To help reviewers, please update ` +
-    `this pull request to follow our pull request standards:\n\n` +
-    problems.map((p) => `- ${p}`).join("\n") +
-    `\n\n` +
-    `Please complete the ` +
-    `[PR template](https://github.com/home-assistant/frontend/blob/dev/.github/PULL_REQUEST_TEMPLATE.md?plain=1) ` +
-    `and see the [developer docs](https://developers.home-assistant.io/docs/review-process) ` +
-    `for more on creating a great pull request (see point 6).`;
-
-  if (existing) {
-    await github.rest.issues.updateComment({
-      owner,
-      repo,
-      comment_id: existing.id,
-      body: message,
-    });
-    await setMinimized(existing.node_id, false);
-  } else {
-    await github.rest.issues.createComment({
-      owner,
-      repo,
-      issue_number,
-      body: message,
-    });
-  }
-
-  // Fail this check so it can block the PR from being merged
-  core.setFailed(`Pull request standards not met:\n- ${problems.join("\n- ")}`);
-}

.github/scripts/check-task-authorization.mjs

@@ -1,58 +0,0 @@
-#!/usr/bin/env node
-// Restricts Task issues to organization members: closes and labels the issue with
-// an explanatory comment when the author is not an org member. Invoked from the
-// `check-authorization` job in .github/workflows/restrict-task-creation.yml via
-// actions/github-script:
-//
-//   const { default: checkTaskAuthorization } =
-//     await import(`${process.env.GITHUB_WORKSPACE}/.github/scripts/check-task-authorization.mjs`);
-//   await checkTaskAuthorization({ github, context, core });
-
-export default async function checkTaskAuthorization({
-  github,
-  context,
-  core,
-}) {
-  const issueAuthor = context.payload.issue.user.login;
-
-  // Check if user is an organization member
-  try {
-    await github.rest.orgs.checkMembershipForUser({
-      org: "home-assistant",
-      username: issueAuthor,
-    });
-    core.info(`✅ ${issueAuthor} is an organization member`);
-    return; // Authorized
-  } catch (_error) {
-    core.info(`❌ ${issueAuthor} is not authorized to create Task issues`);
-  }
-
-  // Close the issue with a comment
-  await github.rest.issues.createComment({
-    owner: context.repo.owner,
-    repo: context.repo.repo,
-    issue_number: context.issue.number,
-    body:
-      `Hi @${issueAuthor}, thank you for your contribution!\n\n` +
-      `Task issues are restricted to Open Home Foundation staff and authorized contributors.\n\n` +
-      `If you would like to:\n` +
-      `- Report a bug: Please use the [bug report form](https://github.com/home-assistant/frontend/issues/new?template=bug_report.yml)\n` +
-      `- Request a feature: Please submit to [Feature Requests](https://github.com/orgs/home-assistant/discussions)\n\n` +
-      `If you believe you should have access to create Task issues, please contact the maintainers.`,
-  });
-
-  await github.rest.issues.update({
-    owner: context.repo.owner,
-    repo: context.repo.repo,
-    issue_number: context.issue.number,
-    state: "closed",
-  });
-
-  // Add a label to indicate this was auto-closed
-  await github.rest.issues.addLabels({
-    owner: context.repo.owner,
-    repo: context.repo.repo,
-    issue_number: context.issue.number,
-    labels: ["auto-closed"],
-  });
-}

.github/workflows/actionlint.yaml

@@ -1,40 +0,0 @@
-name: Lint workflow files
-
-on:
-  push:
-    branches:
-      - dev
-      - master
-    paths:
-      - ".github/workflows/**"
-  pull_request:
-    branches:
-      - dev
-      - master
-    paths:
-      - ".github/workflows/**"
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-
-jobs:
-  actionlint:
-    name: Check workflow files
-    runs-on: ubuntu-latest
-    env:
-      # renovate: datasource=github-releases depName=rhysd/actionlint
-      ACTIONLINT_VERSION: 1.7.12
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-        with:
-          persist-credentials: false
-      - name: Run actionlint
-        run: |
-          curl -sSfL "https://github.com/rhysd/actionlint/releases/download/v${ACTIONLINT_VERSION}/actionlint_${ACTIONLINT_VERSION}_linux_amd64.tar.gz" \
-            | tar -xz actionlint
-          ./actionlint -color

.github/workflows/blocking-labels.yaml

@@ -20,16 +20,31 @@ jobs:
     name: Check for labels which block the Pull Request from being merged
     runs-on: ubuntu-latest
     steps:
-      - name: Check out workflow scripts
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-        with:
-          persist-credentials: false
-          sparse-checkout: .github/scripts
       - name: Check for blocking labels
         uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
         with:
           script: |
-            const { default: checkBlockingLabels } = await import(
-              `${process.env.GITHUB_WORKSPACE}/.github/scripts/check-blocking-labels.mjs`
+            const blockingLabels = [
+              "wait for backend",
+              "Needs UX",
+              "Do Not Review",
+              "Blocked",
+              "has-parent",
+            ];
+            const prLabels = context.payload.pull_request.labels.map(
+              (l) => l.name
             );
-            await checkBlockingLabels({ github, context, core });
+            const found = blockingLabels.filter((bl) => prLabels.includes(bl));
+            if (found.length > 0) {
+              const message = `This Pull Request is blocked by label${found.length > 1 ? "s" : ""}: ${found.join(", ")}`;
+              await core.summary
+                .addHeading(":no_entry_sign: Pull Request is blocked", 2)
+                .addRaw(message)
+                .write();
+              core.setFailed(message);
+            } else {
+              await core.summary
+                .addHeading(":white_check_mark: Pull Request is clear to merge after review", 2)
+                .addRaw("This Pull Request is not blocked by any labels which prevent it from being merged.")
+                .write();
+            }

.github/workflows/cast_deployment.yaml

@@ -21,10 +21,10 @@ jobs:
     if: github.event_name != 'push'
     environment:
       name: Cast Development
-      url: ${{ steps.deploy.outputs.netlify_url }}
+      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           ref: dev
           persist-credentials: false
@@ -46,8 +46,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=cast/dist --alias dev --json > deploy_output.json
-          echo "netlify_url=$(jq -r '.url // .deploy_url' deploy_output.json)" >> "$GITHUB_OUTPUT"
+          npx -y netlify-cli deploy --dir=cast/dist --alias dev
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
@@ -58,10 +57,10 @@ jobs:
     if: github.event_name == 'push'
     environment:
       name: Cast Production
-      url: ${{ steps.deploy.outputs.netlify_url }}
+      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           ref: master
           persist-credentials: false
@@ -83,8 +82,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=cast/dist --prod --json > deploy_output.json
-          echo "netlify_url=$(jq -r '.url // .deploy_url' deploy_output.json)" >> "$GITHUB_OUTPUT"
+          npx -y netlify-cli deploy --dir=cast/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}

.github/workflows/ci.yaml

@@ -27,7 +27,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           persist-credentials: false
       - name: Setup Node
@@ -65,7 +65,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           persist-credentials: false
       - name: Setup Node
@@ -85,7 +85,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           persist-credentials: false
       - name: Setup Node
@@ -105,8 +105,6 @@ jobs:
           name: frontend-bundle-stats
           path: build/stats/*.json
           if-no-files-found: error
-      - name: Check entrypoint bundle size budget
-        run: yarn run check-bundlesize
       - name: Upload frontend build
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:

.github/workflows/codeql-analysis.yml

@@ -2,42 +2,64 @@ name: "CodeQL"
 
 on:
   push:
-    branches:
-      - dev
-      - master
+    branches: [dev, master]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches:
-      - dev
+    branches: [dev]
 
-permissions: {}
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
+permissions:
+  contents: read
+  security-events: write
 
 jobs:
   analyze:
     name: Analyze
     runs-on: ubuntu-latest
-    timeout-minutes: 360
-    permissions:
-      contents: read # To check out the repository
-      security-events: write # To upload CodeQL results
+
+    strategy:
+      fail-fast: false
+      matrix:
+        # Override automatic language detection by changing the below list
+        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
+        language: ["javascript"]
+        # Learn more...
+        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
 
     steps:
-      - name: Check out code from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - name: Checkout repository
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
+          # We must fetch at least the immediate parents so that if this is
+          # a pull request then we can checkout the head.
+          fetch-depth: 2
           persist-credentials: false
 
+      # If this run was triggered by a pull request event, then checkout
+      # the head of the pull request instead of the merge commit.
+      - run: git checkout HEAD^2
+        if: ${{ github.event_name == 'pull_request' }}
+
+      # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
         uses: github/codeql-action/init@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
         with:
-          languages: javascript-typescript
-          build-mode: none
+          languages: ${{ matrix.language }}
+
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
+
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
+
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
+
+      #- run: |
+      #   make bootstrap
+      #   make release
 
       - name: Perform CodeQL Analysis
         uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
-        with:
-          category: "/language:javascript-typescript"

.github/workflows/demo_deployment.yaml

@@ -22,10 +22,10 @@ jobs:
     if: github.event_name != 'push' || github.ref_name != 'master'
     environment:
       name: Demo Development
-      url: ${{ steps.deploy.outputs.netlify_url }}
+      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           ref: dev
           persist-credentials: false
@@ -47,8 +47,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=demo/dist --prod --json > deploy_output.json
-          echo "netlify_url=$(jq -r '.url // .deploy_url' deploy_output.json)" >> "$GITHUB_OUTPUT"
+          npx -y netlify-cli deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
@@ -59,10 +58,10 @@ jobs:
     if: github.event_name == 'push' && github.ref_name == 'master'
     environment:
       name: Demo Production
-      url: ${{ steps.deploy.outputs.netlify_url }}
+      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           ref: master
           persist-credentials: false
@@ -84,8 +83,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=demo/dist --prod --json > deploy_output.json
-          echo "netlify_url=$(jq -r '.url // .deploy_url' deploy_output.json)" >> "$GITHUB_OUTPUT"
+          npx -y netlify-cli deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}

.github/workflows/design_deployment.yaml

@@ -16,10 +16,10 @@ jobs:
     runs-on: ubuntu-latest
     environment:
       name: Design
-      url: ${{ steps.deploy.outputs.netlify_url }}
+      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           persist-credentials: false
 
@@ -40,8 +40,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=gallery/dist --prod --json > deploy_output.json
-          echo "netlify_url=$(jq -r '.url // .deploy_url' deploy_output.json)" >> "$GITHUB_OUTPUT"
+          npx -y netlify-cli deploy --dir=gallery/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}

.github/workflows/design_preview.yaml

@@ -24,7 +24,7 @@ jobs:
     if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           persist-credentials: false
 
@@ -47,10 +47,11 @@ jobs:
         run: |
           npx -y netlify-cli deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
             --json > deploy_output.json
-          echo "netlify_url=$(jq -r '.url // .deploy_url' deploy_output.json)" >> "$GITHUB_OUTPUT"
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}
 
       - name: Generate summary
-        run: echo "${{ steps.deploy.outputs.netlify_url }}" >> "$GITHUB_STEP_SUMMARY"
+        run: |
+          NETLIFY_LIVE_URL=$(jq -r '.deploy_url' deploy_output.json)
+          echo "$NETLIFY_LIVE_URL" >> "$GITHUB_STEP_SUMMARY"

.github/workflows/e2e.yaml

@@ -9,7 +9,14 @@ on:
     branches:
       - dev
       - master
+  # BrowserStack runs are gated by the `e2e-browserstack` label or manual
+  # dispatch — see the e2e-browserstack job below. Local Chromium always runs.
   workflow_dispatch:
+    inputs:
+      run-browserstack:
+        description: "Run BrowserStack suite"
+        type: boolean
+        default: true
 
 env:
   NODE_OPTIONS: --max_old_space_size=6144
@@ -28,7 +35,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
 
@@ -60,7 +67,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
 
@@ -92,7 +99,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
 
@@ -129,7 +136,7 @@ jobs:
     timeout-minutes: 30
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
 
@@ -155,19 +162,19 @@ jobs:
         timeout-minutes: 10
 
       - name: Download demo build
-        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
         with:
           name: demo-dist
           path: demo/dist/
 
       - name: Download e2e test app build
-        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
         with:
           name: e2e-test-app-dist
           path: test/e2e/app/dist/
 
       - name: Download gallery build
-        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
         with:
           name: gallery-dist
           path: gallery/dist/
@@ -184,18 +191,75 @@ jobs:
           path: test/e2e/reports/
           retention-days: 3
 
+  # ── Run Playwright tests on BrowserStack (real devices + browsers) ─────────
+  # The BrowserStack SDK manages the Local tunnel and uploads results to the
+  # BrowserStack Automate dashboard automatically — no tunnel action needed.
+  #
+  # Gated on:
+  #   - manual dispatch with the run-browserstack input enabled, OR
+  #   - a PR with the `e2e-browserstack` label applied.
+  # This keeps CI fast on normal PRs while still allowing on-demand runs.
+  e2e-browserstack:
+    name: E2E (BrowserStack)
+    needs: [build-demo, build-e2e-test-app, build-gallery]
+    runs-on: ubuntu-latest
+    if: |
+      (github.event_name == 'workflow_dispatch' && inputs.run-browserstack) ||
+      (github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'e2e-browserstack'))
+    environment: browserstack
+    env:
+      BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
+      BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Download demo build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: demo-dist
+          path: demo/dist/
+
+      - name: Download e2e test app build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: e2e-test-app-dist
+          path: test/e2e/app/dist/
+
+      - name: Download gallery build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: gallery-dist
+          path: gallery/dist/
+
+      - name: Run Playwright tests (BrowserStack)
+        run: yarn test:e2e:browserstack
+
   # ── Merge local blob reports and post PR comment ───────────────────────────
+  # Only depends on the local job — BrowserStack reports live on the
+  # BrowserStack Automate dashboard and don't feed into the local blob report.
   report:
     name: Report
     needs: [e2e-local]
     runs-on: ubuntu-latest
-    if: ${{ !cancelled() }}
+    if: always()
     permissions:
       contents: read
       pull-requests: write
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
 
@@ -209,7 +273,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Download blob report (local)
-        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
         continue-on-error: true
         with:
           name: blob-report-local
@@ -229,12 +293,16 @@ jobs:
           path: test/e2e/reports/combined/
           retention-days: 14
 
-      - name: Post report to PR
-        if: github.event_name == 'pull_request' && needs.e2e-local.result == 'failure'
-        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+      - name: Post report link to PR
+        if: github.event_name == 'pull_request'
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
         with:
           script: |
-            const { default: postReportComment } = await import(
-              `${process.env.GITHUB_WORKSPACE}/test/e2e/post-report-comment.mjs`
-            );
-            await postReportComment({ github, context, core });
+            const runUrl = `${context.serverUrl}/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}`;
+            const body = `## Playwright E2E test report\n\nThe combined HTML report is available as a workflow artifact.\n\n[View workflow run](${runUrl})`;
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              body,
+            });

.github/workflows/nightly.yaml

@@ -20,7 +20,7 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           persist-credentials: false
 

.github/workflows/pull-request-standards.yaml

@@ -1,7 +1,7 @@
 name: Pull request standards
 
 on:
-  pull_request_target: # zizmor: ignore[dangerous-triggers] -- safe: reads PR metadata from event payload only, checks out base repo scripts only, never PR head code
+  pull_request_target: # zizmor: ignore[dangerous-triggers] -- safe: reads PR metadata from event payload only, no PR code checkout
     types:
       - opened
       - edited
@@ -23,16 +23,168 @@ jobs:
     permissions:
       pull-requests: write # To label and comment on pull requests
     steps:
-      - name: Check out workflow scripts
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-        with:
-          persist-credentials: false
-          sparse-checkout: .github/scripts
       - name: Check pull request standards
         uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
         with:
           script: |
-            const { default: checkStandards } = await import(
-              `${process.env.GITHUB_WORKSPACE}/.github/scripts/check-pull-request-standards.mjs`
+            const pr = context.payload.pull_request;
+
+            // Exempt bots (Copilot agent, dependabot), drafts, and maintainers.
+            if (pr.user.type === "Bot") {
+              core.info(`Skipping bot author: ${pr.user.login}`);
+              return;
+            }
+            if (pr.draft) {
+              core.info("Skipping draft pull request");
+              return;
+            }
+            try {
+              await github.rest.orgs.checkMembershipForUser({
+                org: "home-assistant",
+                username: pr.user.login,
+              });
+              core.info(`Skipping organization member: ${pr.user.login}`);
+              return;
+            } catch (error) {
+              core.info(`${pr.user.login} is not an organization member, checking standards`);
+            }
+
+            const label = "Needs Template";
+            const marker = "<!-- pr-standards-check -->";
+            const { owner, repo } = context.repo;
+            const issue_number = pr.number;
+
+            const body = (pr.body || "").replace(/<!--[\s\S]*?-->/g, "");
+            const normalized = body.toLowerCase();
+
+            // Ignore 404s from mutations that race manual edits or cancelled runs.
+            const ignoreMissing = async (fn) => {
+              try {
+                await fn();
+              } catch (error) {
+                if (error.status === 404) {
+                  core.info("Target already removed, nothing to do");
+                  return;
+                }
+                throw error;
+              }
+            };
+
+            // Hide/restore our comment via GraphQL (REST cannot minimize).
+            const setMinimized = async (subjectId, minimized) => {
+              const mutation = minimized
+                ? `mutation($id: ID!) {
+                     minimizeComment(input: { subjectId: $id, classifier: RESOLVED }) {
+                       clientMutationId
+                     }
+                   }`
+                : `mutation($id: ID!) {
+                     unminimizeComment(input: { subjectId: $id }) {
+                       clientMutationId
+                     }
+                   }`;
+              try {
+                await github.graphql(mutation, { id: subjectId });
+              } catch (error) {
+                core.info(
+                  `Could not ${minimized ? "minimize" : "restore"} comment: ${error.message}`
+                );
+              }
+            };
+
+            // Content of a "## <name>" section, or null when the heading is absent.
+            const section = (name) => {
+              const match = body.match(
+                new RegExp(`##\\s${name}([\\s\\S]*?)(?=\\n##\\s|$)`, "i")
+              );
+              return match ? match[1] : null;
+            };
+
+            const problems = [];
+
+            const requiredHeadings = [
+              "## proposed change",
+              "## type of change",
+              "## checklist",
+            ];
+            if (requiredHeadings.some((h) => !normalized.includes(h))) {
+              problems.push(
+                "Use the pull request template without removing its sections."
+              );
+            }
+
+            const typeOfChange = section("type of change");
+            if (typeOfChange !== null) {
+              const ticked = (typeOfChange.match(/-\s*\[[xX]\]/g) || []).length;
+              if (ticked !== 1) {
+                problems.push(
+                  'Select exactly one option under "Type of change".'
+                );
+              }
+            }
+
+            const proposedChange = section("proposed change");
+            if (proposedChange !== null && proposedChange.trim().length === 0) {
+              problems.push('Describe your changes under "Proposed change".');
+            }
+
+            const isValid = problems.length === 0;
+
+            const comments = await github.paginate(
+              github.rest.issues.listComments,
+              { owner, repo, issue_number, per_page: 100 }
+            );
+            const existing = comments.find((c) => c.body.includes(marker));
+            const hasLabel = pr.labels.some((l) => l.name === label);
+
+            if (isValid) {
+              core.info("Pull request standards met");
+
+              if (hasLabel) {
+                await ignoreMissing(() =>
+                  github.rest.issues.removeLabel({
+                    owner, repo, issue_number, name: label,
+                  })
+                );
+              }
+              if (existing) {
+                await setMinimized(existing.node_id, true);
+              }
+              return;
+            }
+
+            core.info(`Pull request standards not met:\n- ${problems.join("\n- ")}`);
+
+            if (!hasLabel) {
+              await github.rest.issues.addLabels({
+                owner, repo, issue_number, labels: [label],
+              });
+            }
+
+            const message =
+              `${marker}\n` +
+              `Hey @${pr.user.login}!\n\n` +
+              `Thank you for your contribution! To help reviewers, please update ` +
+              `this pull request to follow our pull request standards:\n\n` +
+              problems.map((p) => `- ${p}`).join("\n") +
+              `\n\n` +
+              `Please complete the ` +
+              `[PR template](https://github.com/home-assistant/frontend/blob/dev/.github/PULL_REQUEST_TEMPLATE.md?plain=1) ` +
+              `and see the [developer docs](https://developers.home-assistant.io/docs/review-process) ` +
+              `for more on creating a great pull request (see point 6).`;
+
+            if (existing) {
+              await github.rest.issues.updateComment({
+                owner, repo, comment_id: existing.id, body: message,
+              });
+              await setMinimized(existing.node_id, false);
+            } else {
+              await github.rest.issues.createComment({
+                owner, repo, issue_number, body: message,
+              });
+            }
+
+            // Fail this check so it can block the PR from being merged
+            core.setFailed(
+              `Pull request standards not met:\n- ${problems.join("\n- ")}`
             );
-            await checkStandards({ github, context, core });

.github/workflows/release-drafter.yaml

@@ -18,6 +18,6 @@ jobs:
       pull-requests: read
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@ed4bc48ec97379be2258e7b7ac2624a3e26ab809 # v7.4.0
+      - uses: release-drafter/release-drafter@693d20e7c1ce1a81d3a41962f85914253b518449 # v7.3.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -26,7 +26,7 @@ jobs:
     if: github.repository_owner == 'home-assistant'
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           persist-credentials: false
 
@@ -36,7 +36,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@f4ca6f671bd429efb108c0f2fa0ae8af0215986c # master
+        uses: home-assistant/actions/helpers/verify-version@e91ad1948e57189485b9c1ad608af0c303946f89 # master
 
       - name: Setup Node
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
@@ -113,7 +113,7 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           persist-credentials: false
       - name: Setup Node

.github/workflows/restrict-task-creation.yml

@@ -36,21 +36,52 @@ jobs:
     name: Check authorization
     runs-on: ubuntu-latest
     permissions:
-      contents: read # To check out workflow scripts
       issues: write # To comment on, label, and close issues
     # Only run if this is a Task issue type (from the issue form)
     if: github.event.issue.type.name == 'Task'
     steps:
-      - name: Check out workflow scripts
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-        with:
-          persist-credentials: false
-          sparse-checkout: .github/scripts
       - name: Check if user is authorized
         uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
         with:
           script: |
-            const { default: checkTaskAuthorization } = await import(
-              `${process.env.GITHUB_WORKSPACE}/.github/scripts/check-task-authorization.mjs`
-            );
-            await checkTaskAuthorization({ github, context, core });
+            const issueAuthor = context.payload.issue.user.login;
+
+            // Check if user is an organization member
+            try {
+              await github.rest.orgs.checkMembershipForUser({
+                org: 'home-assistant',
+                username: issueAuthor
+              });
+              console.log(`✅ ${issueAuthor} is an organization member`);
+              return; // Authorized
+            } catch (error) {
+              console.log(`❌ ${issueAuthor} is not authorized to create Task issues`);
+            }
+
+            // Close the issue with a comment
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              body: `Hi @${issueAuthor}, thank you for your contribution!\n\n` +
+                    `Task issues are restricted to Open Home Foundation staff and authorized contributors.\n\n` +
+                    `If you would like to:\n` +
+                    `- Report a bug: Please use the [bug report form](https://github.com/home-assistant/frontend/issues/new?template=bug_report.yml)\n` +
+                    `- Request a feature: Please submit to [Feature Requests](https://github.com/orgs/home-assistant/discussions)\n\n` +
+                    `If you believe you should have access to create Task issues, please contact the maintainers.`
+            });
+
+            await github.rest.issues.update({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              state: 'closed'
+            });
+
+            // Add a label to indicate this was auto-closed
+            await github.rest.issues.addLabels({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              labels: ['auto-closed']
+            });

.github/workflows/sync-numeric-device-classes.yaml

@@ -21,7 +21,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
 
       - name: Set up Node
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0

.github/workflows/translations.yaml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           persist-credentials: false
 

.nvmrc

@@ -1 +1 @@
-24.18.0
+24.16.0

.yarnrc.yml

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

browserstack.yml

@@ -0,0 +1,53 @@
+# BrowserStack Automate configuration for Home Assistant frontend e2e tests.
+# Credentials are read from BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY
+# environment variables set in GitHub Actions (or locally).
+# See: https://www.browserstack.com/docs/automate/playwright/getting-started/nodejs
+
+userName: ${BROWSERSTACK_USERNAME}
+accessKey: ${BROWSERSTACK_ACCESS_KEY}
+
+projectName: Home Assistant Frontend
+buildName: e2e tests
+buildIdentifier: "CI #${BUILD_NUMBER}"
+
+# ── Platforms ────────────────────────────────────────────────────────────────
+platforms:
+  - os: Windows
+    osVersion: 11
+    browserName: chrome
+    browserVersion: latest
+  - os: OS X
+    osVersion: Ventura
+    browserName: playwright-firefox
+    browserVersion: latest
+  - deviceName: iPad 6th
+    osVersion: 12
+    browserName: playwright-webkit
+  - deviceName: iPhone 12
+    osVersion: 14
+    browserName: playwright-webkit
+  - deviceName: Samsung Galaxy S23
+    osVersion: 13
+    browserName: chrome
+    realMobile: true
+
+parallelsPerPlatform: 1
+
+# ── Local tunnel ─────────────────────────────────────────────────────────────
+# The SDK manages the BrowserStack Local tunnel automatically.
+browserstackLocal: true
+
+framework: playwright
+
+# Pin to the latest Playwright version BrowserStack supports. Our local
+# @playwright/test is newer (1.59.x) which BrowserStack does not yet support,
+# causing a "Malformed endpoint" connection error if left unset.
+# Update this when BrowserStack adds support for a newer version.
+# Supported versions: https://www.browserstack.com/docs/automate/playwright/browsers-and-os
+playwrightVersion: 1.latest
+
+# ── Debugging ────────────────────────────────────────────────────────────────
+debug: false
+networkLogs: false
+consoleLogs: errors
+testObservability: true

build-scripts/bundle-budget.json

@@ -1,15 +0,0 @@
-{
-  "_comment": "Initial JS budget (raw/uncompressed bytes) for the cold-load critical entrypoints. Enforced by build-scripts/check-bundle-size.cjs in CI. Re-seed after an intentional change with `--update --headroom=<percent>`.",
-  "frontend-modern": {
-    "app": 561513,
-    "core": 54473,
-    "authorize": 544272,
-    "onboarding": 647136
-  },
-  "frontend-legacy": {
-    "app": 790323,
-    "core": 237208,
-    "authorize": 765464,
-    "onboarding": 918679
-  }
-}

build-scripts/bundle.cjs

@@ -83,7 +83,12 @@ module.exports.swcOptions = () => ({
   },
 });
 
-module.exports.babelOptions = ({ latestBuild, isTestBuild, sw }) => ({
+module.exports.babelOptions = ({
+  latestBuild,
+  isProdBuild,
+  isTestBuild,
+  sw,
+}) => ({
   babelrc: false,
   compact: false,
   assumptions: {
@@ -96,22 +101,14 @@ module.exports.babelOptions = ({ latestBuild, isTestBuild, sw }) => ({
     [
       "@babel/preset-env",
       {
+        useBuiltIns: "usage",
+        corejs: dependencies["core-js"],
+        bugfixes: true,
         shippedProposals: true,
       },
     ],
   ],
   plugins: [
-    // Inject Core-JS polyfills on demand. Babel 8 removed preset-env's
-    // `useBuiltIns`/`corejs` options, so the equivalent polyfill provider is
-    // configured directly here (`usage-global` matches the old `useBuiltIns: "usage"`).
-    [
-      "babel-plugin-polyfill-corejs3",
-      {
-        method: "usage-global",
-        version: dependencies["core-js"],
-        shippedProposals: true,
-      },
-    ],
     [
       path.join(BABEL_PLUGINS, "inline-constants-plugin.cjs"),
       {
@@ -119,14 +116,32 @@ module.exports.babelOptions = ({ latestBuild, isTestBuild, sw }) => ({
         ignoreModuleNotFound: true,
       },
     ],
-    // Import helpers and regenerator from runtime package.
-    // `moduleName` is pinned so helpers resolve from `@babel/runtime`: the
-    // corejs3 polyfill provider above otherwise redirects them to the
-    // (uninstalled) `@babel/runtime-corejs3`, which preset-env used to suppress
-    // internally when it owned the polyfill injection via `useBuiltIns`.
+    // Minify template literals for production
+    isProdBuild && [
+      "template-html-minifier",
+      {
+        modules: {
+          ...Object.fromEntries(
+            ["lit", "lit-element", "lit-html"].map((m) => [
+              m,
+              [
+                "html",
+                { name: "svg", encapsulation: "svg" },
+                { name: "css", encapsulation: "style" },
+              ],
+            ])
+          ),
+          "@polymer/polymer/lib/utils/html-tag.js": ["html"],
+        },
+        strictCSS: true,
+        htmlMinifier: module.exports.htmlMinifierOptions,
+        failOnError: false, // we can turn this off in case of false positives
+      },
+    ],
+    // Import helpers and regenerator from runtime package
     [
       "@babel/plugin-transform-runtime",
-      { version: dependencies["@babel/runtime"], moduleName: "@babel/runtime" },
+      { version: dependencies["@babel/runtime"] },
     ],
     "@babel/plugin-transform-class-properties",
     "@babel/plugin-transform-private-methods",

build-scripts/check-bundle-size.cjs

@@ -1,155 +0,0 @@
-/* global require, process, __dirname */
-// Enforce a strict size budget on the initial JS of the most critical
-// entrypoints (`app` and `core`). These two are downloaded on every cold load
-// before anything interactive can happen, so unintended growth here hurts
-// first-load performance directly.
-//
-// In production rspack does not split initial chunks (splitChunks only operates
-// on `!chunk.canBeInitial()`), so each entrypoint resolves to a single initial
-// JS asset. We read the per-build stats written by StatsWriterPlugin and compare
-// the entrypoint's initial JS size against a committed budget.
-//
-// Usage:
-//   node build-scripts/check-bundle-size.cjs            # enforce, exit 1 on regression
-//   node build-scripts/check-bundle-size.cjs --update    # rewrite budgets from current sizes
-//   node build-scripts/check-bundle-size.cjs --update --headroom=3   # current + 3% headroom
-
-const fs = require("fs");
-const path = require("path");
-const paths = require("./paths.cjs");
-
-// Entrypoints whose initial JS we hold to a strict budget. These are all
-// downloaded on a user-facing cold load before anything interactive can happen:
-// `app`/`core` for the main app, plus the standalone `authorize` and
-// `onboarding` pages. `custom-panel` is intentionally excluded (only loaded
-// when a custom panel is opened).
-const TRACKED_ENTRYPOINTS = ["app", "core", "authorize", "onboarding"];
-
-// App build stats files, as written by StatsWriterPlugin (`${name}.json`).
-const BUILDS = ["frontend-modern", "frontend-legacy"];
-
-const BUDGET_FILE = path.join(__dirname, "bundle-budget.json");
-const STATS_DIR = path.join(paths.build_dir, "stats");
-
-const readStats = (build) => {
-  const file = path.join(STATS_DIR, `${build}.json`);
-  if (!fs.existsSync(file)) {
-    throw new Error(
-      `Missing stats file: ${path.relative(process.cwd(), file)}.\n` +
-        `Run a production build first (e.g. \`gulp build-app\`), then re-run this check.`
-    );
-  }
-  return JSON.parse(fs.readFileSync(file, "utf8"));
-};
-
-// Initial JS bytes for an entrypoint = sum of the .js asset sizes of its initial
-// entry chunk(s). Sizes are raw (uncompressed) bytes, matching the stats output.
-const entrypointInitialJS = (stats, entrypoint) => {
-  const assetSize = new Map(stats.assets.map((a) => [a.name, a.size]));
-  let total = 0;
-  let found = false;
-  for (const chunk of stats.chunks) {
-    if (!chunk.entry || !chunk.initial) {
-      continue;
-    }
-    if (!(chunk.names || []).includes(entrypoint)) {
-      continue;
-    }
-    found = true;
-    for (const file of chunk.files || []) {
-      if (file.endsWith(".js") && assetSize.has(file)) {
-        total += assetSize.get(file);
-      }
-    }
-  }
-  if (!found) {
-    throw new Error(`Entrypoint "${entrypoint}" not found in bundle stats.`);
-  }
-  return total;
-};
-
-const kib = (bytes) => `${(bytes / 1024).toFixed(1)} KiB`;
-
-const main = () => {
-  const update = process.argv.includes("--update");
-  const headroomArg = process.argv.find((a) => a.startsWith("--headroom="));
-  const headroom = headroomArg ? Number(headroomArg.split("=")[1]) : 0;
-
-  const current = {};
-  for (const build of BUILDS) {
-    const stats = readStats(build);
-    current[build] = {};
-    for (const entrypoint of TRACKED_ENTRYPOINTS) {
-      current[build][entrypoint] = entrypointInitialJS(stats, entrypoint);
-    }
-  }
-
-  if (update) {
-    const budget = { _comment: BUDGET_COMMENT };
-    for (const build of BUILDS) {
-      budget[build] = {};
-      for (const entrypoint of TRACKED_ENTRYPOINTS) {
-        budget[build][entrypoint] = Math.ceil(
-          current[build][entrypoint] * (1 + headroom / 100)
-        );
-      }
-    }
-    fs.writeFileSync(BUDGET_FILE, `${JSON.stringify(budget, null, 2)}\n`);
-    console.log(
-      `Updated ${path.relative(process.cwd(), BUDGET_FILE)} from current sizes` +
-        (headroom ? ` (+${headroom}% headroom).` : ".")
-    );
-    return;
-  }
-
-  if (!fs.existsSync(BUDGET_FILE)) {
-    throw new Error(
-      `Missing budget file ${path.relative(process.cwd(), BUDGET_FILE)}.\n` +
-        `Seed it from a production build with: node build-scripts/check-bundle-size.cjs --update --headroom=3`
-    );
-  }
-  const budget = JSON.parse(fs.readFileSync(BUDGET_FILE, "utf8"));
-
-  let failed = false;
-  console.log("Initial JS budget (entry chunks, raw bytes):\n");
-  for (const build of BUILDS) {
-    for (const entrypoint of TRACKED_ENTRYPOINTS) {
-      const actual = current[build][entrypoint];
-      const limit = budget[build] && budget[build][entrypoint];
-      if (typeof limit !== "number") {
-        failed = true;
-        console.log(
-          `  ✗ ${build} / ${entrypoint}: no budget set (current ${kib(actual)})`
-        );
-        continue;
-      }
-      const ok = actual <= limit;
-      const delta = (((actual - limit) / limit) * 100).toFixed(1);
-      console.log(
-        `  ${ok ? "✓" : "✗"} ${build} / ${entrypoint}: ` +
-          `${kib(actual)} / ${kib(limit)}${ok ? "" : ` (+${delta}% over budget)`}`
-      );
-      if (!ok) {
-        failed = true;
-      }
-    }
-  }
-
-  if (failed) {
-    console.error(
-      "\nInitial JS budget exceeded for a critical entrypoint.\n" +
-        "Investigate what was pulled into the entry chunk (a static import that should be lazy?).\n" +
-        "If the growth is intentional, re-seed the budget:\n" +
-        "  node build-scripts/check-bundle-size.cjs --update --headroom=3"
-    );
-    process.exit(1);
-  }
-  console.log("\nAll tracked entrypoints within budget.");
-};
-
-const BUDGET_COMMENT =
-  "Initial JS budget (raw/uncompressed bytes) for the cold-load critical entrypoints. " +
-  "Enforced by build-scripts/check-bundle-size.cjs in CI. " +
-  "Re-seed after an intentional change with `--update --headroom=<percent>`.";
-
-main();

build-scripts/dev-server.mjs

@@ -1,678 +0,0 @@
-// Manage a Home Assistant frontend dev server with an agent-friendly interface.
-//
-//   node build-scripts/dev-server.mjs --suite <suite> [mode] [extra args]
-//
-//   (no mode)          Run in the foreground.
-//   --background       Start detached, wait until it is ready, print the URL
-//                      (when it has one) and pid, then exit and leave it running.
-//   --status           Report whether the suite's dev server is running.
-//   --stop             Stop a running background dev server.
-//   --logs [--follow]  Print (or follow) the background dev server log.
-//
-// Extra args (for example -p or -c on app-serve) are forwarded to the underlying
-// script. Suites use one of two liveness models:
-//
-//   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.
-
-import { spawn, execFileSync } from "node:child_process";
-import fs from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-
-const repoRoot = path.resolve(
-  path.dirname(fileURLToPath(import.meta.url)),
-  ".."
-);
-const gulpBin = path.join(repoRoot, "node_modules", ".bin", "gulp");
-const developAndServeScript = path.join(
-  repoRoot,
-  "script",
-  "develop_and_serve"
-);
-const logDir = path.join(repoRoot, "node_modules", ".cache", "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: [] },
-  },
-};
-
-// Cover a cold build on a slow machine before the server starts listening.
-// Override with HA_DEV_SERVER_TIMEOUT (seconds).
-const READY_TIMEOUT_MS =
-  Number(process.env.HA_DEV_SERVER_TIMEOUT || "180") * 1000;
-
-// Detect a coding agent from a small set of environment markers set by common
-// agent CLIs (env-only; no process-ancestry detection).
-const detectAgent = () => {
-  const env = process.env;
-  const has = (name) => Boolean(env[name]);
-  const eq = (name, value) => env[name] === value;
-  const signals = {
-    opencode: () =>
-      [
-        "OPENCODE",
-        "OPENCODE_BIN_PATH",
-        "OPENCODE_SERVER",
-        "OPENCODE_APP_INFO",
-      ].some(has),
-    "claude-code": () => has("CLAUDECODE"),
-    cursor: () => has("CURSOR_TRACE_ID"),
-    "github-copilot": () =>
-      eq("TERM_PROGRAM", "vscode") && eq("GIT_PAGER", "cat"),
-    // Convention shared by several agents (Crush, Amp, ...).
-    generic: () => has("AGENT") || has("AI_AGENT"),
-  };
-  return Object.keys(signals).find((id) => signals[id]());
-};
-
-const usage = () => {
-  const suites = Object.keys(SUITES).join("|");
-  process.stderr.write(
-    `Usage: node build-scripts/dev-server.mjs --suite <${suites}> ` +
-      `[--background | --status | --stop | --logs [--follow]]\n`
-  );
-};
-
-const parseArgs = (argv) => {
-  const args = {
-    mode: "foreground",
-    follow: false,
-    suite: undefined,
-    passthrough: [],
-  };
-  for (let i = 0; i < argv.length; i++) {
-    const arg = argv[i];
-    switch (arg) {
-      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);
-    }
-  }
-  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 hints = (suite) => {
-  const alias = `yarn ${SUITES[suite].alias}`;
-  return (
-    `  Stop:   ${alias} --stop\n` +
-    `  Status: ${alias} --status\n` +
-    `  Logs:   ${alias} --logs\n`
-  );
-};
-
-// --- 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).
-const awaitReady = async ({ suite, child, logFile, port, isReady, onExit }) => {
-  let childExited = false;
-  child.on("exit", () => {
-    childExited = true;
-  });
-  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) {
-    if (childExited) {
-      process.stdout.write("\n");
-      process.stderr.write(
-        `Dev server (${suite}) exited before it was ready. See ${logFile}\n`
-      );
-      onExit?.();
-      return 1;
-    }
-    if (await isReady()) {
-      process.stdout.write("\n");
-      process.stdout.write(
-        `Dev server (${suite}) running${urlSuffix(port)} ` +
-          `(pid ${child.pid})\n${hints(suite)}`
-      );
-      return 0;
-    }
-    process.stdout.write(".");
-    await sleep(1000);
-  }
-  /* 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`
-  );
-  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())) {
-    process.stderr.write(
-      `Failed to stop dev server (${suite}) (pid ${pid}). Stop it manually.\n`
-    );
-    return 1;
-  }
-  onStopped?.();
-  process.stdout.write(`Stopped dev server (${suite}) (pid ${pid}).\n`);
-  return 0;
-};
-
-// --- health liveness (port + /__ha_dev_status) ------------------------------
-
-/**
- * Probe the health endpoint. Dev servers bind IPv4 or IPv6 localhost depending
- * on the OS, so try each; the port is "free" only if every address refuses.
- * @returns {Promise<{state: "ours" | "foreign" | "free", suite?: string}>}
- */
-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 controller = new AbortController();
-    const timer = setTimeout(() => controller.abort(), timeoutMs);
-    try {
-      const res = await fetch(`http://${host}:${port}/__ha_dev_status`, {
-        signal: controller.signal,
-      });
-      sawResponse = true;
-      if (res.ok) {
-        const body = await res.json().catch(() => null);
-        if (body && body.server === "ha-frontend-dev") {
-          return { state: "ours", suite: body.suite };
-        }
-      }
-    } catch {
-      // Try the next address.
-    } finally {
-      clearTimeout(timer);
-    }
-  }
-  /* eslint-enable no-await-in-loop */
-  return sawResponse ? { state: "foreign" } : { state: "free" };
-};
-
-// Find the pid listening on a port via the first available tool (no state file).
-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) {
-    try {
-      const out = execFileSync(cmd, cmdArgs, {
-        encoding: "utf8",
-        stdio: ["ignore", "pipe", "ignore"],
-      });
-      const pid = Number(extract(out));
-      if (Number.isInteger(pid) && pid > 0) {
-        return pid;
-      }
-    } catch {
-      // Try the next tool.
-    }
-  }
-  return undefined;
-};
-
-const runForegroundHealth = async (suite, cfg) => {
-  const { port } = cfg;
-  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`
-    );
-    return 0;
-  }
-  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);
-};
-
-const runBackgroundHealth = async (suite, cfg) => {
-  const { port } = cfg;
-  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)}`
-    );
-    return 0;
-  }
-  if (preflight.state === "foreign") {
-    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;
-  }
-  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;
-};
-
-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.
-  }
-};
-
-const logIsReady = (logFile, readyLog) => {
-  try {
-    return readyLog.test(fs.readFileSync(logFile, "utf8"));
-  } catch {
-    return false;
-  }
-};
-
-// 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;
-    }
-  }
-  return process.env.DEVCONTAINER ? 8123 : 8124;
-};
-
-const spawnArgs = (cfg, passthrough) => [
-  ...cfg.spawn.args,
-  ...(cfg.acceptsArgs ? 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;
-  }
-  if (existing) {
-    removePidFile(suite);
-  }
-  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 { 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)) {
-    process.stdout.write(
-      `Dev server (${suite}) running${urlSuffix(existing.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);
-    }
-    process.stdout.write(`Dev server (${suite}) not running.\n`);
-    return 0;
-  }
-  const { pid } = existing;
-  return terminate(
-    suite,
-    pid,
-    () => !isAlive(pid),
-    () => removePidFile(suite)
-  );
-};
-
-// --- 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 main = async () => {
-  const args = parseArgs(process.argv.slice(2));
-  const cfg = SUITES[args.suite];
-  if (!cfg) {
-    usage();
-    return 1;
-  }
-  if (args.passthrough.length && !cfg.acceptsArgs) {
-    process.stderr.write(
-      `Ignoring unexpected arguments: ${args.passthrough.join(" ")}\n`
-    );
-  }
-
-  // A plain dev:<suite> under a coding agent backgrounds itself; explicit modes
-  // are untouched.
-  let { mode } = args;
-  if (
-    mode === "foreground" &&
-    !["0", "false"].includes(process.env.HA_DEV_BACKGROUND)
-  ) {
-    const agent = detectAgent();
-    if (agent) {
-      process.stdout.write(
-        `Detected coding agent (${agent}); starting in the background. ` +
-          `Set HA_DEV_BACKGROUND=0 to force foreground.\n`
-      );
-      mode = "background";
-    }
-  }
-
-  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);
-  }
-};
-
-main().then(
-  (code) => {
-    process.exitCode = code;
-  },
-  (err) => {
-    process.stderr.write(`${err?.stack || err}\n`);
-    process.exitCode = 1;
-  }
-);

build-scripts/gulp/gallery.js

@@ -1,7 +1,7 @@
 import fs from "fs";
 import { glob } from "glob";
 import gulp from "gulp";
-import { load as loadYaml } from "js-yaml";
+import yaml from "js-yaml";
 import { marked } from "marked";
 import path from "path";
 import paths from "../paths.cjs";
@@ -47,7 +47,7 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
 
       if (descriptionContent.startsWith("---")) {
         const metadataEnd = descriptionContent.indexOf("---", 3);
-        metadata = loadYaml(descriptionContent.substring(3, metadataEnd));
+        metadata = yaml.load(descriptionContent.substring(3, metadataEnd));
         descriptionContent = descriptionContent
           .substring(metadataEnd + 3)
           .trim();

build-scripts/gulp/rspack.js

@@ -37,7 +37,6 @@ const isWsl =
  *   listenHost?: string,
  *   open?: boolean,
  *   logUrlAfterFirstBuild?: boolean,
- *   suite?: string,
  * }}
  */
 const runDevServer = async ({
@@ -48,7 +47,6 @@ const runDevServer = async ({
   open = true,
   logUrlAfterFirstBuild = false,
   proxy = undefined,
-  suite = undefined,
 }) => {
   if (listenHost === undefined) {
     // For dev container, we need to listen on all hosts
@@ -83,19 +81,6 @@ const runDevServer = async ({
             !error?.message?.includes("ResizeObserver loop"),
         },
       },
-      setupMiddlewares: (middlewares) => {
-        // Status endpoint so the dev-server manager can confirm this is our
-        // server for the expected suite. Unshifted to beat the static handler.
-        middlewares.unshift({
-          name: "ha-dev-status",
-          path: "/__ha_dev_status",
-          middleware: (_req, res) => {
-            res.setHeader("Content-Type", "application/json");
-            res.end(JSON.stringify({ server: "ha-frontend-dev", suite, port }));
-          },
-        });
-        return middlewares;
-      },
       proxy,
     },
     compiler
@@ -167,8 +152,6 @@ gulp.task("rspack-dev-server-demo", () =>
     ),
     contentBase: paths.demo_output_root,
     port: 8090,
-    open: false,
-    suite: "demo",
   })
 );
 
@@ -190,7 +173,6 @@ gulp.task("rspack-dev-server-cast", () =>
     port: 8080,
     // Accessible from the network, because that's how Cast hits it.
     listenHost: "0.0.0.0",
-    suite: "cast",
   })
 );
 
@@ -212,7 +194,6 @@ gulp.task("rspack-dev-server-gallery", () =>
     listenHost: "0.0.0.0",
     open: false,
     logUrlAfterFirstBuild: true,
-    suite: "gallery",
   })
 );
 
@@ -259,8 +240,6 @@ gulp.task("rspack-dev-server-e2e-test-app", () =>
     ),
     contentBase: paths.e2eTestApp_output_root,
     port: 8095,
-    open: false,
-    suite: "e2e-app",
   })
 );
 

build-scripts/list-plugins-and-polyfills.js

@@ -48,12 +48,6 @@ for (const buildType of ["Modern", "Legacy"]) {
   const browserslistEnv = buildType.toLowerCase();
   const babelOpts = babelOptions({ latestBuild: browserslistEnv === "modern" });
   const presetEnvOpts = babelOpts.presets[0][1];
-  // Core-JS polyfills are injected by babel-plugin-polyfill-corejs3 (Babel 8
-  // removed preset-env's `useBuiltIns`), so read its options here.
-  const corejsOpts = babelOpts.plugins.find(
-    (plugin) =>
-      Array.isArray(plugin) && plugin[0] === "babel-plugin-polyfill-corejs3"
-  )?.[1];
 
   // Invoking preset-env in debug mode will log the included plugins
   console.log(detailsOpen(`${buildType} Build Babel Plugins`));
@@ -65,16 +59,16 @@ for (const buildType of ["Modern", "Legacy"]) {
   console.log(detailsClose);
 
   // Manually log the Core-JS polyfills using the same technique
-  if (corejsOpts) {
+  if (presetEnvOpts.useBuiltIns) {
     console.log(detailsOpen(`${buildType} Build Core-JS Polyfills`));
     const targets = compilationTargets.default(babelOpts?.targets, {
       browserslistEnv,
     });
     const polyfillList = coreJSCompat({ targets }).list.filter(
       polyfillFilter(
-        corejsOpts.method,
-        corejsOpts.proposals,
-        corejsOpts.shippedProposals
+        `${presetEnvOpts.useBuiltIns}-global`,
+        presetEnvOpts?.corejs?.proposals,
+        presetEnvOpts?.shippedProposals
       )
     );
     console.log(

build-scripts/lit-disable-dev-mode-loader.cjs

@@ -1,8 +0,0 @@
-/* global module */
-
-module.exports = function litDisableDevModeLoader(source) {
-  return source.replace(
-    /\b(const|let|var) DEV_MODE = true;/g,
-    "$1 DEV_MODE = false;"
-  );
-};

build-scripts/minify-template-literals-loader.cjs

@@ -1,68 +0,0 @@
-/* global module, require */
-// rspack/webpack loader that minifies the HTML, SVG, and CSS inside lit
-// tagged template literals using `minify-literals` (html-minifier-next +
-// lightningcss). Replaces the unmaintained babel-plugin-template-html-minifier.
-//
-// It runs between swc and babel: swc has already stripped TS types and
-// decorators (so minify-literals' acorn parser only sees plain ESM), but the
-// `html`/`css`/`svg` tagged templates are still intact at ES2021. Running after
-// babel instead would miss the legacy build, where babel lowers the templates
-// to `_taggedTemplateLiteral()` calls that no longer look like tagged templates.
-
-const remapping = require("@ampproject/remapping");
-
-// minify-literals is ESM-only, so load it via dynamic import from this CJS loader.
-let minifyPromise;
-const getMinifier = () => {
-  if (!minifyPromise) {
-    minifyPromise = import("minify-literals").then((m) => m.minifyHTMLLiterals);
-  }
-  return minifyPromise;
-};
-
-// HTML options mirror the previous babel-plugin-template-html-minifier config
-// (html-minifier-next is option-compatible with html-minifier-terser). CSS in
-// css`` templates and inline <style> is handled by minify-literals' lightningcss
-// default.
-//
-// `keepClosingSlash` is required for `svg`` templates: SVG elements such as
-// `<path />` and `<circle />` are not void elements in HTML, so dropping the
-// trailing slash would break the markup. It is harmless for HTML.
-const htmlOptions = {
-  caseSensitive: true,
-  collapseWhitespace: true,
-  conservativeCollapse: true,
-  decodeEntities: true,
-  keepClosingSlash: true,
-  removeComments: true,
-  removeRedundantAttributes: true,
-};
-
-module.exports = function minifyTemplateLiteralsLoader(source, map, meta) {
-  const callback = this.async();
-  getMinifier()
-    .then((minifyHTMLLiterals) =>
-      minifyHTMLLiterals(source, {
-        fileName: this.resourcePath,
-        html: htmlOptions,
-      })
-    )
-    .then((result) => {
-      if (!result) {
-        // No tagged templates changed; pass through untouched (incl. incoming map).
-        callback(null, source, map, meta);
-        return;
-      }
-      // minify-literals builds its map from `source` alone, so `result.map`
-      // describes minified output -> this loader's input (the swc output), not
-      // the original file. Compose it over the incoming map (swc output ->
-      // original source) so the map handed downstream still points at the
-      // original source; otherwise every minified file's source map is wrong.
-      const outMap =
-        map && result.map
-          ? remapping([result.map, map], () => null)
-          : (result.map ?? map);
-      callback(null, result.code, outMap, meta);
-    })
-    .catch(callback);
-};

build-scripts/rspack.cjs

@@ -47,12 +47,6 @@ const createRspackConfig = ({
     dontHash = new Set();
   }
   const ignorePackages = bundle.ignorePackages({ latestBuild });
-  const litHtmlRoot = path.resolve(__dirname, "../node_modules/lit-html");
-  const litHtmlDevelopmentRoot = path.join(litHtmlRoot, "development");
-  const litDisableDevModeLoader = path.join(
-    __dirname,
-    "lit-disable-dev-mode-loader.cjs"
-  );
   return {
     name,
     mode: isProdBuild ? "production" : "development",
@@ -72,42 +66,25 @@ const createRspackConfig = ({
         {
           test: /\.m?js$|\.ts$/,
           exclude: /node_modules[\\/]core-js/,
-          use: (info) =>
-            [
-              {
-                loader: "babel-loader",
-                options: {
-                  ...bundle.babelOptions({
-                    latestBuild,
-                    isTestBuild,
-                    sw: info.issuerLayer === "sw",
-                  }),
-                  cacheDirectory: !isProdBuild,
-                  cacheCompression: false,
-                },
+          use: (info) => [
+            {
+              loader: "babel-loader",
+              options: {
+                ...bundle.babelOptions({
+                  latestBuild,
+                  isProdBuild,
+                  isTestBuild,
+                  sw: info.issuerLayer === "sw",
+                }),
+                cacheDirectory: !isProdBuild,
+                cacheCompression: false,
               },
-              // Minify lit html/svg/css tagged template literals for production.
-              // Must run after swc (TS/decorators stripped, but templates kept at
-              // ES2021) and before babel — otherwise the legacy build lowers
-              // html`` to _taggedTemplateLiteral() calls that can no longer be
-              // matched, leaving legacy templates unminified.
-              isProdBuild && {
-                loader: path.join(
-                  __dirname,
-                  "minify-template-literals-loader.cjs"
-                ),
-              },
-              !latestBuild &&
-                info.resource.startsWith(
-                  `${litHtmlDevelopmentRoot}${path.sep}`
-                ) && {
-                  loader: litDisableDevModeLoader,
-                },
-              {
-                loader: "builtin:swc-loader",
-                options: bundle.swcOptions(),
-              },
-            ].filter(Boolean),
+            },
+            {
+              loader: "builtin:swc-loader",
+              options: bundle.swcOptions(),
+            },
+          ],
           resolve: {
             fullySpecified: false,
           },
@@ -154,47 +131,6 @@ const createRspackConfig = ({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
       }),
-      // Babel can miscompile Lit's pre-minified runtime when downleveling to
-      // ES5. Compile lit-html from its development sources for legacy builds,
-      // then let the normal production minifier handle the final bundle.
-      !latestBuild &&
-        new rspack.NormalModuleReplacementPlugin(
-          /^(?:lit-html(?:\/.*)?|\.{1,2}\/.*\.js)$/,
-          (resource) => {
-            if (resource.request === "lit-html") {
-              resource.request = path.join(
-                litHtmlDevelopmentRoot,
-                "lit-html.js"
-              );
-              return;
-            }
-            if (resource.request.startsWith("lit-html/")) {
-              if (resource.request.startsWith("lit-html/development/")) {
-                return;
-              }
-              resource.request = path.join(
-                litHtmlDevelopmentRoot,
-                resource.request.slice("lit-html/".length)
-              );
-              return;
-            }
-            if (
-              resource.context.startsWith(`${litHtmlRoot}${path.sep}`) &&
-              resource.context !== litHtmlDevelopmentRoot &&
-              !resource.context.startsWith(
-                `${litHtmlDevelopmentRoot}${path.sep}`
-              )
-            ) {
-              resource.request = path.join(
-                litHtmlDevelopmentRoot,
-                path.relative(
-                  litHtmlRoot,
-                  path.resolve(resource.context, resource.request)
-                )
-              );
-            }
-          }
-        ),
       new rspack.DefinePlugin(
         bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })
       ),

cast/src/launcher/layout/hc-cast.ts

@@ -56,100 +56,88 @@ class HcCast extends LitElement {
 
     return html`
       <hc-layout .auth=${this.auth} .connection=${this.connection}>
-        ${
-          this.askWrite
+        ${this.askWrite
+          ? html`
+              <p class="question action-item">
+                Stay logged in?
+                <span>
+                  <ha-button
+                    appearance="plain"
+                    size="small"
+                    @click=${this._handleSaveTokens}
+                  >
+                    YES
+                  </ha-button>
+                  <ha-button
+                    appearance="plain"
+                    size="small"
+                    @click=${this._handleSkipSaveTokens}
+                  >
+                    NO
+                  </ha-button>
+                </span>
+              </p>
+            `
+          : ""}
+        ${error
+          ? html` <div class="card-content">${error}</div> `
+          : !this.castManager.status
             ? html`
-                <p class="question action-item">
-                  Stay logged in?
-                  <span>
-                    <ha-button
-                      appearance="plain"
-                      size="small"
-                      @click=${this._handleSaveTokens}
-                    >
-                      YES
-                    </ha-button>
-                    <ha-button
-                      appearance="plain"
-                      size="small"
-                      @click=${this._handleSkipSaveTokens}
-                    >
-                      NO
-                    </ha-button>
-                  </span>
+                <p class="center-item">
+                  <ha-button @click=${this._handleLaunch}>
+                    <ha-svg-icon slot="start" .path=${mdiCast}></ha-svg-icon>
+                    Start Casting
+                  </ha-button>
                 </p>
               `
-            : ""
-        }
-        ${
-          error
-            ? html` <div class="card-content">${error}</div> `
-            : !this.castManager.status
-              ? html`
-                  <p class="center-item">
-                    <ha-button @click=${this._handleLaunch}>
-                      <ha-svg-icon slot="start" .path=${mdiCast}></ha-svg-icon>
-                      Start Casting
-                    </ha-button>
-                  </p>
-                `
-              : html`
-                  <div class="section-header">PICK A VIEW</div>
-                  <ha-list @action=${this._handlePickView} activatable>
-                    ${(
-                      this.lovelaceViews ?? [
-                        {
-                          title: "Home",
-                        },
-                      ]
-                    ).map(
-                      (view, idx) => html`
-                        <ha-list-item
-                          graphic="avatar"
-                          .activated=${
-                            this.castManager.status?.lovelacePath ===
-                            (view.path ?? idx)
-                          }
-                          .selected=${
-                            this.castManager.status?.lovelacePath ===
-                            (view.path ?? idx)
-                          }
-                        >
-                          ${view.title || view.path || "Unnamed view"}
-                          ${
-                            view.icon
-                              ? html`
-                                  <ha-icon
-                                    .icon=${view.icon}
-                                    slot="graphic"
-                                  ></ha-icon>
-                                `
-                              : html`<ha-svg-icon
-                                  slot="item-icon"
-                                  .path=${mdiViewDashboard}
-                                ></ha-svg-icon>`
-                          }
-                        </ha-list-item>
-                      `
-                    )}</ha-list
-                  >
-                `
-        }
+            : html`
+                <div class="section-header">PICK A VIEW</div>
+                <ha-list @action=${this._handlePickView} activatable>
+                  ${(
+                    this.lovelaceViews ?? [
+                      {
+                        title: "Home",
+                      },
+                    ]
+                  ).map(
+                    (view, idx) => html`
+                      <ha-list-item
+                        graphic="avatar"
+                        .activated=${this.castManager.status?.lovelacePath ===
+                        (view.path ?? idx)}
+                        .selected=${this.castManager.status?.lovelacePath ===
+                        (view.path ?? idx)}
+                      >
+                        ${view.title || view.path || "Unnamed view"}
+                        ${view.icon
+                          ? html`
+                              <ha-icon
+                                .icon=${view.icon}
+                                slot="graphic"
+                              ></ha-icon>
+                            `
+                          : html`<ha-svg-icon
+                              slot="item-icon"
+                              .path=${mdiViewDashboard}
+                            ></ha-svg-icon>`}
+                      </ha-list-item>
+                    `
+                  )}</ha-list
+                >
+              `}
 
         <div class="card-actions">
-          ${
-            this.castManager.status
-              ? html`
-                  <ha-button appearance="plain" @click=${this._handleLaunch}>
-                    <ha-svg-icon
-                      slot="start"
-                      .path=${mdiCastConnected}
-                    ></ha-svg-icon>
-                    Manage
-                  </ha-button>
-                `
-              : ""
-          }
+          ${this.castManager.status
+            ? html`
+                <ha-button appearance="plain" @click=${this._handleLaunch}>
+                  <ha-svg-icon
+                    slot="start"
+                    .path=${mdiCastConnected}
+                  ></ha-svg-icon>
+                  Manage
+                </ha-button>
+              `
+            : ""}
           <div class="spacer"></div>
           <ha-button
             variant="danger"

cast/src/launcher/layout/hc-connect.ts

@@ -135,11 +135,9 @@ export class HcConnect extends LitElement {
               Show Demo
               <ha-svg-icon
                 slot="end"
-                .path=${
-                  this.castManager.castState === "CONNECTED"
-                    ? mdiCastConnected
-                    : mdiCast
-                }
+                .path=${this.castManager.castState === "CONNECTED"
+                  ? mdiCastConnected
+                  : mdiCast}
               ></ha-svg-icon>
             </ha-button>
             <div class="spacer"></div>

cast/src/launcher/layout/hc-layout.ts

@@ -26,20 +26,18 @@ class HcLayout extends LitElement {
           />
           <h1 class="card-header">
             Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
-            ${
-              this.auth
-                ? html`
-                    <div class="subtitle">
-                      <a href=${this.auth.data.hassUrl} target="_blank"
-                        >${this.auth.data.hassUrl.substr(
-                          this.auth.data.hassUrl.indexOf("//") + 2
-                        )}</a
-                      >
-                      ${this.user ? html` – ${this.user.name} ` : ""}
-                    </div>
-                  `
-                : ""
-            }
+            ${this.auth
+              ? html`
+                  <div class="subtitle">
+                    <a href=${this.auth.data.hassUrl} target="_blank"
+                      >${this.auth.data.hassUrl.substr(
+                        this.auth.data.hassUrl.indexOf("//") + 2
+                      )}</a
+                    >
+                    ${this.user ? html` – ${this.user.name} ` : ""}
+                  </div>
+                `
+              : ""}
           </h1>
           <slot></slot>
         </div>

demo/script/develop_demo

@@ -1,10 +1,9 @@
 #!/bin/sh
-# Develop the demo. Pass --background/--status/--stop/--logs to manage a
-# detached instance (see build-scripts/dev-server.mjs).
+# Develop the demo
 
 # Stop on errors
 set -e
 
 cd "$(dirname "$0")/../.."
 
-exec node build-scripts/dev-server.mjs --suite demo "$@"
+./node_modules/.bin/gulp develop-demo

demo/src/configs/types.ts

@@ -9,7 +9,8 @@ export interface DemoConfig {
   authorName: string;
   authorUrl: string;
   description?:
-    string | ((localize: LocalizeFunc) => string | TemplateResult<1>);
+    | string
+    | ((localize: LocalizeFunc) => string | TemplateResult<1>);
   lovelace: (localize: LocalizeFunc) => LovelaceConfig;
   entities: (localize: LocalizeFunc) => EntityInput[];
   theme: () => Record<string, string> | null;

demo/src/custom-cards/ha-demo-card.ts

@@ -43,30 +43,28 @@ export class HADemoCard extends LitElement implements LovelaceCard {
       <ha-card>
         <div class="picker">
           <div class="label">
-            ${
-              this._switching
-                ? html`<ha-spinner></ha-spinner>`
-                : until(
-                    selectedDemoConfig.then(
-                      (conf) => html`
-                        ${conf.name}
-                        <small>
-                          ${this.hass.localize(
-                            "ui.panel.page-demo.cards.demo.demo_by",
-                            {
-                              name: html`
-                                <a target="_blank" href=${conf.authorUrl}>
-                                  ${conf.authorName}
-                                </a>
-                              `,
-                            }
-                          )}
-                        </small>
-                      `
-                    ),
-                    ""
-                  )
-            }
+            ${this._switching
+              ? html`<ha-spinner></ha-spinner>`
+              : until(
+                  selectedDemoConfig.then(
+                    (conf) => html`
+                      ${conf.name}
+                      <small>
+                        ${this.hass.localize(
+                          "ui.panel.page-demo.cards.demo.demo_by",
+                          {
+                            name: html`
+                              <a target="_blank" href=${conf.authorUrl}>
+                                ${conf.authorName}
+                              </a>
+                            `,
+                          }
+                        )}
+                      </small>
+                    `
+                  ),
+                  ""
+                )}
           </div>
 
           <ha-button @click=${this._nextConfig} .disabled=${this._switching}>

demo/src/ha-demo.ts

@@ -53,7 +53,6 @@ const CONFIG_PANEL_COMMANDS = [
   "config/scene/config",
   "search/related",
   "tag/list",
-  "assist_pipeline/",
 ];
 
 @customElement("ha-demo")
@@ -66,9 +65,7 @@ export class HaDemo extends HomeAssistantAppEl {
         this._updateHass(hassUpdate),
     };
 
-    // `false` for contexts: HomeAssistantAppEl already provides them via
-    // `contextMixin`, so let provideHass skip them to avoid duplicate providers.
-    const hass = provideHass(this, initial, true, false);
+    const hass = provideHass(this, initial, true);
     const localizePromise =
       // @ts-ignore
       this._loadFragmentTranslations(hass.language, "page-demo").then(

demo/src/stubs/assist.ts

@@ -1,43 +1,11 @@
-import type { AssistPipeline } from "../../../src/data/assist_pipeline";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
-const pipelines: AssistPipeline[] = [
-  {
-    id: "01home_assistant_cloud",
-    name: "Home Assistant Cloud",
-    language: "en",
-    conversation_engine: "conversation.home_assistant",
-    conversation_language: "en",
-    stt_engine: "cloud",
-    stt_language: "en-US",
-    tts_engine: "cloud",
-    tts_language: "en-US",
-    tts_voice: "JennyNeural",
-    wake_word_entity: null,
-    wake_word_id: null,
-  },
-  {
-    id: "01local",
-    name: "Local",
-    language: "en",
-    conversation_engine: "conversation.home_assistant",
-    conversation_language: "en",
-    stt_engine: "stt.faster_whisper",
-    stt_language: "en",
-    tts_engine: "tts.piper",
-    tts_language: "en",
-    tts_voice: null,
-    wake_word_entity: null,
-    wake_word_id: null,
-  },
-];
-
 export const mockAssist = (hass: MockHomeAssistant) => {
-  // Stub for assist pipeline list — returns a cloud and a local pipeline so the
-  // voice assistants config panel shows configured assistants.
+  // Stub for assist pipeline list — returns empty so developer tools assist
+  // tab loads without errors.
   hass.mockWS("assist_pipeline/pipeline/list", () => ({
-    pipelines,
-    preferred_pipeline: "01home_assistant_cloud",
+    pipelines: [],
+    preferred_pipeline: null,
   }));
 
   // Stub for assist pipeline run — immediately sends run-end event so

demo/src/stubs/config-panel.ts

@@ -1,6 +1,5 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import { mockApplicationCredentials } from "./application_credentials";
-import { mockAssist } from "./assist";
 import { mockAutomation } from "./automation";
 import { mockBackup } from "./backup";
 import { mockBlueprint } from "./blueprint";
@@ -38,5 +37,4 @@ export const mockConfigPanel = (hass: MockHomeAssistant) => {
   mockScene(hass);
   mockSearch(hass);
   mockTags(hass);
-  mockAssist(hass);
 };

demo/src/stubs/energy.ts

@@ -8,100 +8,103 @@ import type {
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockEnergy = (hass: MockHomeAssistant) => {
-  hass.mockWS("energy/get_prefs", (): EnergyPreferences => ({
-    energy_sources: [
-      {
-        type: "grid",
-        stat_energy_from: "sensor.energy_consumption_tarif_1",
-        stat_energy_to: "sensor.energy_production_tarif_1",
-        stat_cost: "sensor.energy_consumption_tarif_1_cost",
-        stat_compensation: "sensor.energy_production_tarif_1_compensation",
-        entity_energy_price: null,
-        number_energy_price: null,
-        entity_energy_price_export: null,
-        number_energy_price_export: null,
-        stat_rate: "sensor.power_grid",
-        cost_adjustment_day: 0,
-      },
-      {
-        type: "grid",
-        stat_energy_from: "sensor.energy_consumption_tarif_2",
-        stat_energy_to: "sensor.energy_production_tarif_2",
-        stat_cost: "sensor.energy_consumption_tarif_2_cost",
-        stat_compensation: "sensor.energy_production_tarif_2_compensation",
-        entity_energy_price: null,
-        number_energy_price: null,
-        entity_energy_price_export: null,
-        number_energy_price_export: null,
-        stat_rate: "sensor.power_grid_return",
-        cost_adjustment_day: 0,
-      },
-      {
-        type: "solar",
-        stat_energy_from: "sensor.solar_production",
-        stat_rate: "sensor.power_solar",
-        config_entry_solar_forecast: ["solar_forecast"],
-      },
-      {
-        type: "battery",
-        stat_energy_from: "sensor.battery_output",
-        stat_energy_to: "sensor.battery_input",
-        stat_rate: "sensor.power_battery",
-      },
-      {
-        type: "gas",
-        stat_energy_from: "sensor.energy_gas",
-        stat_cost: "sensor.energy_gas_cost",
-        entity_energy_price: null,
-        number_energy_price: null,
-      },
-      {
-        type: "water",
-        stat_energy_from: "sensor.energy_water",
-        stat_cost: "sensor.energy_water_cost",
-        entity_energy_price: null,
-        number_energy_price: null,
-      },
-    ],
-    device_consumption: [
-      {
-        stat_consumption: "sensor.energy_car",
-        stat_rate: "sensor.power_car",
-      },
-      {
-        stat_consumption: "sensor.energy_ac",
-        stat_rate: "sensor.power_ac",
-      },
-      {
-        stat_consumption: "sensor.energy_washing_machine",
-        stat_rate: "sensor.power_washing_machine",
-      },
-      {
-        stat_consumption: "sensor.energy_dryer",
-        stat_rate: "sensor.power_dryer",
-      },
-      {
-        stat_consumption: "sensor.energy_heat_pump",
-        stat_rate: "sensor.power_heat_pump",
-      },
-      {
-        stat_consumption: "sensor.energy_boiler",
-        stat_rate: "sensor.power_boiler",
-      },
-    ],
-    device_consumption_water: [
-      {
-        stat_consumption: "sensor.water_kitchen",
-      },
-      {
-        stat_consumption: "sensor.water_garden",
-      },
-    ],
-  }));
-  hass.mockWS("energy/info", (): EnergyInfo => ({
-    cost_sensors: {},
-    solar_forecast_domains: [],
-  }));
+  hass.mockWS(
+    "energy/get_prefs",
+    (): EnergyPreferences => ({
+      energy_sources: [
+        {
+          type: "grid",
+          stat_energy_from: "sensor.energy_consumption_tarif_1",
+          stat_energy_to: "sensor.energy_production_tarif_1",
+          stat_cost: "sensor.energy_consumption_tarif_1_cost",
+          stat_compensation: "sensor.energy_production_tarif_1_compensation",
+          entity_energy_price: null,
+          number_energy_price: null,
+          entity_energy_price_export: null,
+          number_energy_price_export: null,
+          stat_rate: "sensor.power_grid",
+          cost_adjustment_day: 0,
+        },
+        {
+          type: "grid",
+          stat_energy_from: "sensor.energy_consumption_tarif_2",
+          stat_energy_to: "sensor.energy_production_tarif_2",
+          stat_cost: "sensor.energy_consumption_tarif_2_cost",
+          stat_compensation: "sensor.energy_production_tarif_2_compensation",
+          entity_energy_price: null,
+          number_energy_price: null,
+          entity_energy_price_export: null,
+          number_energy_price_export: null,
+          stat_rate: "sensor.power_grid_return",
+          cost_adjustment_day: 0,
+        },
+        {
+          type: "solar",
+          stat_energy_from: "sensor.solar_production",
+          stat_rate: "sensor.power_solar",
+          config_entry_solar_forecast: ["solar_forecast"],
+        },
+        {
+          type: "battery",
+          stat_energy_from: "sensor.battery_output",
+          stat_energy_to: "sensor.battery_input",
+          stat_rate: "sensor.power_battery",
+        },
+        {
+          type: "gas",
+          stat_energy_from: "sensor.energy_gas",
+          stat_cost: "sensor.energy_gas_cost",
+          entity_energy_price: null,
+          number_energy_price: null,
+        },
+        {
+          type: "water",
+          stat_energy_from: "sensor.energy_water",
+          stat_cost: "sensor.energy_water_cost",
+          entity_energy_price: null,
+          number_energy_price: null,
+        },
+      ],
+      device_consumption: [
+        {
+          stat_consumption: "sensor.energy_car",
+          stat_rate: "sensor.power_car",
+        },
+        {
+          stat_consumption: "sensor.energy_ac",
+          stat_rate: "sensor.power_ac",
+        },
+        {
+          stat_consumption: "sensor.energy_washing_machine",
+          stat_rate: "sensor.power_washing_machine",
+        },
+        {
+          stat_consumption: "sensor.energy_dryer",
+          stat_rate: "sensor.power_dryer",
+        },
+        {
+          stat_consumption: "sensor.energy_heat_pump",
+          stat_rate: "sensor.power_heat_pump",
+        },
+        {
+          stat_consumption: "sensor.energy_boiler",
+          stat_rate: "sensor.power_boiler",
+        },
+      ],
+      device_consumption_water: [
+        {
+          stat_consumption: "sensor.water_kitchen",
+        },
+        {
+          stat_consumption: "sensor.water_garden",
+        },
+      ],
+    })
+  );
+  hass.mockWS(
+    "energy/info",
+    (): EnergyInfo => ({ cost_sensors: {}, solar_forecast_domains: [] })
+  );
   hass.mockWS(
     "energy/fossil_energy_consumption",
     ({ period }): FossilEnergyConsumption => ({
@@ -110,48 +113,51 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
   );
   const todayString = format(startOfToday(), "yyyy-MM-dd");
   const tomorrowString = format(startOfTomorrow(), "yyyy-MM-dd");
-  hass.mockWS("energy/solar_forecast", (): EnergySolarForecasts => ({
-    solar_forecast: {
-      wh_hours: {
-        [`${todayString}T06:00:00`]: 0,
-        [`${todayString}T06:23:00`]: 6,
-        [`${todayString}T06:45:00`]: 39,
-        [`${todayString}T07:00:00`]: 28,
-        [`${todayString}T08:00:00`]: 208,
-        [`${todayString}T09:00:00`]: 352,
-        [`${todayString}T10:00:00`]: 544,
-        [`${todayString}T11:00:00`]: 748,
-        [`${todayString}T12:00:00`]: 1259,
-        [`${todayString}T13:00:00`]: 1361,
-        [`${todayString}T14:00:00`]: 1373,
-        [`${todayString}T15:00:00`]: 1370,
-        [`${todayString}T16:00:00`]: 1186,
-        [`${todayString}T17:00:00`]: 937,
-        [`${todayString}T18:00:00`]: 652,
-        [`${todayString}T19:00:00`]: 370,
-        [`${todayString}T20:00:00`]: 155,
-        [`${todayString}T21:48:00`]: 24,
-        [`${todayString}T22:36:00`]: 0,
-        [`${tomorrowString}T06:01:00`]: 0,
-        [`${tomorrowString}T06:23:00`]: 9,
-        [`${tomorrowString}T06:45:00`]: 47,
-        [`${tomorrowString}T07:00:00`]: 48,
-        [`${tomorrowString}T08:00:00`]: 473,
-        [`${tomorrowString}T09:00:00`]: 827,
-        [`${tomorrowString}T10:00:00`]: 1153,
-        [`${tomorrowString}T11:00:00`]: 1413,
-        [`${tomorrowString}T12:00:00`]: 1590,
-        [`${tomorrowString}T13:00:00`]: 1652,
-        [`${tomorrowString}T14:00:00`]: 1612,
-        [`${tomorrowString}T15:00:00`]: 1438,
-        [`${tomorrowString}T16:00:00`]: 1149,
-        [`${tomorrowString}T17:00:00`]: 830,
-        [`${tomorrowString}T18:00:00`]: 542,
-        [`${tomorrowString}T19:00:00`]: 311,
-        [`${tomorrowString}T20:00:00`]: 140,
-        [`${tomorrowString}T21:47:00`]: 22,
-        [`${tomorrowString}T22:34:00`]: 0,
+  hass.mockWS(
+    "energy/solar_forecast",
+    (): EnergySolarForecasts => ({
+      solar_forecast: {
+        wh_hours: {
+          [`${todayString}T06:00:00`]: 0,
+          [`${todayString}T06:23:00`]: 6,
+          [`${todayString}T06:45:00`]: 39,
+          [`${todayString}T07:00:00`]: 28,
+          [`${todayString}T08:00:00`]: 208,
+          [`${todayString}T09:00:00`]: 352,
+          [`${todayString}T10:00:00`]: 544,
+          [`${todayString}T11:00:00`]: 748,
+          [`${todayString}T12:00:00`]: 1259,
+          [`${todayString}T13:00:00`]: 1361,
+          [`${todayString}T14:00:00`]: 1373,
+          [`${todayString}T15:00:00`]: 1370,
+          [`${todayString}T16:00:00`]: 1186,
+          [`${todayString}T17:00:00`]: 937,
+          [`${todayString}T18:00:00`]: 652,
+          [`${todayString}T19:00:00`]: 370,
+          [`${todayString}T20:00:00`]: 155,
+          [`${todayString}T21:48:00`]: 24,
+          [`${todayString}T22:36:00`]: 0,
+          [`${tomorrowString}T06:01:00`]: 0,
+          [`${tomorrowString}T06:23:00`]: 9,
+          [`${tomorrowString}T06:45:00`]: 47,
+          [`${tomorrowString}T07:00:00`]: 48,
+          [`${tomorrowString}T08:00:00`]: 473,
+          [`${tomorrowString}T09:00:00`]: 827,
+          [`${tomorrowString}T10:00:00`]: 1153,
+          [`${tomorrowString}T11:00:00`]: 1413,
+          [`${tomorrowString}T12:00:00`]: 1590,
+          [`${tomorrowString}T13:00:00`]: 1652,
+          [`${tomorrowString}T14:00:00`]: 1612,
+          [`${tomorrowString}T15:00:00`]: 1438,
+          [`${tomorrowString}T16:00:00`]: 1149,
+          [`${tomorrowString}T17:00:00`]: 830,
+          [`${tomorrowString}T18:00:00`]: 542,
+          [`${tomorrowString}T19:00:00`]: 311,
+          [`${tomorrowString}T20:00:00`]: 140,
+          [`${tomorrowString}T21:47:00`]: 22,
+          [`${tomorrowString}T22:34:00`]: 0,
+        },
       },
-    },
-  }));
+    })
+  );
 };

demo/src/stubs/entity_sources.ts

@@ -2,8 +2,11 @@ import type { EntitySources } from "../../../src/data/entity/entity_sources";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockEntitySources = (hass: MockHomeAssistant) => {
-  hass.mockWS("entity/source", (): EntitySources => ({
-    "sensor.co2_intensity": { domain: "co2signal" },
-    "sensor.grid_fossil_fuel_percentage": { domain: "co2signal" },
-  }));
+  hass.mockWS(
+    "entity/source",
+    (): EntitySources => ({
+      "sensor.co2_intensity": { domain: "co2signal" },
+      "sensor.grid_fossil_fuel_percentage": { domain: "co2signal" },
+    })
+  );
 };

demo/src/stubs/expose.ts

@@ -2,27 +2,22 @@ import type { ExposeEntitySettings } from "../../../src/data/expose";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 const exposedEntities: Record<string, ExposeEntitySettings> = {
-  "light.floor_lamp": {
+  "light.bed_light": {
     conversation: true,
     "cloud.alexa": true,
     "cloud.google_assistant": true,
   },
-  "light.living_room_spotlights": {
+  "light.ceiling_lights": {
     conversation: true,
     "cloud.alexa": true,
     "cloud.google_assistant": false,
   },
-  "light.bar_lamp": {
+  "switch.decorative_lights": {
     conversation: true,
     "cloud.alexa": false,
     "cloud.google_assistant": true,
   },
-  "light.kitchen_spotlights": {
-    conversation: true,
-    "cloud.alexa": true,
-    "cloud.google_assistant": true,
-  },
-  "light.outdoor_light": {
+  "climate.ecobee": {
     conversation: true,
     "cloud.alexa": true,
     "cloud.google_assistant": true,

demo/src/stubs/network.ts

@@ -2,9 +2,12 @@ import type { NetworkUrls } from "../../../src/data/network";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockNetwork = (hass: MockHomeAssistant) => {
-  hass.mockWS("network/url", (): NetworkUrls => ({
-    internal: "http://homeassistant.local:8123",
-    external: "https://demo-instance.ui.nabu.casa",
-    cloud: "https://demo-instance.ui.nabu.casa",
-  }));
+  hass.mockWS(
+    "network/url",
+    (): NetworkUrls => ({
+      internal: "http://homeassistant.local:8123",
+      external: "https://demo-instance.ui.nabu.casa",
+      cloud: "https://demo-instance.ui.nabu.casa",
+    })
+  );
 };

demo/src/stubs/translations.ts

@@ -1,7 +1,8 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockTranslations = (hass: MockHomeAssistant) => {
-  hass.mockWS("frontend/get_translations", (
-    /* msg: {language: string, category: string} */
-  ) => ({ resources: {} }));
+  hass.mockWS(
+    "frontend/get_translations",
+    (/* msg: {language: string, category: string} */) => ({ resources: {} })
+  );
 };

eslint.config.mjs

@@ -240,12 +240,6 @@ export default tseslint.config(
       globals: globals.node,
     },
   },
-  {
-    files: [".github/scripts/*.mjs"],
-    languageOptions: {
-      globals: globals.node,
-    },
-  },
   {
     plugins: {
       html,

gallery/script/develop_gallery

@@ -1,10 +1,9 @@
 #!/bin/sh
-# Run the gallery. Pass --background/--status/--stop/--logs to manage a
-# detached instance (see build-scripts/dev-server.mjs).
+# Run the gallery
 
 # Stop on errors
 set -e
 
 cd "$(dirname "$0")/../.."
 
-exec node build-scripts/dev-server.mjs --suite gallery "$@"
+./node_modules/.bin/gulp develop-gallery

gallery/src/components/demo-black-white-row.ts

@@ -101,11 +101,9 @@ class DemoBlackWhiteRow extends LitElement {
               </ha-button>
             </div>
           </ha-card>
-          ${
-            this.value
-              ? html`<pre>${JSON.stringify(this.value, undefined, 2)}</pre>`
-              : nothing
-          }
+          ${this.value
+            ? html`<pre>${JSON.stringify(this.value, undefined, 2)}</pre>`
+            : nothing}
         </section>
       </div>
     `;

gallery/src/components/demo-card.ts

@@ -34,11 +34,9 @@ class DemoCard extends LitElement {
     return html`
       <h2>
         ${this.config.heading}
-        ${
-          this._size !== undefined
-            ? html`<small>(size ${this._size})</small>`
-            : ""
-        }
+        ${this._size !== undefined
+          ? html`<small>(size ${this._size})</small>`
+          : ""}
       </h2>
       <div class="root">
         <hui-card
@@ -46,11 +44,9 @@ class DemoCard extends LitElement {
           .hass=${this.hass}
           @card-updated=${this._cardUpdated}
         ></hui-card>
-        ${
-          this.showConfig
-            ? html`<pre>${this.config.config.trim()}</pre>`
-            : nothing
-        }
+        ${this.showConfig
+          ? html`<pre>${this.config.config.trim()}</pre>`
+          : nothing}
       </div>
     `;
   }

gallery/src/components/demo-more-info.ts

@@ -22,15 +22,13 @@ class DemoMoreInfo extends LitElement {
       <div class="root">
         <div id="card">
           <ha-card>
-            ${
-              !computeShowNewMoreInfo(state)
-                ? html`<state-card-content
-                    .stateObj=${state}
-                    .hass=${this.hass}
-                    in-dialog
-                  ></state-card-content>`
-                : nothing
-            }
+            ${!computeShowNewMoreInfo(state)
+              ? html`<state-card-content
+                  .stateObj=${state}
+                  .hass=${this.hass}
+                  in-dialog
+                ></state-card-content>`
+              : nothing}
 
             <more-info-content
               .hass=${this.hass}

gallery/src/data/traces/not-triggered-trace.ts

@@ -1,75 +0,0 @@
-import type { DemoTrace } from "./types";
-
-export const notTriggeredTrace: DemoTrace = {
-  trace: {
-    last_step: "trigger/0",
-    run_id: "788767ce152d3d4475134bf1107986d4",
-    state: "stopped",
-    script_execution: "not_triggered",
-    not_triggered: true,
-    timestamp: {
-      start: "2021-03-25T04:36:51.223337+00:00",
-      finish: "2021-03-25T04:36:51.223341+00:00",
-    },
-    // Not-triggered traces have no trigger description.
-    trigger: null,
-    domain: "automation",
-    item_id: "1781703842452",
-    trace: {
-      "trigger/0": [
-        {
-          path: "trigger/0",
-          timestamp: "2021-03-25T04:36:51.223340+00:00",
-          changed_variables: {
-            trigger: {
-              id: "0",
-              idx: "0",
-              alias: null,
-              platform: "light.turned_on",
-            },
-          },
-          result: {
-            reason: "new_state_not_a_match",
-            data: {
-              entity_id: "light.bed_light",
-              to_state: "off",
-            },
-          },
-        },
-      ],
-    },
-    config: {
-      id: "1781703842452",
-      alias: "Light Turned On Notification",
-      description: "Send a notification when a specific light is turned on.",
-      triggers: [
-        {
-          trigger: "light.turned_on",
-          target: {
-            floor_id: "test",
-          },
-          options: {
-            for: "00:00:00",
-            behavior: "each",
-          },
-        },
-      ],
-      conditions: [],
-      actions: [
-        {
-          action: "notify.notify",
-          data: {
-            message: "A light was turned on.",
-          },
-        },
-      ],
-      mode: "single",
-    },
-    context: {
-      id: "01KVAX7CG7XBDYGJYAGA4XJHGX",
-      parent_id: "01KVAX7CG631JRX4H3JS5JJ11Q",
-      user_id: null,
-    },
-  },
-  logbookEntries: [],
-};

gallery/src/ha-gallery.ts

@@ -1,4 +1,3 @@
-import { ContextProvider } from "@lit/context";
 import { mdiCog, mdiMenu } from "@mdi/js";
 import type { Connection } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
@@ -20,22 +19,6 @@ import "../../src/components/ha-svg-icon";
 import "../../src/components/ha-top-app-bar-fixed";
 import "../../src/managers/notification-manager";
 import { haStyle } from "../../src/resources/styles";
-import {
-  apiContext,
-  areasContext,
-  configContext,
-  connectionContext,
-  devicesContext,
-  entitiesContext,
-  floorsContext,
-  formattersContext,
-  internationalizationContext,
-  registriesContext,
-  servicesContext,
-  statesContext,
-  uiContext,
-} from "../../src/data/context";
-import { updateHassGroups } from "../../src/data/context/updateContext";
 import type { HomeAssistant, ThemeSettings } from "../../src/types";
 import { PAGES, SIDEBAR } from "../build/import-pages";
 import {
@@ -130,65 +113,6 @@ class HaGallery extends LitElement {
 
   @state() private _drawerOpen = !this._narrow;
 
-  // Fallback Lit context providers for the whole gallery. The real app's root
-  // element provides these via `contextMixin`; here we mirror that so demos
-  // which render context-consuming components without setting up their own hass
-  // (e.g. bare component demos) still resolve `localize`, formatters, config,
-  // etc. instead of throwing during init. Demos that call `provideHass`
-  // register their own providers closer in the tree, which take precedence.
-  private _contextProviders = {
-    registries: new ContextProvider(this, { context: registriesContext }),
-    internationalization: new ContextProvider(this, {
-      context: internationalizationContext,
-    }),
-    api: new ContextProvider(this, { context: apiContext }),
-    connection: new ContextProvider(this, { context: connectionContext }),
-    ui: new ContextProvider(this, { context: uiContext }),
-    config: new ContextProvider(this, { context: configContext }),
-    formatters: new ContextProvider(this, { context: formattersContext }),
-  };
-
-  // The individual (non-grouped) contexts contextMixin also provides. Components
-  // such as ha-area-picker / ha-entity-picker consume these directly, so the
-  // fallback must cover them too.
-  private _singleContextProviders = {
-    states: new ContextProvider(this, { context: statesContext }),
-    services: new ContextProvider(this, { context: servicesContext }),
-    entities: new ContextProvider(this, { context: entitiesContext }),
-    devices: new ContextProvider(this, { context: devicesContext }),
-    areas: new ContextProvider(this, { context: areasContext }),
-    floors: new ContextProvider(this, { context: floorsContext }),
-  };
-
-  protected willUpdate(changedProps: PropertyValues<this>) {
-    super.willUpdate(changedProps);
-    // Refresh the fallback contexts before each render so theme/page changes in
-    // the gallery hass propagate to consuming components.
-    const hass = this._galleryHass;
-    (
-      Object.keys(
-        this._contextProviders
-      ) as (keyof typeof this._contextProviders)[]
-    ).forEach((group) => {
-      const provider = this._contextProviders[group];
-      provider.setValue(
-        (updateHassGroups[group] as (h: HomeAssistant, v?: any) => any)(
-          hass,
-          provider.value
-        )
-      );
-    });
-    (
-      Object.keys(
-        this._singleContextProviders
-      ) as (keyof typeof this._singleContextProviders)[]
-    ).forEach((key) => {
-      (this._singleContextProviders[key] as ContextProvider<any>).setValue(
-        hass[key]
-      );
-    });
-  }
-
   render() {
     const isSettingsPage = this._page === SETTINGS_PAGE;
     const page = isSettingsPage ? undefined : PAGES[this._page];
@@ -211,46 +135,38 @@ class HaGallery extends LitElement {
         </ha-sidebar>
         <div slot="appContent" class="app-content">
           <ha-top-app-bar-fixed .narrow=${this._narrow}>
-            ${
-              this._narrow || !this._drawerOpen
-                ? html`<ha-icon-button
-                    slot="navigationIcon"
-                    @click=${this._toggleDrawer}
-                    .path=${mdiMenu}
-                  ></ha-icon-button>`
-                : nothing
-            }
+            ${this._narrow || !this._drawerOpen
+              ? html`<ha-icon-button
+                  slot="navigationIcon"
+                  @click=${this._toggleDrawer}
+                  .path=${mdiMenu}
+                ></ha-icon-button>`
+              : nothing}
 
             <div slot="title">
-              ${
-                isSettingsPage
-                  ? "Settings"
-                  : page?.metadata.title || this._page.split("/")[1]
-              }
+              ${isSettingsPage
+                ? "Settings"
+                : page?.metadata.title || this._page.split("/")[1]}
             </div>
             <div class="content">
-              ${
-                isSettingsPage
-                  ? html`<gallery-settings
-                      .hass=${this._galleryHass}
-                      .themeSettings=${this._themeSettings}
-                      .narrow=${this._narrow}
-                      .rtl=${this._rtl}
-                      @theme-settings-changed=${this._themeSettingsChanged}
-                      @gallery-rtl-changed=${this._rtlChanged}
-                    ></gallery-settings>`
-                  : html`
-                      ${
-                        page?.description
-                          ? html`
-                              <page-description .page=${this._page}>
-                              </page-description>
-                            `
-                          : nothing
-                      }
-                      ${dynamicElement(`demo-${this._page.replace("/", "-")}`)}
-                    `
-              }
+              ${isSettingsPage
+                ? html`<gallery-settings
+                    .hass=${this._galleryHass}
+                    .themeSettings=${this._themeSettings}
+                    .narrow=${this._narrow}
+                    .rtl=${this._rtl}
+                    @theme-settings-changed=${this._themeSettingsChanged}
+                    @gallery-rtl-changed=${this._rtlChanged}
+                  ></gallery-settings>`
+                : html`
+                    ${page?.description
+                      ? html`
+                          <page-description .page=${this._page}>
+                          </page-description>
+                        `
+                      : nothing}
+                    ${dynamicElement(`demo-${this._page.replace("/", "-")}`)}
+                  `}
             </div>
             ${isSettingsPage || !page ? nothing : this._renderPageFooter(page)}
           </ha-top-app-bar-fixed>
@@ -398,15 +314,13 @@ class HaGallery extends LitElement {
                 .header=${group.header}
                 ?expanded=${expanded}
               >
-                ${
-                  group.icon
-                    ? html`<ha-svg-icon
-                        slot="leading-icon"
-                        class="gallery-sidebar-icon"
-                        .path=${group.icon}
-                      ></ha-svg-icon>`
-                    : nothing
-                }
+                ${group.icon
+                  ? html`<ha-svg-icon
+                      slot="leading-icon"
+                      class="gallery-sidebar-icon"
+                      .path=${group.icon}
+                    ></ha-svg-icon>`
+                  : nothing}
                 ${content}
               </ha-expansion-panel>
             `
@@ -464,11 +378,9 @@ class HaGallery extends LitElement {
         ?selected=${this._page === page}
         href=${`#${page}`}
       >
-        ${
-          iconPath
-            ? html`<ha-svg-icon slot="start" .path=${iconPath}></ha-svg-icon>`
-            : nothing
-        }
+        ${iconPath
+          ? html`<ha-svg-icon slot="start" .path=${iconPath}></ha-svg-icon>`
+          : nothing}
         <span slot="headline">${title}</span>
       </ha-list-item-button>
     `;
@@ -499,30 +411,23 @@ class HaGallery extends LitElement {
           Suggest an edit to this page, or provide/view feedback for this page.
         </div>
         <div>
-          ${
-            page.description || Object.keys(page.metadata).length > 0
-              ? html`
-                  <a
-                    href=${`${GITHUB_DEMO_URL}${this._page}.markdown`}
-                    target="_blank"
-                  >
-                    Edit text
-                  </a>
-                `
-              : nothing
-          }
-          ${
-            page.demo
-              ? html`
-                  <a
-                    href=${`${GITHUB_DEMO_URL}${this._page}.ts`}
-                    target="_blank"
-                  >
-                    Edit demo
-                  </a>
-                `
-              : nothing
-          }
+          ${page.description || Object.keys(page.metadata).length > 0
+            ? html`
+                <a
+                  href=${`${GITHUB_DEMO_URL}${this._page}.markdown`}
+                  target="_blank"
+                >
+                  Edit text
+                </a>
+              `
+            : nothing}
+          ${page.demo
+            ? html`
+                <a href=${`${GITHUB_DEMO_URL}${this._page}.ts`} target="_blank">
+                  Edit demo
+                </a>
+              `
+            : nothing}
         </div>
       </div>
     </div>`;
@@ -671,21 +576,6 @@ class HaGallery extends LitElement {
       callWS: async () => undefined,
       fetchWithAuth: async () => new Response(),
       sendWS: () => undefined,
-      formatEntityState: (stateObj, stateValue) =>
-        (stateValue != null ? stateValue : stateObj.state) ?? "",
-      formatEntityStateToParts: (stateObj, stateValue) => [
-        {
-          type: "value",
-          value: (stateValue != null ? stateValue : stateObj.state) ?? "",
-        },
-      ],
-      formatEntityAttributeName: (_stateObj, attribute) => attribute,
-      formatEntityAttributeValue: (stateObj, attribute, value) =>
-        value != null ? value : (stateObj.attributes[attribute] ?? ""),
-      formatEntityName: (stateObj, type) =>
-        typeof type === "string"
-          ? type
-          : (stateObj.attributes.friendly_name ?? stateObj.entity_id),
     } as unknown as HomeAssistant;
   }
 

gallery/src/pages/automation/describe-action.ts

@@ -149,11 +149,9 @@ export class DemoAutomationDescribeAction extends LitElement {
       <ha-card header="Actions">
         <div class="action">
           <span>
-            ${
-              this._action
-                ? describeAction(this.hass, [], this._action)
-                : "<invalid YAML>"
-            }
+            ${this._action
+              ? describeAction(this.hass, [], this._action)
+              : "<invalid YAML>"}
           </span>
           <ha-yaml-editor
             label="Action Config"

gallery/src/pages/automation/describe-condition.ts

@@ -74,11 +74,9 @@ export class DemoAutomationDescribeCondition extends LitElement {
       <ha-card header="Conditions">
         <div class="condition">
           <span>
-            ${
-              this._condition
-                ? describeCondition(this._condition, this.hass, [])
-                : "<invalid YAML>"
-            }
+            ${this._condition
+              ? describeCondition(this._condition, this.hass, [])
+              : "<invalid YAML>"}
           </span>
           <ha-yaml-editor
             label="Condition Config"

gallery/src/pages/automation/describe-trigger.ts

@@ -98,11 +98,9 @@ export class DemoAutomationDescribeTrigger extends LitElement {
       <ha-card header="Triggers">
         <div class="trigger">
           <span>
-            ${
-              this._trigger
-                ? describeTrigger(this._trigger, this.hass, [])
-                : "<invalid YAML>"
-            }
+            ${this._trigger
+              ? describeTrigger(this._trigger, this.hass, [])
+              : "<invalid YAML>"}
           </span>
           <ha-yaml-editor
             label="Trigger Config"

gallery/src/pages/automation/trace-timeline.ts

@@ -24,33 +24,6 @@ const traces: DemoTrace[] = [
     error: 'Variable "beer" cannot be None',
   }),
   mockDemoTrace({ state: "stopped", script_execution: "cancelled" }),
-  mockDemoTrace({
-    state: "stopped",
-    script_execution: "not_triggered",
-    not_triggered: true,
-    // Not-triggered traces have no trigger description.
-    trigger: null,
-    trace: {
-      "trigger/0": [
-        {
-          path: "trigger/0",
-          changed_variables: {
-            trigger: {
-              id: "0",
-              idx: "0",
-              alias: null,
-              platform: "light.turned_on",
-            },
-          },
-          result: {
-            reason: "new_state_not_a_match",
-            data: { entity_id: "light.bed_light", to_state: "off" },
-          },
-          timestamp: "2021-03-25T04:36:51.223693+00:00",
-        },
-      ],
-    },
-  }),
 ];
 
 @customElement("demo-automation-trace-timeline")

gallery/src/pages/automation/trace.ts

@@ -2,20 +2,17 @@
 
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, queryAll, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/trace/ha-trace-path-details";
-import type { HatScriptGraph } from "../../../../src/components/trace/hat-script-graph";
 import "../../../../src/components/trace/hat-script-graph";
 import "../../../../src/components/trace/hat-trace-timeline";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
 import { basicTrace } from "../../data/traces/basic_trace";
 import { motionLightTrace } from "../../data/traces/motion-light-trace";
-import { notTriggeredTrace } from "../../data/traces/not-triggered-trace";
 import type { DemoTrace } from "../../data/traces/types";
 
-const traces: DemoTrace[] = [basicTrace, motionLightTrace, notTriggeredTrace];
+const traces: DemoTrace[] = [basicTrace, motionLightTrace];
 
 @customElement("demo-automation-trace")
 export class DemoAutomationTrace extends LitElement {
@@ -23,25 +20,18 @@ export class DemoAutomationTrace extends LitElement {
 
   @state() private _selected = {};
 
-  @queryAll("hat-script-graph") private _graphs!: NodeListOf<HatScriptGraph>;
-
   protected render() {
     if (!this.hass) {
       return nothing;
     }
     return html`
-      ${traces.map((trace, idx) => {
-        const graph = this._graphs?.[idx];
-        const selectedPath = this._selected[idx];
-        const selectedNode = selectedPath
-          ? graph?.renderedNodes[selectedPath]
-          : undefined;
-        return html`
+      ${traces.map(
+        (trace, idx) => html`
           <ha-card .header=${trace.trace.config.alias}>
             <div class="card-content">
               <hat-script-graph
                 .trace=${trace.trace}
-                .selected=${selectedPath}
+                .selected=${this._selected[idx]}
                 @graph-node-selected=${this._handleGraphNodeSelected}
                 .sampleIdx=${idx}
               ></hat-script-graph>
@@ -50,27 +40,15 @@ export class DemoAutomationTrace extends LitElement {
                 .hass=${this.hass}
                 .trace=${trace.trace}
                 .logbookEntries=${trace.logbookEntries}
-                .selectedPath=${selectedPath}
+                .selectedPath=${this._selected[idx]}
                 @value-changed=${this._handleTimelineValueChanged}
                 .sampleIdx=${idx}
               ></hat-trace-timeline>
-              ${
-                selectedNode && graph
-                  ? html`<ha-trace-path-details
-                      .hass=${this.hass}
-                      .trace=${trace.trace}
-                      .selected=${selectedNode}
-                      .logbookEntries=${trace.logbookEntries}
-                      .trackedNodes=${graph.trackedNodes}
-                      .renderedNodes=${graph.renderedNodes}
-                    ></ha-trace-path-details>`
-                  : nothing
-              }
               <button @click=${() => console.log(trace)}>Log trace</button>
             </div>
           </ha-card>
-        `;
-      })}
+        `
+      )}
     `;
   }
 

gallery/src/pages/components/ha-chips.ts

@@ -33,24 +33,20 @@ export class DemoHaChips extends LitElement {
             ${chips.map(
               (chip) => html`
                 <ha-assist-chip .label=${chip.content}>
-                  ${
-                    chip.icon
-                      ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
-                        </ha-svg-icon>`
-                      : nothing
-                  }
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : nothing}
                 </ha-assist-chip>
               `
             )}
             ${chips.map(
               (chip) => html`
                 <ha-assist-chip .label=${chip.content} selected>
-                  ${
-                    chip.icon
-                      ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
-                        </ha-svg-icon>`
-                      : nothing
-                  }
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : nothing}
                 </ha-assist-chip>
               `
             )}
@@ -60,24 +56,20 @@ export class DemoHaChips extends LitElement {
             ${chips.map(
               (chip) => html`
                 <ha-filter-chip .label=${chip.content}>
-                  ${
-                    chip.icon
-                      ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
-                        </ha-svg-icon>`
-                      : nothing
-                  }
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : nothing}
                 </ha-filter-chip>
               `
             )}
             ${chips.map(
               (chip) => html`
                 <ha-filter-chip .label=${chip.content} selected>
-                  ${
-                    chip.icon
-                      ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
-                        </ha-svg-icon>`
-                      : nothing
-                  }
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : nothing}
                 </ha-filter-chip>
               `
             )}
@@ -87,12 +79,10 @@ export class DemoHaChips extends LitElement {
             ${chips.map(
               (chip) => html`
                 <ha-input-chip .label=${chip.content}>
-                  ${
-                    chip.icon
-                      ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
-                        </ha-svg-icon>`
-                      : nothing
-                  }
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : nothing}
                   ${chip.content}
                 </ha-input-chip>
               `
@@ -100,12 +90,10 @@ export class DemoHaChips extends LitElement {
             ${chips.map(
               (chip) => html`
                 <ha-input-chip .label=${chip.content} selected>
-                  ${
-                    chip.icon
-                      ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
-                        </ha-svg-icon>`
-                      : nothing
-                  }
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : nothing}
                 </ha-input-chip>
               `
             )}

gallery/src/pages/components/ha-control-select-menu.ts

@@ -92,16 +92,14 @@ export class DemoHaControlSelectMenu extends LitElement {
                       .value=${option.value}
                       .graphic=${option.icon ? "icon" : undefined}
                     >
-                      ${
-                        option.icon
-                          ? html`
-                              <ha-svg-icon
-                                slot="graphic"
-                                .path=${option.icon}
-                              ></ha-svg-icon>
-                            `
-                          : nothing
-                      }
+                      ${option.icon
+                        ? html`
+                            <ha-svg-icon
+                              slot="graphic"
+                              .path=${option.icon}
+                            ></ha-svg-icon>
+                          `
+                        : nothing}
                       ${option.label ?? option.value}
                     </ha-list-item>
                   `

gallery/src/pages/components/ha-label-badge.ts

@@ -60,9 +60,9 @@ export class DemoHaLabelBadge extends LitElement {
           ${badges.map(
             (badge) => html`
               <ha-label-badge
-                style="--ha-label-badge-color: ${
-                  colors[Math.floor(Math.random() * colors.length)]
-                }"
+                style="--ha-label-badge-color: ${colors[
+                  Math.floor(Math.random() * colors.length)
+                ]}"
                 .label=${badge.label}
                 .description=${badge.description}
                 .image=${badge.image}
@@ -78,9 +78,9 @@ export class DemoHaLabelBadge extends LitElement {
             (badge) => html`
               <div class="badge">
                 <ha-label-badge
-                  style="--ha-label-badge-color: ${
-                    colors[Math.floor(Math.random() * colors.length)]
-                  }"
+                  style="--ha-label-badge-color: ${colors[
+                    Math.floor(Math.random() * colors.length)
+                  ]}"
                   .label=${badge.label}
                   .description=${badge.description}
                   .image=${badge.image}

gallery/src/pages/components/ha-list.ts

@@ -244,7 +244,8 @@ export class DemoHaList extends LitElement {
           )}
         </ha-list-selectable>
         <pre>
-selected: ${JSON.stringify(this._toJson(this._multiCheckStart))}</pre>
+selected: ${JSON.stringify(this._toJson(this._multiCheckStart))}</pre
+        >
       </ha-card>
 
       <ha-card
@@ -271,7 +272,8 @@ selected: ${JSON.stringify(this._toJson(this._multiCheckStart))}</pre>
           )}
         </ha-list-selectable>
         <pre>
-selected: ${JSON.stringify(this._toJson(this._multiCheckEnd))}</pre>
+selected: ${JSON.stringify(this._toJson(this._multiCheckEnd))}</pre
+        >
       </ha-card>
 
       <ha-card header="Option: all combinations">

gallery/src/pages/components/ha-selector.ts

@@ -496,10 +496,6 @@ const SCHEMAS: {
                   },
                 },
               },
-              password: {
-                label: "Password",
-                selector: { text: { type: "password" } },
-              },
             },
           },
         },
@@ -696,13 +692,11 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
                 ([key, value]) => html`
                   <ha-settings-row narrow slot=${slot}>
                     <span slot="heading">${value?.name || key}</span>
-                    ${
-                      value?.description
-                        ? html`<span slot="description"
-                            >${value?.description}</span
-                          >`
-                        : nothing
-                    }
+                    ${value?.description
+                      ? html`<span slot="description"
+                          >${value?.description}</span
+                        >`
+                      : nothing}
                     <ha-selector
                       .hass=${this.hass}
                       .selector=${value!.selector}

gallery/src/pages/misc/box-shadow.ts

@@ -1,6 +1,5 @@
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
 import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";
 
 const SHADOWS = ["s", "m", "l"] as const;
@@ -18,9 +17,7 @@ export class DemoMiscBoxShadow extends LitElement {
                   (size) => html`
                     <div
                       class="box"
-                      style=${styleMap({
-                        boxShadow: `var(--ha-box-shadow-${size})`,
-                      })}
+                      style="box-shadow: var(--ha-box-shadow-${size})"
                     >
                       ${size}
                     </div>

gallery/src/pages/misc/entity-state.ts

@@ -353,6 +353,7 @@ export class DemoEntityState extends LitElement {
           title: "Icon",
           template: (entry) => html`
             <state-badge
+              .hass=${hass}
               .stateObj=${entry.stateObj}
               .stateColor=${true}
             ></state-badge>

landing-page/src/components/landing-page-logs.ts

@@ -65,34 +65,30 @@ class LandingPageLogs extends LitElement {
         <ha-button appearance="plain" @click=${this._toggleLogDetails}>
           ${this.localize(this._show ? "hide_details" : "show_details")}
         </ha-button>
-        ${
-          this._show
-            ? html`<ha-icon-button
-                .label=${this.localize("logs.download_logs")}
-                .path=${mdiDownload}
-                @click=${this._downloadLogs}
-              ></ha-icon-button>`
-            : nothing
-        }
+        ${this._show
+          ? html`<ha-icon-button
+              .label=${this.localize("logs.download_logs")}
+              .path=${mdiDownload}
+              @click=${this._downloadLogs}
+            ></ha-icon-button>`
+          : nothing}
       </div>
-      ${
-        this._error
-          ? html`
-              <ha-alert
-                alert-type="error"
-                .title=${this.localize("logs.fetch_error")}
+      ${this._error
+        ? html`
+            <ha-alert
+              alert-type="error"
+              .title=${this.localize("logs.fetch_error")}
+            >
+              <ha-button
+                size="small"
+                variant="danger"
+                @click=${this._startLogStream}
               >
-                <ha-button
-                  size="small"
-                  variant="danger"
-                  @click=${this._startLogStream}
-                >
-                  ${this.localize("logs.retry")}
-                </ha-button>
-              </ha-alert>
-            `
-          : nothing
-      }
+                ${this.localize("logs.retry")}
+              </ha-button>
+            </ha-alert>
+          `
+        : nothing}
       <div
         class=${classMap({
           logs: true,

landing-page/src/components/landing-page-network.ts

@@ -55,15 +55,13 @@ class LandingPageNetwork extends LitElement {
           })}
         </p>
         <p>${this.localize("network_issue.resolve_different")}</p>
-        ${
-          !dnsPrimaryInterfaceNameservers
-            ? html`
-                <p>
-                  <b>${this.localize("network_issue.no_primary_interface")} </b>
-                </p>
-              `
-            : nothing
-        }
+        ${!dnsPrimaryInterfaceNameservers
+          ? html`
+              <p>
+                <b>${this.localize("network_issue.no_primary_interface")} </b>
+              </p>
+            `
+          : nothing}
         <div class="actions">
           ${ALTERNATIVE_DNS_SERVERS.map(
             ({ translationKey }, key) =>

landing-page/src/ha-landing-page.ts

@@ -61,47 +61,39 @@ class HaLandingPage extends LandingPageBaseElement {
       <ha-card>
         <div class="card-content">
           <h1>${this.localize("header")}</h1>
-          ${
-            !networkIssue && !this._supervisorError
-              ? html`
-                  <p>${this.localize("subheader")}</p>
-                  <ha-progress-bar
-                    .indeterminate=${this._progress <= 0}
-                    .value=${this._progress > 0 ? this._progress : undefined}
-                    .loading=${this._progress >= 0}
-                    >${
-                      this._progress > 0
-                        ? `${Math.round(this._progress)}%`
-                        : nothing
-                    }</ha-progress-bar
-                  >
-                `
-              : nothing
-          }
-          ${
-            networkIssue || this._networkInfoError
-              ? html`
-                  <landing-page-network
-                    .localize=${this.localize}
-                    .networkInfo=${this._networkInfo}
-                    .error=${this._networkInfoError}
-                    @dns-set=${this._fetchSupervisorInfo}
-                  ></landing-page-network>
-                `
-              : nothing
-          }
-          ${
-            this._supervisorError
-              ? html`
-                  <ha-alert
-                    alert-type="error"
-                    .title=${this.localize("error_title")}
-                  >
-                    ${this.localize("error_description")}
-                  </ha-alert>
-                `
-              : nothing
-          }
+          ${!networkIssue && !this._supervisorError
+            ? html`
+                <p>${this.localize("subheader")}</p>
+                <ha-progress-bar
+                  .indeterminate=${this._progress <= 0}
+                  .value=${this._progress > 0 ? this._progress : undefined}
+                  .loading=${this._progress >= 0}
+                  >${this._progress > 0
+                    ? `${Math.round(this._progress)}%`
+                    : nothing}</ha-progress-bar
+                >
+              `
+            : nothing}
+          ${networkIssue || this._networkInfoError
+            ? html`
+                <landing-page-network
+                  .localize=${this.localize}
+                  .networkInfo=${this._networkInfo}
+                  .error=${this._networkInfoError}
+                  @dns-set=${this._fetchSupervisorInfo}
+                ></landing-page-network>
+              `
+            : nothing}
+          ${this._supervisorError
+            ? html`
+                <ha-alert
+                  alert-type="error"
+                  .title=${this.localize("error_title")}
+                >
+                  ${this.localize("error_description")}
+                </ha-alert>
+              `
+            : nothing}
           <landing-page-logs
             .localize=${this.localize}
             @landing-page-error=${this._showError}

package.json

@@ -23,50 +23,48 @@
     "test": "vitest run --config test/vitest.config.ts",
     "test:bench": "vitest bench --run --config test/vitest.bench.config.ts",
     "test:coverage": "vitest run --config test/vitest.config.ts --coverage",
-    "check-bundlesize": "node build-scripts/check-bundle-size.cjs",
-    "dev": "node build-scripts/dev-server.mjs --suite app",
-    "dev:serve": "node build-scripts/dev-server.mjs --suite app-serve",
-    "dev:demo": "demo/script/develop_demo",
-    "dev:gallery": "gallery/script/develop_gallery",
     "test:e2e": "node test/e2e/run-suites.mjs demo app gallery",
+    "test:e2e:browserstack": "node test/e2e/run-suites.mjs demo:browserstack app:browserstack gallery:browserstack",
     "test:e2e:show-report": "yarn playwright show-report test/e2e/reports/combined",
     "test:e2e:demo": "playwright test --config test/e2e/playwright.demo.config.ts",
+    "test:e2e:demo:browserstack": "browserstack-node-sdk playwright test --config test/e2e/playwright.demo.config.ts",
     "test:e2e:app": "playwright test --config test/e2e/playwright.app.config.ts",
-    "test:e2e:app:dev": "test/e2e/app/script/develop_app",
-    "test:e2e:gallery": "playwright test --config test/e2e/playwright.gallery.config.ts"
+    "test:e2e:app:browserstack": "browserstack-node-sdk playwright test --config test/e2e/playwright.app.config.ts",
+    "test:e2e:gallery": "playwright test --config test/e2e/playwright.gallery.config.ts",
+    "test:e2e:gallery:browserstack": "browserstack-node-sdk playwright test --config test/e2e/playwright.gallery.config.ts"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "8.0.0",
+    "@babel/runtime": "7.29.7",
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.3",
-    "@codemirror/commands": "6.10.4",
+    "@codemirror/commands": "6.10.3",
     "@codemirror/lang-jinja": "6.0.1",
     "@codemirror/lang-yaml": "6.1.3",
-    "@codemirror/language": "6.12.4",
+    "@codemirror/language": "6.12.3",
     "@codemirror/lint": "6.9.7",
-    "@codemirror/search": "6.7.1",
-    "@codemirror/state": "6.7.0",
-    "@codemirror/view": "6.43.4",
+    "@codemirror/search": "6.7.0",
+    "@codemirror/state": "6.6.0",
+    "@codemirror/view": "6.43.1",
     "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "7.4.9",
     "@formatjs/intl-displaynames": "7.3.10",
-    "@formatjs/intl-durationformat": "0.10.15",
+    "@formatjs/intl-durationformat": "0.10.14",
     "@formatjs/intl-getcanonicallocales": "3.2.10",
     "@formatjs/intl-listformat": "8.3.10",
     "@formatjs/intl-locale": "5.3.9",
     "@formatjs/intl-numberformat": "9.3.11",
     "@formatjs/intl-pluralrules": "6.3.10",
     "@formatjs/intl-relativetimeformat": "12.3.10",
-    "@fullcalendar/core": "6.1.21",
-    "@fullcalendar/daygrid": "6.1.21",
-    "@fullcalendar/interaction": "6.1.21",
-    "@fullcalendar/list": "6.1.21",
-    "@fullcalendar/luxon3": "6.1.21",
-    "@fullcalendar/timegrid": "6.1.21",
+    "@fullcalendar/core": "6.1.20",
+    "@fullcalendar/daygrid": "6.1.20",
+    "@fullcalendar/interaction": "6.1.20",
+    "@fullcalendar/list": "6.1.20",
+    "@fullcalendar/luxon3": "6.1.20",
+    "@fullcalendar/timegrid": "6.1.20",
     "@home-assistant/webawesome": "3.7.0-ha.0",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.1.0",
@@ -74,7 +72,6 @@
     "@lit-labs/virtualizer": "2.1.1",
     "@lit/context": "1.1.6",
     "@lit/reactive-element": "2.1.2",
-    "@lit/task": "1.0.3",
     "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "@material/web": "2.4.1",
@@ -83,10 +80,9 @@
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@swc/helpers": "0.5.23",
     "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "4.3.0",
-    "@tsparticles/preset-links": "4.3.0",
+    "@tsparticles/engine": "4.1.3",
+    "@tsparticles/preset-links": "4.1.3",
     "@vibrant/color": "4.0.4",
-    "@vvo/tzdb": "6.198.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "barcode-detector": "3.2.0",
@@ -103,12 +99,13 @@
     "echarts": "6.1.0",
     "element-internals-polyfill": "3.0.2",
     "fuse.js": "7.4.2",
+    "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "7.0.0",
     "hls.js": "1.6.16",
     "home-assistant-js-websocket": "9.6.0",
-    "idb-keyval": "6.2.6",
-    "intl-messageformat": "11.2.9",
-    "js-yaml": "5.2.0",
+    "idb-keyval": "6.2.5",
+    "intl-messageformat": "11.2.8",
+    "js-yaml": "4.2.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
     "leaflet.markercluster": "1.5.3",
@@ -138,54 +135,55 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@ampproject/remapping": "2.3.0",
-    "@babel/core": "8.0.1",
-    "@babel/helper-define-polyfill-provider": "1.0.0",
-    "@babel/plugin-transform-runtime": "8.0.1",
-    "@babel/preset-env": "8.0.2",
+    "@babel/core": "7.29.7",
+    "@babel/helper-define-polyfill-provider": "0.6.8",
+    "@babel/plugin-transform-runtime": "7.29.7",
+    "@babel/preset-env": "7.29.7",
     "@bundle-stats/plugin-webpack-filter": "4.22.2",
     "@eslint/js": "10.0.1",
-    "@html-eslint/eslint-plugin": "0.63.0",
+    "@html-eslint/eslint-plugin": "0.62.0",
     "@lokalise/node-api": "16.0.0",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
-    "@playwright/test": "1.61.1",
-    "@rsdoctor/rspack-plugin": "1.5.17",
-    "@rspack/core": "2.1.1",
-    "@rspack/dev-server": "2.1.0",
+    "@playwright/test": "1.60.0",
+    "@rsdoctor/rspack-plugin": "1.5.13",
+    "@rspack/core": "2.0.8",
+    "@rspack/dev-server": "2.0.3",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
     "@types/culori": "4.0.1",
     "@types/html-minifier-terser": "7.0.2",
+    "@types/js-yaml": "4.0.9",
     "@types/leaflet": "1.9.21",
     "@types/leaflet-draw": "1.0.13",
     "@types/leaflet.markercluster": "1.5.6",
     "@types/lodash.merge": "4.6.9",
-    "@types/luxon": "3.7.2",
+    "@types/luxon": "3.7.1",
     "@types/qrcode": "1.5.6",
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
-    "@vitest/coverage-v8": "4.1.9",
+    "@vitest/coverage-v8": "4.1.8",
     "babel-loader": "10.1.1",
-    "babel-plugin-polyfill-corejs3": "1.0.0",
+    "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.4",
+    "browserstack-node-sdk": "1.53.2",
     "del": "8.0.1",
-    "eslint": "10.6.0",
+    "eslint": "10.5.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
-    "eslint-plugin-import-x": "4.17.1",
+    "eslint-plugin-import-x": "4.16.2",
     "eslint-plugin-lit": "2.3.1",
     "eslint-plugin-lit-a11y": "5.1.1",
     "eslint-plugin-unused-imports": "4.4.1",
     "eslint-plugin-wc": "3.1.0",
     "fancy-log": "2.0.0",
-    "fs-extra": "11.3.6",
+    "fs-extra": "11.3.5",
     "generate-license-file": "4.2.1",
     "glob": "13.0.6",
-    "globals": "17.7.0",
+    "globals": "17.6.0",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
@@ -195,24 +193,23 @@
     "jsdom": "29.1.1",
     "jszip": "3.10.1",
     "license-checker-rseidelsohn": "5.0.1",
-    "lint-staged": "17.0.8",
+    "lint-staged": "17.0.7",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.18.1",
     "map-stream": "0.0.7",
-    "minify-literals": "2.1.0",
     "pinst": "3.0.0",
-    "prettier": "3.9.4",
+    "prettier": "3.8.4",
     "rspack-manifest-plugin": "5.2.2",
     "serve": "14.2.6",
     "sinon": "22.0.0",
-    "tar": "7.5.19",
+    "tar": "7.5.16",
     "terser-webpack-plugin": "5.6.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.62.1",
+    "typescript-eslint": "8.61.0",
     "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.9",
+    "vitest": "4.1.8",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.4.1#~/.yarn/patches/workbox-build-npm-7.4.1-c84561662c.patch"
@@ -222,14 +219,14 @@
     "lit-html": "3.3.3",
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
-    "@fullcalendar/daygrid": "6.1.21",
-    "globals": "17.7.0",
+    "@fullcalendar/daygrid": "6.1.20",
+    "globals": "17.6.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",
     "glob@^10.2.2": "^10.5.0"
   },
-  "packageManager": "yarn@4.17.0",
+  "packageManager": "yarn@4.16.0",
   "volta": {
-    "node": "24.18.0"
+    "node": "24.16.0"
   }
 }

pyproject.toml

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

renovate.json

@@ -11,7 +11,7 @@
     "group:recommended",
     "security:minimumReleaseAgeNpm"
   ],
-  "enabledManagers": ["npm", "nvm", "custom.regex"],
+  "enabledManagers": ["npm", "nvm"],
   "postUpdateOptions": ["yarnDedupeHighest"],
   "lockFileMaintenance": {
     "description": ["Run after patch releases but before next beta"],
@@ -49,15 +49,6 @@
       "datasourceTemplate": "custom.ha-core-python",
       "versioningTemplate": "python",
       "extractVersionTemplate": "^(?<version>\\d+\\.\\d+)"
-    },
-    {
-      "description": "Keep actionlint used in CI up to date",
-      "customType": "regex",
-      "managerFilePatterns": ["/^\\.github/workflows/actionlint\\.yaml$/"],
-      "matchStrings": ["ACTIONLINT_VERSION: (?<currentValue>\\S+)"],
-      "depNameTemplate": "rhysd/actionlint",
-      "datasourceTemplate": "github-releases",
-      "extractVersionTemplate": "^v(?<version>.+)$"
     }
   ],
   "packageRules": [

src/auth/ha-auth-flow.ts

@@ -182,11 +182,9 @@ export class HaAuthFlow extends LitElement {
               @click=${this._handleSubmit}
               .loading=${this._submitting}
             >
-              ${
-                this.step.type === "form"
-                  ? this.localize("ui.panel.page-authorize.form.next")
-                  : this.localize("ui.panel.page-authorize.form.start_over")
-              }
+              ${this.step.type === "form"
+                ? this.localize("ui.panel.page-authorize.form.next")
+                : this.localize("ui.panel.page-authorize.form.start_over")}
             </ha-button>
           </div>
         `;
@@ -226,11 +224,9 @@ export class HaAuthFlow extends LitElement {
       case "form":
         return html`
           <h1>
-            ${
-              !["select_mfa_module", "mfa"].includes(step.step_id)
-                ? this.localize("ui.panel.page-authorize.welcome_home")
-                : this.localize("ui.panel.page-authorize.just_checking")
-            }
+            ${!["select_mfa_module", "mfa"].includes(step.step_id)
+              ? this.localize("ui.panel.page-authorize.welcome_home")
+              : this.localize("ui.panel.page-authorize.just_checking")}
           </h1>
           ${this._computeStepDescription(step)}
           ${keyed(
@@ -248,19 +244,17 @@ export class HaAuthFlow extends LitElement {
           )}
 
           <div class="space-between">
-            ${
-              this.clientId === genClientId() &&
-              !["select_mfa_module", "mfa"].includes(step.step_id)
-                ? html`
-                    <ha-checkbox
-                      .checked=${this._storeToken}
-                      @change=${this._storeTokenChanged}
-                    >
-                      ${this.localize("ui.panel.page-authorize.store_token")}
-                    </ha-checkbox>
-                  `
-                : ""
-            }
+            ${this.clientId === genClientId() &&
+            !["select_mfa_module", "mfa"].includes(step.step_id)
+              ? html`
+                  <ha-checkbox
+                    .checked=${this._storeToken}
+                    @change=${this._storeTokenChanged}
+                  >
+                    ${this.localize("ui.panel.page-authorize.store_token")}
+                  </ha-checkbox>
+                `
+              : ""}
             <a
               class="forgot-password"
               href="https://www.home-assistant.io/docs/locked_out/#forgot-password"

src/auth/ha-authorize.ts

@@ -147,58 +147,45 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
         }
       </style>
 
-      ${
-        !this._ownInstance
-          ? html`<ha-alert .alertType=${app ? "info" : "warning"}>
-              ${
-                app
-                  ? this.localize("ui.panel.page-authorize.authorizing_app", {
-                      app: appNames[this.clientId!],
-                    })
-                  : this.localize(
-                      "ui.panel.page-authorize.authorizing_client",
-                      {
-                        clientId: html`<b
-                          >${
-                            this.clientId
-                              ? punycode.toASCII(this.clientId)
-                              : this.clientId
-                          }</b
-                        >`,
-                      }
-                    )
-              }
-            </ha-alert>`
-          : nothing
-      }
+      ${!this._ownInstance
+        ? html`<ha-alert .alertType=${app ? "info" : "warning"}>
+            ${app
+              ? this.localize("ui.panel.page-authorize.authorizing_app", {
+                  app: appNames[this.clientId!],
+                })
+              : this.localize("ui.panel.page-authorize.authorizing_client", {
+                  clientId: html`<b
+                    >${this.clientId
+                      ? punycode.toASCII(this.clientId)
+                      : this.clientId}</b
+                  >`,
+                })}
+          </ha-alert>`
+        : nothing}
 
       <div class="card-content">
-        ${
-          !this._authProvider
-            ? html`<p>
-                ${this.localize("ui.panel.page-authorize.initializing")}
-              </p> `
-            : html`<ha-auth-flow
-                  .clientId=${this.clientId}
-                  .redirectUri=${this.redirectUri}
-                  .oauth2State=${this.oauth2State}
-                  .authProvider=${this._authProvider}
-                  .localize=${this.localize}
-                  .initStoreToken=${this._preselectStoreToken}
-                ></ha-auth-flow>
-                ${
-                  inactiveProviders!.length > 0
-                    ? html`
-                        <ha-pick-auth-provider
-                          .localize=${this.localize}
-                          .clientId=${this.clientId}
-                          .authProviders=${inactiveProviders!}
-                          @pick-auth-provider=${this._handleAuthProviderPick}
-                        ></ha-pick-auth-provider>
-                      `
-                    : ""
-                }`
-        }
+        ${!this._authProvider
+          ? html`<p>
+              ${this.localize("ui.panel.page-authorize.initializing")}
+            </p> `
+          : html`<ha-auth-flow
+                .clientId=${this.clientId}
+                .redirectUri=${this.redirectUri}
+                .oauth2State=${this.oauth2State}
+                .authProvider=${this._authProvider}
+                .localize=${this.localize}
+                .initStoreToken=${this._preselectStoreToken}
+              ></ha-auth-flow>
+              ${inactiveProviders!.length > 0
+                ? html`
+                    <ha-pick-auth-provider
+                      .localize=${this.localize}
+                      .clientId=${this.clientId}
+                      .authProviders=${inactiveProviders!}
+                      @pick-auth-provider=${this._handleAuthProviderPick}
+                    ></ha-pick-auth-provider>
+                  `
+                : ""}`}
       </div>
       <div class="footer">
         <ha-language-picker

src/cast/receiver_messages.ts

@@ -33,7 +33,10 @@ export interface ShowDemoMessage extends BaseCastMessage {
 }
 
 export type HassMessage =
-  ShowDemoMessage | GetStatusMessage | ConnectMessage | ShowLovelaceViewMessage;
+  | ShowDemoMessage
+  | GetStatusMessage
+  | ConnectMessage
+  | ShowLovelaceViewMessage;
 
 export const castSendAuth = (cast: CastManager, auth: Auth) =>
   cast.sendMessage({

src/common/config/can_show_page.ts

@@ -4,8 +4,7 @@ import { ensureArray } from "../array/ensure-array";
 import { isComponentLoaded } from "./is_component_loaded";
 
 export const canShowPage = (hass: HomeAssistant, page: PageNavigation) =>
-  (isCore(page) || isLoadedIntegration(hass, page)) &&
-  (!page.filter || page.filter(hass));
+  isCore(page) || isLoadedIntegration(hass, page);
 
 export const isLoadedIntegration = (
   hass: HomeAssistant,

src/common/const.ts

@@ -110,32 +110,6 @@ export const DOMAINS_WITH_DYNAMIC_PICTURE = new Set([
   "media_player",
 ]);
 
-/** Domains that use a timestamp for state. */
-const TIMESTAMP_STATE_DOMAINS_LIST = [
-  "ai_task",
-  "button",
-  "conversation",
-  "event",
-  "image",
-  "infrared",
-  "input_button",
-  "notify",
-  "radio_frequency",
-  "scene",
-  "stt",
-  "tag",
-  "tts",
-  "wake_word",
-  "datetime",
-] as const;
-
-export type TimestampStateDomain =
-  (typeof TIMESTAMP_STATE_DOMAINS_LIST)[number];
-
-export const TIMESTAMP_STATE_DOMAINS = new Set<string>(
-  TIMESTAMP_STATE_DOMAINS_LIST
-);
-
 /** Temperature units. */
 export const UNIT_C = "°C";
 export const UNIT_F = "°F";

src/common/controllers/async-value-task.ts

@@ -1,29 +0,0 @@
-import { Task, type TaskConfig } from "@lit/task";
-import type { ReactiveControllerHost } from "lit";
-
-/**
- * A `@lit/task` Task with a sticky `resolved` flag: false until the task has
- * completed once, then true. Lets callers tell "still loading" apart from
- * "resolved with an empty value" without a null sentinel, while keeping the
- * previous value during a re-run.
- */
-export class AsyncValueTask<T extends readonly unknown[], R> extends Task<
-  T,
-  R
-> {
-  private _resolved = false;
-
-  constructor(host: ReactiveControllerHost, config: TaskConfig<T, R>) {
-    super(host, {
-      ...config,
-      onComplete: (value) => {
-        this._resolved = true;
-        config.onComplete?.(value);
-      },
-    });
-  }
-
-  public get resolved(): boolean {
-    return this._resolved;
-  }
-}

src/common/datetime/duration_to_seconds.ts

@@ -1,13 +1,4 @@
-import type { HaDurationData } from "../../components/ha-duration-input";
-
 export default function durationToSeconds(duration: string): number {
   const parts = duration.split(":").map(Number);
   return parts[0] * 3600 + parts[1] * 60 + parts[2];
 }
-
-export const durationDataToSeconds = (duration: HaDurationData): number =>
-  (duration.days || 0) * 86400 +
-  (duration.hours || 0) * 3600 +
-  (duration.minutes || 0) * 60 +
-  (duration.seconds || 0) +
-  (duration.milliseconds || 0) / 1000;

src/common/datetime/relative_time.ts

@@ -3,24 +3,23 @@ import type { FrontendLocaleData } from "../../data/translation";
 import { selectUnit } from "../util/select-unit";
 
 const formatRelTimeMem = memoizeOne(
-  (locale: FrontendLocaleData, style: Intl.RelativeTimeFormatStyle) =>
-    new Intl.RelativeTimeFormat(locale.language, { numeric: "auto", style })
+  (locale: FrontendLocaleData) =>
+    new Intl.RelativeTimeFormat(locale.language, { numeric: "auto" })
 );
 
 export const relativeTime = (
   from: Date,
   locale: FrontendLocaleData,
   to?: Date,
-  includeTense = true,
-  style: Intl.RelativeTimeFormatStyle = "long"
+  includeTense = true
 ): string => {
   const diff = selectUnit(from, to, locale);
   if (includeTense) {
-    return formatRelTimeMem(locale, style).format(diff.value, diff.unit);
+    return formatRelTimeMem(locale).format(diff.value, diff.unit);
   }
   return Intl.NumberFormat(locale.language, {
     style: "unit",
     unit: diff.unit,
-    unitDisplay: style,
+    unitDisplay: "long",
   }).format(Math.abs(diff.value));
 };

src/common/datetime/resolve-time-zone.ts

@@ -1,4 +1,4 @@
-import { timeZonesNames } from "@vvo/tzdb";
+import timezones from "google-timezones-json";
 import { TimeZone } from "../../data/translation";
 
 const RESOLVED_RAW = Intl.DateTimeFormat?.().resolvedOptions?.().timeZone;
@@ -10,7 +10,7 @@ const RESOLVED_TIME_ZONE =
   RESOLVED_RAW &&
   (RESOLVED_RAW === "UTC" ||
     RESOLVED_RAW === "Etc/UTC" ||
-    timeZonesNames.includes(RESOLVED_RAW))
+    RESOLVED_RAW in timezones)
     ? RESOLVED_RAW
     : undefined;
 

src/common/datetime/weekday.ts

@@ -1,7 +1,13 @@
 export type WeekdayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
 export type WeekdayShort =
-  "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
+  | "sun"
+  | "mon"
+  | "tue"
+  | "wed"
+  | "thu"
+  | "fri"
+  | "sat";
 
 export type WeekdayLong =
   | "sunday"

src/common/dom/is-navigation-click.ts

@@ -13,7 +13,8 @@ export const isNavigationClick = (e: MouseEvent, preventDefault = true) => {
   const anchor = e
     .composedPath()
     .find((n) => (n as HTMLElement).tagName === "A") as
-    HTMLAnchorElement | undefined;
+    | HTMLAnchorElement
+    | undefined;
   if (
     !anchor ||
     anchor.target ||

src/common/entity/compute_attribute_display.ts

@@ -60,17 +60,6 @@ export const computeAttributeValueToParts = (
     return [{ type: "value", value: localize("state.default.unknown") }];
   }
 
-  // Device class attribute, return the integration's translated name
-  if (attribute === "device_class" && typeof attributeValue === "string") {
-    const domain = computeStateDomain(stateObj);
-    const deviceClassName = localize(
-      `component.${domain}.entity_component.${attributeValue}.name`
-    );
-    if (deviceClassName) {
-      return [{ type: "value", value: deviceClassName }];
-    }
-  }
-
   // Number value, return formatted number
   if (typeof attributeValue === "number") {
     const domain = computeStateDomain(stateObj);
@@ -82,7 +71,8 @@ export const computeAttributeValueToParts = (
       : formatNumber(attributeValue, locale);
 
     let unit = DOMAIN_ATTRIBUTES_UNITS[domain]?.[attribute] as
-      string | undefined;
+      | string
+      | undefined;
 
     if (domain === "weather") {
       unit = getWeatherUnit(config, stateObj as WeatherEntity, attribute);
@@ -155,7 +145,8 @@ export const computeAttributeValueToParts = (
   const domain = computeDomain(entityId);
   const deviceClass = stateObj.attributes.device_class;
   const registryEntry = entities[entityId] as
-    EntityRegistryDisplayEntry | undefined;
+    | EntityRegistryDisplayEntry
+    | undefined;
   const translationKey = registryEntry?.translation_key;
 
   const formattedValue =

src/common/entity/compute_entity_name.ts

@@ -14,7 +14,8 @@ export const computeEntityName = (
   devices: HomeAssistant["devices"]
 ): string | undefined => {
   const entry = entities[stateObj.entity_id] as
-    EntityRegistryDisplayEntry | undefined;
+    | EntityRegistryDisplayEntry
+    | undefined;
 
   if (!entry) {
     // Fall back to state name if not in the entity registry (friendly name)

src/common/entity/compute_entity_name_display.ts

@@ -125,15 +125,7 @@ export interface EntityPickerDisplay {
 }
 
 export const computeEntityPickerDisplay = (
-  hass: Pick<
-    HomeAssistant,
-    | "entities"
-    | "devices"
-    | "areas"
-    | "floors"
-    | "language"
-    | "translationMetadata"
-  >,
+  hass: HomeAssistant,
   stateObj: HassEntity
 ): EntityPickerDisplay => {
   const [entityName, deviceName, areaName] = computeEntityNameList(

src/common/entity/compute_entity_unit_display.ts

@@ -1,7 +1,6 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";
-import { unitFromParts } from "./value_parts";
 
 interface EntityUnitStubConfig {
   entity: string;
@@ -41,5 +40,5 @@ export const computeEntityUnitDisplay = (
     ? hass.formatEntityAttributeValueToParts(stateObj, config.attribute)
     : hass.formatEntityStateToParts(stateObj);
 
-  return unitFromParts(parts);
+  return parts.find((part) => part.type === "unit")?.value ?? "";
 };

src/common/entity/compute_state_display.ts

@@ -21,11 +21,29 @@ import {
   isNumericSensorDeviceClass,
   SENSOR_TIMESTAMP_DEVICE_CLASSES,
 } from "../../data/sensor";
-import { TIMESTAMP_STATE_DOMAINS } from "../const";
 
 // Domains whose state is a timezone-agnostic date and/or time string.
 const DATE_TIME_DOMAINS = new Set(["date", "input_datetime", "time"]);
 
+// Domains whose state is a timestamp.
+const TIMESTAMP_DOMAINS = new Set([
+  "ai_task",
+  "button",
+  "conversation",
+  "event",
+  "image",
+  "infrared",
+  "input_button",
+  "notify",
+  "radio_frequency",
+  "scene",
+  "stt",
+  "tag",
+  "tts",
+  "wake_word",
+  "datetime",
+]);
+
 // Maps Intl.NumberFormat part types to ValuePart types for monetary states.
 const MONETARY_TYPE_MAP: Record<string, ValuePart["type"]> = {
   integer: "value",
@@ -49,7 +67,8 @@ export const computeStateDisplay = (
   state?: string
 ): string => {
   const entity = entities?.[stateObj.entity_id] as
-    EntityRegistryDisplayEntry | undefined;
+    | EntityRegistryDisplayEntry
+    | undefined;
   return computeStateDisplayFromEntityAttributes(
     localize,
     locale,
@@ -159,8 +178,7 @@ const computeStateToPartsFromEntityAttributes = (
           const type = MONETARY_TYPE_MAP[part.type];
           if (!type) continue;
           const last = valueParts[valueParts.length - 1];
-          // Merge consecutive value parts so the number stays a single part
-          // (e.g. "-" + "12" + "." + "00" → "-12.00")
+          // Merge consecutive value parts (e.g. "-" + "12" + "." + "00" → "-12.00")
           if (type === "value" && last?.type === "value") {
             last.value += part.value;
           } else {
@@ -255,7 +273,7 @@ const computeStateToPartsFromEntityAttributes = (
 
   // state is a timestamp
   if (
-    TIMESTAMP_STATE_DOMAINS.has(domain) ||
+    TIMESTAMP_DOMAINS.has(domain) ||
     (domain === "sensor" &&
       SENSOR_TIMESTAMP_DEVICE_CLASSES.includes(attributes.device_class))
   ) {
@@ -301,7 +319,8 @@ export const computeStateToParts = (
   state?: string
 ): ValuePart[] => {
   const entity = entities?.[stateObj.entity_id] as
-    EntityRegistryDisplayEntry | undefined;
+    | EntityRegistryDisplayEntry
+    | undefined;
   return computeStateToPartsFromEntityAttributes(
     localize,
     locale,

src/common/entity/context/get_entity_context.ts

@@ -24,7 +24,8 @@ export const getEntityContext = (
   floors: HomeAssistant["floors"]
 ): EntityContext => {
   const entry = entities[stateObj.entity_id] as
-    EntityRegistryDisplayEntry | undefined;
+    | EntityRegistryDisplayEntry
+    | undefined;
 
   if (!entry) {
     return {
@@ -51,7 +52,9 @@ export const getEntityAreaId = (
 
 export const getEntityEntryContext = (
   entry:
-    EntityRegistryDisplayEntry | EntityRegistryEntry | ExtEntityRegistryEntry,
+    | EntityRegistryDisplayEntry
+    | EntityRegistryEntry
+    | ExtEntityRegistryEntry,
   entities: HomeAssistant["entities"],
   devices: HomeAssistant["devices"],
   areas: HomeAssistant["areas"],

src/common/entity/feature_class_names.ts

@@ -0,0 +1,23 @@
+import type { HassEntity } from "home-assistant-js-websocket";
+import { supportsFeature } from "./supports-feature";
+
+export type FeatureClassNames<T extends number = number> = Partial<
+  Record<T, string>
+>;
+
+// Expects classNames to be an object mapping feature-bit -> className
+export const featureClassNames = (
+  stateObj: HassEntity,
+  classNames: FeatureClassNames
+) => {
+  if (!stateObj || !stateObj.attributes.supported_features) {
+    return "";
+  }
+
+  return Object.keys(classNames)
+    .map((feature) =>
+      supportsFeature(stateObj, Number(feature)) ? classNames[feature] : ""
+    )
+    .filter((attr) => attr !== "")
+    .join(" ");
+};

src/common/entity/get_domain_features.ts

@@ -1,56 +0,0 @@
-import { AITaskEntityFeature } from "../../data/ai_task";
-import { AlarmControlPanelEntityFeature } from "../../data/alarm_control_panel";
-import { AssistSatelliteEntityFeature } from "../../data/assist_satellite";
-import { CalendarEntityFeature } from "../../data/calendar";
-import { CameraEntityFeature } from "../../data/camera";
-import { ClimateEntityFeature } from "../../data/climate";
-import { ConversationEntityFeature } from "../../data/conversation";
-import { CoverEntityFeature } from "../../data/cover";
-import { FanEntityFeature } from "../../data/fan";
-import { HumidifierEntityFeature } from "../../data/humidifier";
-import { LawnMowerEntityFeature } from "../../data/lawn_mower";
-import { LightEntityFeature } from "../../data/light";
-import { LockEntityFeature } from "../../data/lock";
-import { MediaPlayerEntityFeature } from "../../data/media-player";
-import { NotifyEntityFeature } from "../../data/notify";
-import { RemoteEntityFeature } from "../../data/remote";
-import { SirenEntityFeature } from "../../data/siren";
-import { TodoListEntityFeature } from "../../data/todo";
-import { UpdateEntityFeature } from "../../data/update";
-import { VacuumEntityFeature } from "../../data/vacuum";
-import { ValveEntityFeature } from "../../data/valve";
-import { WaterHeaterEntityFeature } from "../../data/water_heater";
-import { WeatherEntityFeature } from "../../data/weather";
-
-export type FeatureEnum = Record<string | number, string | number>;
-
-const DOMAIN_ENUMS = {
-  ai_task: AITaskEntityFeature,
-  alarm_control_panel: AlarmControlPanelEntityFeature,
-  assist_satellite: AssistSatelliteEntityFeature,
-  calendar: CalendarEntityFeature,
-  camera: CameraEntityFeature,
-  climate: ClimateEntityFeature,
-  conversation: ConversationEntityFeature,
-  cover: CoverEntityFeature,
-  fan: FanEntityFeature,
-  humidifier: HumidifierEntityFeature,
-  lawn_mower: LawnMowerEntityFeature,
-  light: LightEntityFeature,
-  lock: LockEntityFeature,
-  media_player: MediaPlayerEntityFeature,
-  notify: NotifyEntityFeature,
-  remote: RemoteEntityFeature,
-  siren: SirenEntityFeature,
-  todo: TodoListEntityFeature,
-  update: UpdateEntityFeature,
-  vacuum: VacuumEntityFeature,
-  valve: ValveEntityFeature,
-  water_heater: WaterHeaterEntityFeature,
-  weather: WeatherEntityFeature,
-};
-
-export function getFeatures(domain: string): FeatureEnum | undefined {
-  const enumObj = DOMAIN_ENUMS[domain] as FeatureEnum;
-  return enumObj;
-}

src/common/entity/get_states.ts

@@ -22,13 +22,16 @@ export const FIXED_DOMAIN_STATES = {
   assist_satellite: ["idle", "listening", "responding", "processing"],
   automation: ["on", "off"],
   binary_sensor: ["on", "off"],
+  button: [],
   calendar: ["on", "off"],
   camera: ["idle", "recording", "streaming"],
   cover: ["closed", "closing", "open", "opening"],
   device_tracker: ["home", "not_home"],
   fan: ["on", "off"],
   humidifier: ["on", "off"],
+  infrared: [],
   input_boolean: ["on", "off"],
+  input_button: [],
   lawn_mower: ["error", "paused", "mowing", "returning", "docked"],
   light: ["on", "off"],
   lock: [
@@ -53,6 +56,7 @@ export const FIXED_DOMAIN_STATES = {
   plant: ["ok", "problem"],
   radio_frequency: [],
   remote: ["on", "off"],
+  scene: [],
   schedule: ["on", "off"],
   script: ["on", "off"],
   siren: ["on", "off"],
@@ -286,81 +290,6 @@ export const getStatesDomain = (
   return result;
 };
 
-// Maps a value attribute (or the main state, keyed `_`) to the attribute listing
-// its options. Naming is irregular per domain, so it's mapped explicitly.
-export const DOMAIN_OPTIONS_ATTRIBUTES: Record<
-  string,
-  Record<string, string>
-> = {
-  climate: {
-    _: "hvac_modes",
-    fan_mode: "fan_modes",
-    preset_mode: "preset_modes",
-    swing_mode: "swing_modes",
-    swing_horizontal_mode: "swing_horizontal_modes",
-  },
-  event: {
-    event_type: "event_types",
-  },
-  fan: {
-    preset_mode: "preset_modes",
-  },
-  humidifier: {
-    mode: "available_modes",
-  },
-  input_select: {
-    _: "options",
-  },
-  select: {
-    _: "options",
-  },
-  light: {
-    effect: "effect_list",
-    color_mode: "supported_color_modes",
-  },
-  media_player: {
-    sound_mode: "sound_mode_list",
-    source: "source_list",
-  },
-  remote: {
-    current_activity: "activity_list",
-  },
-  sensor: {
-    _: "options",
-  },
-  vacuum: {
-    fan_speed: "fan_speed_list",
-  },
-  water_heater: {
-    _: "operation_list",
-    operation_mode: "operation_list",
-  },
-};
-
-const DOMAIN_VALUE_ATTRIBUTES: Record<
-  string,
-  Record<string, string>
-> = Object.fromEntries(
-  Object.entries(DOMAIN_OPTIONS_ATTRIBUTES).map(([domain, mapping]) => [
-    domain,
-    Object.fromEntries(
-      Object.entries(mapping).map(([value, list]) => [list, value])
-    ),
-  ])
-);
-
-// value attribute (or main state) → its options-list attribute
-export const getOptionsAttribute = (
-  domain: string,
-  attribute?: string
-): string | undefined => DOMAIN_OPTIONS_ATTRIBUTES[domain]?.[attribute ?? "_"];
-
-// options-list attribute → its value attribute (`_` = main state)
-export const getValueAttribute = (
-  domain: string,
-  optionsAttribute: string
-): string | undefined => DOMAIN_VALUE_ATTRIBUTES[domain]?.[optionsAttribute];
-
 export const getStates = (
   hass: HomeAssistant,
   state: HassEntity,
@@ -373,15 +302,78 @@ export const getStates = (
   result.push(...getStatesDomain(hass, domain, attribute));
 
   // Dynamic values based on the entities
-  const optionsAttribute = getOptionsAttribute(domain, attribute);
-  if (optionsAttribute) {
-    const options = state.attributes[optionsAttribute];
-    // Sensors only expose their options when their device class is `enum`.
-    const enumSensor =
-      domain !== "sensor" || state.attributes.device_class === "enum";
-    if (enumSensor && Array.isArray(options)) {
-      result.push(...options);
-    }
+  switch (domain) {
+    case "climate":
+      if (!attribute) {
+        result.push(...state.attributes.hvac_modes);
+      } else if (attribute === "fan_mode") {
+        result.push(...state.attributes.fan_modes);
+      } else if (attribute === "preset_mode") {
+        result.push(...state.attributes.preset_modes);
+      } else if (attribute === "swing_mode") {
+        result.push(...state.attributes.swing_modes);
+      } else if (attribute === "swing_horizontal_mode") {
+        result.push(...state.attributes.swing_horizontal_modes);
+      }
+      break;
+    case "event":
+      if (attribute === "event_type") {
+        result.push(...state.attributes.event_types);
+      }
+      break;
+    case "fan":
+      if (attribute === "preset_mode") {
+        result.push(...state.attributes.preset_modes);
+      }
+      break;
+    case "humidifier":
+      if (attribute === "mode") {
+        result.push(...state.attributes.available_modes);
+      }
+      break;
+    case "input_select":
+    case "select":
+      if (!attribute) {
+        result.push(...state.attributes.options);
+      }
+      break;
+    case "light":
+      if (attribute === "effect" && state.attributes.effect_list) {
+        result.push(...state.attributes.effect_list);
+      } else if (
+        attribute === "color_mode" &&
+        state.attributes.supported_color_modes
+      ) {
+        result.push(...state.attributes.supported_color_modes);
+      }
+      break;
+    case "media_player":
+      if (attribute === "sound_mode") {
+        result.push(...state.attributes.sound_mode_list);
+      } else if (attribute === "source") {
+        result.push(...state.attributes.source_list);
+      }
+      break;
+    case "remote":
+      if (attribute === "current_activity") {
+        result.push(...state.attributes.activity_list);
+      }
+      break;
+    case "sensor":
+      if (!attribute && state.attributes.device_class === "enum") {
+        result.push(...state.attributes.options);
+      }
+      break;
+    case "vacuum":
+      if (attribute === "fan_speed") {
+        result.push(...state.attributes.fan_speed_list);
+      }
+      break;
+    case "water_heater":
+      if (!attribute || attribute === "operation_mode") {
+        result.push(...state.attributes.operation_list);
+      }
+      break;
   }
 
   return [...new Set(result)];

src/common/entity/state_active.ts

@@ -1,13 +1,21 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import { OFF, UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
 import { computeDomain } from "./compute_domain";
-import { TIMESTAMP_STATE_DOMAINS } from "../const";
 
 export function stateActive(stateObj: HassEntity, state?: string): boolean {
   const domain = computeDomain(stateObj.entity_id);
   const compareState = state !== undefined ? state : stateObj?.state;
 
-  if (TIMESTAMP_STATE_DOMAINS.has(domain)) {
+  if (
+    [
+      "button",
+      "event",
+      "infrared",
+      "input_button",
+      "radio_frequency",
+      "scene",
+    ].includes(domain)
+  ) {
     return compareState !== UNAVAILABLE;
   }
 

src/common/entity/value_parts.ts

@@ -1,29 +0,0 @@
-import type { ValuePart } from "../../types";
-
-// Joins every part except the unit, keeping native order so the sign and
-// grouping stay with the value (e.g. "-2,548.14").
-export const valueFromParts = (parts: ValuePart[]): string =>
-  parts
-    .filter((part) => part.type !== "unit")
-    .map((part) => part.value)
-    .join("")
-    .trim();
-
-export const unitFromParts = (parts: ValuePart[]): string =>
-  parts.find((part) => part.type === "unit")?.value ?? "";
-
-export type UnitPosition = "before" | "after";
-
-// Whether the unit sits before or after the value in the locale's native order
-// (e.g. "$5" / "€ 5" → "before", "5 €" / "5 %" → "after").
-export const unitPosition = (parts: ValuePart[]): UnitPosition => {
-  const unitIndex = parts.findIndex((part) => part.type === "unit");
-  if (unitIndex === -1) {
-    return "after";
-  }
-  const lastValueIndex = parts.reduceRight(
-    (acc, part, i) => (acc === -1 && part.type === "value" ? i : acc),
-    -1
-  );
-  return unitIndex < lastValueIndex ? "before" : "after";
-};

src/common/search/related-context.ts

@@ -1,5 +1,5 @@
 import type { PickerComboBoxItem } from "../../components/ha-picker-combo-box";
-import type { ItemType, RelatedResult } from "../../data/search";
+import type { RelatedResult } from "../../data/search";
 
 export interface RelatedIdSets {
   areas: Set<string>;
@@ -8,30 +8,14 @@ export interface RelatedIdSets {
 }
 
 /**
- * Build a set of related IDs, merging in the current (queried) item.
- * `search/related` does not echo the queried item back, but it is the closest
- * related item (e.g. a card editor's own entity), so it is merged into the
- * matching group when it is an area, device, or entity.
+ * Build a set of related IDs for a given related result.
  * @param related - The related result to build the sets from.
- * @param current - The queried item to merge in.
- * @returns The related ID sets, including the current item.
+ * @returns The related ID sets.
  */
-export const buildRelatedIdSets = (
-  related?: RelatedResult,
-  current?: { itemType: ItemType; itemId: string }
-): RelatedIdSets => ({
-  areas: new Set([
-    ...(related?.area || []),
-    ...(current?.itemType === "area" ? [current.itemId] : []),
-  ]),
-  devices: new Set([
-    ...(related?.device || []),
-    ...(current?.itemType === "device" ? [current.itemId] : []),
-  ]),
-  entities: new Set([
-    ...(related?.entity || []),
-    ...(current?.itemType === "entity" ? [current.itemId] : []),
-  ]),
+export const buildRelatedIdSets = (related?: RelatedResult): RelatedIdSets => ({
+  areas: new Set(related?.area || []),
+  devices: new Set(related?.device || []),
+  entities: new Set(related?.entity || []),
 });
 
 /**

src/common/translations/localize.ts

@@ -17,6 +17,8 @@ export type LocalizeKeys =
   | `ui.common.${string}`
   | `ui.components.calendar.event.rrule.${string}`
   | `ui.components.selectors.file.${string}`
+  | `ui.components.logbook.messages.detected_device_classes.${string}`
+  | `ui.components.logbook.messages.cleared_device_classes.${string}`
   | `ui.dialogs.entity_registry.editor.${string}`
   | `ui.dialogs.more_info_control.lawn_mower.${string}`
   | `ui.dialogs.more_info_control.vacuum.${string}`
@@ -114,7 +116,8 @@ export const computeLocalize = async <Keys extends string = LocalizeKeys>(
 
     const messageKey = key + translatedValue;
     let translatedMessage = cache._localizationCache![messageKey] as
-      IntlMessageFormat | undefined;
+      | IntlMessageFormat
+      | undefined;
 
     if (!translatedMessage) {
       try {

src/common/url/history-logbook-query-params.ts

@@ -10,7 +10,11 @@ import {
 } from "./query-params";
 
 export type HistoryLogbookTargetParamKey =
-  "entity_id" | "label_id" | "floor_id" | "area_id" | "device_id";
+  | "entity_id"
+  | "label_id"
+  | "floor_id"
+  | "area_id"
+  | "device_id";
 
 export const historyLogbookTargetParamKeys: readonly HistoryLogbookTargetParamKey[] =
   ["entity_id", "label_id", "floor_id", "area_id", "device_id"];