Casing

Co-authored-by: Norbert Rittel <norbert@rittel.de>

.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/developer-tools/state`
+  You can find this information at `/config/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
-        at Developer Tools -> States.
+        state and attributes for all situations. You can find this
+        information in the Details view of the More info dialog.
       render: txt
   - type: textarea
     attributes:

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

@@ -0,0 +1,38 @@
+#!/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

@@ -0,0 +1,195 @@
+#!/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

@@ -0,0 +1,58 @@
+#!/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/blocking-labels.yaml

@@ -20,31 +20,16 @@ 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 blockingLabels = [
-              "wait for backend",
-              "Needs UX",
-              "Do Not Review",
-              "Blocked",
-              "has-parent",
-            ];
-            const prLabels = context.payload.pull_request.labels.map(
-              (l) => l.name
+            const { default: checkBlockingLabels } = await import(
+              `${process.env.GITHUB_WORKSPACE}/.github/scripts/check-blocking-labels.mjs`
             );
-            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();
-            }
+            await checkBlockingLabels({ github, context, core });

.github/workflows/cast_deployment.yaml

@@ -24,7 +24,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           ref: dev
           persist-credentials: false
@@ -60,7 +60,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           ref: master
           persist-credentials: false

.github/workflows/ci.yaml

@@ -27,7 +27,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
       - name: Setup Node
@@ -105,6 +105,8 @@ 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

@@ -27,7 +27,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           # We must fetch at least the immediate parents so that if this is
           # a pull request then we can checkout the head.

.github/workflows/demo_deployment.yaml

@@ -25,7 +25,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           ref: dev
           persist-credentials: false
@@ -61,7 +61,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           ref: master
           persist-credentials: false

.github/workflows/design_deployment.yaml

@@ -19,7 +19,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
 

.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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
 

.github/workflows/e2e.yaml

@@ -0,0 +1,240 @@
+name: E2E Tests
+
+on:
+  push:
+    branches:
+      - dev
+      - master
+  pull_request:
+    branches:
+      - dev
+      - master
+  workflow_dispatch:
+
+env:
+  NODE_OPTIONS: --max_old_space_size=6144
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  # ── Build the demo once and share it across test jobs via artifact ──────────
+  build-demo:
+    name: Build demo
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        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: Build demo
+        run: ./node_modules/.bin/gulp build-demo
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload demo build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: demo-dist
+          path: demo/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Build the e2e test app and share it via artifact ────────────────────────
+  build-e2e-test-app:
+    name: Build e2e test app
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        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: Build e2e test app
+        run: ./node_modules/.bin/gulp build-e2e-test-app
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload e2e test app build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: e2e-test-app-dist
+          path: test/e2e/app/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Build the gallery and share it via artifact ─────────────────────────────
+  build-gallery:
+    name: Build gallery
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        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: Build gallery
+        run: ./node_modules/.bin/gulp build-gallery
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload gallery build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: gallery-dist
+          path: gallery/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Run Playwright tests locally against Chromium ──────────────────────────
+  e2e-local:
+    name: E2E (local Chromium)
+    needs: [build-demo, build-e2e-test-app, build-gallery]
+    runs-on: ubuntu-latest
+    # Fail fast if anything hangs. The whole suite should take < 15 minutes on
+    # Chromium; anything longer is almost certainly an install or webServer
+    # hang.
+    timeout-minutes: 30
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        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
+
+      # Cache the downloaded browser build keyed on the pinned Playwright
+      # version (yarn.lock), so re-runs skip the ~170 MB download.
+      - name: Cache Playwright browsers
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('yarn.lock') }}
+
+      - name: Install Playwright browsers
+        run: yarn playwright install --with-deps chromium
+        timeout-minutes: 10
+
+      - name: Download demo build
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        with:
+          name: demo-dist
+          path: demo/dist/
+
+      - name: Download e2e test app build
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        with:
+          name: e2e-test-app-dist
+          path: test/e2e/app/dist/
+
+      - name: Download gallery build
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        with:
+          name: gallery-dist
+          path: gallery/dist/
+
+      - name: Run Playwright tests (local)
+        run: yarn test:e2e
+        timeout-minutes: 15
+
+      - name: Upload blob report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        if: always()
+        with:
+          name: blob-report-local
+          path: test/e2e/reports/
+          retention-days: 3
+
+  # ── Merge local blob reports and post PR comment ───────────────────────────
+  report:
+    name: Report
+    needs: [e2e-local]
+    runs-on: ubuntu-latest
+    if: ${{ !cancelled() }}
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        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 blob report (local)
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        continue-on-error: true
+        with:
+          name: blob-report-local
+          path: test/e2e/reports/
+
+      - name: Stage blobs for merge
+        run: node test/e2e/collect-blob-reports.mjs
+
+      - name: Merge blob reports
+        run: npx playwright merge-reports -c test/e2e/playwright.merge.config.ts test/e2e/reports/blob
+
+      - name: Upload merged HTML report
+        id: upload-report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: playwright-report
+          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
+        with:
+          script: |
+            const { default: postReportComment } = await import(
+              `${process.env.GITHUB_WORKSPACE}/test/e2e/post-report-comment.mjs`
+            );
+            await postReportComment({ github, context, core });

.github/workflows/nightly.yaml

@@ -20,7 +20,7 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         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, no PR code checkout
+  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
     types:
       - opened
       - edited
@@ -23,168 +23,16 @@ 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 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- ")}`
+            const { default: checkStandards } = await import(
+              `${process.env.GITHUB_WORKSPACE}/.github/scripts/check-pull-request-standards.mjs`
             );
+            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@693d20e7c1ce1a81d3a41962f85914253b518449 # v7.3.1
+      - uses: release-drafter/release-drafter@ed4bc48ec97379be2258e7b7ac2624a3e26ab809 # v7.4.0
         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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
 
@@ -36,7 +36,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@e91ad1948e57189485b9c1ad608af0c303946f89 # master
+        uses: home-assistant/actions/helpers/verify-version@f4ca6f671bd429efb108c0f2fa0ae8af0215986c # 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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
       - name: Setup Node

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

@@ -36,52 +36,21 @@ 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 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']
-            });
+            const { default: checkTaskAuthorization } = await import(
+              `${process.env.GITHUB_WORKSPACE}/.github/scripts/check-task-authorization.mjs`
+            );
+            await checkTaskAuthorization({ github, context, core });

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

@@ -21,7 +21,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
 
       - 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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
 

.gitignore

@@ -54,8 +54,16 @@ src/cast/dev_const.ts
 # test coverage
 test/coverage/
 
+# Playwright e2e output
+test/e2e/reports/
+test/e2e/test-results/
+# E2E test app build output
+test/e2e/app/dist/
+
 # AI tooling
 .claude
 .cursor
 .opencode
+.serena
+
 test/benchmarks/results/

.nvmrc

@@ -1 +1 @@
-24.17.0
+24.18.0

build-scripts/bundle-budget.json

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

build-scripts/bundle.cjs

@@ -1,4 +1,3 @@
-/* global require, module, __dirname, process */
 const path = require("path");
 const env = require("./env.cjs");
 const paths = require("./paths.cjs");
@@ -84,12 +83,7 @@ module.exports.swcOptions = () => ({
   },
 });
 
-module.exports.babelOptions = ({
-  latestBuild,
-  isProdBuild,
-  isTestBuild,
-  sw,
-}) => ({
+module.exports.babelOptions = ({ latestBuild, isTestBuild, sw }) => ({
   babelrc: false,
   compact: false,
   assumptions: {
@@ -102,14 +96,22 @@ module.exports.babelOptions = ({
     [
       "@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"),
       {
@@ -117,32 +119,14 @@ module.exports.babelOptions = ({
         ignoreModuleNotFound: true,
       },
     ],
-    // 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
+    // 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`.
     [
       "@babel/plugin-transform-runtime",
-      { version: dependencies["@babel/runtime"] },
+      { version: dependencies["@babel/runtime"], moduleName: "@babel/runtime" },
     ],
     "@babel/plugin-transform-class-properties",
     "@babel/plugin-transform-private-methods",
@@ -321,4 +305,22 @@ module.exports.config = {
       isLandingPageBuild: true,
     };
   },
+
+  e2eTestApp({ isProdBuild, latestBuild, isStatsBuild }) {
+    return {
+      name: "e2e-test-app" + nameSuffix(latestBuild),
+      entry: {
+        main: path.resolve(paths.e2eTestApp_dir, "src/entrypoint.ts"),
+      },
+      outputPath: outputPath(paths.e2eTestApp_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      defineOverlay: {
+        __VERSION__: JSON.stringify(`E2E-TEST-${env.version()}`),
+        __DEMO__: true,
+      },
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+    };
+  },
 };

build-scripts/check-bundle-size.cjs

@@ -0,0 +1,155 @@
+/* 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/eslint.config.mjs

@@ -1,9 +1,13 @@
 // @ts-check
 
+import globals from "globals";
 import tseslint from "typescript-eslint";
 import rootConfig from "../eslint.config.mjs";
 
 export default tseslint.config(...rootConfig, {
+  languageOptions: {
+    globals: globals.node,
+  },
   rules: {
     "no-console": "off",
     "import-x/no-extraneous-dependencies": "off",

build-scripts/get-built-in-node-module-shim.cjs

@@ -1,4 +1,3 @@
-/* global module */
 // Browser-only replacement for core-js/internals/get-built-in-node-module.
 // The original helper evaluates `Function('return require("...")')()`
 // when it detects a Node environment, which causes a runtime

build-scripts/gulp/clean.js

@@ -45,3 +45,10 @@ gulp.task(
     ])
   )
 );
+
+gulp.task(
+  "clean-e2e-test-app",
+  gulp.parallel("clean-translations", async () =>
+    deleteSync([paths.e2eTestApp_output_root, paths.build_dir])
+  )
+);

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

@@ -0,0 +1,41 @@
+import gulp from "gulp";
+import "./clean.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./translations.js";
+import "./rspack.js";
+
+gulp.task(
+  "develop-e2e-test-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-e2e-test-app",
+    "translations-enable-merge-backend",
+    gulp.parallel(
+      "gen-icons-json",
+      "gen-pages-e2e-test-app-dev",
+      "build-translations",
+      "build-locale-data"
+    ),
+    "copy-static-e2e-test-app",
+    "rspack-dev-server-e2e-test-app"
+  )
+);
+
+gulp.task(
+  "build-e2e-test-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-e2e-test-app",
+    "translations-enable-merge-backend",
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    "copy-static-e2e-test-app",
+    "rspack-prod-e2e-test-app",
+    "gen-pages-e2e-test-app-prod"
+  )
+);

build-scripts/gulp/entry-html.js

@@ -1,4 +1,3 @@
-/* global process */
 // Tasks to generate entry HTML
 
 import {
@@ -268,3 +267,24 @@ gulp.task(
     paths.landingPage_output_es5
   )
 );
+
+const E2E_TEST_APP_PAGE_ENTRIES = { "index.html": ["main"] };
+
+gulp.task(
+  "gen-pages-e2e-test-app-dev",
+  genPagesDevTask(
+    E2E_TEST_APP_PAGE_ENTRIES,
+    paths.e2eTestApp_dir,
+    paths.e2eTestApp_output_root
+  )
+);
+
+gulp.task(
+  "gen-pages-e2e-test-app-prod",
+  genPagesProdTask(
+    E2E_TEST_APP_PAGE_ENTRIES,
+    paths.e2eTestApp_dir,
+    paths.e2eTestApp_output_root,
+    paths.e2eTestApp_output_latest
+  )
+);

build-scripts/gulp/gallery.js

@@ -1,7 +1,7 @@
 import fs from "fs";
 import { glob } from "glob";
 import gulp from "gulp";
-import yaml from "js-yaml";
+import { load as loadYaml } 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 = yaml.load(descriptionContent.substring(3, metadataEnd));
+        metadata = loadYaml(descriptionContent.substring(3, metadataEnd));
         descriptionContent = descriptionContent
           .substring(metadataEnd + 3)
           .trim();

build-scripts/gulp/gather-static.js

@@ -201,3 +201,23 @@ gulp.task("copy-static-landing-page", async () => {
   copyFonts(paths.landingPage_output_static);
   copyTranslations(paths.landingPage_output_static);
 });
+
+gulp.task("copy-static-e2e-test-app", async () => {
+  // Copy app static files (icons, polyfills, etc.)
+  fs.copySync(
+    polyPath("public/static"),
+    path.resolve(paths.e2eTestApp_output_root, "static")
+  );
+  // Copy e2e test app public files (manifest, sw stubs)
+  const e2ePublic = path.resolve(paths.e2eTestApp_dir, "public");
+  if (fs.existsSync(e2ePublic)) {
+    fs.copySync(e2ePublic, paths.e2eTestApp_output_root);
+  }
+
+  copyPolyfills(paths.e2eTestApp_output_static);
+  copyMapPanel(paths.e2eTestApp_output_static);
+  copyFonts(paths.e2eTestApp_output_static);
+  copyTranslations(paths.e2eTestApp_output_static);
+  copyLocaleData(paths.e2eTestApp_output_static);
+  copyMdiIcons(paths.e2eTestApp_output_static);
+});

build-scripts/gulp/index.mjs

@@ -4,6 +4,7 @@ import "./clean.js";
 import "./compress.js";
 import "./demo.js";
 import "./download-translations.js";
+import "./e2e-test-app.js";
 import "./entry-html.js";
 import "./fetch-nightly-translations.js";
 import "./gallery.js";

build-scripts/gulp/licenses.js

@@ -1,6 +1,6 @@
 // Gulp task to generate third-party license notices.
 
-import { readFile, access } from "fs/promises";
+import { readFile, access, readdir } from "fs/promises";
 import { generateLicenseFile } from "generate-license-file";
 import gulp from "gulp";
 import path from "path";
@@ -11,58 +11,98 @@ const OUTPUT_FILE = path.join(
   "third-party-licenses.txt"
 );
 
+const NODE_MODULES = path.resolve(paths.root_dir, "node_modules");
+
 // The echarts package ships an Apache-2.0 NOTICE file that must be
 // redistributed alongside the compiled output per Apache License §4(d).
-const NOTICE_FILES = [
-  path.resolve(paths.root_dir, "node_modules/echarts/NOTICE"),
-];
+const NOTICE_FILES = [path.join(NODE_MODULES, "echarts/NOTICE")];
 
-// type-fest ships two license files (MIT for code, CC0 for types).
-// We use the MIT license since that covers the bundled code.
+// Some packages need a manual license override (e.g. they ship multiple
+// license files and we must pick the right one for the bundled code).
 //
 // Each entry is pinned to a specific version. If a package is updated,
 // this list must be reviewed and the version updated after verifying
-// that the new version's license still matches. The build will fail
-// if the installed version does not match the pinned version.
+// that the new version's license still matches. The build will fail if
+// the pinned version is no longer installed.
 const LICENSE_OVERRIDES = [
   {
     // type-fest ships two license files (MIT for code, CC0 for types).
     // We use the MIT license since that covers the bundled code.
     packageName: "type-fest",
     version: "5.7.0",
-    licensePath: path.resolve(
-      paths.root_dir,
-      "node_modules/type-fest/license-mit"
-    ),
+    licenseFile: "license-mit",
   },
 ];
 
+// Locate the directory of an installed package matching an exact version.
+//
+// The copy we care about may be hoisted to the top-level node_modules or
+// nested under a dependency when a different version occupies the hoisted
+// slot (e.g. a build-only dependency pulling in an older release). Searching
+// both keeps this check independent of yarn's hoisting decisions, which can
+// shift when unrelated dependencies are added.
+async function findPackageDir(packageName, version) {
+  const candidateDirs = [path.join(NODE_MODULES, packageName)];
+
+  // Collect one level of nesting: node_modules/<dep>/node_modules/<pkg> and
+  // node_modules/@scope/<dep>/node_modules/<pkg>.
+  let topLevel = [];
+  try {
+    topLevel = await readdir(NODE_MODULES, { withFileTypes: true });
+  } catch {
+    // node_modules unreadable — fall back to the hoisted candidate only.
+  }
+  for (const entry of topLevel) {
+    if (!entry.isDirectory() || entry.name === packageName) {
+      continue;
+    }
+    if (entry.name.startsWith("@")) {
+      const scopeDir = path.join(NODE_MODULES, entry.name);
+      // eslint-disable-next-line no-await-in-loop
+      const scoped = await readdir(scopeDir, { withFileTypes: true }).catch(
+        () => []
+      );
+      for (const dep of scoped) {
+        if (dep.isDirectory()) {
+          candidateDirs.push(
+            path.join(scopeDir, dep.name, "node_modules", packageName)
+          );
+        }
+      }
+    } else {
+      candidateDirs.push(
+        path.join(NODE_MODULES, entry.name, "node_modules", packageName)
+      );
+    }
+  }
+
+  for (const dir of candidateDirs) {
+    // eslint-disable-next-line no-await-in-loop
+    const pkg = await readFile(path.join(dir, "package.json"), "utf-8")
+      .then(JSON.parse)
+      .catch(() => null);
+    if (pkg?.version === version) {
+      return dir;
+    }
+  }
+  return null;
+}
+
 gulp.task("gen-licenses", async () => {
   const licenseOverrides = {};
 
-  for (const { packageName, version, licensePath } of LICENSE_OVERRIDES) {
-    const pkgJsonPath = path.resolve(
-      paths.root_dir,
-      `node_modules/${packageName}/package.json`
-    );
+  for (const { packageName, version, licenseFile } of LICENSE_OVERRIDES) {
+    // eslint-disable-next-line no-await-in-loop
+    const packageDir = await findPackageDir(packageName, version);
 
-    let packageJSON;
-    try {
-      // eslint-disable-next-line no-await-in-loop
-      packageJSON = JSON.parse(await readFile(pkgJsonPath, "utf-8"));
-    } catch {
+    if (!packageDir) {
       throw new Error(
-        `package.json for "${packageName}" not found or unreadable at ${pkgJsonPath}`
-      );
-    }
-
-    if (packageJSON.version !== version) {
-      throw new Error(
-        `License override for "${packageName}" is pinned to version ${version}, but found version ${packageJSON.version}. ` +
+        `License override for "${packageName}" is pinned to version ${version}, but that version is not installed. ` +
           `Please verify the new version's license and update the override in build-scripts/gulp/licenses.js.`
       );
     }
 
+    const licensePath = path.join(packageDir, licenseFile);
     try {
       // eslint-disable-next-line no-await-in-loop
       await access(licensePath);

build-scripts/gulp/rspack.js

@@ -14,6 +14,7 @@ import {
   createDemoConfig,
   createGalleryConfig,
   createLandingPageConfig,
+  createE2eTestAppConfig,
 } from "../rspack.cjs";
 
 const bothBuilds = (createConfigFunc, params) => [
@@ -231,3 +232,23 @@ gulp.task("rspack-prod-landing-page", () =>
     })
   )
 );
+
+gulp.task("rspack-dev-server-e2e-test-app", () =>
+  runDevServer({
+    compiler: rspack(
+      createE2eTestAppConfig({ isProdBuild: false, latestBuild: true })
+    ),
+    contentBase: paths.e2eTestApp_output_root,
+    port: 8095,
+    open: false,
+  })
+);
+
+gulp.task("rspack-prod-e2e-test-app", () =>
+  prodBuild(
+    bothBuilds(createE2eTestAppConfig, {
+      isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+    })
+  )
+);

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

@@ -48,6 +48,12 @@ 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`));
@@ -59,16 +65,16 @@ for (const buildType of ["Modern", "Legacy"]) {
   console.log(detailsClose);
 
   // Manually log the Core-JS polyfills using the same technique
-  if (presetEnvOpts.useBuiltIns) {
+  if (corejsOpts) {
     console.log(detailsOpen(`${buildType} Build Core-JS Polyfills`));
     const targets = compilationTargets.default(babelOpts?.targets, {
       browserslistEnv,
     });
     const polyfillList = coreJSCompat({ targets }).list.filter(
       polyfillFilter(
-        `${presetEnvOpts.useBuiltIns}-global`,
-        presetEnvOpts?.corejs?.proposals,
-        presetEnvOpts?.shippedProposals
+        corejsOpts.method,
+        corejsOpts.proposals,
+        corejsOpts.shippedProposals
       )
     );
     console.log(

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

@@ -0,0 +1,8 @@
+/* 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

@@ -0,0 +1,68 @@
+/* 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/paths.cjs

@@ -50,4 +50,15 @@ module.exports = {
   ),
 
   translations_src: path.resolve(__dirname, "../src/translations"),
+
+  e2eTestApp_dir: path.resolve(__dirname, "../test/e2e/app"),
+  e2eTestApp_output_root: path.resolve(__dirname, "../test/e2e/app/dist"),
+  e2eTestApp_output_static: path.resolve(
+    __dirname,
+    "../test/e2e/app/dist/static"
+  ),
+  e2eTestApp_output_latest: path.resolve(
+    __dirname,
+    "../test/e2e/app/dist/frontend_latest"
+  ),
 };

build-scripts/rspack.cjs

@@ -1,4 +1,3 @@
-/* global require, module, __dirname */
 const { existsSync } = require("fs");
 const path = require("path");
 const rspack = require("@rspack/core");
@@ -48,6 +47,12 @@ 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",
@@ -67,25 +72,42 @@ const createRspackConfig = ({
         {
           test: /\.m?js$|\.ts$/,
           exclude: /node_modules[\\/]core-js/,
-          use: (info) => [
-            {
-              loader: "babel-loader",
-              options: {
-                ...bundle.babelOptions({
-                  latestBuild,
-                  isProdBuild,
-                  isTestBuild,
-                  sw: info.issuerLayer === "sw",
-                }),
-                cacheDirectory: !isProdBuild,
-                cacheCompression: false,
+          use: (info) =>
+            [
+              {
+                loader: "babel-loader",
+                options: {
+                  ...bundle.babelOptions({
+                    latestBuild,
+                    isTestBuild,
+                    sw: info.issuerLayer === "sw",
+                  }),
+                  cacheDirectory: !isProdBuild,
+                  cacheCompression: false,
+                },
               },
-            },
-            {
-              loader: "builtin:swc-loader",
-              options: bundle.swcOptions(),
-            },
-          ],
+              // 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),
           resolve: {
             fullySpecified: false,
           },
@@ -132,6 +154,47 @@ 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 })
       ),
@@ -338,6 +401,11 @@ const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
 const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));
 
+const createE2eTestAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+  createRspackConfig(
+    bundle.config.e2eTestApp({ isProdBuild, latestBuild, isStatsBuild })
+  );
+
 module.exports = {
   createAppConfig,
   createDemoConfig,
@@ -345,4 +413,5 @@ module.exports = {
   createGalleryConfig,
   createRspackConfig,
   createLandingPageConfig,
+  createE2eTestAppConfig,
 };

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

@@ -56,88 +56,100 @@ class HcCast extends LitElement {
 
     return html`
       <hc-layout .auth=${this.auth} .connection=${this.connection}>
-        ${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
+        ${
+          this.askWrite
             ? 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 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>
               `
-            : 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
-                >
-              `}
+            : ""
+        }
+        ${
+          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
+                  >
+                `
+        }
 
         <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,9 +135,11 @@ 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,18 +26,20 @@ 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/src/configs/types.ts

@@ -9,8 +9,7 @@ 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,28 +43,30 @@ 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,6 +53,7 @@ const CONFIG_PANEL_COMMANDS = [
   "config/scene/config",
   "search/related",
   "tag/list",
+  "assist_pipeline/",
 ];
 
 @customElement("ha-demo")
@@ -65,7 +66,9 @@ export class HaDemo extends HomeAssistantAppEl {
         this._updateHass(hassUpdate),
     };
 
-    const hass = provideHass(this, initial, true);
+    // `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 localizePromise =
       // @ts-ignore
       this._loadFragmentTranslations(hass.language, "page-demo").then(

demo/src/stubs/assist.ts

@@ -0,0 +1,53 @@
+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.
+  hass.mockWS("assist_pipeline/pipeline/list", () => ({
+    pipelines,
+    preferred_pipeline: "01home_assistant_cloud",
+  }));
+
+  // Stub for assist pipeline run — immediately sends run-end event so
+  // the UI does not hang waiting for a response.
+  hass.mockWS("assist_pipeline/run", (_msg, _hass, onChange) => {
+    if (onChange) {
+      onChange({
+        type: "run-end",
+      });
+    }
+    return null;
+  });
+};

demo/src/stubs/config-panel.ts

@@ -1,5 +1,6 @@
 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";
@@ -37,4 +38,5 @@ export const mockConfigPanel = (hass: MockHomeAssistant) => {
   mockScene(hass);
   mockSearch(hass);
   mockTags(hass);
+  mockAssist(hass);
 };

demo/src/stubs/energy.ts

@@ -8,103 +8,100 @@ 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 => ({
@@ -113,51 +110,48 @@ 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,11 +2,8 @@ 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,22 +2,27 @@ import type { ExposeEntitySettings } from "../../../src/data/expose";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 const exposedEntities: Record<string, ExposeEntitySettings> = {
-  "light.bed_light": {
+  "light.floor_lamp": {
     conversation: true,
     "cloud.alexa": true,
     "cloud.google_assistant": true,
   },
-  "light.ceiling_lights": {
+  "light.living_room_spotlights": {
     conversation: true,
     "cloud.alexa": true,
     "cloud.google_assistant": false,
   },
-  "switch.decorative_lights": {
+  "light.bar_lamp": {
     conversation: true,
     "cloud.alexa": false,
     "cloud.google_assistant": true,
   },
-  "climate.ecobee": {
+  "light.kitchen_spotlights": {
+    conversation: true,
+    "cloud.alexa": true,
+    "cloud.google_assistant": true,
+  },
+  "light.outdoor_light": {
     conversation: true,
     "cloud.alexa": true,
     "cloud.google_assistant": true,

demo/src/stubs/network.ts

@@ -2,12 +2,9 @@ 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,8 +1,7 @@
 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: {} }));
 };

demo/src/stubs/update.ts

@@ -0,0 +1,5 @@
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockUpdate = (hass: MockHomeAssistant) => {
+  hass.mockWS("update/list", () => []);
+};

eslint.config.mjs

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

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

@@ -101,9 +101,11 @@ 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,9 +34,11 @@ 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
@@ -44,9 +46,11 @@ 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,13 +22,15 @@ 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/ha-gallery.ts

@@ -1,3 +1,4 @@
+import { ContextProvider } from "@lit/context";
 import { mdiCog, mdiMenu } from "@mdi/js";
 import type { Connection } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
@@ -19,6 +20,22 @@ 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 {
@@ -113,6 +130,65 @@ 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];
@@ -135,38 +211,46 @@ 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>
@@ -314,13 +398,15 @@ 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>
             `
@@ -378,9 +464,11 @@ 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>
     `;
@@ -411,23 +499,30 @@ 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>`;
@@ -576,6 +671,21 @@ 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,9 +149,11 @@ 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,9 +74,11 @@ 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,9 +98,11 @@ 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.ts

@@ -54,16 +54,18 @@ export class DemoAutomationTrace extends LitElement {
                 @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}
+              ${
+                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,20 +33,24 @@ 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>
               `
             )}
@@ -56,20 +60,24 @@ 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>
               `
             )}
@@ -79,10 +87,12 @@ 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>
               `
@@ -90,10 +100,12 @@ 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,14 +92,16 @@ 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,8 +244,7 @@ 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
@@ -272,8 +271,7 @@ 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

@@ -1,5 +1,4 @@
-import { ContextProvider } from "@lit/context";
-import type { PropertyValues, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
@@ -15,11 +14,6 @@ import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
 import type { AreaRegistryEntry } from "../../../../src/data/area/area_registry";
 import type { BlueprintInput } from "../../../../src/data/blueprint";
-import {
-  configContext,
-  internationalizationContext,
-} from "../../../../src/data/context";
-import { updateHassGroups } from "../../../../src/data/context/updateContext";
 import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
 import type { FloorRegistryEntry } from "../../../../src/data/floor_registry";
 import type { LabelRegistryEntry } from "../../../../src/data/label/label_registry";
@@ -528,17 +522,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
 
   private data = SCHEMAS.map(() => ({}));
 
-  // The date/datetime selectors and the date-picker dialog consume these
-  // contexts (provided by the root element in the real app). Provide them here
-  // so they work in the gallery.
-  private _i18nProvider = new ContextProvider(this, {
-    context: internationalizationContext,
-  });
-
-  private _configProvider = new ContextProvider(this, {
-    context: configContext,
-  });
-
   constructor() {
     super();
     const hass = provideHass(this);
@@ -560,16 +543,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
     el.hass = this.hass;
   }
 
-  protected willUpdate(changedProps: PropertyValues): void {
-    super.willUpdate(changedProps);
-    if (changedProps.has("hass") && this.hass) {
-      this._i18nProvider.setValue(
-        updateHassGroups.internationalization(this.hass)
-      );
-      this._configProvider.setValue(updateHassGroups.config(this.hass));
-    }
-  }
-
   public connectedCallback() {
     super.connectedCallback();
     this.addEventListener("show-dialog", this._dialogManager);
@@ -723,11 +696,13 @@ 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,5 +1,6 @@
 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;
@@ -17,7 +18,9 @@ export class DemoMiscBoxShadow extends LitElement {
                   (size) => html`
                     <div
                       class="box"
-                      style="box-shadow: var(--ha-box-shadow-${size})"
+                      style=${styleMap({
+                        boxShadow: `var(--ha-box-shadow-${size})`,
+                      })}
                     >
                       ${size}
                     </div>

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

@@ -353,7 +353,6 @@ 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,30 +65,34 @@ 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")}
-            >
-              <ha-button
-                size="small"
-                variant="danger"
-                @click=${this._startLogStream}
+      ${
+        this._error
+          ? html`
+              <ha-alert
+                alert-type="error"
+                .title=${this.localize("logs.fetch_error")}
               >
-                ${this.localize("logs.retry")}
-              </ha-button>
-            </ha-alert>
-          `
-        : nothing}
+                <ha-button
+                  size="small"
+                  variant="danger"
+                  @click=${this._startLogStream}
+                >
+                  ${this.localize("logs.retry")}
+                </ha-button>
+              </ha-alert>
+            `
+          : nothing
+      }
       <div
         class=${classMap({
           logs: true,

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

@@ -55,13 +55,15 @@ 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,39 +61,47 @@ 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

@@ -22,23 +22,30 @@
     "postpack": "pinst --enable",
     "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"
+    "test:coverage": "vitest run --config test/vitest.config.ts --coverage",
+    "check-bundlesize": "node build-scripts/check-bundle-size.cjs",
+    "test:e2e": "node test/e2e/run-suites.mjs demo app gallery",
+    "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: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"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.29.7",
+    "@babel/runtime": "8.0.0",
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.3",
-    "@codemirror/commands": "6.10.3",
+    "@codemirror/commands": "6.10.4",
     "@codemirror/lang-jinja": "6.0.1",
     "@codemirror/lang-yaml": "6.1.3",
-    "@codemirror/language": "6.12.3",
+    "@codemirror/language": "6.12.4",
     "@codemirror/lint": "6.9.7",
     "@codemirror/search": "6.7.1",
-    "@codemirror/state": "6.6.0",
-    "@codemirror/view": "6.43.1",
+    "@codemirror/state": "6.7.0",
+    "@codemirror/view": "6.43.4",
     "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "7.4.9",
@@ -72,9 +79,10 @@
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@swc/helpers": "0.5.23",
     "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "4.2.1",
-    "@tsparticles/preset-links": "4.2.1",
+    "@tsparticles/engine": "4.3.0",
+    "@tsparticles/preset-links": "4.3.0",
     "@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",
@@ -91,13 +99,12 @@
     "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.5",
-    "intl-messageformat": "11.2.8",
-    "js-yaml": "4.2.0",
+    "intl-messageformat": "11.2.9",
+    "js-yaml": "5.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",
@@ -127,43 +134,45 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.29.7",
+    "@ampproject/remapping": "2.3.0",
+    "@babel/core": "8.0.1",
     "@babel/helper-define-polyfill-provider": "1.0.0",
-    "@babel/plugin-transform-runtime": "7.29.7",
-    "@babel/preset-env": "7.29.7",
+    "@babel/plugin-transform-runtime": "8.0.1",
+    "@babel/preset-env": "8.0.2",
     "@bundle-stats/plugin-webpack-filter": "4.22.2",
     "@eslint/js": "10.0.1",
-    "@html-eslint/eslint-plugin": "0.62.0",
+    "@html-eslint/eslint-plugin": "0.63.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",
-    "@rsdoctor/rspack-plugin": "1.5.15",
-    "@rspack/core": "2.0.8",
-    "@rspack/dev-server": "2.0.3",
+    "@playwright/test": "1.61.1",
+    "@rsdoctor/rspack-plugin": "1.5.16",
+    "@rspack/core": "2.1.1",
+    "@rspack/dev-server": "2.1.0",
+    "@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.1",
+    "@types/luxon": "3.7.2",
     "@types/qrcode": "1.5.6",
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
     "@vitest/coverage-v8": "4.1.9",
     "babel-loader": "10.1.1",
-    "babel-plugin-template-html-minifier": "4.1.0",
+    "babel-plugin-polyfill-corejs3": "1.0.0",
     "browserslist-useragent-regexp": "4.1.4",
     "del": "8.0.1",
-    "eslint": "10.5.0",
+    "eslint": "10.6.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
-    "eslint-plugin-import-x": "4.16.2",
+    "eslint-plugin-import-x": "4.17.1",
     "eslint-plugin-lit": "2.3.1",
     "eslint-plugin-lit-a11y": "5.1.1",
     "eslint-plugin-unused-imports": "4.4.1",
@@ -172,7 +181,7 @@
     "fs-extra": "11.3.5",
     "generate-license-file": "4.2.1",
     "glob": "13.0.6",
-    "globals": "17.6.0",
+    "globals": "17.7.0",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
@@ -182,21 +191,22 @@
     "jsdom": "29.1.1",
     "jszip": "3.10.1",
     "license-checker-rseidelsohn": "5.0.1",
-    "lint-staged": "17.0.7",
+    "lint-staged": "17.0.8",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.18.1",
     "map-stream": "0.0.7",
+    "minify-literals": "2.0.2",
     "pinst": "3.0.0",
-    "prettier": "3.8.4",
+    "prettier": "3.9.1",
     "rspack-manifest-plugin": "5.2.2",
     "serve": "14.2.6",
     "sinon": "22.0.0",
-    "tar": "7.5.16",
+    "tar": "7.5.19",
     "terser-webpack-plugin": "5.6.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.61.1",
+    "typescript-eslint": "8.62.0",
     "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.1.9",
     "webpack-stats-plugin": "1.1.3",
@@ -209,13 +219,13 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.21",
-    "globals": "17.6.0",
+    "globals": "17.7.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "glob@^10.2.2": "^10.5.0"
   },
   "packageManager": "yarn@4.17.0",
   "volta": {
-    "node": "24.17.0"
+    "node": "24.18.0"
   }
 }

pyproject.toml

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

src/auth/ha-auth-flow.ts

@@ -182,9 +182,11 @@ 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>
         `;
@@ -224,9 +226,11 @@ 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(
@@ -244,17 +248,19 @@ 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,45 +147,58 @@ 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,10 +33,7 @@ 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/const.ts

@@ -111,7 +111,7 @@ export const DOMAINS_WITH_DYNAMIC_PICTURE = new Set([
 ]);
 
 /** Domains that use a timestamp for state. */
-export const TIMESTAMP_STATE_DOMAINS = new Set([
+const TIMESTAMP_STATE_DOMAINS_LIST = [
   "ai_task",
   "button",
   "conversation",
@@ -127,7 +127,14 @@ export const TIMESTAMP_STATE_DOMAINS = new Set([
   "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";

src/common/datetime/duration_to_seconds.ts

@@ -1,4 +1,13 @@
+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/resolve-time-zone.ts

@@ -1,4 +1,4 @@
-import timezones from "google-timezones-json";
+import { timeZonesNames } from "@vvo/tzdb";
 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" ||
-    RESOLVED_RAW in timezones)
+    timeZonesNames.includes(RESOLVED_RAW))
     ? RESOLVED_RAW
     : undefined;
 

src/common/datetime/weekday.ts

@@ -1,13 +1,7 @@
 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,8 +13,7 @@ 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

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

src/common/entity/compute_state_display.ts

@@ -49,8 +49,7 @@ export const computeStateDisplay = (
   state?: string
 ): string => {
   const entity = entities?.[stateObj.entity_id] as
-    | EntityRegistryDisplayEntry
-    | undefined;
+    EntityRegistryDisplayEntry | undefined;
   return computeStateDisplayFromEntityAttributes(
     localize,
     locale,
@@ -302,8 +301,7 @@ 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,8 +24,7 @@ export const getEntityContext = (
   floors: HomeAssistant["floors"]
 ): EntityContext => {
   const entry = entities[stateObj.entity_id] as
-    | EntityRegistryDisplayEntry
-    | undefined;
+    EntityRegistryDisplayEntry | undefined;
 
   if (!entry) {
     return {
@@ -52,9 +51,7 @@ export const getEntityAreaId = (
 
 export const getEntityEntryContext = (
   entry:
-    | EntityRegistryDisplayEntry
-    | EntityRegistryEntry
-    | ExtEntityRegistryEntry,
+    EntityRegistryDisplayEntry | EntityRegistryEntry | ExtEntityRegistryEntry,
   entities: HomeAssistant["entities"],
   devices: HomeAssistant["devices"],
   areas: HomeAssistant["areas"],

src/common/search/related-context.ts

@@ -1,5 +1,5 @@
 import type { PickerComboBoxItem } from "../../components/ha-picker-combo-box";
-import type { RelatedResult } from "../../data/search";
+import type { ItemType, RelatedResult } from "../../data/search";
 
 export interface RelatedIdSets {
   areas: Set<string>;
@@ -8,14 +8,30 @@ export interface RelatedIdSets {
 }
 
 /**
- * Build a set of related IDs for a given related result.
+ * 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.
  * @param related - The related result to build the sets from.
- * @returns The related ID sets.
+ * @param current - The queried item to merge in.
+ * @returns The related ID sets, including the current item.
  */
-export const buildRelatedIdSets = (related?: RelatedResult): RelatedIdSets => ({
-  areas: new Set(related?.area || []),
-  devices: new Set(related?.device || []),
-  entities: new Set(related?.entity || []),
+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] : []),
+  ]),
 });
 
 /**

src/common/translations/localize.ts

@@ -114,8 +114,7 @@ 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,11 +10,7 @@ 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"];

src/common/url/query-params.ts

@@ -2,9 +2,7 @@ import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { ensureArray } from "../array/ensure-array";
 
 export type SearchParamsSource =
-  | URLSearchParams
-  | Record<string, string>
-  | string;
+  URLSearchParams | Record<string, string> | string;
 
 export interface QueryParamConfig {
   list?: readonly string[];

src/common/util/deep-equal.ts

@@ -27,7 +27,7 @@ export const deepEqual = (
       if (length !== b.length) {
         return false;
       }
-      for (i = length; i-- !== 0; ) {
+      for (i = length; i-- !== 0;) {
         if (!deepEqual(a[i], b[i], options)) {
           return false;
         }
@@ -71,7 +71,7 @@ export const deepEqual = (
       if (length !== b.length) {
         return false;
       }
-      for (i = length; i-- !== 0; ) {
+      for (i = length; i-- !== 0;) {
         if (a[i] !== b[i]) {
           return false;
         }
@@ -94,13 +94,13 @@ export const deepEqual = (
     if (length !== Object.keys(b).length) {
       return false;
     }
-    for (i = length; i-- !== 0; ) {
+    for (i = length; i-- !== 0;) {
       if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
         return false;
       }
     }
 
-    for (i = length; i-- !== 0; ) {
+    for (i = length; i-- !== 0;) {
       const key = keys[i];
 
       if (!deepEqual(a[key], b[key], options)) {

src/common/util/select-unit.ts

@@ -3,14 +3,7 @@ import type { FrontendLocaleData } from "../../data/translation";
 import { firstWeekdayIndex } from "../datetime/first_weekday";
 
 export type Unit =
-  | "second"
-  | "minute"
-  | "hour"
-  | "day"
-  | "week"
-  | "month"
-  | "quarter"
-  | "year";
+  "second" | "minute" | "hour" | "day" | "week" | "month" | "quarter" | "year";
 
 const MS_PER_SECOND = 1e3;
 const SECS_PER_MIN = 60;

src/common/util/shallow-equal.ts

@@ -18,7 +18,7 @@ export const shallowEqual = (a: any, b: any): boolean => {
       if (length !== b.length) {
         return false;
       }
-      for (i = length; i-- !== 0; ) {
+      for (i = length; i-- !== 0;) {
         if (a[i] !== b[i]) {
           return false;
         }
@@ -62,7 +62,7 @@ export const shallowEqual = (a: any, b: any): boolean => {
       if (length !== b.length) {
         return false;
       }
-      for (i = length; i-- !== 0; ) {
+      for (i = length; i-- !== 0;) {
         if (a[i] !== b[i]) {
           return false;
         }
@@ -85,13 +85,13 @@ export const shallowEqual = (a: any, b: any): boolean => {
     if (length !== Object.keys(b).length) {
       return false;
     }
-    for (i = length; i-- !== 0; ) {
+    for (i = length; i-- !== 0;) {
       if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
         return false;
       }
     }
 
-    for (i = length; i-- !== 0; ) {
+    for (i = length; i-- !== 0;) {
       const key = keys[i];
 
       if (a[key] !== b[key]) {

src/components/automation/ha-automation-condition-live-test.ts

@@ -56,11 +56,13 @@ export class HaAutomationConditionLiveTest extends LitElement {
           )}
         ></ha-automation-row-live-test>
       </div>
-      ${this._liveTestResult.message
-        ? html`<ha-tooltip for="indicator"
-            >${this._liveTestResult.message}</ha-tooltip
-          >`
-        : nothing}
+      ${
+        this._liveTestResult.message
+          ? html`<ha-tooltip for="indicator"
+              >${this._liveTestResult.message}</ha-tooltip
+            >`
+          : nothing
+      }
     `;
   }
 

src/components/automation/ha-automation-row.ts

@@ -41,16 +41,18 @@ export class HaAutomationRow extends LitElement {
         role="button"
         @keydown=${this._handleKeydown}
       >
-        ${this.leftChevron
-          ? html`
-              <ha-icon-button
-                class="expand-button"
-                .path=${mdiChevronUp}
-                @click=${this._handleExpand}
-                @keydown=${this._handleExpand}
-              ></ha-icon-button>
-            `
-          : nothing}
+        ${
+          this.leftChevron
+            ? html`
+                <ha-icon-button
+                  class="expand-button"
+                  .path=${mdiChevronUp}
+                  @click=${this._handleExpand}
+                  @keydown=${this._handleExpand}
+                ></ha-icon-button>
+              `
+            : nothing
+        }
         <div class="leading-icon-wrapper">
           <slot name="leading-icon"></slot>
         </div>

src/components/buttons/ha-call-service-button.ts

@@ -1,16 +1,18 @@
+import { consume, type ContextType } from "@lit/context";
 import type { TemplateResult } from "lit";
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import "./ha-progress-button";
-import type { HomeAssistant } from "../../types";
+import { apiContext } from "../../data/context";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { Appearance } from "../ha-button";
 
 @customElement("ha-call-service-button")
 class HaCallServiceButton extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @consume({ context: apiContext, subscribe: true })
+  private _api!: ContextType<typeof apiContext>;
 
   @property({ type: Boolean }) public disabled = false;
 
@@ -56,7 +58,7 @@ class HaCallServiceButton extends LitElement {
       this.shadowRoot!.querySelector("ha-progress-button")!;
 
     try {
-      await this.hass.callService(
+      await this._api.callService(
         this.domain,
         this.service,
         this.data,

src/components/buttons/ha-progress-button.ts

@@ -34,37 +34,47 @@ export class HaProgressButton extends LitElement {
         .appearance=${appearance}
         .disabled=${this.disabled}
         .loading=${this.progress}
-        .variant=${this._result === "success"
-          ? "success"
-          : this._result === "error"
-            ? "danger"
-            : this.variant}
+        .variant=${
+          this._result === "success"
+            ? "success"
+            : this._result === "error"
+              ? "danger"
+              : this.variant
+        }
         class=${classMap({
           result: !!this._result,
           success: this._result === "success",
           error: this._result === "error",
         })}
       >
-        ${this.iconPath
-          ? html`<ha-svg-icon
-              .path=${this.iconPath}
-              slot="start"
-            ></ha-svg-icon>`
-          : nothing}
+        ${
+          this.iconPath
+            ? html`<ha-svg-icon
+                .path=${this.iconPath}
+                slot="start"
+              ></ha-svg-icon>`
+            : nothing
+        }
 
         <slot>${this.label}</slot>
       </ha-button>
-      ${!this._result
-        ? nothing
-        : html`
-            <div class="progress">
-              ${this._result === "success"
-                ? html`<ha-svg-icon .path=${mdiCheckBold}></ha-svg-icon>`
-                : this._result === "error"
-                  ? html`<ha-svg-icon .path=${mdiAlertOctagram}></ha-svg-icon>`
-                  : nothing}
-            </div>
-          `}
+      ${
+        !this._result
+          ? nothing
+          : html`
+              <div class="progress">
+                ${
+                  this._result === "success"
+                    ? html`<ha-svg-icon .path=${mdiCheckBold}></ha-svg-icon>`
+                    : this._result === "error"
+                      ? html`<ha-svg-icon
+                          .path=${mdiAlertOctagram}
+                        ></ha-svg-icon>`
+                      : nothing
+                }
+              </div>
+            `
+      }
     `;
   }
 

src/components/chart/ha-chart-base.ts

@@ -352,16 +352,18 @@ export class HaChartBase extends LitElement {
           <div
             class="chart-controls ${classMap({ small: this.smallControls })}"
           >
-            ${this._isZoomed && !this.hideResetButton
-              ? html`<ha-icon-button
-                  class="zoom-reset"
-                  .path=${mdiRestart}
-                  @click=${this._handleZoomReset}
-                  title=${this.hass.localize(
-                    "ui.components.history_charts.zoom_reset"
-                  )}
-                ></ha-icon-button>`
-              : nothing}
+            ${
+              this._isZoomed && !this.hideResetButton
+                ? html`<ha-icon-button
+                    class="zoom-reset"
+                    .path=${mdiRestart}
+                    @click=${this._handleZoomReset}
+                    title=${this.hass.localize(
+                      "ui.components.history_charts.zoom_reset"
+                    )}
+                  ></ha-icon-button>`
+                : nothing
+            }
             <slot name="button"></slot>
           </div>
         </div>
@@ -465,9 +467,11 @@ export class HaChartBase extends LitElement {
               @click=${this._toggleDataset}
             >
               <ha-svg-icon
-                .path=${this._hiddenDatasets.has(id)
-                  ? mdiCircleOutline
-                  : mdiCheckCircle}
+                .path=${
+                  this._hiddenDatasets.has(id)
+                    ? mdiCircleOutline
+                    : mdiCheckCircle
+                }
                 style=${styleMap({
                   color: this._hiddenDatasets.has(id) ? undefined : color,
                 })}
@@ -485,26 +489,30 @@ export class HaChartBase extends LitElement {
             ${value ? html`<div class="value">${value}</div>` : nothing}
           </li>`;
         })}
-        ${items.length > overflowLimit
-          ? html`<li>
-              <ha-assist-chip
-                @click=${this._toggleExpandedLegend}
-                filled
-                label=${this.expandLegend
-                  ? this.hass.localize(
-                      "ui.components.history_charts.collapse_legend"
-                    )
-                  : `${this.hass.localize(
-                      "ui.components.history_charts.expand_legend"
-                    )} (${items.length - overflowLimit})`}
-              >
-                <ha-svg-icon
-                  slot="trailing-icon"
-                  .path=${this.expandLegend ? mdiChevronUp : mdiChevronDown}
-                ></ha-svg-icon>
-              </ha-assist-chip>
-            </li>`
-          : nothing}
+        ${
+          items.length > overflowLimit
+            ? html`<li>
+                <ha-assist-chip
+                  @click=${this._toggleExpandedLegend}
+                  filled
+                  label=${
+                    this.expandLegend
+                      ? this.hass.localize(
+                          "ui.components.history_charts.collapse_legend"
+                        )
+                      : `${this.hass.localize(
+                          "ui.components.history_charts.expand_legend"
+                        )} (${items.length - overflowLimit})`
+                  }
+                >
+                  <ha-svg-icon
+                    slot="trailing-icon"
+                    .path=${this.expandLegend ? mdiChevronUp : mdiChevronDown}
+                  ></ha-svg-icon>
+                </ha-assist-chip>
+              </li>`
+            : nothing
+        }
       </ul>
     </div>`;
   }
@@ -667,8 +675,7 @@ export class HaChartBase extends LitElement {
   ): string[] {
     if (!options) return [primaryId];
     const legend = ensureArray(this.options?.legend || [])[0] as
-      | LegendComponentOption
-      | undefined;
+      LegendComponentOption | undefined;
 
     let customLegendItem;
     if (legend?.type === "custom") {
@@ -685,8 +692,7 @@ export class HaChartBase extends LitElement {
   private _updateHiddenStatsFromOptions(options: HaECOption | undefined) {
     if (!options) return;
     const legend = ensureArray(this.options?.legend || [])[0] as
-      | LegendComponentOption
-      | undefined;
+      LegendComponentOption | undefined;
     Object.entries(legend?.selected || {}).forEach(([stat, selected]) => {
       if (selected === false) {
         this._getAllIdsFromLegend(options, stat).forEach((id) =>
@@ -699,11 +705,9 @@ export class HaChartBase extends LitElement {
 
   private _getDataZoomConfig(): DataZoomComponentOption | undefined {
     const xAxis = (this.options?.xAxis?.[0] ?? this.options?.xAxis) as
-      | XAXisOption
-      | undefined;
+      XAXisOption | undefined;
     const yAxis = (this.options?.yAxis?.[0] ?? this.options?.yAxis) as
-      | YAXisOption
-      | undefined;
+      YAXisOption | undefined;
     if (xAxis?.type === "value" && yAxis?.type === "category") {
       // vertical data zoom doesn't work well in this case and horizontal is pointless
       return undefined;
@@ -1014,8 +1018,7 @@ export class HaChartBase extends LitElement {
 
   private _getSeries() {
     const xAxis = (this.options?.xAxis?.[0] ?? this.options?.xAxis) as
-      | XAXisOption
-      | undefined;
+      XAXisOption | undefined;
     const series = ensureArray(this.data).map((s) => {
       const data = this._hiddenDatasets.has(String(s.id ?? s.name))
         ? undefined