Address E2E review findings

Limit gallery shell error filtering
Keep app shell error checks strict
2026-07-18 17:16:55 +00:00 · 2026-07-16 08:12:03 +01:00 · 2026-07-16 08:12:03 +01:00 · 2026-07-16 08:12:03 +01:00 · 2026-07-16 08:12:03 +01:00 · 2026-07-16 08:12:03 +01:00
74 changed files with 2154 additions and 2625 deletions
@@ -1,12 +1,18 @@
 ---
 name: ha-frontend-testing
-description: Home Assistant frontend validation workflow. Use when running lint, TypeScript checks, Vitest, Playwright e2e suites, dev servers, or chart-data benchmarks.
+description: Home Assistant frontend testing and validation workflow. Use when adding or updating tests, running lint, TypeScript checks, Vitest, Playwright e2e suites, dev servers, or chart-data benchmarks.
 ---

 # HA Frontend Testing

 Use this skill when choosing or running validation for frontend changes.

+## Test Helpers
+
+- Before adding or changing tests, inspect the relevant suite's existing helpers and fixtures. Reuse them instead of duplicating setup, test data, navigation, interactions, waits, or assertions.
+- When the same test flow appears more than once, move it into the closest suite-local helper with a focused interface.
+- Keep one-off test behaviour in the test unless a helper makes the intent materially clearer. Do not hide the behaviour under test behind broad, configurable abstractions.
+
 ## Core Commands

 ```bash
@@ -35,23 +41,25 @@ For focused type feedback on one file, use editor diagnostics instead of a file-

 `yarn dev:serve` also serves locally and supports `-c` for the core URL and `-p` for the port. Default local serving port is 8124.

-Dev server commands support `--background`, `--status`, `--stop`, and `--logs [--follow]`.
+Dev server commands support `--background`, `--status`, `--stop`, and `--logs [--follow]`. Prefer managed background mode while iterating so the watcher stays available across test runs without occupying the terminal.

 ## Playwright E2E

-Each suite has its own dev server port. Playwright reuses an existing server locally when the port is already running; otherwise it performs a slow full build. The rspack watcher recompiles on save, so reruns should not need a restart.
+Each suite has its own dev server port. Prefer running the relevant server in the background while iterating. Playwright reuses it when the port is already running; otherwise it performs a slow full build. The rspack watcher recompiles on save, so reruns should not need a restart.

 Start the relevant suite server, then run that suite:

-| Suite   | Server                          | Test command            |
-| ------- | ------------------------------- | ----------------------- |
-| App     | `yarn test:e2e:app:dev` on 8095 | `yarn test:e2e:app`     |
-| Demo    | `yarn dev:demo` on 8090         | `yarn test:e2e:demo`    |
-| Gallery | `yarn dev:gallery` on 8100      | `yarn test:e2e:gallery` |
+| Suite   | Background server                            | Test command            |
+| ------- | -------------------------------------------- | ----------------------- |
+| App     | `yarn test:e2e:app:dev --background` on 8095 | `yarn test:e2e:app`     |
+| Demo    | `yarn dev:demo --background` on 8090         | `yarn test:e2e:demo`    |
+| Gallery | `yarn dev:gallery --background` on 8100      | `yarn test:e2e:gallery` |

-Server reuse and `--stop` use the `/__ha_dev_status` health check, so starting or stopping twice is harmless.
+Use the same server command with `--status`, `--logs [--follow]`, or `--stop` to manage it. Server reuse and `--stop` use the `/__ha_dev_status` health check, so starting or stopping twice is harmless.

-Use `-g "<title>" --project=chromium` to narrow a run. `yarn test:e2e` runs all three suites. Run suites directly; piping through output truncation hides progress and failures.
+Local runs against a watched development server do not always match CI's clean build artifacts, environment, sharding, or worker configuration. Use background servers for the fast iteration loop, but confirm the relevant CI jobs complete successfully before considering E2E changes verified.
+
+Use `-g "<title>" --project=chromium` to narrow a run. `yarn test:e2e` runs all three suites in parallel when every managed server is available, otherwise it runs them sequentially to prevent cold builds racing over shared generated assets. Run suites directly; piping through output truncation hides progress and failures.

 The app suite uses a stripped-down harness for e2e. Demo and gallery use their normal dev servers.

@@ -18,6 +18,10 @@ runs:
        node-version-file: ".nvmrc"
        cache: ${{ inputs.cache == 'true' && 'yarn' || '' }}

+    - name: Enable Corepack
+      shell: bash
+      run: corepack enable
+
    - name: Install dependencies
      shell: bash
      run: yarn install ${{ inputs.immutable == 'true' && '--immutable' || '' }}
@@ -22,7 +22,7 @@ jobs:
    if: github.event_name != 'push' || github.ref_name != 'master'
    environment:
      name: Demo Development
-      url: ${{ steps.deploy.outputs.unique_deploy_url }}
+      url: ${{ steps.deploy.outputs.netlify_url }}
    steps:
      - name: Check out files from GitHub
        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
@@ -38,8 +38,9 @@ jobs:
      - name: Build demo
        uses: ./.github/actions/build
        with:
-          target: build-demo
+          target: build-demo-e2e
          github-token: ${{ secrets.GITHUB_TOKEN }}
+          is-test: true

      - name: Upload demo build
        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
@@ -65,8 +66,9 @@ jobs:
      - name: Build e2e test app
        uses: ./.github/actions/build
        with:
-          target: build-e2e-test-app
+          target: build-e2e-test-app-e2e
          github-token: ${{ secrets.GITHUB_TOKEN }}
+          is-test: true

      - name: Upload e2e test app build
        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
@@ -103,15 +105,27 @@ jobs:
          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]
+  # ── Run Playwright tests against Chromium ──────────────────────────────────
+  e2e-demo:
+    name: E2E demo (${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
+    needs:
+      - build-demo
    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
+    container:
+      image: mcr.microsoft.com/playwright:v1.61.1-noble
+      options: --user 1001 --ipc=host
+    defaults:
+      run:
+        shell: bash
+    timeout-minutes: 20
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex:
+          - 1
+          - 2
+        shardTotal:
+          - 2
    steps:
      - name: Check out files from GitHub
        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
@@ -121,60 +135,133 @@ jobs:
      - name: Setup Node and install
        uses: ./.github/actions/setup

-      # Resolve the installed Playwright version so the browser cache tracks
-      # Playwright itself, not every unrelated dependency bump.
-      - name: Resolve Playwright version
-        id: playwright-version
-        run: echo "version=$(node -p 'require("@playwright/test/package.json").version')" >> "$GITHUB_OUTPUT"
-
-      # Cache the downloaded browser build keyed on the installed Playwright
-      # version, so re-runs skip the ~170 MB download unless Playwright changes.
-      - name: Cache Playwright browsers
-        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
-        with:
-          path: ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}
-
-      - 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: Run Playwright demo tests
+        run: yarn test:e2e:demo --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+        timeout-minutes: 15
+
+      - name: Upload demo blob report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        if: always()
+        with:
+          name: blob-report-demo-${{ matrix.shardIndex }}
+          path: test/e2e/reports/demo/
+          if-no-files-found: warn
+          retention-days: 3
+
+  e2e-app:
+    name: E2E app (${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
+    needs:
+      - build-e2e-test-app
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.61.1-noble
+      options: --user 1001 --ipc=host
+    defaults:
+      run:
+        shell: bash
+    timeout-minutes: 20
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex:
+          - 1
+          - 2
+          - 3
+          - 4
+        shardTotal:
+          - 4
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
+
      - 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: Run Playwright app tests
+        run: yarn test:e2e:app --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+        timeout-minutes: 15
+
+      - name: Upload app blob report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        if: always()
+        with:
+          name: blob-report-app-${{ matrix.shardIndex }}
+          path: test/e2e/reports/app/
+          if-no-files-found: warn
+          retention-days: 3
+
+  e2e-gallery:
+    name: E2E gallery (${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
+    needs:
+      - build-gallery
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.61.1-noble
+      options: --user 1001 --ipc=host
+    defaults:
+      run:
+        shell: bash
+    timeout-minutes: 20
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex:
+          - 1
+          - 2
+          - 3
+          - 4
+        shardTotal:
+          - 4
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
+
      - 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
+      - name: Run Playwright gallery tests
+        run: yarn test:e2e:gallery --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
        timeout-minutes: 15

-      - name: Upload blob report
+      - name: Upload gallery blob report
        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
        if: always()
        with:
-          name: blob-report-local
-          path: test/e2e/reports/
+          name: blob-report-gallery-${{ matrix.shardIndex }}
+          path: test/e2e/reports/gallery/
+          if-no-files-found: warn
          retention-days: 3

-  # ── Merge local blob reports and post PR comment ───────────────────────────
  report:
    name: Report
-    needs: [e2e-local]
+    needs:
+      - e2e-demo
+      - e2e-app
+      - e2e-gallery
    runs-on: ubuntu-latest
-    if: ${{ !cancelled() }}
+    if: ${{ always() }}
    permissions:
      contents: read
      pull-requests: write
@@ -187,12 +274,26 @@ jobs:
      - name: Setup Node and install
        uses: ./.github/actions/setup

-      - name: Download blob report (local)
+      - name: Download demo blob reports
        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
        continue-on-error: true
        with:
-          name: blob-report-local
-          path: test/e2e/reports/
+          pattern: blob-report-demo-*
+          path: test/e2e/reports/demo/
+
+      - name: Download app blob reports
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        continue-on-error: true
+        with:
+          pattern: blob-report-app-*
+          path: test/e2e/reports/app/
+
+      - name: Download gallery blob reports
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        continue-on-error: true
+        with:
+          pattern: blob-report-gallery-*
+          path: test/e2e/reports/gallery/

      - name: Stage blobs for merge
        run: node test/e2e/collect-blob-reports.mjs
@@ -209,7 +310,11 @@ jobs:
          retention-days: 14

      - name: Post report to PR
-        if: github.event_name == 'pull_request' && needs.e2e-local.result == 'failure'
+        if: >-
+          github.event_name == 'pull_request' &&
+          (needs.e2e-demo.result == 'failure' ||
+          needs.e2e-app.result == 'failure' ||
+          needs.e2e-gallery.result == 'failure')
        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
        with:
          script: |
@@ -217,3 +322,19 @@ jobs:
              `${process.env.GITHUB_WORKSPACE}/test/e2e/post-report-comment.mjs`
            );
            await postReportComment({ github, context, core });
+
+      - name: Check suite results
+        run: |
+          failed=0
+          for suite in \
+            "demo:${{ needs.e2e-demo.result }}" \
+            "app:${{ needs.e2e-app.result }}" \
+            "gallery:${{ needs.e2e-gallery.result }}"; do
+            name="${suite%%:*}"
+            result="${suite#*:}"
+            echo "E2E ${name}: ${result}"
+            if [ "$result" != "success" ]; then
+              failed=1
+            fi
+          done
+          exit "$failed"
@@ -232,7 +232,7 @@ module.exports.config = {
    };
  },

-  demo({ isProdBuild, latestBuild, isStatsBuild }) {
+  demo({ isProdBuild, latestBuild, isStatsBuild, isTestBuild }) {
    return {
      name: "demo" + nameSuffix(latestBuild),
      entry: {
@@ -247,6 +247,7 @@ module.exports.config = {
      isProdBuild,
      latestBuild,
      isStatsBuild,
+      isTestBuild,
    };
  },

@@ -306,7 +307,7 @@ module.exports.config = {
    };
  },

-  e2eTestApp({ isProdBuild, latestBuild, isStatsBuild }) {
+  e2eTestApp({ isProdBuild, latestBuild, isStatsBuild, isTestBuild }) {
    return {
      name: "e2e-test-app" + nameSuffix(latestBuild),
      entry: {
@@ -321,6 +322,7 @@ module.exports.config = {
      isProdBuild,
      latestBuild,
      isStatsBuild,
+      isTestBuild,
    };
  },
 };
@@ -42,6 +42,22 @@ gulp.task(
  )
 );

+gulp.task(
+  "build-demo-e2e",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-demo",
+    // Cast needs to be backwards compatible and older HA has no translations
+    "translations-enable-merge-backend",
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    "copy-static-demo",
+    "rspack-prod-demo-e2e",
+    "gen-pages-demo-prod-e2e"
+  )
+);
+
 gulp.task(
  "analyze-demo",
  gulp.series(
@@ -39,3 +39,18 @@ gulp.task(
    "gen-pages-e2e-test-app-prod"
  )
 );
+
+gulp.task(
+  "build-e2e-test-app-e2e",
+  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-e2e",
+    "gen-pages-e2e-test-app-prod"
+  )
+);
@@ -225,6 +225,16 @@ gulp.task(
  )
 );

+gulp.task(
+  "gen-pages-demo-prod-e2e",
+  genPagesProdTask(
+    DEMO_PAGE_ENTRIES,
+    paths.demo_dir,
+    paths.demo_output_root,
+    paths.demo_output_latest
+  )
+);
+
 const GALLERY_PAGE_ENTRIES = { "index.html": ["entrypoint"] };

 gulp.task(
@@ -29,7 +29,7 @@ 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.8.0",
+    version: "5.7.0",
    licenseFile: "license-mit",
  },
 ];
@@ -177,6 +177,18 @@ gulp.task("rspack-prod-demo", () =>
    bothBuilds(createDemoConfig, {
      isProdBuild: true,
      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
+    })
+  )
+);
+
+gulp.task("rspack-prod-demo-e2e", () =>
+  prodBuild(
+    createDemoConfig({
+      isProdBuild: true,
+      latestBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
    })
  )
 );
@@ -269,6 +281,18 @@ gulp.task("rspack-prod-e2e-test-app", () =>
    bothBuilds(createE2eTestAppConfig, {
      isProdBuild: true,
      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
+    })
+  )
+);
+
+gulp.task("rspack-prod-e2e-test-app-e2e", () =>
+  prodBuild(
+    createE2eTestAppConfig({
+      isProdBuild: true,
+      latestBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
    })
  )
 );
@@ -387,9 +387,14 @@ const createAppConfig = ({
    bundle.config.app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild })
  );

-const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+const createDemoConfig = ({
+  isProdBuild,
+  latestBuild,
+  isStatsBuild,
+  isTestBuild,
+}) =>
  createRspackConfig(
-    bundle.config.demo({ isProdBuild, latestBuild, isStatsBuild })
+    bundle.config.demo({ isProdBuild, latestBuild, isStatsBuild, isTestBuild })
  );

 const createCastConfig = ({ isProdBuild, latestBuild }) =>
@@ -401,9 +406,19 @@ const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
 const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
  createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));

-const createE2eTestAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+const createE2eTestAppConfig = ({
+  isProdBuild,
+  latestBuild,
+  isStatsBuild,
+  isTestBuild,
+}) =>
  createRspackConfig(
-    bundle.config.e2eTestApp({ isProdBuild, latestBuild, isStatsBuild })
+    bundle.config.e2eTestApp({
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+      isTestBuild,
+    })
  );

 module.exports = {
@@ -89,7 +89,7 @@
    "@vvo/tzdb": "6.198.0",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
    "@webcomponents/webcomponentsjs": "2.8.0",
-    "barcode-detector": "3.2.1",
+    "barcode-detector": "3.2.0",
    "cally": "0.9.2",
    "color-name": "2.1.0",
    "comlink": "4.4.2",
@@ -102,7 +102,7 @@
    "dialog-polyfill": "0.5.6",
    "echarts": "6.1.0",
    "element-internals-polyfill": "3.0.2",
-    "fuse.js": "7.5.0",
+    "fuse.js": "7.4.2",
    "gulp-zopfli-green": "7.0.0",
    "hls.js": "1.6.16",
    "home-assistant-js-websocket": "9.6.0",
@@ -146,7 +146,7 @@
    "@bundle-stats/plugin-webpack-filter": "4.22.2",
    "@eslint/js": "10.0.1",
    "@html-eslint/eslint-plugin": "0.64.0",
-    "@lokalise/node-api": "16.1.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",
@@ -211,7 +211,7 @@
    "terser-webpack-plugin": "5.6.1",
    "ts-lit-plugin": "2.0.2",
    "typescript": "6.0.3",
-    "typescript-eslint": "8.64.0",
+    "typescript-eslint": "8.63.0",
    "vite-tsconfig-paths": "6.1.1",
    "vitest": "4.1.10",
    "webpack-stats-plugin": "1.1.3",
@@ -58,6 +58,17 @@
      "depNameTemplate": "rhysd/actionlint",
      "datasourceTemplate": "github-releases",
      "extractVersionTemplate": "^v(?<version>.+)$"
+    },
+    {
+      "description": "Keep Playwright CI container image up to date",
+      "customType": "regex",
+      "managerFilePatterns": ["/^\\.github/workflows/e2e\\.yaml$/"],
+      "matchStrings": [
+        "mcr\\.microsoft\\.com/playwright:(?<currentValue>v\\d+\\.\\d+\\.\\d+-noble)"
+      ],
+      "depNameTemplate": "mcr.microsoft.com/playwright",
+      "datasourceTemplate": "docker",
+      "versioningTemplate": "regex:^v(?<major>\\d+)\\.(?<minor>\\d+)\\.(?<patch>\\d+)-(?<compatibility>noble)$"
    }
  ],
  "packageRules": [
@@ -86,6 +97,11 @@
      "description": "Group date-fns with dependent timezone package",
      "groupName": "date-fns",
      "matchPackageNames": ["date-fns", "date-fns-tz"]
+    },
+    {
+      "description": "Group Playwright package and CI container updates",
+      "groupName": "Playwright",
+      "matchPackageNames": ["@playwright/test", "mcr.microsoft.com/playwright"]
    }
  ]
 }
@@ -51,9 +51,8 @@ class StorageClass {
    storageKey: string,
    callback: Callback
  ): UnsubscribeFunc {
-    const listeners = this._listeners[storageKey];
-    if (listeners) {
-      listeners.push(callback);
+    if (this._listeners[storageKey]) {
+      this._listeners[storageKey].push(callback);
    } else {
      this._listeners[storageKey] = [callback];
    }
@@ -1,53 +1,4 @@
-// Unanchored regex fragments, shared as the single source of truth for both
-// the boolean validators below and the HTML `pattern` attribute (the browser
-// anchors a pattern as `^(?:…)$`).
-const IPV4 =
-  "(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)";
+const regexp =
+  /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

-const IPV6 =
-  "(?:([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|::(ffff(:0{1,4})?:)?((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))";
-
-// CIDR prefix lengths: 0-32 for IPv4, 0-128 for IPv6.
-const IPV4_PREFIX = "(?:3[0-2]|[12]?[0-9])";
-const IPV6_PREFIX = "(?:12[0-8]|1[01][0-9]|[1-9]?[0-9])";
-
-// IPv4 or IPv6 address.
-export const IP_ADDRESS_PATTERN = `${IPV4}|${IPV6}`;
-
-// IPv4/IPv6 address, optionally with a CIDR prefix (network).
-export const IP_ADDRESS_OR_NETWORK_PATTERN = `${IPV4}(?:/${IPV4_PREFIX})?|${IPV6}(?:/${IPV6_PREFIX})?`;
-
-const anchored = (pattern: string): RegExp => new RegExp(`^(?:${pattern})$`);
-
-const ipv4Regexp = anchored(IPV4);
-const ipv6Regexp = anchored(IPV6);
-
-// IPv4 address, e.g. 192.168.1.10
-export const isIPAddress = (input: string): boolean => ipv4Regexp.test(input);
-
-// IPv6 address, e.g. fe80::85d:e82c:9446:7995
-export const isIPv6Address = (input: string): boolean => ipv6Regexp.test(input);
-
-// IPv4 or IPv6 address
-export const isIPAddressV4OrV6 = (input: string): boolean =>
-  isIPAddress(input) || isIPv6Address(input);
-
-// IP network in CIDR notation, e.g. 192.168.1.0/24 or fd00::/8
-export const isIPNetwork = (input: string): boolean => {
-  const parts = input.split("/");
-  if (parts.length !== 2) {
-    return false;
-  }
-  const [address, prefix] = parts;
-  if (!/^\d{1,3}$/.test(prefix)) {
-    return false;
-  }
-  const prefixLength = Number(prefix);
-  if (isIPAddress(address)) {
-    return prefixLength >= 0 && prefixLength <= 32;
-  }
-  if (isIPv6Address(address)) {
-    return prefixLength >= 0 && prefixLength <= 128;
-  }
-  return false;
-};
+export const isIPAddress = (input: string): boolean => regexp.test(input);
@@ -33,12 +33,13 @@ const extractVarFromBase = (
  varName: string,
  baseVars: Record<string, string>
 ): string | undefined => {
-  const value = baseVars[varName];
-  if (value && value.startsWith("var(")) {
-    const baseVarName = value.substring(6, value.length - 1).trim();
+  if (baseVars[varName] && baseVars[varName].startsWith("var(")) {
+    const baseVarName = baseVars[varName]
+      .substring(6, baseVars[varName].length - 1)
+      .trim();
    return extractVarFromBase(baseVarName, baseVars);
  }
-  return value;
+  return baseVars[varName];
 };

 /**
@@ -73,40 +73,6 @@ interface ClockDatePartSectionData {
  items: PickerComboBoxItem[];
 }

-/**
- * Filters out sections whose group already has a value in `value`, so only
- * one non-separator value per group can be selected in the picker. The whole
- * group of the item at `excludeIndex` (the one being edited) stays
- * selectable, even if that group has more than one value in `value` (e.g. a
- * pre-existing config authored outside the picker via YAML).
- * The separator group is always kept.
- */
-export const getAvailableClockDatePartSections = (
-  sections: ClockDatePartSectionData[],
-  value: string[],
-  excludeIndex?: number
-): ClockDatePartSectionData[] => {
-  const editedItem = excludeIndex != null ? value[excludeIndex] : undefined;
-  const editedSection = editedItem
-    ? getClockDatePartSection(editedItem as ClockCardDatePart)
-    : undefined;
-
-  const usedSections = new Set<ClockDatePartSection>();
-
-  value.forEach((item) => {
-    const section = getClockDatePartSection(item as ClockCardDatePart);
-
-    if (section !== "separator" && section !== editedSection) {
-      usedSections.add(section);
-    }
-  });
-
-  return sections.filter(
-    (sectionData) =>
-      sectionData.id === "separator" || !usedSections.has(sectionData.id)
-  );
-};
-
 interface ClockDatePartValueItem {
  key: string;
  item: string;
@@ -137,17 +103,12 @@ export class HaClockDateFormatPicker extends LitElement {

  @query("ha-generic-picker", true) private _picker?: HaGenericPicker;

-  @state() private _editIndex?: number;
+  private _editIndex?: number;

  protected render() {
    const value = this._value;
    const valueItems = this._getValueItems(value);
    const sections = this._buildSections();
-    const pickerSections = getAvailableClockDatePartSections(
-      sections,
-      value,
-      this._editIndex
-    );

    return html`
      ${this.label ? html`<label>${this.label}</label>` : nothing}
@@ -156,8 +117,8 @@ export class HaClockDateFormatPicker extends LitElement {
        .disabled=${this.disabled}
        .required=${this.required && !value.length}
        .value=${this._getPickerValue()}
-        .sections=${this._getSectionHeaders(pickerSections)}
-        .getItems=${this._getItems(pickerSections)}
+        .sections=${this._getSectionHeaders(sections)}
+        .getItems=${this._getItems(sections)}
        @value-changed=${this._pickerValueChanged}
      >
        <div slot="field" class="container">
@@ -1,73 +0,0 @@
-import type {
-  HaFormBaseSchema,
-  HaFormCondition,
-  HaFormDataContainer,
-  HaFormFieldCondition,
-  HaFormSchema,
-} from "./types";
-
-const isEmpty = (value: unknown): boolean =>
-  value === undefined || value === null || value === "";
-
-const matchFieldCondition = (
-  condition: HaFormFieldCondition,
-  data: HaFormDataContainer | undefined
-): boolean => {
-  const actual = data?.[condition.field];
-  switch (condition.operator ?? "eq") {
-    case "eq":
-      return actual === condition.value;
-    case "not_eq":
-      return actual !== condition.value;
-    case "in":
-      return (
-        Array.isArray(condition.value) &&
-        condition.value.includes(actual as any)
-      );
-    case "not_in":
-      return (
-        Array.isArray(condition.value) &&
-        !condition.value.includes(actual as any)
-      );
-    case "exists":
-      return !isEmpty(actual);
-    case "not_exists":
-      return isEmpty(actual);
-    default:
-      return false;
-  }
-};
-
-export const evaluateCondition = (
-  condition: HaFormCondition,
-  data: HaFormDataContainer | undefined
-): boolean => {
-  if ("condition" in condition) {
-    switch (condition.condition) {
-      case "and":
-        return condition.conditions.every((c) => evaluateCondition(c, data));
-      case "or":
-        return condition.conditions.some((c) => evaluateCondition(c, data));
-      case "not":
-        return !condition.conditions.some((c) => evaluateCondition(c, data));
-      default:
-        return false;
-    }
-  }
-  return matchFieldCondition(condition, data);
-};
-
-export const isFieldHidden = (
-  schema: HaFormSchema,
-  data: HaFormDataContainer | undefined
-): boolean => {
-  const { hidden } = schema as HaFormBaseSchema;
-  if (!hidden) {
-    return false;
-  }
-  if (hidden === true) {
-    return true;
-  }
-  const conditions = Array.isArray(hidden) ? hidden : [hidden];
-  return conditions.every((condition) => evaluateCondition(condition, data));
-};
@@ -2,7 +2,6 @@ import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, queryAll } from "lit/decorators";
 import type { HomeAssistant } from "../../types";
-import { isFieldHidden } from "./conditions";
 import "./ha-form";
 import type { HaForm } from "./ha-form";
 import type {
@@ -69,21 +68,19 @@ export class HaFormGrid extends LitElement implements HaFormElement {

  protected render(): TemplateResult {
    return html`
-      ${this.schema.schema
-        .filter((item) => !isFieldHidden(item, this.data))
-        .map(
-          (item) => html`
-            <ha-form
-              .hass=${this.hass}
-              .data=${this.data}
-              .schema=${[item]}
-              .disabled=${this.disabled}
-              .computeLabel=${this.computeLabel}
-              .computeHelper=${this.computeHelper}
-              .localizeValue=${this.localizeValue}
-            ></ha-form>
-          `
-        )}
+      ${this.schema.schema.map(
+        (item) => html`
+          <ha-form
+            .hass=${this.hass}
+            .data=${this.data}
+            .schema=${[item]}
+            .disabled=${this.disabled}
+            .computeLabel=${this.computeLabel}
+            .computeHelper=${this.computeHelper}
+            .localizeValue=${this.localizeValue}
+          ></ha-form>
+        `
+      )}
    `;
  }

@@ -1,12 +1,11 @@
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { HomeAssistant } from "../../types";
 import "../ha-alert";
 import "../ha-selector/ha-selector";
-import { isFieldHidden } from "./conditions";
 import type { HaFormDataContainer, HaFormElement, HaFormSchema } from "./types";

 const LOAD_ELEMENTS = {
@@ -99,11 +98,7 @@ export class HaForm extends LitElement implements HaFormElement {
    let isValid = true;
    let firstInvalidElement: HTMLElement | undefined;

-    const visibleSchema = this.schema.filter(
-      (item) => !isFieldHidden(item, this.data)
-    );
-
-    visibleSchema.forEach((item, index) => {
+    this.schema.forEach((item, index) => {
      const element = elements[index];
      if (!element) {
        return;
@@ -169,10 +164,6 @@ export class HaForm extends LitElement implements HaFormElement {
            : ""
        }
        ${this.schema.map((item) => {
-          if (isFieldHidden(item, this.data)) {
-            return nothing;
-          }
-
          const error = getError(this.error, item);
          const warning = getWarning(this.warning, item);

@@ -22,9 +22,6 @@ export interface HaFormBaseSchema {
  default?: HaFormData;
  required?: boolean;
  disabled?: boolean;
-  // Field is hidden while the condition holds. Serializable so it can be
-  // shared with the backend and other renderers.
-  hidden?: boolean | HaFormCondition | HaFormCondition[];
  description?: {
    suffix?: string;
    // This value will be set initially when form is loaded
@@ -33,36 +30,6 @@ export interface HaFormBaseSchema {
  context?: Record<string, string>;
 }

-export type HaFormConditionOperator =
-  "eq" | "not_eq" | "in" | "not_in" | "exists" | "not_exists";
-
-export interface HaFormFieldCondition {
-  field: string;
-  operator?: HaFormConditionOperator;
-  value?: HaFormData | readonly HaFormData[];
-}
-
-export interface HaFormAndCondition {
-  condition: "and";
-  conditions: readonly HaFormCondition[];
-}
-
-export interface HaFormOrCondition {
-  condition: "or";
-  conditions: readonly HaFormCondition[];
-}
-
-export interface HaFormNotCondition {
-  condition: "not";
-  conditions: readonly HaFormCondition[];
-}
-
-export type HaFormCondition =
-  | HaFormFieldCondition
-  | HaFormAndCondition
-  | HaFormOrCondition
-  | HaFormNotCondition;
-
 export interface HaFormGridSchema extends HaFormBaseSchema {
  type: "grid";
  flatten?: boolean;
@@ -181,49 +181,49 @@ export class HaSelectorSelector extends LitElement {
    return true;
  }

-  private _schema = memoizeOne((choice: string, localize: LocalizeFunc) => {
-    const schemas = SELECTOR_SCHEMAS[choice];
-    return [
-      {
-        name: "type",
-        required: true,
-        selector: {
-          select: {
-            mode: "dropdown",
-            options: Object.keys(SELECTOR_SCHEMAS)
-              .concat("manual")
-              .map((key) => ({
-                label:
-                  localize(
-                    `ui.components.selectors.selector.types.${key}` as LocalizeKeys
-                  ) || key,
-                value: key,
-              })),
+  private _schema = memoizeOne(
+    (choice: string, localize: LocalizeFunc) =>
+      [
+        {
+          name: "type",
+          required: true,
+          selector: {
+            select: {
+              mode: "dropdown",
+              options: Object.keys(SELECTOR_SCHEMAS)
+                .concat("manual")
+                .map((key) => ({
+                  label:
+                    localize(
+                      `ui.components.selectors.selector.types.${key}` as LocalizeKeys
+                    ) || key,
+                  value: key,
+                })),
+            },
          },
        },
-      },
-      ...(choice === "manual"
-        ? ([
-            {
-              name: "manual",
-              selector: { object: {} },
-            },
-          ] as const)
-        : []),
-      ...(schemas
-        ? schemas.length > 1
-          ? [
+        ...(choice === "manual"
+          ? ([
              {
-                name: "",
-                type: "expandable",
-                title: localize("ui.components.selectors.selector.options"),
-                schema: schemas,
+                name: "manual",
+                selector: { object: {} },
              },
-            ]
-          : schemas
-        : []),
-    ] as const;
-  });
+            ] as const)
+          : []),
+        ...(SELECTOR_SCHEMAS[choice]
+          ? SELECTOR_SCHEMAS[choice].length > 1
+            ? [
+                {
+                  name: "",
+                  type: "expandable",
+                  title: localize("ui.components.selectors.selector.options"),
+                  schema: SELECTOR_SCHEMAS[choice],
+                },
+              ]
+            : SELECTOR_SCHEMAS[choice]
+          : []),
+      ] as const
+  );

  protected render() {
    let data;
@@ -28,10 +28,6 @@ export class HaTextSelector extends LitElement {

  @query("ha-input, ha-textarea") private _input?: HTMLInputElement;

-  @query("ha-input-multi") private _inputMulti?: {
-    reportValidity: () => boolean;
-  };
-
  public async focus() {
    await this.updateComplete;
    this._input?.focus();
@@ -39,7 +35,7 @@ export class HaTextSelector extends LitElement {

  public reportValidity(): boolean {
    if (this.selector.text?.multiple) {
-      return this._inputMulti?.reportValidity() ?? true;
+      return true;
    }
    return this._input?.reportValidity() ?? true;
  }
@@ -56,8 +52,6 @@ export class HaTextSelector extends LitElement {
          .inputPrefix=${this.selector.text?.prefix}
          .helper=${this.helper}
          .autocomplete=${this.selector.text?.autocomplete}
-          .pattern=${this.selector.text?.pattern}
-          .validationMessage=${this.selector.text?.validation_message}
          @value-changed=${this._handleChange}
        >
        </ha-input-multi>
@@ -86,9 +80,6 @@ export class HaTextSelector extends LitElement {
      .hint=${this.helper}
      .disabled=${this.disabled}
      .type=${this.selector.text?.type}
-      .pattern=${this.selector.text?.pattern}
-      .validationMessage=${this.selector.text?.validation_message}
-      .autoValidate=${this.selector.text?.pattern !== undefined}
      @input=${this._handleChange}
      @change=${this._handleChange}
      .label=${this.label || ""}
@@ -305,10 +305,6 @@ export class HaServiceControl extends LitElement {
    ) {
      return null;
    }
-    const isPrimaryEntity = (entityId: string) => {
-      const entity = this.hass.entities[entityId];
-      return !entity?.entity_category && !entity?.hidden;
-    };
    const targetEntities =
      ensureArray(
        value?.target?.entity_id || value?.data?.entity_id
@@ -337,7 +333,11 @@ export class HaServiceControl extends LitElement {
          targetSelector
        );
        targetDevices.push(...expanded.devices);
-        const primaryEntities = expanded.entities.filter(isPrimaryEntity);
+        const primaryEntities = expanded.entities.filter(
+          (entityId) =>
+            !this.hass.entities[entityId]?.entity_category &&
+            !this.hass.entities[entityId]?.hidden
+        );
        targetEntities.push(primaryEntities);
        targetAreas.push(...expanded.areas);
      });
@@ -362,7 +362,11 @@ export class HaServiceControl extends LitElement {
          this.hass.entities,
          targetSelector
        );
-        const primaryEntities = expanded.entities.filter(isPrimaryEntity);
+        const primaryEntities = expanded.entities.filter(
+          (entityId) =>
+            !this.hass.entities[entityId]?.entity_category &&
+            !this.hass.entities[entityId]?.hidden
+        );
        targetEntities.push(...primaryEntities);
        targetDevices.push(...expanded.devices);
      });
@@ -375,7 +379,11 @@ export class HaServiceControl extends LitElement {
          this.hass.entities,
          targetSelector
        );
-        const primaryEntities = expanded.entities.filter(isPrimaryEntity);
+        const primaryEntities = expanded.entities.filter(
+          (entityId) =>
+            !this.hass.entities[entityId]?.entity_category &&
+            !this.hass.entities[entityId]?.hidden
+        );
        targetEntities.push(...primaryEntities);
      });
    }
@@ -2,13 +2,7 @@ import { consume, type ContextType } from "@lit/context";
 import { mdiDeleteOutline, mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import {
-  customElement,
-  property,
-  query,
-  queryAll,
-  state,
-} from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { fireEvent } from "../../common/dom/fire_event";
 import { uid } from "../../common/util/uid";
@@ -56,13 +50,6 @@ class HaInputMulti extends LitElement {

  @property() public autocomplete?: string;

-  /** Regular expression each entry is validated against (HTML `pattern`). */
-  @property() public pattern?: string;
-
-  /** Message shown on an entry when it fails `pattern` validation. */
-  @property({ attribute: "validation-message" })
-  public validationMessage?: string;
-
  @property({ attribute: "add-label" }) public addLabel?: string;

  @property({ attribute: "remove-label" }) public removeLabel?: string;
@@ -83,8 +70,6 @@ class HaInputMulti extends LitElement {

  @query("ha-input[data-last]") private _lastInput?: HaInput;

-  @queryAll("ha-input") private _inputs?: NodeListOf<HaInput>;
-
  // Stable key per row, kept in sync with `value`. Because items are plain
  // strings we cannot use a WeakMap (as the object-based sortable lists do),
  // so we track keys in a parallel array. Keys stay fixed while a row is
@@ -104,16 +89,6 @@ class HaInputMulti extends LitElement {
    }
  }

-  public reportValidity(): boolean {
-    let valid = true;
-    this._inputs?.forEach((input) => {
-      if (!input.reportValidity()) {
-        valid = false;
-      }
-    });
-    return valid;
-  }
-
  protected render() {
    return html`
      <ha-sortable
@@ -134,9 +109,6 @@ class HaInputMulti extends LitElement {
                    .type=${this.inputType}
                    .autocomplete=${this.autocomplete}
                    .disabled=${this.disabled}
-                    .pattern=${this.pattern}
-                    .validationMessage=${this.validationMessage}
-                    .autoValidate=${this.pattern !== undefined}
                    dialogInitialFocus=${index}
                    .index=${index}
                    class="flex-auto"
@@ -213,14 +213,12 @@ export const findBatteryEntity = <T extends { entity_id: string }>(
  entities: T[]
 ): T | undefined => {
  const batteryEntities = entities
-    .filter((entity) => {
-      const state = states[entity.entity_id];
-      return (
-        state &&
-        state.attributes.device_class === "battery" &&
+    .filter(
+      (entity) =>
+        states[entity.entity_id] &&
+        states[entity.entity_id].attributes.device_class === "battery" &&
        batteryPriorities.includes(computeDomain(entity.entity_id))
-      );
-    })
+    )
    .sort(
      (a, b) =>
        batteryPriorities.indexOf(computeDomain(a.entity_id)) -
@@ -237,10 +235,11 @@ export const findBatteryChargingEntity = <T extends { entity_id: string }>(
  states: HomeAssistant["states"],
  entities: T[]
 ): T | undefined =>
-  entities.find((entity) => {
-    const state = states[entity.entity_id];
-    return state && state.attributes.device_class === "battery_charging";
-  });
+  entities.find(
+    (entity) =>
+      states[entity.entity_id] &&
+      states[entity.entity_id].attributes.device_class === "battery_charging"
+  );

 export const computeEntityRegistryName = (
  hass: HomeAssistant,
@@ -140,7 +140,7 @@ export interface HassioAddonSetOptionParams {
 export const reloadHassioAddons = async (hass: HomeAssistant) => {
  await hass.callWS({
    type: "supervisor/api",
-    endpoint: "/store/reload",
+    endpoint: "/addons/reload",
    method: "post",
  });
 };
@@ -21,21 +21,6 @@ export interface HttpConfigState {
  revert_at: string | null;
 }

-export const HTTP_CONFIG_FIELDS: (keyof HttpConfig)[] = [
-  "server_port",
-  "server_host",
-  "ssl_certificate",
-  "ssl_key",
-  "ssl_peer_certificate",
-  "ssl_profile",
-  "cors_allowed_origins",
-  "use_x_forwarded_for",
-  "trusted_proxies",
-  "use_x_frame_options",
-  "ip_ban_enabled",
-  "login_attempts_threshold",
-];
-
 export interface SaveHttpConfigResult {
  restart: boolean;
 }
@@ -325,34 +325,35 @@ export const getCategoryIcons = async <
  domain?: string,
  force = false
 ): Promise<CategoryType[T] | Record<string, CategoryType[T]> | undefined> => {
-  const categoryResources = resources[category];
  if (!domain) {
-    if (!force && categoryResources.all) {
-      return categoryResources.all as Promise<Record<string, CategoryType[T]>>;
+    if (!force && resources[category].all) {
+      return resources[category].all as Promise<
+        Record<string, CategoryType[T]>
+      >;
    }
-    categoryResources.all = getHassIcons(connection, category).then((res) => {
-      categoryResources.domains = res.resources as any;
+    resources[category].all = getHassIcons(connection, category).then((res) => {
+      resources[category].domains = res.resources as any;
      return res?.resources as Record<string, CategoryType[T]>;
    }) as any;
-    return categoryResources.all as Promise<Record<string, CategoryType[T]>>;
+    return resources[category].all as Promise<Record<string, CategoryType[T]>>;
  }
-  if (!force && domain in categoryResources.domains) {
-    return categoryResources.domains[domain] as Promise<CategoryType[T]>;
+  if (!force && domain in resources[category].domains) {
+    return resources[category].domains[domain] as Promise<CategoryType[T]>;
  }
-  if (categoryResources.all && !force) {
-    await categoryResources.all;
-    if (domain in categoryResources.domains) {
-      return categoryResources.domains[domain] as Promise<CategoryType[T]>;
+  if (resources[category].all && !force) {
+    await resources[category].all;
+    if (domain in resources[category].domains) {
+      return resources[category].domains[domain] as Promise<CategoryType[T]>;
    }
  }
  if (!isComponentLoaded(hassConfig, domain)) {
    return undefined;
  }
  const result = getHassIcons(connection, category, domain);
-  categoryResources.domains[domain] = result.then(
+  resources[category].domains[domain] = result.then(
    (res) => res?.resources[domain]
  ) as any;
-  return categoryResources.domains[domain] as Promise<CategoryType[T]>;
+  return resources[category].domains[domain] as Promise<CategoryType[T]>;
 };

 export const getServiceIcons = async (
@@ -531,10 +531,6 @@ export interface StringSelector {
    placeholder?: string;
    autocomplete?: string;
    multiple?: true;
-    // Regular expression the value must match (HTML `pattern`); with `multiple`
-    // every entry is validated. `validation_message` is shown when it fails.
-    pattern?: string;
-    validation_message?: string;
  } | null;
 }

@@ -80,26 +80,27 @@ class StepFlowMenu extends LitElement {
    return html`
      ${description ? html`<div class="content">${description}</div>` : nothing}
      <div class="options">
-        ${options.map((option) => {
-          const optionDescription = optionDescriptions[option];
-          return html`
+        ${options.map(
+          (option) => html`
            <ha-list-item
              hasMeta
              .step=${option}
              @click=${this._handleStep}
-              ?twoline=${optionDescription}
-              ?multiline-secondary=${optionDescription}
+              ?twoline=${optionDescriptions[option]}
+              ?multiline-secondary=${optionDescriptions[option]}
            >
              <span>${translations[option]}</span>
              ${
-                optionDescription
-                  ? html`<span slot="secondary"> ${optionDescription} </span>`
+                optionDescriptions[option]
+                  ? html`<span slot="secondary">
+                      ${optionDescriptions[option]}
+                    </span>`
                  : nothing
              }
              <ha-icon-next slot="meta"></ha-icon-next>
            </ha-list-item>
-          `;
-        })}
+          `
+        )}
      </div>
    `;
  }
@@ -1,27 +1,34 @@
-import { mdiArrowRight } from "@mdi/js";
 import { ERR_CONNECTION_LOST } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
 import { formatNumericDuration } from "../../common/datetime/format_duration";
 import { fireEvent } from "../../common/dom/fire_event";
-import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/ha-alert";
 import "../../components/ha-button";
 import "../../components/ha-dialog-footer";
 import "../../components/ha-dialog";
-import "../../components/ha-svg-icon";
 import type { HttpConfig } from "../../data/http";
-import {
-  HTTP_CONFIG_FIELDS,
-  promoteHttpConfig,
-  saveHttpConfig,
-} from "../../data/http";
+import { promoteHttpConfig, saveHttpConfig } from "../../data/http";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import type { HassDialog } from "../make-dialog-manager";
 import type { HttpPendingConfigDialogParams } from "./show-dialog-http-pending-config";

+const HTTP_FIELDS: (keyof HttpConfig)[] = [
+  "server_port",
+  "server_host",
+  "ssl_certificate",
+  "ssl_key",
+  "ssl_peer_certificate",
+  "ssl_profile",
+  "cors_allowed_origins",
+  "use_x_forwarded_for",
+  "trusted_proxies",
+  "use_x_frame_options",
+  "ip_ban_enabled",
+  "login_attempts_threshold",
+];
+
@customElement("dialog-http-pending-config")
 export class DialogHttpPendingConfig
  extends LitElement
@@ -50,10 +57,6 @@ export class DialogHttpPendingConfig
    this._error = undefined;
    this._reverted = false;
    this._startCountdown();
-    // The field labels live in the config panel fragment, which is not loaded
-    // yet when this dialog pops up on startup. Load it so the changed-field
-    // names resolve; the dialog re-renders once hass updates.
-    this.hass.loadFragmentTranslation("config");
  }

  public closeDialog(): boolean {
@@ -111,44 +114,17 @@ export class DialogHttpPendingConfig
      return [];
    }
    const { stable, pending } = this._params.state;
-    return HTTP_CONFIG_FIELDS.filter(
+    return HTTP_FIELDS.filter(
      (key) => JSON.stringify(stable[key]) !== JSON.stringify(pending[key])
    );
  }

-  private _formatValue(key: keyof HttpConfig, value: unknown): string {
-    if (value === undefined || value === null || value === "") {
-      return this.hass.localize("ui.dialogs.http_pending_config.not_set");
-    }
-    if (typeof value === "boolean") {
-      return this.hass.localize(value ? "ui.common.yes" : "ui.common.no");
-    }
-    if (Array.isArray(value)) {
-      return value.length
-        ? value.join(", ")
-        : this.hass.localize("ui.dialogs.http_pending_config.not_set");
-    }
-    if (key === "ssl_profile") {
-      return (
-        this.hass.localize(
-          `ui.panel.config.network.http.ssl_profile_${value}` as any
-        ) || String(value)
-      );
-    }
-    return String(value);
-  }
-
  protected render() {
    if (!this._params) {
      return nothing;
    }

    const changes = this._changedFields;
-    const { stable, pending } = this._params.state;
-    const rtl = computeRTL(
-      this.hass.language,
-      this.hass.translationMetadata.translations
-    );

    return html`
      <ha-dialog
@@ -211,25 +187,9 @@ export class DialogHttpPendingConfig
                    ${changes.map(
                      (key) => html`
                        <li>
-                          <span class="field">
-                            ${this.hass.localize(
-                              `ui.panel.config.network.http.fields.${key}` as any
-                            )}
-                          </span>
-                          <span class="values">
-                            <span class="old"
-                              >${this._formatValue(key, stable[key])}</span
-                            >
-                            <ha-svg-icon
-                              .path=${mdiArrowRight}
-                              style=${styleMap({
-                                transform: rtl ? "scaleX(-1)" : "",
-                              })}
-                            ></ha-svg-icon>
-                            <span class="new"
-                              >${this._formatValue(key, pending![key])}</span
-                            >
-                          </span>
+                          ${this.hass.localize(
+                            `ui.panel.config.network.http.fields.${key}` as any
+                          )}
                        </li>
                      `
                    )}
@@ -360,37 +320,15 @@ export class DialogHttpPendingConfig
        margin-bottom: var(--ha-space-2);
      }
      ul {
-        list-style: none;
        margin: 0 0 var(--ha-space-4) 0;
-        padding: 0;
+        padding-left: var(--ha-space-6);
+        padding-inline-start: var(--ha-space-6);
+        padding-inline-end: initial;
+        color: var(--secondary-text-color);
      }
      li {
-        padding: var(--ha-space-2) 0;
-        border-bottom: 1px solid var(--divider-color);
-      }
-      li:last-child {
-        border-bottom: none;
-      }
-      .field {
-        display: block;
-        font-weight: var(--ha-font-weight-medium);
        margin-bottom: var(--ha-space-1);
      }
-      .values {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: var(--ha-space-2);
-        color: var(--secondary-text-color);
-        word-break: break-word;
-      }
-      .values .new {
-        color: var(--primary-text-color);
-      }
-      .values ha-svg-icon {
-        --mdc-icon-size: 18px;
-        flex-shrink: 0;
-      }
      ha-alert {
        display: block;
        margin-top: var(--ha-space-4);
@@ -123,10 +123,6 @@ interface EMOutgoingMessageConnectionStatus extends EMMessage {
  payload: { event: string };
 }

-interface EMOutgoingMessageFrontendLoaded extends EMMessage {
-  type: "frontend/loaded"; // Fired once the launch screen is removed (connected and essential data loaded)
-}
-
 interface EMOutgoingMessageAppConfiguration extends EMMessage {
  type: "config_screen/show";
 }
@@ -205,7 +201,6 @@ type EMOutgoingMessageWithoutAnswer =
  | EMOutgoingMessageBarCodeNotify
  | EMOutgoingMessageBarCodeScan
  | EMOutgoingMessageConnectionStatus
-  | EMOutgoingMessageFrontendLoaded
  | EMOutgoingMessageExoplayerPlayHLS
  | EMOutgoingMessageExoplayerResize
  | EMOutgoingMessageExoplayerStop
@@ -120,7 +120,6 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
      this.render = this.renderHass;
      this.update = super.update;
      removeLaunchScreen();
-      this.hass.auth.external?.fireMessage({ type: "frontend/loaded" });
    }
    super.update(changedProps);
  }
@@ -321,10 +321,11 @@ export default class HaAutomationAddFromTarget extends LitElement {

      const floorAreas = emptyFloors
        ? undefined
-        : this._floorAreas.map((floor, index) => {
-            const floorEntry = entries[floor.id || `floor${TARGET_SEPARATOR}`];
-            return index === 0 && !floor.id
-              ? this._renderAreas(floorEntry.areas!)
+        : this._floorAreas.map((floor, index) =>
+            index === 0 && !floor.id
+              ? this._renderAreas(
+                  entries[floor.id || `floor${TARGET_SEPARATOR}`].areas!
+                )
              : this._renderItem(
                  !floor.id
                    ? this._i18n.localize(
@@ -334,14 +335,19 @@ export default class HaAutomationAddFromTarget extends LitElement {
                  floor.id || `floor${TARGET_SEPARATOR}`,
                  !floor.id,
                  !!floor.id && this._getSelectedTargetId(value) === floor.id,
-                  !floorEntry.open && !!Object.keys(floorEntry.areas!).length,
-                  floorEntry.open,
+                  !entries[floor.id || `floor${TARGET_SEPARATOR}`].open &&
+                    !!Object.keys(
+                      entries[floor.id || `floor${TARGET_SEPARATOR}`].areas!
+                    ).length,
+                  entries[floor.id || `floor${TARGET_SEPARATOR}`].open,
                  this._renderFloorIcon(floor as FloorNestedComboBoxItem),
-                  floorEntry.open
-                    ? this._renderAreas(floorEntry.areas!)
+                  entries[floor.id || `floor${TARGET_SEPARATOR}`].open
+                    ? this._renderAreas(
+                        entries[floor.id || `floor${TARGET_SEPARATOR}`].areas!
+                      )
                    : undefined
-                );
-          });
+                )
+          );

      return html`<ha-section-title
          >${this._i18n.localize(
@@ -505,69 +511,81 @@ export default class HaAutomationAddFromTarget extends LitElement {
      const items: TemplateResult[] = [];

      if (unassignedEntitiesLength) {
-        const entry = entries[`device${TARGET_SEPARATOR}`];
+        const open = entries[`device${TARGET_SEPARATOR}`].open;
        items.push(
          this._renderItem(
            this._i18n.localize("ui.components.target-picker.type.entities"),
            `device${TARGET_SEPARATOR}`,
            true,
            false,
-            !entry.open,
-            entry.open,
+            !open,
+            open,
            undefined,
-            entry.open
-              ? this._renderDomains(entry.devices!, "entity_")
+            entries[`device${TARGET_SEPARATOR}`].open
+              ? this._renderDomains(
+                  entries[`device${TARGET_SEPARATOR}`].devices!,
+                  "entity_"
+                )
              : undefined
          )
        );
      }

      if (unassignedHelpersLength) {
-        const entry = entries[`helper${TARGET_SEPARATOR}`];
+        const open = entries[`helper${TARGET_SEPARATOR}`].open;
        items.push(
          this._renderItem(
            this._i18n.localize("ui.panel.config.automation.editor.helpers"),
            `helper${TARGET_SEPARATOR}`,
            true,
            false,
-            !entry.open,
-            entry.open,
+            !open,
+            open,
            undefined,
-            entry.open
-              ? this._renderDomains(entry.devices!, "helper_")
+            entries[`helper${TARGET_SEPARATOR}`].open
+              ? this._renderDomains(
+                  entries[`helper${TARGET_SEPARATOR}`].devices!,
+                  "helper_"
+                )
              : undefined
          )
        );
      }

      if (unassignedDevicesLength) {
-        const entry = entries[`area${TARGET_SEPARATOR}`];
+        const open = entries[`area${TARGET_SEPARATOR}`].open;
        items.push(
          this._renderItem(
            this._i18n.localize("ui.components.target-picker.type.devices"),
            `area${TARGET_SEPARATOR}`,
            true,
            false,
-            !entry.open,
-            entry.open,
+            !open,
+            open,
            undefined,
-            entry.open ? this._renderDevices(entry.devices!) : undefined
+            entries[`area${TARGET_SEPARATOR}`].open
+              ? this._renderDevices(entries[`area${TARGET_SEPARATOR}`].devices!)
+              : undefined
          )
        );
      }

      if (unassignedServicesLength) {
-        const entry = entries[`service${TARGET_SEPARATOR}`];
+        const open = entries[`service${TARGET_SEPARATOR}`].open;
        items.push(
          this._renderItem(
            this._i18n.localize("ui.panel.config.automation.editor.services"),
            `service${TARGET_SEPARATOR}`,
            true,
            false,
-            !entry.open,
-            entry.open,
+            !open,
+            open,
            undefined,
-            entry.open ? this._renderDevices(entry.devices!) : undefined
+            entries[`service${TARGET_SEPARATOR}`].open
+              ? this._renderDevices(
+                  entries[`service${TARGET_SEPARATOR}`].devices!
+                )
+              : undefined
          )
        );
      }
@@ -214,14 +214,13 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(

      for (const component of components) {
        const componentDomain = component.split(".")[0];
-        const manifest = manifests[componentDomain];
        if (
          !entryDomains.has(componentDomain) &&
-          manifest &&
-          !manifest.config_flow &&
-          (!manifest.integration_type ||
+          manifests[componentDomain] &&
+          !manifests[componentDomain].config_flow &&
+          (!manifests[componentDomain].integration_type ||
            ["device", "hub", "service", "integration"].includes(
-              manifest.integration_type!
+              manifests[componentDomain].integration_type!
            ))
        ) {
          domains.add(componentDomain);
@@ -3,10 +3,6 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import {
-  IP_ADDRESS_OR_NETWORK_PATTERN,
-  IP_ADDRESS_PATTERN,
-} from "../../../common/string/is_ip_address";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
@@ -14,11 +10,7 @@ import "../../../components/ha-card";
 import "../../../components/ha-form/ha-form";
 import type { HaForm } from "../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../components/ha-form/types";
-import {
-  fetchHttpConfig,
-  HTTP_CONFIG_FIELDS,
-  saveHttpConfig,
-} from "../../../data/http";
+import { fetchHttpConfig, saveHttpConfig } from "../../../data/http";
 import type { HttpConfig } from "../../../data/http";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../resources/styles";
@@ -32,6 +24,10 @@ const SCHEMA = memoizeOne(
        required: true,
        selector: { number: { min: 1, max: 65535, mode: "box" } },
      },
+      {
+        name: "server_host",
+        selector: { text: { multiple: true } },
+      },
      {
        name: "ssl",
        type: "expandable",
@@ -85,15 +81,7 @@ const SCHEMA = memoizeOne(
          },
          {
            name: "trusted_proxies",
-            selector: {
-              text: {
-                multiple: true,
-                pattern: IP_ADDRESS_OR_NETWORK_PATTERN,
-                validation_message: localize(
-                  "ui.panel.config.network.http.invalid_network"
-                ),
-              },
-            },
+            selector: { text: { multiple: true } },
          },
        ],
      },
@@ -120,18 +108,6 @@ const SCHEMA = memoizeOne(
        flatten: true,
        title: localize("ui.panel.config.network.http.sections.advanced"),
        schema: [
-          {
-            name: "server_host",
-            selector: {
-              text: {
-                multiple: true,
-                pattern: IP_ADDRESS_PATTERN,
-                validation_message: localize(
-                  "ui.panel.config.network.http.invalid_host"
-                ),
-              },
-            },
-          },
          {
            name: "cors_allowed_origins",
            selector: { text: { multiple: true } },
@@ -189,9 +165,6 @@ class HaConfigHttpForm extends LitElement {

    const schema = SCHEMA(this.hass.localize);

-    const portChanged =
-      !!this._stable && this._config?.server_port !== this._stable.server_port;
-
    return html`
      <ha-card
        outlined
@@ -201,17 +174,6 @@ class HaConfigHttpForm extends LitElement {
          <p class="description">
            ${this.hass.localize("ui.panel.config.network.http.description")}
          </p>
-          ${
-            portChanged
-              ? html`
-                  <ha-alert alert-type="warning">
-                    ${this.hass.localize(
-                      "ui.panel.config.network.http.port_warning"
-                    )}
-                  </ha-alert>
-                `
-              : nothing
-          }
          ${
            this._error
              ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
@@ -356,7 +318,15 @@ class HaConfigHttpForm extends LitElement {
      ) {
        return;
      }
-      this._handleSaveError(err);
+      // voluptuous formats errors as "<message> @ data['<field>']".
+      // If a field is identified, mark it inline; otherwise show a card-level
+      // alert.
+      const fieldMatch = err.message?.match(/\bdata\['([^']+)'\]/);
+      if (fieldMatch) {
+        this._fieldErrors = { [fieldMatch[1]]: err.message };
+      } else {
+        this._error = err.message;
+      }
    } finally {
      this._saving = false;
    }
@@ -370,34 +340,6 @@ class HaConfigHttpForm extends LitElement {
    target?.scrollIntoView({ behavior: "smooth", block: "center" });
  }

-  private _handleSaveError(err: any): void {
-    const rawMessage =
-      (typeof err === "string" ? err : err?.message) ||
-      this.hass.localize("ui.panel.config.network.http.save_error");
-    // Voluptuous formats validation errors as
-    //   "<reason> @ data['config']['<field>'][<index>]. Got '<value>'"
-    // Strip the internal data path for display and pick the deepest known
-    // field name so it can also be flagged inline.
-    const message =
-      rawMessage.replace(/\s*@\s*data(\['[^']*'\]|\[\d+\])+/g, "").trim() ||
-      rawMessage;
-    const field = [...rawMessage.matchAll(/\['([^']+)'\]/g)]
-      .map((match) => match[1])
-      .reverse()
-      .find((name) => HTTP_CONFIG_FIELDS.includes(name as keyof HttpConfig)) as
-      keyof HttpConfig | undefined;
-
-    if (field) {
-      // Show a card-level alert too — the field may sit in a collapsed section.
-      this._error = `${this.hass.localize(
-        `ui.panel.config.network.http.fields.${field}` as any
-      )}: ${message}`;
-      this._fieldErrors = { [field]: message };
-    } else {
-      this._error = message;
-    }
-  }
-
  static get styles(): CSSResultGroup {
    return [
      haStyle,
@@ -635,13 +635,16 @@ export class HassioNetwork extends LitElement {
    const value = source.value as "disabled" | "auto" | "static";
    const version = (source as any).version as "ipv4" | "ipv6";

-    const iface = this._interface?.[version];
-    if (!value || !iface || iface.method === value) {
+    if (
+      !value ||
+      !this._interface ||
+      this._interface[version]!.method === value
+    ) {
      return;
    }
    this._dirty = true;

-    iface.method = value;
+    this._interface[version]!.method = value;
    this.requestUpdate("_interface");
  }

@@ -659,8 +662,7 @@ export class HassioNetwork extends LitElement {
    const version = (ev.target as any).version as "ipv4" | "ipv6";
    const id = source.id;

-    const iface = this._interface?.[version];
-    if (!value || !iface) {
+    if (!value || !this._interface?.[version]) {
      source.reportValidity();
      return;
    }
@@ -668,26 +670,31 @@ export class HassioNetwork extends LitElement {
    this._dirty = true;
    if (id === "address") {
      const index = (ev.target as any).index as number;
-      const { mask: oldMask } = parseAddress(iface.address![index]);
+      const { mask: oldMask } = parseAddress(
+        this._interface[version].address![index]
+      );
      const { mask } = parseAddress(value);
-      iface.address![index] = formatAddress(value, mask || oldMask || "");
+      this._interface[version].address![index] = formatAddress(
+        value,
+        mask || oldMask || ""
+      );
      this.requestUpdate("_interface");
    } else if (id === "netmask") {
      const index = (ev.target as any).index as number;
-      const { ip } = parseAddress(iface.address![index]);
-      iface.address![index] = formatAddress(ip, value);
+      const { ip } = parseAddress(this._interface[version].address![index]);
+      this._interface[version].address![index] = formatAddress(ip, value);
      this.requestUpdate("_interface");
    } else if (id === "prefix") {
      const index = (ev.target as any).index as number;
-      const { ip } = parseAddress(iface.address![index]);
-      iface.address![index] = `${ip}/${value}`;
+      const { ip } = parseAddress(this._interface[version].address![index]);
+      this._interface[version].address![index] = `${ip}/${value}`;
      this.requestUpdate("_interface");
    } else if (id === "nameserver") {
      const index = (ev.target as any).index as number;
-      iface.nameservers![index] = value;
+      this._interface[version].nameservers![index] = value;
      this.requestUpdate("_interface");
    } else {
-      iface[id] = value;
+      this._interface[version][id] = value;
    }
  }

@@ -326,11 +326,13 @@ class DialogSystemInformation extends LitElement {
        const keys: TemplateResult[] = [];

        for (const key of Object.keys(domainInfo.info)) {
-          const infoValue = domainInfo.info[key];
          let value: unknown;

-          if (infoValue && typeof infoValue === "object") {
-            const info = infoValue as SystemCheckValueObject;
+          if (
+            domainInfo.info[key] &&
+            typeof domainInfo.info[key] === "object"
+          ) {
+            const info = domainInfo.info[key] as SystemCheckValueObject;

            if (info.type === "pending") {
              value = html` <ha-spinner size="small"></ha-spinner> `;
@@ -361,7 +363,7 @@ class DialogSystemInformation extends LitElement {
              );
            }
          } else {
-            value = infoValue;
+            value = domainInfo.info[key];
          }

          keys.push(html`
@@ -429,11 +431,10 @@ class DialogSystemInformation extends LitElement {
      ];

      for (const key of Object.keys(domainInfo.info)) {
-        const infoValue = domainInfo.info[key];
        let value: unknown;

-        if (infoValue && typeof infoValue === "object") {
-          const info = infoValue as SystemCheckValueObject;
+        if (domainInfo.info[key] && typeof domainInfo.info[key] === "object") {
+          const info = domainInfo.info[key] as SystemCheckValueObject;

          if (info.type === "pending") {
            value = "pending";
@@ -447,7 +448,7 @@ class DialogSystemInformation extends LitElement {
            );
          }
        } else {
-          value = infoValue;
+          value = domainInfo.info[key];
        }
        if (first) {
          parts.push(`${key} | ${value}\n-- | --`);
@@ -49,8 +49,8 @@ import { resolveEntityIDs } from "../../data/selector";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { haStyle, haStyleScrollbar } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import { fileDownload } from "../../util/file_download";
 import { addEntitiesToLovelaceView } from "../lovelace/editor/add-entities-to-view";
-import { csvSafeString, csvDownload } from "../../util/csv";

@customElement("ha-panel-history")
 class HaPanelHistory extends LitElement {
@@ -443,8 +443,8 @@ class HaPanelHistory extends LitElement {
      return;
    }

+    const csv: string[] = [""]; // headers will be replaced later.
    const headers = ["entity_id", "state", "last_changed"];
-    const csv: string[][] = [[]]; // headers will be replaced later.
    const processedDomainAttributes = new Set<string>();
    const domainAttributes: Record<string, Record<string, number>> = {
      climate: {
@@ -486,7 +486,7 @@ class HaPanelHistory extends LitElement {

        if (entity.statistics) {
          for (const s of entity.statistics) {
-            csv.push([entityId, s.state, formatDate(s.last_changed)]);
+            csv.push(`${entityId},${s.state},${formatDate(s.last_changed)}\n`);
          }
        }

@@ -503,22 +503,25 @@ class HaPanelHistory extends LitElement {
            }
          }

-          csv.push(data);
+          csv.push(data.join(",") + "\n");
        }
      }
    }
    for (const timeline of this._mungedStateHistory.timeline) {
      const entityId = timeline.entity_id;
      for (const s of timeline.data) {
-        csv.push([
-          entityId,
-          csvSafeString(s.state),
-          formatDate(s.last_changed),
-        ]);
+        const safeState = /,|"/.test(s.state)
+          ? `"${s.state.replaceAll('"', '""')}"`
+          : s.state;
+        csv.push(`${entityId},${safeState},${formatDate(s.last_changed)}\n`);
      }
    }
-    csv[0] = headers;
-    csvDownload(csv, "history.csv");
+    csv[0] = headers.join(",") + "\n";
+    const blob = new Blob(csv, {
+      type: "text/csv",
+    });
+    const url = window.URL.createObjectURL(blob);
+    fileDownload(url, "history.csv");
  }

  private _suggestCard() {
@@ -100,10 +100,6 @@ export class HaLogbook extends LitElement {

  private _readyListenerAttached = false;

-  public getEntries(): LogbookEntry[] {
-    return this._logbookEntries || [];
-  }
-
  protected render() {
    if (!isComponentLoaded(this.hass.config, "logbook")) {
      return nothing;
@@ -1,15 +1,9 @@
-import {
-  mdiDotsVertical,
-  mdiDownload,
-  mdiFilterRemove,
-  mdiRefresh,
-} from "@mdi/js";
+import { mdiFilterRemove, mdiRefresh } from "@mdi/js";
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { fromUnixTime } from "date-fns";
 import { storage } from "../../common/decorators/storage";
 import { navigate } from "../../common/navigate";
 import { constructUrlCurrentPath } from "../../common/url/construct-url";
@@ -24,9 +18,6 @@ import {
 } from "../../common/url/search-params";
 import { deepEqual } from "../../common/util/deep-equal";
 import "../../components/date-picker/ha-date-range-picker";
-import "../../components/ha-dropdown";
-import type { HaDropdownSelectEvent } from "../../components/ha-dropdown";
-import "../../components/ha-dropdown-item";
 import "../../components/ha-icon-button";
 import "../../components/ha-target-picker";
 import "../../components/ha-top-app-bar-fixed";
@@ -36,8 +27,6 @@ import { resolveEntityIDs } from "../../data/selector";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import "./ha-logbook";
-import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
-import { csvDownload, csvSafeString } from "../../util/csv";

 interface LogbookState {
  time: { range: [Date, Date] };
@@ -88,24 +77,12 @@ export class HaPanelLogbook extends LitElement {
          .path=${mdiFilterRemove}
          .label=${this.hass.localize("ui.common.reset")}
        ></ha-icon-button>
-
-        <ha-dropdown slot="actionItems" @wa-select=${this._handleMenuAction}>
-          <ha-icon-button
-            slot="trigger"
-            .label=${this.hass.localize("ui.common.menu")}
-            .path=${mdiDotsVertical}
-          ></ha-icon-button>
-
-          <ha-dropdown-item value="refresh">
-            ${this.hass.localize("ui.common.refresh")}
-            <ha-svg-icon slot="icon" .path=${mdiRefresh}></ha-svg-icon>
-          </ha-dropdown-item>
-
-          <ha-dropdown-item value="download">
-            ${this.hass.localize("ui.panel.logbook.download_data")}
-            <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
-          </ha-dropdown-item>
-        </ha-dropdown>
+        <ha-icon-button
+          slot="actionItems"
+          @click=${this._refreshLogbook}
+          .path=${mdiRefresh}
+          .label=${this.hass!.localize("ui.common.refresh")}
+        ></ha-icon-button>

        <div class="content">
          <div class="filters">
@@ -291,67 +268,6 @@ export class HaPanelLogbook extends LitElement {
    this.shadowRoot!.querySelector("ha-logbook")?.refresh();
  }

-  private async _handleMenuAction(ev: HaDropdownSelectEvent) {
-    const action = ev.detail.item.value;
-    switch (action) {
-      case "download":
-        this._downloadData();
-        break;
-      case "refresh":
-        this._refreshLogbook();
-        break;
-    }
-  }
-
-  private _downloadData() {
-    const data =
-      this.shadowRoot!.querySelector("ha-logbook")?.getEntries() || [];
-
-    if (data.length === 0) {
-      showAlertDialog(this, {
-        title: this.hass.localize("ui.panel.logbook.download_data_error"),
-        text: this.hass.localize("ui.panel.logbook.error_no_data"),
-        warning: true,
-      });
-      return;
-    }
-
-    const headers = [
-      "time",
-      "entity_id",
-      "state",
-      "event_type",
-      "context_id",
-      "context_user_id",
-      "context_event_type",
-      "context_domain",
-      "context_service",
-      "context_entity_id",
-      "context_state",
-      "context_source",
-    ];
-    const csv: string[][] = [headers];
-
-    for (const d of data) {
-      const time = fromUnixTime(d.when).toISOString();
-      csv.push([
-        time,
-        d.entity_id || "",
-        csvSafeString(d.state),
-        csvSafeString(d.attributes?.event_type),
-        d.context_id || "",
-        d.context_user_id || "",
-        csvSafeString(d.context_event_type),
-        d.context_domain || "",
-        d.context_service || "",
-        d.context_entity_id || "",
-        csvSafeString(d.context_state),
-        d.context_source || "",
-      ]);
-    }
-    csvDownload(csv, "activity.csv");
-  }
-
  static get styles() {
    return [
      haStyle,
@@ -226,24 +226,21 @@ export function generatePowerSourcesGraphData(

  // Draw in reverse order so 0 value lines are overwritten
  ["solar", "battery", "grid"].forEach((key, i) => {
-    const series = seriesData[key];
-    if (series) {
-      pushSeries(key, series.positive, "positive", 3 - i);
+    if (seriesData[key]) {
+      pushSeries(key, seriesData[key].positive, "positive", 3 - i);
    }
  });

  // Draw in reverse order but above positive series
  ["battery", "grid"].forEach((key, i) => {
-    const series = seriesData[key];
-    if (series) {
-      pushSeries(key, series.negative, "negative", 4 - i);
+    if (seriesData[key]) {
+      pushSeries(key, seriesData[key].negative, "negative", 4 - i);
    }
  });

  Object.keys(statIds).forEach((key) => {
-    const series = seriesData[key];
-    if (series) {
-      const { colorHex, rgb } = series;
+    if (seriesData[key]) {
+      const { colorHex, rgb } = seriesData[key];

      legendData!.push({
        id: key,
@@ -23,7 +23,6 @@ import type {
  LovelaceGridOptions,
  LovelaceHeaderFooter,
 } from "../types";
-import { migrateEntitiesCardConfig } from "./migrate-card-config";
 import type { EntitiesCardConfig } from "./types";
 import { haStyleScrollbar } from "../../../resources/styles";

@@ -50,7 +49,32 @@ export const computeShowHeaderToggle = <
  return !!config.show_header_toggle;
 };

-export { migrateEntitiesCardConfig };
+export const migrateEntitiesCardConfig = (
+  config: EntitiesCardConfig
+): EntitiesCardConfig => {
+  let changed = false;
+  const newEntities = config.entities?.map((e) => {
+    if (typeof e !== "object") {
+      return e;
+    }
+    if (!("format" in e)) {
+      return e;
+    }
+    changed = true;
+    const { format, ...rest } = e;
+    return {
+      ...rest,
+      time_format: (rest as EntityConfig).time_format ?? format,
+    };
+  });
+  if (!changed) {
+    return config;
+  }
+  return {
+    ...config,
+    entities: newEntities as (LovelaceRowConfig | string)[],
+  };
+};

@customElement("hui-entities-card")
 class HuiEntitiesCard extends LitElement implements LovelaceCard {
@@ -31,11 +31,35 @@ import "../components/hui-timestamp-display";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import "../components/hui-warning-element";
 import type { LovelaceCard, LovelaceCardEditor } from "../types";
-import { migrateGlanceCardConfig } from "./migrate-card-config";
 import type { GlanceCardConfig, GlanceConfigEntity } from "./types";
 import { TIMESTAMP_STATE_DOMAINS } from "../../../common/const";

-export { migrateGlanceCardConfig };
+export const migrateGlanceCardConfig = (
+  config: GlanceCardConfig
+): GlanceCardConfig => {
+  let changed = false;
+  const newEntities = config.entities?.map((e) => {
+    if (typeof e !== "object") {
+      return e;
+    }
+    if (!("format" in e)) {
+      return e;
+    }
+    changed = true;
+    const { format, ...rest } = e;
+    return {
+      ...rest,
+      time_format: rest.time_format ?? format,
+    };
+  });
+  if (!changed) {
+    return config;
+  }
+  return {
+    ...config,
+    entities: newEntities as (GlanceConfigEntity | string)[],
+  };
+};

@customElement("hui-glance-card")
 export class HuiGlanceCard extends LitElement implements LovelaceCard {
@@ -1,66 +0,0 @@
-import type { EntityConfig, LovelaceRowConfig } from "../entity-rows/types";
-import type {
-  EntitiesCardConfig,
-  GlanceCardConfig,
-  GlanceConfigEntity,
-} from "./types";
-
-export const migrateEntitiesCardConfig = (
-  config: EntitiesCardConfig
-): EntitiesCardConfig => {
-  let changed = false;
-  const newEntities = config.entities?.map((e) => {
-    if (typeof e !== "object") {
-      return e;
-    }
-    // Custom rows own their config schema and may use `format` with a
-    // different meaning (e.g. custom:multiple-entity-row), so leave it
-    // untouched.
-    if (e.type?.startsWith("custom:")) {
-      return e;
-    }
-    if (!("format" in e)) {
-      return e;
-    }
-    changed = true;
-    const { format, ...rest } = e;
-    return {
-      ...rest,
-      time_format: (rest as EntityConfig).time_format ?? format,
-    };
-  });
-  if (!changed) {
-    return config;
-  }
-  return {
-    ...config,
-    entities: newEntities as (LovelaceRowConfig | string)[],
-  };
-};
-
-export const migrateGlanceCardConfig = (
-  config: GlanceCardConfig
-): GlanceCardConfig => {
-  let changed = false;
-  const newEntities = config.entities?.map((e) => {
-    if (typeof e !== "object") {
-      return e;
-    }
-    if (!("format" in e)) {
-      return e;
-    }
-    changed = true;
-    const { format, ...rest } = e;
-    return {
-      ...rest,
-      time_format: rest.time_format ?? format,
-    };
-  });
-  if (!changed) {
-    return config;
-  }
-  return {
-    ...config,
-    entities: newEntities as (GlanceConfigEntity | string)[],
-  };
-};
@@ -250,14 +250,18 @@ export class HuiBadgePicker extends LitElement {
    const usedEntities = computeUsedEntities(this.lovelace);
    const unusedEntities = calcUnusedEntities(this.hass, usedEntities);

-    const isAvailable = (eid: string) => {
-      const stateObj = this.hass!.states[eid];
-      return (
-        stateObj && stateObj.state !== UNAVAILABLE && stateObj.state !== UNKNOWN
-      );
-    };
-    this._usedEntities = [...usedEntities].filter(isAvailable);
-    this._unusedEntities = [...unusedEntities].filter(isAvailable);
+    this._usedEntities = [...usedEntities].filter(
+      (eid) =>
+        this.hass!.states[eid] &&
+        this.hass!.states[eid].state !== UNAVAILABLE &&
+        this.hass!.states[eid].state !== UNKNOWN
+    );
+    this._unusedEntities = [...unusedEntities].filter(
+      (eid) =>
+        this.hass!.states[eid] &&
+        this.hass!.states[eid].state !== UNAVAILABLE &&
+        this.hass!.states[eid].state !== UNKNOWN
+    );

    this._loadBages();
  }
@@ -274,14 +274,18 @@ export class HuiCardPicker extends LitElement {
    const usedEntities = computeUsedEntities(this.lovelace);
    const unusedEntities = calcUnusedEntities(this.hass, usedEntities);

-    const isAvailable = (eid: string) => {
-      const stateObj = this.hass!.states[eid];
-      return (
-        stateObj && stateObj.state !== UNAVAILABLE && stateObj.state !== UNKNOWN
-      );
-    };
-    this._usedEntities = [...usedEntities].filter(isAvailable);
-    this._unusedEntities = [...unusedEntities].filter(isAvailable);
+    this._usedEntities = [...usedEntities].filter(
+      (eid) =>
+        this.hass!.states[eid] &&
+        this.hass!.states[eid].state !== UNAVAILABLE &&
+        this.hass!.states[eid].state !== UNKNOWN
+    );
+    this._unusedEntities = [...unusedEntities].filter(
+      (eid) =>
+        this.hass!.states[eid] &&
+        this.hass!.states[eid].state !== UNAVAILABLE &&
+        this.hass!.states[eid].state !== UNKNOWN
+    );

    this._loadCards();
  }
@@ -1,5 +1,5 @@
 import { html, LitElement, nothing } from "lit";
-import { customElement, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import {
  array,
@@ -12,15 +12,14 @@ import {
  optional,
  string,
 } from "superstruct";
-import { consumeLocalize } from "../../../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-form/ha-form";
 import type {
  HaFormSchema,
  SchemaUnion,
 } from "../../../../components/ha-form/types";
-import type { ValueChangedEvent } from "../../../../types";
+import type { HomeAssistant, ValueChangedEvent } from "../../../../types";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
 import type { ClockCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
@@ -65,13 +64,17 @@ export class HuiClockCardEditor
  extends LitElement
  implements LovelaceCardEditor
 {
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
+  @property({ attribute: false }) public hass?: HomeAssistant;

  @state() private _config?: ClockCardConfig;

  private _schema = memoizeOne(
-    (localize: LocalizeFunc) =>
+    (
+      localize: LocalizeFunc,
+      clockStyle: ClockCardConfig["clock_style"],
+      ticks: ClockCardConfig["ticks"],
+      showSeconds: boolean | undefined
+    ) =>
      [
        { name: "title", selector: { text: {} } },
        {
@@ -111,122 +114,124 @@ export class HuiClockCardEditor
            ui_clock_date_format: {},
          },
        },
-        {
-          name: "time_format",
-          hidden: {
-            field: "clock_style",
-            operator: "not_eq",
-            value: "digital",
-          },
-          selector: {
-            select: {
-              mode: "dropdown",
-              options: ["auto", ...Object.values(TimeFormat)].map((value) => ({
-                value,
-                label: localize(
-                  `ui.panel.lovelace.editor.card.clock.time_formats.${value}`
-                ),
-              })),
-            },
-          },
-        },
-        {
-          name: "border",
-          hidden: { field: "clock_style", operator: "not_eq", value: "analog" },
-          description: {
-            suffix: localize(
-              `ui.panel.lovelace.editor.card.clock.border.description`
-            ),
-          },
-          default: false,
-          selector: {
-            boolean: {},
-          },
-        },
-        {
-          name: "ticks",
-          hidden: { field: "clock_style", operator: "not_eq", value: "analog" },
-          description: {
-            suffix: localize(
-              `ui.panel.lovelace.editor.card.clock.ticks.description`
-            ),
-          },
-          default: "hour",
-          selector: {
-            select: {
-              mode: "dropdown",
-              options: ["none", "quarter", "hour", "minute"].map((value) => ({
-                value,
-                label: localize(
-                  `ui.panel.lovelace.editor.card.clock.ticks.${value}.label`
-                ),
-                description: localize(
-                  `ui.panel.lovelace.editor.card.clock.ticks.${value}.description`
-                ),
-              })),
-            },
-          },
-        },
-        {
-          name: "seconds_motion",
-          hidden: {
-            condition: "or",
-            conditions: [
-              { field: "clock_style", operator: "not_eq", value: "analog" },
-              { field: "show_seconds", operator: "not_eq", value: true },
-            ],
-          },
-          description: {
-            suffix: localize(
-              `ui.panel.lovelace.editor.card.clock.seconds_motion.description`
-            ),
-          },
-          default: "continuous",
-          selector: {
-            select: {
-              mode: "dropdown",
-              options: ["continuous", "tick"].map((value) => ({
-                value,
-                label: localize(
-                  `ui.panel.lovelace.editor.card.clock.seconds_motion.${value}.label`
-                ),
-                description: localize(
-                  `ui.panel.lovelace.editor.card.clock.seconds_motion.${value}.description`
-                ),
-              })),
-            },
-          },
-        },
-        {
-          name: "face_style",
-          hidden: {
-            condition: "or",
-            conditions: [
-              { field: "clock_style", operator: "not_eq", value: "analog" },
-              { field: "ticks", value: "none" },
-            ],
-          },
-          description: {
-            suffix: localize(
-              `ui.panel.lovelace.editor.card.clock.face_style.description`
-            ),
-          },
-          default: "markers",
-          selector: {
-            select: {
-              mode: "dropdown",
-              options: ["markers", "numbers_upright", "roman"].map((value) => ({
-                value,
-                label: localize(
-                  `ui.panel.lovelace.editor.card.clock.face_style.${value}.label`
-                ),
-                description: localize(
-                  `ui.panel.lovelace.editor.card.clock.face_style.${value}.description`
-                ),
-              })),
-            },
-          },
-        },
+        ...(clockStyle === "digital"
+          ? ([
+              {
+                name: "time_format",
+                selector: {
+                  select: {
+                    mode: "dropdown",
+                    options: ["auto", ...Object.values(TimeFormat)].map(
+                      (value) => ({
+                        value,
+                        label: localize(
+                          `ui.panel.lovelace.editor.card.clock.time_formats.${value}`
+                        ),
+                      })
+                    ),
+                  },
+                },
+              },
+            ] as const satisfies readonly HaFormSchema[])
+          : clockStyle === "analog"
+            ? ([
+                {
+                  name: "border",
+                  description: {
+                    suffix: localize(
+                      `ui.panel.lovelace.editor.card.clock.border.description`
+                    ),
+                  },
+                  default: false,
+                  selector: {
+                    boolean: {},
+                  },
+                },
+                {
+                  name: "ticks",
+                  description: {
+                    suffix: localize(
+                      `ui.panel.lovelace.editor.card.clock.ticks.description`
+                    ),
+                  },
+                  default: "hour",
+                  selector: {
+                    select: {
+                      mode: "dropdown",
+                      options: ["none", "quarter", "hour", "minute"].map(
+                        (value) => ({
+                          value,
+                          label: localize(
+                            `ui.panel.lovelace.editor.card.clock.ticks.${value}.label`
+                          ),
+                          description: localize(
+                            `ui.panel.lovelace.editor.card.clock.ticks.${value}.description`
+                          ),
+                        })
+                      ),
+                    },
+                  },
+                },
+                ...(showSeconds
+                  ? ([
+                      {
+                        name: "seconds_motion",
+                        description: {
+                          suffix: localize(
+                            `ui.panel.lovelace.editor.card.clock.seconds_motion.description`
+                          ),
+                        },
+                        default: "continuous",
+                        selector: {
+                          select: {
+                            mode: "dropdown",
+                            options: ["continuous", "tick"].map((value) => ({
+                              value,
+                              label: localize(
+                                `ui.panel.lovelace.editor.card.clock.seconds_motion.${value}.label`
+                              ),
+                              description: localize(
+                                `ui.panel.lovelace.editor.card.clock.seconds_motion.${value}.description`
+                              ),
+                            })),
+                          },
+                        },
+                      },
+                    ] as const satisfies readonly HaFormSchema[])
+                  : []),
+                ...(ticks !== "none"
+                  ? ([
+                      {
+                        name: "face_style",
+                        description: {
+                          suffix: localize(
+                            `ui.panel.lovelace.editor.card.clock.face_style.description`
+                          ),
+                        },
+                        default: "markers",
+                        selector: {
+                          select: {
+                            mode: "dropdown",
+                            options: [
+                              "markers",
+                              "numbers_upright",
+                              "roman",
+                            ].map((value) => ({
+                              value,
+                              label: localize(
+                                `ui.panel.lovelace.editor.card.clock.face_style.${value}.label`
+                              ),
+                              description: localize(
+                                `ui.panel.lovelace.editor.card.clock.face_style.${value}.description`
+                              ),
+                            })),
+                          },
+                        },
+                      },
+                    ] as const satisfies readonly HaFormSchema[])
+                  : []),
+              ] as const satisfies readonly HaFormSchema[])
+            : []),
        { name: "time_zone", selector: { timezone: {} } },
      ] as const satisfies readonly HaFormSchema[]
  );
@@ -260,14 +265,20 @@ export class HuiClockCardEditor
  }

  protected render() {
-    if (!this._config) {
+    if (!this.hass || !this._config) {
      return nothing;
    }

    return html`
      <ha-form
+        .hass=${this.hass}
        .data=${this._data(this._config)}
-        .schema=${this._schema(this._localize)}
+        .schema=${this._schema(
+          this.hass.localize,
+          this._data(this._config).clock_style,
+          this._data(this._config).ticks,
+          this._data(this._config).show_seconds
+        )}
        .computeLabel=${this._computeLabelCallback}
        .computeHelper=${this._computeHelperCallback}
        @value-changed=${this._valueChanged}
@@ -316,43 +327,51 @@ export class HuiClockCardEditor
  ) => {
    switch (schema.name) {
      case "title":
-        return this._localize("ui.panel.lovelace.editor.card.generic.title");
+        return this.hass!.localize(
+          "ui.panel.lovelace.editor.card.generic.title"
+        );
      case "clock_style":
-        return this._localize(
+        return this.hass!.localize(
          `ui.panel.lovelace.editor.card.clock.clock_style`
        );
      case "clock_size":
-        return this._localize(`ui.panel.lovelace.editor.card.clock.clock_size`);
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.clock.clock_size`
+        );
      case "time_format":
-        return this._localize(
+        return this.hass!.localize(
          `ui.panel.lovelace.editor.card.clock.time_format`
        );
      case "time_zone":
-        return this._localize(`ui.panel.lovelace.editor.card.clock.time_zone`);
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.clock.time_zone`
+        );
      case "show_seconds":
-        return this._localize(
+        return this.hass!.localize(
          `ui.panel.lovelace.editor.card.clock.show_seconds`
        );
      case "no_background":
-        return this._localize(
+        return this.hass!.localize(
          `ui.panel.lovelace.editor.card.clock.no_background`
        );
      case "date_format":
-        return this._localize(`ui.panel.lovelace.editor.card.clock.date.label`);
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.clock.date.label`
+        );
      case "border":
-        return this._localize(
+        return this.hass!.localize(
          `ui.panel.lovelace.editor.card.clock.border.label`
        );
      case "ticks":
-        return this._localize(
+        return this.hass!.localize(
          `ui.panel.lovelace.editor.card.clock.ticks.label`
        );
      case "seconds_motion":
-        return this._localize(
+        return this.hass!.localize(
          `ui.panel.lovelace.editor.card.clock.seconds_motion.label`
        );
      case "face_style":
-        return this._localize(
+        return this.hass!.localize(
          `ui.panel.lovelace.editor.card.clock.face_style.label`
        );
      default:
@@ -365,23 +384,23 @@ export class HuiClockCardEditor
  ) => {
    switch (schema.name) {
      case "date_format":
-        return this._localize(
+        return this.hass!.localize(
          `ui.panel.lovelace.editor.card.clock.date.description`
        );
      case "border":
-        return this._localize(
+        return this.hass!.localize(
          `ui.panel.lovelace.editor.card.clock.border.description`
        );
      case "ticks":
-        return this._localize(
+        return this.hass!.localize(
          `ui.panel.lovelace.editor.card.clock.ticks.description`
        );
      case "seconds_motion":
-        return this._localize(
+        return this.hass!.localize(
          `ui.panel.lovelace.editor.card.clock.seconds_motion.description`
        );
      case "face_style":
-        return this._localize(
+        return this.hass!.localize(
          `ui.panel.lovelace.editor.card.clock.face_style.description`
        );
      default:
@@ -54,65 +54,6 @@ const cardConfigStruct = assign(
  })
 );

-const SCHEMA = [
-  { name: "title", selector: { text: {} } },
-  {
-    name: "",
-    type: "grid",
-    schema: [
-      {
-        name: "hours_to_show",
-        default: DEFAULT_HOURS_TO_SHOW,
-        selector: { number: { min: 0, step: "any", mode: "box" } },
-      },
-      {
-        name: "show_names",
-        default: true,
-        required: false,
-        selector: { boolean: {} },
-      },
-      {
-        name: "logarithmic_scale",
-        required: false,
-        selector: { boolean: {} },
-      },
-      {
-        name: "expand_legend",
-        required: false,
-        selector: { boolean: {} },
-      },
-    ],
-  },
-  {
-    name: "",
-    type: "grid",
-    schema: [
-      {
-        name: "min_y_axis",
-        required: false,
-        selector: { number: { mode: "box", step: "any" } },
-      },
-      {
-        name: "max_y_axis",
-        required: false,
-        selector: { number: { mode: "box", step: "any" } },
-      },
-    ],
-  },
-  {
-    name: "fit_y_data",
-    required: false,
-    hidden: {
-      condition: "and",
-      conditions: [
-        { field: "min_y_axis", operator: "not_exists" },
-        { field: "max_y_axis", operator: "not_exists" },
-      ],
-    },
-    selector: { boolean: {} },
-  },
-] as const satisfies readonly HaFormSchema[];
-
@customElement("hui-history-graph-card-editor")
 export class HuiHistoryGraphCardEditor
  extends LitElement
@@ -129,6 +70,65 @@ export class HuiHistoryGraphCardEditor
    this._config = config;
  }

+  private _schema = memoizeOne(
+    (showFitOption: boolean) =>
+      [
+        { name: "title", selector: { text: {} } },
+        {
+          name: "",
+          type: "grid",
+          schema: [
+            {
+              name: "hours_to_show",
+              default: DEFAULT_HOURS_TO_SHOW,
+              selector: { number: { min: 0, step: "any", mode: "box" } },
+            },
+            {
+              name: "show_names",
+              default: true,
+              required: false,
+              selector: { boolean: {} },
+            },
+            {
+              name: "logarithmic_scale",
+              required: false,
+              selector: { boolean: {} },
+            },
+            {
+              name: "expand_legend",
+              required: false,
+              selector: { boolean: {} },
+            },
+          ],
+        },
+        {
+          name: "",
+          type: "grid",
+          schema: [
+            {
+              name: "min_y_axis",
+              required: false,
+              selector: { number: { mode: "box", step: "any" } },
+            },
+            {
+              name: "max_y_axis",
+              required: false,
+              selector: { number: { mode: "box", step: "any" } },
+            },
+          ],
+        },
+        ...(showFitOption
+          ? [
+              {
+                name: "fit_y_data",
+                required: false,
+                selector: { boolean: {} },
+              },
+            ]
+          : []),
+      ] as const
+  );
+
  private _subForm = memoizeOne((localize: LocalizeFunc, entityId: string) => ({
    schema: [
      { name: "entity", selector: { entity: {} }, required: true },
@@ -176,6 +176,11 @@ export class HuiHistoryGraphCardEditor
      `;
    }

+    const schema = this._schema(
+      this._config!.min_y_axis !== undefined ||
+        this._config!.max_y_axis !== undefined
+    );
+
    const configEntities = this._config.entities
      ? (processEditorEntities(this._config.entities) as GraphEntityConfig[])
      : [];
@@ -183,7 +188,7 @@ export class HuiHistoryGraphCardEditor
      <ha-form
        .hass=${this.hass}
        .data=${this._config}
-        .schema=${SCHEMA}
+        .schema=${schema}
        .computeLabel=${this._computeLabelCallback}
        @value-changed=${this._valueChanged}
      ></ha-form>
@@ -278,7 +283,9 @@ export class HuiHistoryGraphCardEditor
    ) as HistoryGraphCardConfig;
  }

-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
    switch (schema.name) {
      case "show_names":
      case "logarithmic_scale":
@@ -92,6 +92,7 @@ export class HuiTileCardEditor
    (
      localize: LocalizeFunc,
      entityId: string | undefined,
+      hideState: boolean,
      showTimeFormat: boolean
    ) =>
      [
@@ -143,25 +144,31 @@ export class HuiTileCardEditor
                },
              ],
            },
-            {
-              name: "state_content",
-              hidden: { field: "hide_state", value: true },
-              selector: {
-                ui_state_content: {
-                  allow_context: true,
-                },
-              },
-              context: {
-                filter_entity: "entity",
-              },
-            },
-            {
-              name: "time_format",
-              hidden: !showTimeFormat,
-              selector: {
-                ui_time_format: {},
-              },
-            },
+            ...(!hideState
+              ? ([
+                  {
+                    name: "state_content",
+                    selector: {
+                      ui_state_content: {
+                        allow_context: true,
+                      },
+                    },
+                    context: {
+                      filter_entity: "entity",
+                    },
+                  },
+                ] as const satisfies readonly HaFormSchema[])
+              : []),
+            ...(showTimeFormat
+              ? ([
+                  {
+                    name: "time_format",
+                    selector: {
+                      ui_time_format: {},
+                    },
+                  },
+                ] as const satisfies readonly HaFormSchema[])
+              : []),
            {
              name: "content_layout",
              required: true,
@@ -286,7 +293,12 @@ export class HuiTileCardEditor
        this._config.state_content
      );

-    const schema = this._schema(this.hass.localize, entityId, showTimeFormat);
+    const schema = this._schema(
+      this.hass.localize,
+      entityId,
+      this._config.hide_state ?? false,
+      showTimeFormat
+    );

    const vertical = this._config.vertical ?? false;

@@ -608,24 +608,22 @@ class HaPanelMy extends LitElement {
    }
    const resultParams = {};
    for (const [key, type] of Object.entries(this._redirect!.params || {})) {
-      const value = params[key];
-      if (!value && type.endsWith("?")) {
+      if (!params[key] && type.endsWith("?")) {
        continue;
      }
-      if (!value || !this._checkParamType(type, value)) {
+      if (!params[key] || !this._checkParamType(type, params[key])) {
        throw Error();
      }
-      resultParams[key] = value;
+      resultParams[key] = params[key];
    }
    for (const [key, type] of Object.entries(
      this._redirect!.optional_params || {}
    )) {
-      const value = params[key];
-      if (value) {
-        if (!this._checkParamType(type, value)) {
+      if (params[key]) {
+        if (!this._checkParamType(type, params[key])) {
          throw Error();
        }
-        resultParams[key] = value;
+        resultParams[key] = params[key];
      }
    }
    return Object.keys(resultParams).length
@@ -639,12 +637,11 @@ class HaPanelMy extends LitElement {
    }
    const resultParams = {};
    for (const [key, type] of Object.entries(this._redirect!.optional_params)) {
-      const value = params[key];
-      if (value) {
-        if (!this._checkParamType(type, value)) {
+      if (params[key]) {
+        if (!this._checkParamType(type, params[key])) {
          throw Error();
        }
-        resultParams[key] = value;
+        resultParams[key] = params[key];
      }
    }
    return Object.keys(resultParams).length
@@ -1486,7 +1486,6 @@
        "auto_revert": "Settings will automatically revert in {time}.",
        "reverted": "Home Assistant reverted the HTTP server settings.",
        "changes_label": "Changed settings:",
-        "not_set": "Not set",
        "confirm": "Confirm",
        "revert": "Revert",
        "close": "Close",
@@ -8680,10 +8679,6 @@
            "description": "Configure how Home Assistant serves its web interface. Saving restarts Home Assistant.",
            "save": "Save",
            "save_no_changes": "Nothing changed — no restart needed.",
-            "save_error": "Could not save the HTTP configuration.",
-            "port_warning": "Clients such as the Home Assistant mobile apps will lose their connection until you update the URL in their settings. If Home Assistant is not confirmed reachable on the new port, the change is rolled back automatically after 5 minutes.",
-            "invalid_host": "Enter a valid IP address.",
-            "invalid_network": "Enter a valid IP address or network.",
            "save_confirm": {
              "title": "Restart required",
              "text": "Saving will restart Home Assistant to apply the new HTTP settings.",
@@ -8695,7 +8690,7 @@
              "ssl": "SSL/TLS",
              "reverse_proxy": "Reverse proxy",
              "ip_banning": "IP banning",
-              "advanced": "More options"
+              "advanced": "Advanced"
            },
            "fields": {
              "server_port": "Server port",
@@ -11571,11 +11566,6 @@
        "add_card": "Add current view as card",
        "add_card_error": "Unable to add card",
        "error_no_data": "You need to select some data sources first."
-      },
-      "logbook": {
-        "download_data": "[%key:ui::panel::history::download_data%]",
-        "download_data_error": "[%key:ui::panel::history::download_data_error%]",
-        "error_no_data": "No activity for the selected target in the selected time range."
      }
    },
    "tips": {
@@ -1,15 +0,0 @@
-import { fileDownload } from "./file_download";
-
-export function csvSafeString(s: string | undefined): string {
-  if (!s) return "";
-  return /,|"/.test(s) ? `"${s.replaceAll('"', '""')}"` : s;
-}
-
-export function csvDownload(data: string[][], filename: string) {
-  const csv = data.map((row) => row.join(",").concat("\n"));
-  const blob = new Blob(csv, {
-    type: "text/csv",
-  });
-  const url = window.URL.createObjectURL(blob);
-  fileDownload(url, filename);
-}
@@ -1,115 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-  IP_ADDRESS_OR_NETWORK_PATTERN,
-  IP_ADDRESS_PATTERN,
-  isIPAddress,
-  isIPAddressV4OrV6,
-  isIPNetwork,
-  isIPv6Address,
-} from "../../../src/common/string/is_ip_address";
-
-describe("isIPAddress (IPv4)", () => {
-  it("accepts valid IPv4 addresses", () => {
-    expect(isIPAddress("192.168.1.10")).toBe(true);
-    expect(isIPAddress("0.0.0.0")).toBe(true);
-    expect(isIPAddress("255.255.255.255")).toBe(true);
-  });
-  it("rejects invalid IPv4 addresses", () => {
-    expect(isIPAddress("256.1.1.1")).toBe(false);
-    expect(isIPAddress("192.168.1")).toBe(false);
-    expect(isIPAddress("192.168.1.10/24")).toBe(false);
-    expect(isIPAddress("fe80::1")).toBe(false);
-    expect(isIPAddress("")).toBe(false);
-  });
-});
-
-describe("isIPv6Address", () => {
-  it("accepts valid IPv6 addresses", () => {
-    expect(isIPv6Address("fe80::85d:e82c:9446:7995")).toBe(true);
-    expect(isIPv6Address("::1")).toBe(true);
-    expect(isIPv6Address("1050:0000:0000:0000:0005:0600:300c:326b")).toBe(true);
-    expect(isIPv6Address("::ffff:192.168.1.1")).toBe(true);
-  });
-  it("rejects invalid IPv6 addresses", () => {
-    expect(isIPv6Address("192.168.1.10")).toBe(false);
-    expect(isIPv6Address("fe80::85d::7995")).toBe(false);
-    expect(isIPv6Address("gggg::1")).toBe(false);
-    expect(isIPv6Address("")).toBe(false);
-  });
-});
-
-describe("isIPAddressV4OrV6", () => {
-  it("accepts both families", () => {
-    expect(isIPAddressV4OrV6("192.168.1.10")).toBe(true);
-    expect(isIPAddressV4OrV6("fe80::1")).toBe(true);
-  });
-  it("rejects networks and garbage", () => {
-    expect(isIPAddressV4OrV6("192.168.1.0/24")).toBe(false);
-    expect(isIPAddressV4OrV6("not-an-ip")).toBe(false);
-  });
-});
-
-describe("isIPNetwork (CIDR)", () => {
-  it("accepts valid networks", () => {
-    expect(isIPNetwork("192.168.1.0/24")).toBe(true);
-    expect(isIPNetwork("10.0.0.0/8")).toBe(true);
-    expect(isIPNetwork("172.16.0.0/12")).toBe(true);
-    expect(isIPNetwork("0.0.0.0/0")).toBe(true);
-    expect(isIPNetwork("fd00::/8")).toBe(true);
-    expect(isIPNetwork("fe80::/128")).toBe(true);
-  });
-  it("rejects invalid networks", () => {
-    // Prefix out of range — the reported production error.
-    expect(isIPNetwork("172.30.33.0/24444444")).toBe(false);
-    expect(isIPNetwork("192.168.1.0/33")).toBe(false);
-    expect(isIPNetwork("fd00::/129")).toBe(false);
-    expect(isIPNetwork("192.168.1.0")).toBe(false);
-    expect(isIPNetwork("192.168.1.0/24/24")).toBe(false);
-    expect(isIPNetwork("not-a-network/24")).toBe(false);
-  });
-});
-
-// The HTML `pattern` attribute is anchored by the browser as `^(?:…)$`.
-const matchesPattern = (pattern: string, value: string): boolean =>
-  new RegExp(`^(?:${pattern})$`).test(value);
-
-describe("IP_ADDRESS_PATTERN", () => {
-  it("accepts IPv4 and IPv6 addresses", () => {
-    expect(matchesPattern(IP_ADDRESS_PATTERN, "192.168.1.10")).toBe(true);
-    expect(matchesPattern(IP_ADDRESS_PATTERN, "fe80::1")).toBe(true);
-  });
-  it("rejects networks and garbage", () => {
-    expect(matchesPattern(IP_ADDRESS_PATTERN, "192.168.1.0/24")).toBe(false);
-    expect(matchesPattern(IP_ADDRESS_PATTERN, "not-an-ip")).toBe(false);
-    expect(matchesPattern(IP_ADDRESS_PATTERN, "256.1.1.1")).toBe(false);
-  });
-});
-
-describe("IP_ADDRESS_OR_NETWORK_PATTERN", () => {
-  it("accepts addresses and networks", () => {
-    expect(matchesPattern(IP_ADDRESS_OR_NETWORK_PATTERN, "192.168.1.10")).toBe(
-      true
-    );
-    expect(
-      matchesPattern(IP_ADDRESS_OR_NETWORK_PATTERN, "192.168.1.0/24")
-    ).toBe(true);
-    expect(matchesPattern(IP_ADDRESS_OR_NETWORK_PATTERN, "fd00::/8")).toBe(
-      true
-    );
-  });
-  it("rejects out-of-range prefixes and garbage", () => {
-    // The reported production error.
-    expect(
-      matchesPattern(IP_ADDRESS_OR_NETWORK_PATTERN, "172.30.33.0/24444444")
-    ).toBe(false);
-    expect(
-      matchesPattern(IP_ADDRESS_OR_NETWORK_PATTERN, "192.168.1.0/33")
-    ).toBe(false);
-    expect(
-      matchesPattern(IP_ADDRESS_OR_NETWORK_PATTERN, "1.1.1.1/233444")
-    ).toBe(false);
-    expect(matchesPattern(IP_ADDRESS_OR_NETWORK_PATTERN, "not-an-ip")).toBe(
-      false
-    );
-  });
-});
@@ -1,110 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { getAvailableClockDatePartSections } from "../../src/components/ha-clock-date-format-picker";
-
-type TestSection = "weekday" | "day" | "month" | "year" | "separator";
-
-const section = (id: TestSection, itemIds: string[]) => ({
-  id,
-  title: id,
-  items: itemIds.map((itemId) => ({ id: itemId, primary: itemId })),
-});
-
-const ALL_SECTIONS = [
-  section("day", ["day-numeric", "day-2-digit"]),
-  section("month", ["month-numeric", "month-short", "month-long"]),
-  section("year", ["year-numeric", "year-2-digit"]),
-  section("weekday", ["weekday-short", "weekday-long"]),
-  section("separator", [
-    "separator-dash",
-    "separator-slash",
-    "separator-dot",
-    "separator-new-line",
-  ]),
-];
-
-describe("getAvailableClockDatePartSections", () => {
-  it("returns every section when no value is set", () => {
-    const result = getAvailableClockDatePartSections(ALL_SECTIONS, []);
-    expect(result.map((sectionData) => sectionData.id)).toEqual([
-      "day",
-      "month",
-      "year",
-      "weekday",
-      "separator",
-    ]);
-  });
-
-  it("hides a group's section once a value from that group is used", () => {
-    const result = getAvailableClockDatePartSections(ALL_SECTIONS, [
-      "day-numeric",
-    ]);
-    expect(result.map((sectionData) => sectionData.id)).toEqual([
-      "month",
-      "year",
-      "weekday",
-      "separator",
-    ]);
-  });
-
-  it("keeps the edited item's own group visible via excludeIndex", () => {
-    const value = ["day-numeric", "month-short"];
-    const result = getAvailableClockDatePartSections(ALL_SECTIONS, value, 0);
-    expect(result.map((sectionData) => sectionData.id)).toEqual([
-      "day",
-      "year",
-      "weekday",
-      "separator",
-    ]);
-  });
-
-  it("keeps the edited item's group visible even when a duplicate of that group exists elsewhere", () => {
-    const value = ["day-numeric", "day-2-digit", "month-long"];
-    const result = getAvailableClockDatePartSections(ALL_SECTIONS, value, 0);
-    expect(result.map((sectionData) => sectionData.id)).toEqual([
-      "day",
-      "year",
-      "weekday",
-      "separator",
-    ]);
-  });
-
-  it("does not crash and keeps normal filtering when excludeIndex is out of range", () => {
-    const value = ["day-numeric", "month-long"];
-    const result = getAvailableClockDatePartSections(ALL_SECTIONS, value, 5);
-    expect(result.map((sectionData) => sectionData.id)).toEqual([
-      "year",
-      "weekday",
-      "separator",
-    ]);
-  });
-
-  it("never hides the separator section, even with multiple separators used", () => {
-    const value = [
-      "separator-dash",
-      "separator-slash",
-      "separator-dot",
-      "separator-new-line",
-    ];
-    const result = getAvailableClockDatePartSections(ALL_SECTIONS, value);
-    expect(result.map((sectionData) => sectionData.id)).toEqual([
-      "day",
-      "month",
-      "year",
-      "weekday",
-      "separator",
-    ]);
-  });
-
-  it("treats an unrecognized token as a separator and does not hide any group", () => {
-    const result = getAvailableClockDatePartSections(ALL_SECTIONS, [
-      "not-a-real-part",
-    ]);
-    expect(result.map((sectionData) => sectionData.id)).toEqual([
-      "day",
-      "month",
-      "year",
-      "weekday",
-      "separator",
-    ]);
-  });
-});
@@ -1,134 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { isFieldHidden } from "../../../src/components/ha-form/conditions";
-import type { HaFormSchema } from "../../../src/components/ha-form/types";
-
-const field = (hidden: HaFormSchema["hidden"]): HaFormSchema =>
-  ({ name: "field", selector: { text: {} }, hidden }) as HaFormSchema;
-
-describe("isFieldHidden", () => {
-  it("shows a field without a hidden condition", () => {
-    expect(isFieldHidden(field(undefined), { a: 1 })).toBe(false);
-  });
-
-  it("honors a boolean hidden", () => {
-    expect(isFieldHidden(field(true), {})).toBe(true);
-    expect(isFieldHidden(field(false), {})).toBe(false);
-  });
-
-  describe("operators", () => {
-    it("eq (default) matches equal values", () => {
-      expect(isFieldHidden(field({ field: "a", value: 1 }), { a: 1 })).toBe(
-        true
-      );
-      expect(isFieldHidden(field({ field: "a", value: 1 }), { a: 2 })).toBe(
-        false
-      );
-    });
-
-    it("not_eq matches different values", () => {
-      const schema = field({ field: "a", operator: "not_eq", value: 1 });
-      expect(isFieldHidden(schema, { a: 2 })).toBe(true);
-      expect(isFieldHidden(schema, { a: 1 })).toBe(false);
-    });
-
-    it("in matches membership", () => {
-      const schema = field({ field: "a", operator: "in", value: ["x", "y"] });
-      expect(isFieldHidden(schema, { a: "y" })).toBe(true);
-      expect(isFieldHidden(schema, { a: "z" })).toBe(false);
-    });
-
-    it("not_in matches non-membership", () => {
-      const schema = field({
-        field: "a",
-        operator: "not_in",
-        value: ["x", "y"],
-      });
-      expect(isFieldHidden(schema, { a: "z" })).toBe(true);
-      expect(isFieldHidden(schema, { a: "x" })).toBe(false);
-    });
-
-    it("exists matches a defined non-empty value", () => {
-      const schema = field({ field: "a", operator: "exists" });
-      expect(isFieldHidden(schema, { a: "x" })).toBe(true);
-      expect(isFieldHidden(schema, { a: "" })).toBe(false);
-      expect(isFieldHidden(schema, {})).toBe(false);
-    });
-
-    it("not_exists matches a missing or empty value", () => {
-      const schema = field({ field: "a", operator: "not_exists" });
-      expect(isFieldHidden(schema, {})).toBe(true);
-      expect(isFieldHidden(schema, { a: null } as any)).toBe(true);
-      expect(isFieldHidden(schema, { a: "x" })).toBe(false);
-    });
-  });
-
-  describe("combinators", () => {
-    it("and requires every condition", () => {
-      const schema = field({
-        condition: "and",
-        conditions: [
-          { field: "a", value: 1 },
-          { field: "b", value: 2 },
-        ],
-      });
-      expect(isFieldHidden(schema, { a: 1, b: 2 })).toBe(true);
-      expect(isFieldHidden(schema, { a: 1, b: 9 })).toBe(false);
-    });
-
-    it("or requires any condition", () => {
-      const schema = field({
-        condition: "or",
-        conditions: [
-          { field: "a", value: 1 },
-          { field: "b", value: 2 },
-        ],
-      });
-      expect(isFieldHidden(schema, { a: 9, b: 2 })).toBe(true);
-      expect(isFieldHidden(schema, { a: 9, b: 9 })).toBe(false);
-    });
-
-    it("not negates its conditions", () => {
-      const schema = field({
-        condition: "not",
-        conditions: [{ field: "a", value: 1 }],
-      });
-      expect(isFieldHidden(schema, { a: 2 })).toBe(true);
-      expect(isFieldHidden(schema, { a: 1 })).toBe(false);
-    });
-
-    it("nests combinators", () => {
-      const schema = field({
-        condition: "and",
-        conditions: [
-          { field: "a", value: 1 },
-          {
-            condition: "or",
-            conditions: [
-              { field: "b", value: 2 },
-              { field: "c", value: 3 },
-            ],
-          },
-        ],
-      });
-      expect(isFieldHidden(schema, { a: 1, b: 9, c: 3 })).toBe(true);
-      expect(isFieldHidden(schema, { a: 1, b: 9, c: 9 })).toBe(false);
-      expect(isFieldHidden(schema, { a: 9, b: 2, c: 3 })).toBe(false);
-    });
-  });
-
-  it("treats an array of conditions as AND", () => {
-    const schema = field([
-      { field: "a", value: 1 },
-      { field: "b", value: 2 },
-    ]);
-    expect(isFieldHidden(schema, { a: 1, b: 2 })).toBe(true);
-    expect(isFieldHidden(schema, { a: 1, b: 9 })).toBe(false);
-  });
-
-  it("handles missing data", () => {
-    expect(isFieldHidden(field({ field: "a", value: 1 }), undefined)).toBe(
-      false
-    );
-  });
-});
@@ -4,164 +4,29 @@
 * Run with:
 *   yarn test:e2e:app
 */
-import { test, expect, type Page } from "@playwright/test";
-import type { MoreInfoView } from "../../src/dialogs/more-info/const";
-import { PANEL_TIMEOUT, QUICK_TIMEOUT, SHELL_TIMEOUT } from "./helpers";
-import { e2ePanelRouteAssertions } from "./app/src/ha-test-panels";
-
-/**
- * Each More info view renders one root element inside the dialog, plus one or
- * more characteristic descendants that prove the view actually populated rather
- * than rendering an empty shell. `text`, when set, asserts the element's text
- * instead of just its presence.
- */
-const MORE_INFO_VIEW_ELEMENTS: {
-  view: MoreInfoView;
-  element: string;
-  content: { selector: string; text?: string }[];
-}[] = [
-  {
-    view: "info",
-    element: "ha-more-info-info",
-    content: [
-      { selector: "more-info-light" },
-      { selector: "span.title", text: "Test Light" },
-    ],
-  },
-  {
-    view: "history",
-    element: "ha-more-info-history-and-logbook",
-    // The demo loads the history component but not logbook.
-    content: [{ selector: "ha-more-info-history" }],
-  },
-  {
-    view: "settings",
-    element: "ha-more-info-settings",
-    // The scenario mocks config/entity_registry/get, so the real registry
-    // panel renders instead of the "no unique ID" warning.
-    content: [{ selector: "entity-registry-settings" }],
-  },
-  {
-    view: "related",
-    element: "ha-related-items",
-    // search/related is mocked to return no relations, so the empty list
-    // renders.
-    content: [{ selector: "ha-related-items >> ha-list" }],
-  },
-  {
-    view: "add_to",
-    element: "ha-more-info-add-to",
-    // Admin users get the default add-to action list.
-    content: [{ selector: "ha-add-to-action-list" }],
-  },
-  {
-    view: "details",
-    element: "ha-more-info-details",
-    // The details view renders the state and attributes cards.
-    content: [{ selector: "ha-card" }],
-  },
-];
-
-const URL_NORMALIZATION_ASSERTIONS: {
-  name: string;
-  path: string;
-  element: string;
-  url: RegExp;
-  action?: (page: Page) => Promise<void>;
-}[] = [
-  {
-    name: "keeps the todo panel when adding the selected entity query",
-    path: "/todo",
-    element: "ha-panel-todo",
-    url: /\/\?entity_id=todo\.shopping_list#\/todo$/,
-  },
-  {
-    name: "keeps the history panel when removing the back query",
-    path: "/?back=1#/history",
-    element: "ha-panel-history, history-panel",
-    url: /\/#\/history$/,
-  },
-  {
-    name: "keeps the logbook panel when removing the back query",
-    path: "/?back=1#/logbook",
-    element: "ha-panel-logbook",
-    url: /\/#\/logbook$/,
-  },
-  {
-    name: "keeps the lovelace panel when adding the edit query",
-    path: "/lovelace",
-    element: "ha-panel-lovelace, hui-root",
-    url: /\/\?edit=1#\/lovelace\/home$/,
-    action: (page) => setLovelaceEditMode(page, true),
-  },
-  {
-    name: "keeps the lovelace panel when removing the edit query",
-    path: "/lovelace",
-    element: "ha-panel-lovelace, hui-root",
-    url: /\/#\/lovelace\/home$/,
-    action: async (page) => {
-      await setLovelaceEditMode(page, true);
-      await expect(page).toHaveURL(/\/\?edit=1#\/lovelace\/home$/, {
-        timeout: SHELL_TIMEOUT,
-      });
-      await setLovelaceEditMode(page, false);
-    },
-  },
-];
-
-interface E2ELovelaceRoot extends HTMLElement {
-  lovelace?: {
-    setEditMode: (editMode: boolean) => void;
-  };
-}
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-// The test app is built with __DEMO__=true which enables hash-based routing.
-// Panel paths must use hash URLs: /#/lovelace, /#/energy, etc.
-// Scenario selection uses query params: /?scenario=foo (always at root).
-
-/** Navigate to a panel (hash routing) and wait for app to initialize. */
-async function goToPanel(page: Page, path: string) {
-  // Paths starting with /? are root-level (scenario selection); panel paths
-  // need to use hash routing (/#/panelname).
-  const url = path.startsWith("/?") ? path : `/#${path}`;
-  await page.goto(url);
-  await page.waitForSelector("ha-test", { state: "attached" });
-  // Wait for the app to finish initialising (hassConnected sets panels)
-  await page.waitForFunction(() => Boolean((window as any).__mockHass));
-}
-
-async function setLovelaceEditMode(page: Page, editMode: boolean) {
-  await page
-    .locator("hui-root")
-    .first()
-    .waitFor({ state: "attached", timeout: QUICK_TIMEOUT });
-  await page
-    .locator("hui-root")
-    .first()
-    .evaluate(async (el: Element, value) => {
-      const root = el as E2ELovelaceRoot;
-      const start = performance.now();
-      await new Promise<void>((resolve, reject) => {
-        const check = () => {
-          if (root.lovelace?.setEditMode) {
-            resolve();
-            return;
-          }
-          if (performance.now() - start > 2000) {
-            reject(new Error("Lovelace edit mode action was not available"));
-            return;
-          }
-          requestAnimationFrame(check);
-        };
-        check();
-      });
-      root.lovelace!.setEditMode(value);
-    }, editMode);
-}
+import { test, expect } from "@playwright/test";
+import {
+  appSidebar,
+  appSidebarConfig,
+  appSidebarPanel,
+  assertElementContent,
+  defineLinkSmokeTests,
+  defineRouteSmokeTests,
+  ensureAppSidebarPanelVisible,
+  goToPanel,
+} from "./app/src/helpers";
+import {
+  expectNoPageErrors,
+  PANEL_TIMEOUT,
+  QUICK_TIMEOUT,
+  SHELL_TIMEOUT,
+  trackPageErrors,
+} from "./helpers";
+import {
+  appRouteSmokeGroups,
+  configLinks,
+  moreInfoViewElements,
+} from "./app/src/smoke";

 // ---------------------------------------------------------------------------
 // App shell
@@ -169,60 +34,40 @@ async function setLovelaceEditMode(page: Page, editMode: boolean) {

 test.describe("App shell", () => {
  test("page loads and ha-test element mounts", async ({ page }) => {
-    const errors: string[] = [];
-    page.on("pageerror", (e) => errors.push(e.message));
+    const errors = trackPageErrors(page);

    await goToPanel(page, "/");

-    await expect(page.locator("ha-test")).toBeAttached();
-    expect(errors).toHaveLength(0);
+    await expect(page.locator("ha-test")).toBeAttached({
+      timeout: QUICK_TIMEOUT,
+    });
+    expectNoPageErrors(errors, undefined, []);
  });

  test("sidebar renders with expected panels", async ({ page }) => {
    await goToPanel(page, "/lovelace");

-    // Regular panels use #sidebar-panel-{urlPath} inside ha-sidebar's shadow root
-    for (const urlPath of ["lovelace", "map", "energy", "history"]) {
-      // eslint-disable-next-line no-await-in-loop
-      await expect(
-        page.locator(
-          `ha-test >> home-assistant-main >> ha-sidebar >> #sidebar-panel-${urlPath}`
-        )
-      ).toBeAttached();
-    }
-    // Config has its own special element with id="sidebar-config"
-    await expect(
-      page.locator(
-        `ha-test >> home-assistant-main >> ha-sidebar >> #sidebar-config`
-      )
-    ).toBeAttached();
+    await Promise.all([
+      // Regular panels use #sidebar-panel-{urlPath} inside ha-sidebar's shadow root.
+      ...["lovelace", "map", "energy", "history"].map((urlPath) =>
+        expect(appSidebarPanel(page, urlPath)).toBeAttached({
+          timeout: QUICK_TIMEOUT,
+        })
+      ),
+      // Config has its own special element with id="sidebar-config".
+      expect(appSidebarConfig(page)).toBeAttached({
+        timeout: QUICK_TIMEOUT,
+      }),
+    ]);
  });

  test("sidebar navigation changes the active panel", async ({ page }) => {
    await goToPanel(page, "/lovelace");

-    const sidebar = page.locator(
-      "ha-test >> home-assistant-main >> ha-sidebar"
-    );
-    await expect(sidebar).toBeAttached({ timeout: SHELL_TIMEOUT });
-
-    const historyLink = sidebar.locator("#sidebar-panel-history");
-    if (!(await historyLink.isVisible().catch(() => false))) {
-      await page.locator("ha-test >> home-assistant-main").evaluate((el) => {
-        el.dispatchEvent(
-          new CustomEvent("hass-toggle-menu", {
-            detail: { open: true },
-            bubbles: true,
-            composed: true,
-          })
-        );
-      });
-    }
-
-    await expect(historyLink).toBeVisible({ timeout: SHELL_TIMEOUT });
+    const historyLink = await ensureAppSidebarPanelVisible(page, "history");
    await historyLink.click();

-    await expect(page).toHaveURL(/\/#\/history$/, { timeout: SHELL_TIMEOUT });
+    await expect(page).toHaveURL(/\/#\/history$/, { timeout: QUICK_TIMEOUT });
    await expect(
      page.locator("ha-panel-history, history-panel").first()
    ).toBeAttached({ timeout: PANEL_TIMEOUT });
@@ -231,34 +76,29 @@ test.describe("App shell", () => {
  test("sidebar renders notification badge", async ({ page }) => {
    await goToPanel(page, "/lovelace");

-    const sidebar = page.locator(
-      "ha-test >> home-assistant-main >> ha-sidebar"
-    );
-    await expect(sidebar).toBeAttached({ timeout: SHELL_TIMEOUT });
+    const sidebar = appSidebar(page);
+    await expect(sidebar).toBeAttached({ timeout: QUICK_TIMEOUT });

    const notificationsLink = sidebar.locator("#sidebar-notifications");
-    await expect(notificationsLink).toBeAttached({ timeout: SHELL_TIMEOUT });
+    await expect(notificationsLink).toBeAttached({ timeout: QUICK_TIMEOUT });
    await expect(notificationsLink.locator(".badge").first()).toHaveText("1", {
-      timeout: SHELL_TIMEOUT,
+      timeout: QUICK_TIMEOUT,
    });
  });

  test("sidebar marks the active panel as selected", async ({ page }) => {
-    const sidebar = page.locator(
-      "ha-test >> home-assistant-main >> ha-sidebar"
-    );
-    const lovelaceLink = sidebar.locator("#sidebar-panel-lovelace");
-    const historyLink = sidebar.locator("#sidebar-panel-history");
+    const lovelaceLink = appSidebarPanel(page, "lovelace");
+    const historyLink = appSidebarPanel(page, "history");

    await goToPanel(page, "/lovelace");
    await expect(lovelaceLink).toHaveClass(/selected/, {
-      timeout: SHELL_TIMEOUT,
+      timeout: QUICK_TIMEOUT,
    });
    await expect(historyLink).not.toHaveClass(/selected/);

    await goToPanel(page, "/history");
    await expect(historyLink).toHaveClass(/selected/, {
-      timeout: SHELL_TIMEOUT,
+      timeout: QUICK_TIMEOUT,
    });
    await expect(lovelaceLink).not.toHaveClass(/selected/);
  });
@@ -271,124 +111,16 @@ test.describe("App shell", () => {
    await goToPanel(page, "/?scenario=non-admin#/lovelace");

    // Wait for the sidebar to mount before asserting on its contents.
-    await expect(
-      page.locator("ha-test >> home-assistant-main >> ha-sidebar")
-    ).toBeAttached({ timeout: SHELL_TIMEOUT });
+    await expect(appSidebar(page)).toBeAttached({ timeout: QUICK_TIMEOUT });

    // Config panel is adminOnly — should not appear for non-admin.
-    const configLink = page.locator(
-      `ha-test >> home-assistant-main >> ha-sidebar >> #sidebar-config`
-    );
-    await expect(configLink).not.toBeAttached();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Panel navigation
-// ---------------------------------------------------------------------------
-
-test.describe("Panel navigation", () => {
-  for (const [path, element] of e2ePanelRouteAssertions) {
-    test(`renders registered panel ${path}`, async ({ page }) => {
-      await goToPanel(page, path);
-      await expect(page.locator(element).first()).toBeAttached({
-        timeout: PANEL_TIMEOUT,
-      });
-    });
-  }
-});
-
-test.describe("Panel URL normalization", () => {
-  for (const {
-    name,
-    path,
-    element,
-    url,
-    action,
-  } of URL_NORMALIZATION_ASSERTIONS) {
-    test(name, async ({ page }) => {
-      await goToPanel(page, path);
-      await action?.(page);
-      await expect(page).toHaveURL(url, { timeout: SHELL_TIMEOUT });
-      await expect(page.locator(element).first()).toBeAttached({
-        timeout: PANEL_TIMEOUT,
-      });
-    });
-  }
-});
-
-// ---------------------------------------------------------------------------
-// Tools panel (formerly Developer tools)
-// ---------------------------------------------------------------------------
-
-/**
- * Every tool sub-page reachable under /config/tools, mapped to the custom
- * element tools-router mounts for it (see tools-router.ts). Asserting on the
- * specific element proves the route actually rendered its tool, not just the
- * shared ha-panel-tools shell.
- */
-const TOOLS_SUBPAGES: { route: string; element: string }[] = [
-  { route: "yaml", element: "tools-yaml-config" },
-  { route: "state", element: "tools-state" },
-  { route: "action", element: "tools-action" },
-  { route: "template", element: "tools-template" },
-  { route: "event", element: "tools-event" },
-  { route: "statistics", element: "tools-statistics" },
-  { route: "assist", element: "tools-assist" },
-  { route: "debug", element: "tools-debug" },
-];
-
-test.describe("Tools panel", () => {
-  test("base path renders the tools panel", async ({ page }) => {
-    await goToPanel(page, "/config/tools");
-    await expect(page.locator("ha-panel-tools")).toBeAttached({
-      timeout: PANEL_TIMEOUT,
-    });
-  });
-
-  for (const { route, element } of TOOLS_SUBPAGES) {
-    test(`renders the ${route} sub-page`, async ({ page }) => {
-      await goToPanel(page, `/config/tools/${route}`);
-      await expect(page.locator(element)).toBeAttached({
-        timeout: PANEL_TIMEOUT,
-      });
-    });
-  }
-
-  test("service is an alias for the action tool", async ({ page }) => {
-    await goToPanel(page, "/config/tools/service");
-    await expect(page.locator("tools-action")).toBeAttached({
-      timeout: PANEL_TIMEOUT,
+    await expect(appSidebarConfig(page)).not.toBeAttached({
+      timeout: QUICK_TIMEOUT,
    });
  });
 });

-// ---------------------------------------------------------------------------
-// Tools redirects (old developer-tools URLs)
-// ---------------------------------------------------------------------------
-
-test.describe("Tools redirects", () => {
-  // The panel moved from top-level /developer-tools (pre-2026.2) to
-  // /config/developer-tools (2026.2), then was renamed to /config/tools
-  // (2026.8). Both old locations must redirect to the new one, and deep links
-  // must keep their sub-page. See the updateRoute() redirect in
-  // src/layouts/home-assistant.ts.
-  for (const oldBase of ["/developer-tools", "/config/developer-tools"]) {
-    test(`redirects ${oldBase} to the tools panel`, async ({ page }) => {
-      await goToPanel(page, oldBase);
-      await expect(page.locator("ha-panel-tools")).toBeAttached({
-        timeout: PANEL_TIMEOUT,
-      });
-    });
-
-    test(`redirects ${oldBase}/state to the state tool`, async ({ page }) => {
-      await goToPanel(page, `${oldBase}/state`);
-      await expect(page.locator("tools-state")).toBeAttached({
-        timeout: PANEL_TIMEOUT,
-      });
-    });
-  }
-});
+defineRouteSmokeTests(appRouteSmokeGroups);

 // ---------------------------------------------------------------------------
 // Lovelace
@@ -417,7 +149,7 @@ test.describe("Lovelace dashboard", () => {
 // ---------------------------------------------------------------------------

 test.describe("Light more-info dialog", () => {
-  for (const { view, element, content } of MORE_INFO_VIEW_ELEMENTS) {
+  for (const { view, element, content } of moreInfoViewElements) {
    test(`opens more-info ${view} view for a light entity`, async ({
      page,
    }) => {
@@ -455,16 +187,7 @@ test.describe("Light more-info dialog", () => {

      // Each view should render its own characteristic content, not just an
      // empty shell.
-      for (const { selector, text } of content) {
-        const locator = dialog.locator(selector).first();
-        if (text) {
-          // eslint-disable-next-line no-await-in-loop
-          await expect(locator).toContainText(text, { timeout: QUICK_TIMEOUT });
-        } else {
-          // eslint-disable-next-line no-await-in-loop
-          await expect(locator).toBeAttached({ timeout: QUICK_TIMEOUT });
-        }
-      }
+      await assertElementContent(dialog, content);
    });
  }
 });
@@ -521,144 +244,27 @@ test.describe("Theming", () => {
 // ---------------------------------------------------------------------------

 test.describe("Config panel", () => {
-  const DASHBOARD_LINKS = [
-    { href: "/config/integrations", label: "Devices & services" },
-    { href: "/config/automation", label: "Automations & scenes" },
-    { href: "/config/areas", label: "Areas, labels & zones" },
-    { href: "/config/apps", label: "Apps" },
-    { href: "/config/lovelace/dashboards", label: "Dashboards" },
-    { href: "/config/voice-assistants", label: "Voice assistants" },
-    { href: "/config/matter", label: "Matter" },
-    { href: "/config/zha", label: "Zigbee" },
-    { href: "/config/zwave_js", label: "Z-Wave" },
-    { href: "/knx", label: "KNX" },
-    { href: "/config/thread", label: "Thread" },
-    { href: "/config/bluetooth", label: "Bluetooth" },
-    { href: "/config/infrared", label: "Infrared" },
-    { href: "/config/radio-frequency", label: "Radio frequency" },
-    { href: "/insteon", label: "Insteon" },
-    { href: "/config/tags", label: "Tags" },
-    { href: "/config/person", label: "People" },
-    { href: "/config/system", label: "System" },
-    { href: "/config/tools", label: "Tools" },
-    { href: "/config/info", label: "About" },
-  ];
-
-  const CONFIG_ROUTES: { path: string; element: string }[] = [
-    { path: "/config/integrations", element: "ha-config-integrations" },
-    { path: "/config/devices", element: "ha-config-devices" },
-    { path: "/config/entities", element: "ha-config-entities" },
-    { path: "/config/helpers", element: "ha-config-helpers" },
-    { path: "/config/areas", element: "ha-config-areas" },
-    { path: "/config/apps", element: "ha-config-apps" },
-    { path: "/config/app", element: "ha-config-app-dashboard" },
-    { path: "/config/automation", element: "ha-config-automation" },
-    { path: "/config/backup", element: "ha-config-backup" },
-    { path: "/config/scene", element: "ha-config-scene" },
-    { path: "/config/script", element: "ha-config-script" },
-    { path: "/config/blueprint", element: "ha-config-blueprint" },
-    { path: "/config/cloud", element: "ha-config-cloud" },
-    { path: "/config/energy", element: "ha-config-energy" },
-    { path: "/config/hardware", element: "ha-config-hardware" },
-    { path: "/config/labs", element: "ha-config-labs" },
-    { path: "/config/lovelace", element: "ha-config-lovelace" },
-    { path: "/config/person", element: "ha-config-person" },
-    { path: "/config/storage", element: "ha-config-section-storage" },
-    { path: "/config/tags", element: "ha-config-tags" },
-    { path: "/config/users", element: "ha-config-users" },
-    { path: "/config/voice-assistants", element: "ha-config-voice-assistants" },
-    { path: "/config/system", element: "ha-config-system-navigation" },
-    { path: "/config/info", element: "ha-config-info" },
-    { path: "/config/logs", element: "ha-config-logs" },
-    { path: "/config/general", element: "ha-config-section-general" },
-    { path: "/config/updates", element: "ha-config-section-updates" },
-    { path: "/config/repairs", element: "ha-config-repairs-dashboard" },
-    { path: "/config/analytics", element: "ha-config-section-analytics" },
-    { path: "/config/ai-tasks", element: "ha-config-section-ai-tasks" },
-    { path: "/config/labels", element: "ha-config-labels" },
-    { path: "/config/zone", element: "ha-config-zone" },
-    { path: "/config/network", element: "ha-config-section-network" },
-    {
-      path: "/config/application_credentials",
-      element: "ha-config-application-credentials",
-    },
-    { path: "/config/bluetooth", element: "bluetooth-config-dashboard-router" },
-    { path: "/config/dhcp", element: "dhcp-config-panel" },
-    { path: "/config/infrared", element: "infrared-config-dashboard-router" },
-    { path: "/config/matter", element: "matter-config-panel" },
-    { path: "/config/mqtt", element: "mqtt-config-panel" },
-    {
-      path: "/config/radio-frequency",
-      element: "radio-frequency-config-dashboard-router",
-    },
-    { path: "/config/ssdp", element: "ssdp-config-panel" },
-    { path: "/config/thread", element: "thread-config-panel" },
-    { path: "/config/zeroconf", element: "zeroconf-config-panel" },
-    { path: "/config/zha", element: "zha-config-dashboard-router" },
-    { path: "/config/zwave_js", element: "zwave_js-config-router" },
-  ];
-
-  const NESTED_CONFIG_ROUTES: { path: string; element: string }[] = [
-    {
-      path: "/config/integrations/dashboard",
-      element: "ha-config-integrations-dashboard",
-    },
-    {
-      path: "/config/devices/dashboard",
-      element: "ha-config-devices-dashboard",
-    },
-    { path: "/config/areas/dashboard", element: "ha-config-areas-dashboard" },
-    { path: "/config/backup/settings", element: "ha-config-backup-settings" },
-  ];
-
  test("config panel loads without JS errors", async ({ page }) => {
-    const errors: string[] = [];
-    page.on("pageerror", (e) => errors.push(e.message));
+    const errors = trackPageErrors(page);

    await goToPanel(page, "/config");
    await expect(
      page.locator("ha-panel-config, ha-config-dashboard").first()
    ).toBeAttached({ timeout: PANEL_TIMEOUT + 5_000 });

-    // Filter known pre-existing errors from vendor code
-    const realErrors = errors.filter(
-      (e) => !e.includes("ResizeObserver") && !e.includes("Non-Error")
-    );
-    expect(realErrors).toHaveLength(0);
+    expectNoPageErrors(errors);
  });

-  test("dashboard renders key settings links", async ({ page }) => {
+  const getDashboard = async (page) => {
    await goToPanel(page, "/config");
-
    const dashboard = page.locator("ha-config-dashboard");
-    await expect(dashboard).toBeAttached({ timeout: PANEL_TIMEOUT });
+    await expect(dashboard).toBeAttached({ timeout: QUICK_TIMEOUT });
+    return dashboard;
+  };

-    for (const { href, label } of DASHBOARD_LINKS) {
-      const link = dashboard.getByRole("link", {
-        name: new RegExp(`^${label.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\b`),
-      });
-      // eslint-disable-next-line no-await-in-loop
-      await expect(link).toHaveAttribute("href", href, {
-        timeout: QUICK_TIMEOUT,
-      });
-    }
-  });
-
-  for (const { path, element } of CONFIG_ROUTES) {
-    test(`renders ${path}`, async ({ page }) => {
-      await goToPanel(page, path);
-      await expect(page.locator(element)).toBeAttached({
-        timeout: PANEL_TIMEOUT,
-      });
-    });
-  }
-
-  for (const { path, element } of NESTED_CONFIG_ROUTES) {
-    test(`renders ${path}`, async ({ page }) => {
-      await goToPanel(page, path);
-      await expect(page.locator(element)).toBeAttached({
-        timeout: PANEL_TIMEOUT,
-      });
-    });
-  }
+  defineLinkSmokeTests(
+    "config links point to expected pages",
+    configLinks,
+    getDashboard
+  );
 });
@@ -0,0 +1,172 @@
+import { expect, test, type Locator, type Page } from "@playwright/test";
+import {
+  defineParallelSmokeTests,
+  PANEL_TIMEOUT,
+  QUICK_TIMEOUT,
+  SHELL_TIMEOUT,
+} from "../../helpers";
+
+const APP_MAIN_SELECTOR = "ha-test >> home-assistant-main";
+const APP_SIDEBAR_SELECTOR = `${APP_MAIN_SELECTOR} >> ha-sidebar`;
+
+// The app e2e harness is built with __DEMO__=true, which enables hash routing.
+// Scenario selection uses query params at root: /?scenario=foo#/lovelace.
+export async function goToPanel(page: Page, path: string) {
+  const url = path.startsWith("/?") ? path : `/#${path}`;
+  await page.goto(url);
+  await Promise.all([
+    page.waitForSelector("ha-test", {
+      state: "attached",
+      timeout: SHELL_TIMEOUT,
+    }),
+    page.waitForFunction(
+      () => "__mockHass" in window && Boolean(window.__mockHass),
+      undefined,
+      { timeout: SHELL_TIMEOUT }
+    ),
+  ]);
+}
+
+export const appMain = (page: Page) => page.locator(APP_MAIN_SELECTOR);
+
+export const appSidebar = (page: Page) => page.locator(APP_SIDEBAR_SELECTOR);
+
+export const appSidebarPanel = (page: Page, panel: string) =>
+  appSidebar(page).locator(`#sidebar-panel-${panel}`);
+
+export const appSidebarConfig = (page: Page) =>
+  appSidebar(page).locator("#sidebar-config");
+
+export async function openAppSidebar(page: Page) {
+  await appMain(page).evaluate((el) => {
+    el.dispatchEvent(
+      new CustomEvent("hass-toggle-menu", {
+        detail: { open: true },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  });
+}
+
+export async function ensureAppSidebarPanelVisible(page: Page, panel: string) {
+  await expect(appSidebar(page)).toBeAttached({ timeout: QUICK_TIMEOUT });
+
+  const link = appSidebarPanel(page, panel);
+  if (!(await link.isVisible().catch(() => false))) {
+    await openAppSidebar(page);
+  }
+  await expect(link).toBeVisible({ timeout: QUICK_TIMEOUT });
+  return link;
+}
+
+const escapeRegExp = (value: string) =>
+  value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+export interface LinkSmokeCase {
+  href: string;
+  label: string;
+}
+
+export async function assertLink(
+  root: Locator,
+  { href, label }: LinkSmokeCase
+) {
+  const link = root.getByRole("link", {
+    name: new RegExp(`^${escapeRegExp(label)}\\b`),
+  });
+  await expect(link).toHaveAttribute("href", href, {
+    timeout: QUICK_TIMEOUT,
+  });
+}
+
+export function defineLinkSmokeTests(
+  name: string,
+  links: LinkSmokeCase[],
+  getRoot: (page: Page) => Promise<Locator>
+) {
+  test(name, async ({ page }) => {
+    const root = await getRoot(page);
+
+    await Promise.all(
+      links.map((link) =>
+        test.step(`${link.label} links to ${link.href}`, async () => {
+          await assertLink(root, link);
+        })
+      )
+    );
+  });
+}
+
+export interface ElementContentAssertion {
+  selector: string;
+  text?: string;
+}
+
+export interface ViewElementSmokeCase<TView extends string = string> {
+  view: TView;
+  element: string;
+  content: ElementContentAssertion[];
+}
+
+export async function assertElementContent(
+  root: Locator,
+  content: ElementContentAssertion[]
+) {
+  await Promise.all(
+    content.map(({ selector, text }) => {
+      const locator = root.locator(selector).first();
+      return text
+        ? expect(locator).toContainText(text, { timeout: QUICK_TIMEOUT })
+        : expect(locator).toBeAttached({ timeout: QUICK_TIMEOUT });
+    })
+  );
+}
+
+export interface RouteSmokeCase {
+  name?: string;
+  path: string;
+  element: string;
+  url?: RegExp;
+  action?: (page: Page) => Promise<void>;
+}
+
+export interface RouteSmokeGroup {
+  name: string;
+  routes: RouteSmokeCase[];
+  testName?: (route: RouteSmokeCase) => string;
+}
+
+export const routeCase = (path: string, element: string): RouteSmokeCase => ({
+  path,
+  element,
+});
+
+export const routeCases = (routes: [string, string][]): RouteSmokeCase[] =>
+  routes.map(([path, element]) => routeCase(path, element));
+
+export const rendersRoute = (route: RouteSmokeCase) => `renders ${route.path}`;
+
+async function assertRouteSmoke(page: Page, route: RouteSmokeCase) {
+  await goToPanel(page, route.path);
+  await route.action?.(page);
+  if (route.url) {
+    await expect(page).toHaveURL(route.url, { timeout: QUICK_TIMEOUT });
+  }
+  await expect(page.locator(route.element).first()).toBeAttached({
+    timeout: PANEL_TIMEOUT,
+  });
+}
+
+export function defineRouteSmokeTests(groups: RouteSmokeGroup[]) {
+  defineParallelSmokeTests({
+    groups,
+    groupName: (group) => group.name,
+    cases: (group) => group.routes,
+    testName: (route, group) =>
+      route.name ?? group.testName?.(route) ?? rendersRoute(route),
+    run: async ({ page, smokeCase }) => {
+      await assertRouteSmoke(page, smokeCase);
+    },
+  });
+}
@@ -0,0 +1,273 @@
+import { expect, type Page } from "@playwright/test";
+import type { MoreInfoView } from "../../../../src/dialogs/more-info/const";
+import { QUICK_TIMEOUT, SHELL_TIMEOUT } from "../../helpers";
+import {
+  rendersRoute,
+  routeCase,
+  routeCases,
+  type LinkSmokeCase,
+  type RouteSmokeCase,
+  type RouteSmokeGroup,
+  type ViewElementSmokeCase,
+} from "./helpers";
+import { e2ePanelRouteAssertions } from "./ha-test-panels";
+
+// ── Config dashboard links ───────────────────────────────────────────────────
+
+export const configLinks: LinkSmokeCase[] = [
+  { href: "/config/integrations", label: "Devices & services" },
+  { href: "/config/automation", label: "Automations & scenes" },
+  { href: "/config/areas", label: "Areas, labels & zones" },
+  { href: "/config/apps", label: "Apps" },
+  { href: "/config/lovelace/dashboards", label: "Dashboards" },
+  { href: "/config/voice-assistants", label: "Voice assistants" },
+  { href: "/config/matter", label: "Matter" },
+  { href: "/config/zha", label: "Zigbee" },
+  { href: "/config/zwave_js", label: "Z-Wave" },
+  { href: "/knx", label: "KNX" },
+  { href: "/config/thread", label: "Thread" },
+  { href: "/config/bluetooth", label: "Bluetooth" },
+  { href: "/config/infrared", label: "Infrared" },
+  { href: "/config/radio-frequency", label: "Radio frequency" },
+  { href: "/insteon", label: "Insteon" },
+  { href: "/config/tags", label: "Tags" },
+  { href: "/config/person", label: "People" },
+  { href: "/config/system", label: "System" },
+  { href: "/config/tools", label: "Tools" },
+  { href: "/config/info", label: "About" },
+];
+
+// ── More-info dialog views ───────────────────────────────────────────────────
+
+export const moreInfoViewElements: ViewElementSmokeCase<MoreInfoView>[] = [
+  {
+    view: "info",
+    element: "ha-more-info-info",
+    content: [
+      { selector: "more-info-light" },
+      { selector: "span.title", text: "Test Light" },
+    ],
+  },
+  {
+    view: "history",
+    element: "ha-more-info-history-and-logbook",
+    // The demo loads the history component but not logbook.
+    content: [{ selector: "ha-more-info-history" }],
+  },
+  {
+    view: "settings",
+    element: "ha-more-info-settings",
+    // The scenario mocks config/entity_registry/get, so the real registry
+    // panel renders instead of the "no unique ID" warning.
+    content: [{ selector: "entity-registry-settings" }],
+  },
+  {
+    view: "related",
+    element: "ha-related-items",
+    // search/related is mocked to return no relations, so the empty list
+    // renders.
+    content: [{ selector: "ha-related-items >> ha-list" }],
+  },
+  {
+    view: "add_to",
+    element: "ha-more-info-add-to",
+    // Admin users get the default add-to action list.
+    content: [{ selector: "ha-add-to-action-list" }],
+  },
+  {
+    view: "details",
+    element: "ha-more-info-details",
+    // The details view renders the state and attributes cards.
+    content: [{ selector: "ha-card" }],
+  },
+];
+
+// ── Route smoke tests ────────────────────────────────────────────────────────
+
+interface E2ELovelaceRoot extends HTMLElement {
+  lovelace?: {
+    setEditMode: (editMode: boolean) => void;
+  };
+}
+
+async function setLovelaceEditMode(page: Page, editMode: boolean) {
+  await page
+    .locator("hui-root")
+    .first()
+    .waitFor({ state: "attached", timeout: QUICK_TIMEOUT });
+  await page
+    .locator("hui-root")
+    .first()
+    .evaluate(async (el: Element, value) => {
+      const root = el as E2ELovelaceRoot;
+      const start = performance.now();
+      await new Promise<void>((resolve, reject) => {
+        const check = () => {
+          if (root.lovelace?.setEditMode) {
+            resolve();
+            return;
+          }
+          if (performance.now() - start > 2000) {
+            reject(new Error("Lovelace edit mode action was not available"));
+            return;
+          }
+          requestAnimationFrame(check);
+        };
+        check();
+      });
+      root.lovelace!.setEditMode(value);
+    }, editMode);
+}
+
+const PANEL_ROUTE_ASSERTIONS = Array.from(
+  e2ePanelRouteAssertions,
+  ([path, element]) => routeCase(path, element)
+);
+
+const URL_NORMALIZATION_ASSERTIONS: RouteSmokeCase[] = [
+  {
+    name: "keeps the todo panel when adding the selected entity query",
+    path: "/todo",
+    element: "ha-panel-todo",
+    url: /\/\?entity_id=todo\.shopping_list#\/todo$/,
+  },
+  {
+    name: "keeps the history panel when removing the back query",
+    path: "/?back=1#/history",
+    element: "ha-panel-history, history-panel",
+    url: /\/#\/history$/,
+  },
+  {
+    name: "keeps the logbook panel when removing the back query",
+    path: "/?back=1#/logbook",
+    element: "ha-panel-logbook",
+    url: /\/#\/logbook$/,
+  },
+  {
+    name: "keeps the lovelace panel when removing the edit query",
+    path: "/lovelace",
+    element: "ha-panel-lovelace, hui-root",
+    url: /\/#\/lovelace\/home$/,
+    action: async (page) => {
+      await setLovelaceEditMode(page, true);
+      await expect(page).toHaveURL(/\/\?edit=1#\/lovelace\/home$/, {
+        timeout: SHELL_TIMEOUT,
+      });
+      await setLovelaceEditMode(page, false);
+    },
+  },
+];
+
+const TOOLS_SUBPAGES: { route: string; element: string }[] = [
+  { route: "yaml", element: "tools-yaml-config" },
+  { route: "state", element: "tools-state" },
+  { route: "action", element: "tools-action" },
+  { route: "template", element: "tools-template" },
+  { route: "event", element: "tools-event" },
+  { route: "statistics", element: "tools-statistics" },
+  { route: "assist", element: "tools-assist" },
+  { route: "debug", element: "tools-debug" },
+];
+
+const TOOLS_ROUTE_ASSERTIONS = [
+  routeCase("/config/tools", "ha-panel-tools"),
+  ...TOOLS_SUBPAGES.map(({ route, element }) =>
+    routeCase(`/config/tools/${route}`, element)
+  ),
+  routeCase("/config/tools/service", "tools-action"),
+];
+
+const TOOLS_REDIRECT_ASSERTIONS = [
+  ...["/developer-tools", "/config/developer-tools"].flatMap((oldBase) => [
+    routeCase(oldBase, "ha-panel-tools"),
+    routeCase(`${oldBase}/state`, "tools-state"),
+  ]),
+];
+
+const CONFIG_ROUTES = routeCases([
+  ["/config/integrations", "ha-config-integrations"],
+  ["/config/devices", "ha-config-devices"],
+  ["/config/entities", "ha-config-entities"],
+  ["/config/helpers", "ha-config-helpers"],
+  ["/config/areas", "ha-config-areas"],
+  ["/config/apps", "ha-config-apps"],
+  ["/config/app", "ha-config-app-dashboard"],
+  ["/config/automation", "ha-config-automation"],
+  ["/config/backup", "ha-config-backup"],
+  ["/config/scene", "ha-config-scene"],
+  ["/config/script", "ha-config-script"],
+  ["/config/blueprint", "ha-config-blueprint"],
+  ["/config/cloud", "ha-config-cloud"],
+  ["/config/energy", "ha-config-energy"],
+  ["/config/hardware", "ha-config-hardware"],
+  ["/config/labs", "ha-config-labs"],
+  ["/config/lovelace", "ha-config-lovelace"],
+  ["/config/person", "ha-config-person"],
+  ["/config/storage", "ha-config-section-storage"],
+  ["/config/tags", "ha-config-tags"],
+  ["/config/users", "ha-config-users"],
+  ["/config/voice-assistants", "ha-config-voice-assistants"],
+  ["/config/system", "ha-config-system-navigation"],
+  ["/config/info", "ha-config-info"],
+  ["/config/logs", "ha-config-logs"],
+  ["/config/general", "ha-config-section-general"],
+  ["/config/updates", "ha-config-section-updates"],
+  ["/config/repairs", "ha-config-repairs-dashboard"],
+  ["/config/analytics", "ha-config-section-analytics"],
+  ["/config/ai-tasks", "ha-config-section-ai-tasks"],
+  ["/config/labels", "ha-config-labels"],
+  ["/config/zone", "ha-config-zone"],
+  ["/config/network", "ha-config-section-network"],
+  ["/config/application_credentials", "ha-config-application-credentials"],
+  ["/config/bluetooth", "bluetooth-config-dashboard-router"],
+  ["/config/dhcp", "dhcp-config-panel"],
+  ["/config/infrared", "infrared-config-dashboard-router"],
+  ["/config/matter", "matter-config-panel"],
+  ["/config/mqtt", "mqtt-config-panel"],
+  ["/config/radio-frequency", "radio-frequency-config-dashboard-router"],
+  ["/config/ssdp", "ssdp-config-panel"],
+  ["/config/thread", "thread-config-panel"],
+  ["/config/zeroconf", "zeroconf-config-panel"],
+  ["/config/zha", "zha-config-dashboard-router"],
+  ["/config/zwave_js", "zwave_js-config-router"],
+]);
+
+const NESTED_CONFIG_ROUTES = routeCases([
+  ["/config/integrations/dashboard", "ha-config-integrations-dashboard"],
+  ["/config/devices/dashboard", "ha-config-devices-dashboard"],
+  ["/config/areas/dashboard", "ha-config-areas-dashboard"],
+  ["/config/backup/settings", "ha-config-backup-settings"],
+]);
+
+export const appRouteSmokeGroups: RouteSmokeGroup[] = [
+  {
+    name: "Panel navigation",
+    routes: PANEL_ROUTE_ASSERTIONS,
+    testName: (route) => `renders registered panel ${route.path}`,
+  },
+  {
+    name: "Panel URL normalization",
+    routes: URL_NORMALIZATION_ASSERTIONS,
+    testName: (route) => route.name!,
+  },
+  {
+    name: "Tools panel",
+    routes: TOOLS_ROUTE_ASSERTIONS,
+    testName: rendersRoute,
+  },
+  {
+    name: "Tools redirects",
+    routes: TOOLS_REDIRECT_ASSERTIONS,
+    testName: (route) => `redirects ${route.path}`,
+  },
+  {
+    name: "Config routes",
+    routes: CONFIG_ROUTES,
+    testName: rendersRoute,
+  },
+  {
+    name: "Nested config routes",
+    routes: NESTED_CONFIG_ROUTES,
+    testName: rendersRoute,
+  },
+];
@@ -5,6 +5,29 @@
 // Usage: node test/e2e/collect-blob-reports.mjs

 import { cpSync, mkdirSync, readdirSync, rmSync } from "fs";
+import { join, relative } from "path";
+
+const findBlobReports = (dir) => {
+  const files = [];
+  const walk = (currentDir) => {
+    for (const entry of readdirSync(currentDir, { withFileTypes: true })) {
+      const entryPath = join(currentDir, entry.name);
+      if (entry.isDirectory()) {
+        walk(entryPath);
+      } else if (entry.name.endsWith(".zip")) {
+        files.push(entryPath);
+      }
+    }
+  };
+
+  try {
+    walk(dir);
+  } catch {
+    return undefined;
+  }
+
+  return files;
+};

 const dest = "test/e2e/reports/blob";
 rmSync(dest, { recursive: true, force: true });
@@ -12,10 +35,8 @@ mkdirSync(dest, { recursive: true });

 for (const suite of ["demo", "app", "gallery"]) {
  const src = `test/e2e/reports/${suite}`;
-  let files;
-  try {
-    files = readdirSync(src).filter((f) => f.endsWith(".zip"));
-  } catch {
+  const files = findBlobReports(src);
+  if (!files?.length) {
    // Suite report directory doesn't exist (e.g. job was skipped or failed
    // before uploading). Skip gracefully.
    process.stderr.write(
@@ -24,6 +45,7 @@ for (const suite of ["demo", "app", "gallery"]) {
    continue;
  }
  for (const file of files) {
-    cpSync(`${src}/${file}`, `${dest}/${suite}-${file}`);
+    const name = relative(src, file).replace(/[\\/]/g, "-");
+    cpSync(file, join(dest, `${suite}-${name}`));
  }
 }
@@ -1,146 +1,68 @@
 import { expect, test } from "@playwright/test";
 import {
+  expectNoPageErrors,
  NAVIGATION_TIMEOUT,
  PANEL_TIMEOUT,
  QUICK_TIMEOUT,
  SHELL_TIMEOUT,
-  appErrors as filterAppErrors,
+  trackPageErrors,
 } from "./helpers";
+import {
+  activateDemoSidebarPanel,
+  demoCardSelector,
+  moreInfoCardSelector,
+  openDemoSidebar,
+  waitForDemoReady,
+} from "./demo/helpers";

 test.describe("Home Assistant Demo", () => {
-  // Collect JS errors during each test so we can assert no unexpected crashes.
-  let pageErrors: Error[] = [];
+  let pageErrors: ReturnType<typeof trackPageErrors>;

  test.beforeEach(async ({ page }) => {
-    pageErrors = [];
-    page.on("pageerror", (err) => pageErrors.push(err));
+    pageErrors = trackPageErrors(page);
    await page.goto("/");
  });

-  function appErrors() {
-    return filterAppErrors(pageErrors);
-  }
-
-  // ── 1. Page loads ──────────────────────────────────────────────────────────
-
  test("page loads and ha-demo mounts without JS errors", async ({ page }) => {
-    // The custom element is present in the document
-    await expect(page.locator("ha-demo")).toBeAttached({
-      timeout: NAVIGATION_TIMEOUT,
-    });
+    await waitForDemoReady(page);

-    // The launch screen should disappear once the app is ready
-    await expect(page.locator("#ha-launch-screen")).toBeHidden({
-      timeout: NAVIGATION_TIMEOUT,
-    });
-
-    // No unhandled JS exceptions
-    expect(appErrors()).toHaveLength(0);
+    expectNoPageErrors(pageErrors);
  });

-  // ── 2. Dashboard renders ───────────────────────────────────────────────────
-
  test("dashboard renders Lovelace cards", async ({ page }) => {
-    await expect(page.locator("ha-demo")).toBeAttached({
-      timeout: NAVIGATION_TIMEOUT,
-    });
-    await expect(page.locator("#ha-launch-screen")).toBeHidden({
-      timeout: NAVIGATION_TIMEOUT,
-    });
+    await waitForDemoReady(page);

-    const cardSelector = [
-      "hui-tile-card",
-      "hui-entity-card",
-      "hui-glance-card",
-      "hui-button-card",
-      "hui-markdown-card",
-    ].join(", ");
-
-    await expect(page.locator(cardSelector).first()).toBeVisible({
+    await expect(page.locator(demoCardSelector).first()).toBeVisible({
      timeout: PANEL_TIMEOUT,
    });
  });

-  // ── 3. Sidebar navigation ─────────────────────────────────────────────────
-
  test("sidebar navigation changes the active panel", async ({ page }) => {
-    await expect(page.locator("ha-demo")).toBeAttached({
-      timeout: NAVIGATION_TIMEOUT,
-    });
-    await expect(page.locator("#ha-launch-screen")).toBeHidden({
-      timeout: NAVIGATION_TIMEOUT,
-    });
+    await waitForDemoReady(page);
+    await openDemoSidebar(page);
+    await activateDemoSidebarPanel(page, "map");

-    // On narrow viewports (< 870 px — mobile / tablet) the sidebar lives
-    // inside a modal drawer that is closed by default. Open it first via
-    // the ha-menu-button in the top app-bar.
-    const menuButton = page.locator("ha-menu-button");
-    if (await menuButton.isVisible()) {
-      await menuButton.click();
-      await expect(page.locator("ha-sidebar")).toBeVisible({
-        timeout: SHELL_TIMEOUT,
-      });
-    } else {
-      await expect(page.locator("ha-sidebar")).toBeAttached({
-        timeout: NAVIGATION_TIMEOUT,
-      });
-    }
-
-    const candidatePanels = ["map", "logbook", "history", "config"];
-
-    let clicked = false;
-    for (const panel of candidatePanels) {
-      const navItem = page.locator(`#sidebar-panel-${panel}`);
-      // eslint-disable-next-line no-await-in-loop
-      const visible = await navItem.isVisible().catch(() => false);
-      if (visible) {
-        // eslint-disable-next-line no-await-in-loop
-        await navItem.click();
-        // eslint-disable-next-line no-await-in-loop
-        await expect(page).toHaveURL(new RegExp(`/${panel}`), {
-          timeout: SHELL_TIMEOUT,
-        });
-        clicked = true;
-        break;
-      }
-    }
-
-    expect(clicked, "No known sidebar panel was found to click").toBe(true);
-    expect(appErrors()).toHaveLength(0);
+    expectNoPageErrors(pageErrors);
  });

-  // ── 4. More info dialog ───────────────────────────────────────────────────
-
  test("clicking an entity card opens the more-info dialog", async ({
    page,
  }) => {
-    await expect(page.locator("ha-demo")).toBeAttached({
-      timeout: NAVIGATION_TIMEOUT,
-    });
-    await expect(page.locator("#ha-launch-screen")).toBeHidden({
+    await waitForDemoReady(page);
+
+    // Tile cards are the most common card type in the demo; fall back to other
+    // clickable card types in case this platform renders a different layout.
+    await expect(page.locator(moreInfoCardSelector).first()).toBeVisible({
      timeout: NAVIGATION_TIMEOUT,
    });
+    await page.locator(moreInfoCardSelector).first().click();

-    // Tile cards are the most common card type in the demo; they open the
-    // more-info dialog on click. Fall back to other clickable card types in
-    // case the demo layout on this platform doesn't include tile cards.
-    const cardSelector =
-      "hui-tile-card, hui-entity-card, hui-button-card, hui-glance-card";
-
-    await expect(page.locator(cardSelector).first()).toBeVisible({
-      timeout: NAVIGATION_TIMEOUT,
-    });
-    await page.locator(cardSelector).first().click();
-
-    // The more-info dialog is a top-level custom element appended to the body.
-    // We verify it is attached, then confirm it rendered by checking the title
-    // span which is slotted into the light DOM and has real layout dimensions.
    const dialog = page.locator("ha-more-info-dialog");
    await expect(dialog).toBeAttached({ timeout: SHELL_TIMEOUT });
+    await expect(dialog.locator("span.title")).toBeVisible({
+      timeout: QUICK_TIMEOUT,
+    });

-    const title = dialog.locator("span.title");
-    await expect(title).toBeVisible({ timeout: QUICK_TIMEOUT });
-
-    expect(appErrors()).toHaveLength(0);
+    expectNoPageErrors(pageErrors);
  });
 });
@@ -0,0 +1,54 @@
+import { expect, type Page } from "@playwright/test";
+import { NAVIGATION_TIMEOUT, SHELL_TIMEOUT } from "../helpers";
+
+export const demoCardSelector = [
+  "hui-tile-card",
+  "hui-entity-card",
+  "hui-glance-card",
+  "hui-button-card",
+  "hui-markdown-card",
+].join(", ");
+
+export const moreInfoCardSelector =
+  "hui-tile-card, hui-entity-card, hui-button-card, hui-glance-card";
+
+export async function waitForDemoReady(page: Page) {
+  await expect(page.locator("ha-demo")).toBeAttached({
+    timeout: NAVIGATION_TIMEOUT,
+  });
+  await expect(page.locator("#ha-launch-screen")).toBeHidden({
+    timeout: NAVIGATION_TIMEOUT,
+  });
+}
+
+export async function openDemoSidebar(page: Page) {
+  const menuButton = page.locator("ha-menu-button");
+  if (await menuButton.isVisible()) {
+    const modalDrawer = page.locator("ha-drawer").locator("wa-drawer");
+    await Promise.all([
+      modalDrawer.evaluate(
+        (element) =>
+          new Promise<void>((resolve) => {
+            element.addEventListener("wa-after-show", () => resolve(), {
+              once: true,
+            });
+          })
+      ),
+      menuButton.click(),
+    ]);
+    return;
+  }
+
+  await expect(page.locator("ha-sidebar")).toBeAttached({
+    timeout: NAVIGATION_TIMEOUT,
+  });
+}
+
+export async function activateDemoSidebarPanel(page: Page, panel: string) {
+  const navItem = page.locator(`#sidebar-panel-${panel}`);
+  await expect(navItem).toBeVisible({ timeout: SHELL_TIMEOUT });
+  await navItem.click();
+  await expect(page).toHaveURL(new RegExp(`/${panel}(?:/|$)`), {
+    timeout: SHELL_TIMEOUT,
+  });
+}
@@ -7,362 +7,117 @@
 * Run with:
 *   yarn test:e2e:gallery
 */
-import { test, expect, type Page } from "@playwright/test";
-import { QUICK_TIMEOUT, SHELL_TIMEOUT } from "./helpers";
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-/** Navigate to a gallery page via hash and wait for it to render. */
-async function goToGalleryPage(page: Page, hash: string) {
-  // First visit to let ha-gallery boot up
-  await page.goto(`/#${hash}`);
-  await page.waitForSelector("ha-gallery", { state: "attached" });
-  // Wait for the demo element to appear in ha-gallery's shadow root.
-  // The element name is derived from the hash: "components/ha-bar" → "demo-components-ha-bar".
-  // page-description is only rendered for pages that have a description field,
-  // so we cannot use it as a universal readiness signal.
-  const demoTag = `demo-${hash.replace("/", "-")}`;
-  await page.waitForFunction((tag) => {
-    const gallery = document.querySelector("ha-gallery") as any;
-    return gallery?.shadowRoot?.querySelector(tag) != null;
-  }, demoTag);
-}
-
-/** Assert a gallery page loads without console errors.
- * Demo elements live inside ha-gallery's shadow root — use >> to pierce it.
- */
-async function assertPageLoads(page: Page, hash: string, selector: string) {
-  const errors: string[] = [];
-  page.on("pageerror", (e) => errors.push(e.message));
-
-  await goToGalleryPage(page, hash);
-
-  // Pierce ha-gallery's shadow root with >>
-  await expect(page.locator(`ha-gallery >> ${selector}`).first()).toBeAttached({
-    timeout: SHELL_TIMEOUT,
-  });
-
-  const realErrors = errors.filter(
-    (e) => !IGNORED_ERRORS.some((re) => re.test(e))
-  );
-  expect(
-    realErrors,
-    `JS errors on ${hash}: ${realErrors.join("; ")}`
-  ).toHaveLength(0);
-}
-
-// Errors that are gallery-harness artifacts rather than bugs in the component
-// under test. The Lit-context init-error family that used to live here is gone:
-// ha-gallery now provides fallback contexts for every demo (mirroring the real
-// app's root), so context-consuming components resolve `localize`, formatters,
-// config, etc. synchronously instead of throwing during init.
-const IGNORED_ERRORS: RegExp[] = [
-  /ResizeObserver/,
-  /Non-Error/,
-  /Extension context/,
-  // Plain objects thrown by mock WebSocket/data-fetch show up as "Object".
-  /^Object$/,
-  // hui-group-entity-row calls .some() on a possibly-undefined entity_id array
-  // from mock state data — pre-existing gallery data issue.
-  /Cannot read properties of undefined \(reading 'some'\)/,
-];
-
-// ---------------------------------------------------------------------------
-// Gallery shell
-// ---------------------------------------------------------------------------
+import { test, expect } from "@playwright/test";
+import {
+  expectNoPageErrors,
+  QUICK_TIMEOUT,
+  SHELL_TIMEOUT,
+  trackPageErrors,
+} from "./helpers";
+import {
+  defineGallerySmokeTests,
+  expectGalleryDemoElement,
+  galleryLocator,
+  getGalleryDemo,
+  goToGalleryHome,
+  GALLERY_SHELL_IGNORED_PAGE_ERRORS,
+} from "./gallery/helpers";
+import { componentPages, lovelacePages, moreInfoPages } from "./gallery/pages";

 test.describe("Gallery shell", () => {
  test("page loads and ha-gallery mounts", async ({ page }) => {
-    const errors: string[] = [];
-    page.on("pageerror", (e) => errors.push(e.message));
+    const errors = trackPageErrors(page);

-    await page.goto("/");
-    await expect(page.locator("ha-gallery")).toBeAttached({
-      timeout: SHELL_TIMEOUT,
-    });
+    await goToGalleryHome(page);

-    const realErrors = errors.filter(
-      (e) => !e.includes("ResizeObserver") && !e.includes("Non-Error")
-    );
-    expect(realErrors).toHaveLength(0);
+    expectNoPageErrors(errors, undefined, GALLERY_SHELL_IGNORED_PAGE_ERRORS);
  });

  test("sidebar renders navigation links", async ({ page }) => {
-    await page.goto("/");
-    await page.waitForSelector("ha-gallery", { state: "attached" });
-    // The gallery drawer sidebar is inside ha-gallery's shadow root
-    await expect(page.locator("ha-gallery >> ha-drawer")).toBeAttached({
+    await goToGalleryHome(page);
+    await expect(galleryLocator(page, "ha-drawer")).toBeAttached({
      timeout: QUICK_TIMEOUT,
    });
  });
 });

-// ---------------------------------------------------------------------------
-// Component pages
-// ---------------------------------------------------------------------------
-
-const componentPages: { name: string; selector: string }[] = [
-  { name: "ha-alert", selector: "demo-components-ha-alert" },
-  { name: "ha-badge", selector: "demo-components-ha-badge" },
-  { name: "ha-bar", selector: "demo-components-ha-bar" },
-  { name: "ha-button", selector: "demo-components-ha-button" },
-  { name: "ha-chips", selector: "demo-components-ha-chips" },
-  { name: "ha-control-button", selector: "demo-components-ha-control-button" },
-  {
-    name: "ha-control-circular-slider",
-    selector: "demo-components-ha-control-circular-slider",
-  },
-  {
-    name: "ha-control-number-buttons",
-    selector: "demo-components-ha-control-number-buttons",
-  },
-  {
-    name: "ha-control-select-menu",
-    selector: "demo-components-ha-control-select-menu",
-  },
-  { name: "ha-control-select", selector: "demo-components-ha-control-select" },
-  { name: "ha-control-slider", selector: "demo-components-ha-control-slider" },
-  { name: "ha-control-switch", selector: "demo-components-ha-control-switch" },
-  { name: "ha-dialog", selector: "demo-components-ha-dialog" },
-  { name: "ha-dropdown", selector: "demo-components-ha-dropdown" },
-  {
-    name: "ha-expansion-panel",
-    selector: "demo-components-ha-expansion-panel",
-  },
-  { name: "ha-faded", selector: "demo-components-ha-faded" },
-  { name: "ha-form", selector: "demo-components-ha-form" },
-  { name: "ha-gauge", selector: "demo-components-ha-gauge" },
-  {
-    name: "ha-hs-color-picker",
-    selector: "demo-components-ha-hs-color-picker",
-  },
-  { name: "ha-input", selector: "demo-components-ha-input" },
-  { name: "ha-label-badge", selector: "demo-components-ha-label-badge" },
-  { name: "ha-list", selector: "demo-components-ha-list" },
-  { name: "ha-marquee-text", selector: "demo-components-ha-marquee-text" },
-  {
-    name: "ha-progress-button",
-    selector: "demo-components-ha-progress-button",
-  },
-  { name: "ha-select-box", selector: "demo-components-ha-select-box" },
-  { name: "ha-selector", selector: "demo-components-ha-selector" },
-  { name: "ha-slider", selector: "demo-components-ha-slider" },
-  { name: "ha-spinner", selector: "demo-components-ha-spinner" },
-  { name: "ha-switch", selector: "demo-components-ha-switch" },
-  { name: "ha-textarea", selector: "demo-components-ha-textarea" },
-  { name: "ha-tip", selector: "demo-components-ha-tip" },
-  { name: "ha-tooltip", selector: "demo-components-ha-tooltip" },
-  {
-    name: "ha-adaptive-dialog",
-    selector: "demo-components-ha-adaptive-dialog",
-  },
-  {
-    name: "ha-adaptive-popover",
-    selector: "demo-components-ha-adaptive-popover",
-  },
-];
-
-test.describe("Components", () => {
-  for (const { name, selector } of componentPages) {
-    test(`${name} renders without errors`, async ({ page }) => {
-      await assertPageLoads(page, `components/${name}`, selector);
-    });
-  }
-});
-
-// ---------------------------------------------------------------------------
-// More-info pages
-// ---------------------------------------------------------------------------
-
-const moreInfoPages: { name: string; selector: string }[] = [
-  { name: "light", selector: "demo-more-info-light" },
-  { name: "climate", selector: "demo-more-info-climate" },
-  { name: "cover", selector: "demo-more-info-cover" },
-  { name: "fan", selector: "demo-more-info-fan" },
-  { name: "humidifier", selector: "demo-more-info-humidifier" },
-  { name: "input-number", selector: "demo-more-info-input-number" },
-  { name: "input-text", selector: "demo-more-info-input-text" },
-  { name: "lawn-mower", selector: "demo-more-info-lawn-mower" },
-  { name: "lock", selector: "demo-more-info-lock" },
-  { name: "media-player", selector: "demo-more-info-media-player" },
-  { name: "number", selector: "demo-more-info-number" },
-  { name: "scene", selector: "demo-more-info-scene" },
-  { name: "timer", selector: "demo-more-info-timer" },
-  { name: "update", selector: "demo-more-info-update" },
-  { name: "vacuum", selector: "demo-more-info-vacuum" },
-  { name: "water-heater", selector: "demo-more-info-water-heater" },
-];
-
-test.describe("More-info dialogs", () => {
-  for (const { name, selector } of moreInfoPages) {
-    test(`more-info ${name} renders without errors`, async ({ page }) => {
-      await assertPageLoads(page, `more-info/${name}`, selector);
-    });
-  }
-});
-
-// ---------------------------------------------------------------------------
-// Lovelace card pages
-// ---------------------------------------------------------------------------
-
-const lovelacePages: { name: string; selector: string }[] = [
-  { name: "area-card", selector: "demo-lovelace-area-card" },
-  { name: "conditional-card", selector: "demo-lovelace-conditional-card" },
-  { name: "entities-card", selector: "demo-lovelace-entities-card" },
-  { name: "entity-button-card", selector: "demo-lovelace-entity-button-card" },
-  { name: "entity-filter-card", selector: "demo-lovelace-entity-filter-card" },
-  { name: "gauge-card", selector: "demo-lovelace-gauge-card" },
-  { name: "glance-card", selector: "demo-lovelace-glance-card" },
-  {
-    name: "grid-and-stack-card",
-    selector: "demo-lovelace-grid-and-stack-card",
-  },
-  { name: "iframe-card", selector: "demo-lovelace-iframe-card" },
-  { name: "light-card", selector: "demo-lovelace-light-card" },
-  { name: "map-card", selector: "demo-lovelace-map-card" },
-  { name: "markdown-card", selector: "demo-lovelace-markdown-card" },
-  { name: "media-control-card", selector: "demo-lovelace-media-control-card" },
-  { name: "media-player-row", selector: "demo-lovelace-media-player-row" },
-  { name: "picture-card", selector: "demo-lovelace-picture-card" },
-  {
-    name: "picture-elements-card",
-    selector: "demo-lovelace-picture-elements-card",
-  },
-  {
-    name: "picture-entity-card",
-    selector: "demo-lovelace-picture-entity-card",
-  },
-  {
-    name: "picture-glance-card",
-    selector: "demo-lovelace-picture-glance-card",
-  },
-  { name: "thermostat-card", selector: "demo-lovelace-thermostat-card" },
-  { name: "tile-card", selector: "demo-lovelace-tile-card" },
-  { name: "todo-list-card", selector: "demo-lovelace-todo-list-card" },
-];
-
-test.describe("Lovelace cards", () => {
-  for (const { name, selector } of lovelacePages) {
-    test(`${name} renders without errors`, async ({ page }) => {
-      await assertPageLoads(page, `lovelace/${name}`, selector);
-    });
-  }
-});
-
-// ---------------------------------------------------------------------------
-// Specific interaction tests
-// ---------------------------------------------------------------------------
+defineGallerySmokeTests("Components", "components", componentPages);
+defineGallerySmokeTests("More-info dialogs", "more-info", moreInfoPages);
+defineGallerySmokeTests("Lovelace cards", "lovelace", lovelacePages);

 test.describe("Component interactions", () => {
  test("ha-alert renders all four types", async ({ page }) => {
-    await goToGalleryPage(page, "components/ha-alert");
-    const demo = page.locator("ha-gallery >> demo-components-ha-alert");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
+    const demo = await getGalleryDemo(page, "components/ha-alert");

-    // The demo uses property binding (.alertType) not attribute binding,
-    // so we verify that multiple ha-alert elements are present.
+    // The demo uses property binding (.alertType) not attribute binding, so we
+    // verify that multiple ha-alert elements are present.
    const alerts = demo.locator("ha-alert");
-    await expect(alerts.first()).toBeAttached({ timeout: QUICK_TIMEOUT });
-    // There should be at least 4 alerts (one per type)
-    await expect(alerts)
-      .toHaveCount(4, { timeout: QUICK_TIMEOUT })
-      .catch(async () => {
-        // If not exactly 4, just verify there are some (demo may include more)
-        const count = await alerts.count();
-        expect(count).toBeGreaterThanOrEqual(4);
-      });
+    await expect(alerts.nth(3)).toBeAttached({ timeout: QUICK_TIMEOUT });
  });

  test("ha-button renders primary action button", async ({ page }) => {
-    await goToGalleryPage(page, "components/ha-button");
-    const demo = page.locator("ha-gallery >> demo-components-ha-button");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
-    await expect(demo.locator("ha-button, mwc-button").first()).toBeAttached({
-      timeout: QUICK_TIMEOUT,
-    });
+    const demo = await getGalleryDemo(page, "components/ha-button");
+
+    await expectGalleryDemoElement(demo, "ha-button, mwc-button");
  });

  test("ha-control-slider can be found in DOM", async ({ page }) => {
-    await goToGalleryPage(page, "components/ha-control-slider");
-    const demo = page.locator(
-      "ha-gallery >> demo-components-ha-control-slider"
-    );
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
-    await expect(demo.locator("ha-control-slider").first()).toBeAttached({
-      timeout: QUICK_TIMEOUT,
-    });
+    const demo = await getGalleryDemo(page, "components/ha-control-slider");
+
+    await expectGalleryDemoElement(demo, "ha-control-slider");
  });

  test("ha-form renders schema-driven fields", async ({ page }) => {
-    await goToGalleryPage(page, "components/ha-form");
-    const demo = page.locator("ha-gallery >> demo-components-ha-form");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
-    await expect(demo.locator("ha-form").first()).toBeAttached({
-      timeout: QUICK_TIMEOUT,
-    });
-  });
+    const demo = await getGalleryDemo(page, "components/ha-form");

-  test("ha-dialog demo renders a dialog trigger", async ({ page }) => {
-    await goToGalleryPage(page, "components/ha-dialog");
-    const demo = page.locator("ha-gallery >> demo-components-ha-dialog");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
+    await expectGalleryDemoElement(demo, "ha-form");
  });

  test("tile-card renders entity state", async ({ page }) => {
-    await goToGalleryPage(page, "lovelace/tile-card");
-    const demo = page.locator("ha-gallery >> demo-lovelace-tile-card");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
-    await expect(demo.locator("hui-tile-card").first()).toBeAttached({
-      timeout: QUICK_TIMEOUT,
-    });
+    const demo = await getGalleryDemo(page, "lovelace/tile-card");
+
+    await expectGalleryDemoElement(demo, "hui-tile-card");
  });

  test("more-info light renders controls", async ({ page }) => {
-    await goToGalleryPage(page, "more-info/light");
-    const demo = page.locator("ha-gallery >> demo-more-info-light");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
-    // Light more-info should contain a brightness or color-temp control
-    await expect(
-      demo
-        .locator("ha-control-slider, ha-more-info-light, more-info-content")
-        .first()
-    ).toBeAttached({ timeout: SHELL_TIMEOUT });
-  });
+    const demo = await getGalleryDemo(page, "more-info/light");

-  test("more-info cover renders position controls", async ({ page }) => {
-    await goToGalleryPage(page, "more-info/cover");
-    const demo = page.locator("ha-gallery >> demo-more-info-cover");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
+    await expectGalleryDemoElement(
+      demo,
+      "ha-control-slider, ha-more-info-light, more-info-content",
+      SHELL_TIMEOUT
+    );
  });

  test("ha-gauge renders a gauge element", async ({ page }) => {
-    await goToGalleryPage(page, "components/ha-gauge");
-    const demo = page.locator("ha-gallery >> demo-components-ha-gauge");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
-    // ha-gauge page is markdown-based; gauge elements render in the description area
-    await expect(page.locator("ha-gallery >> ha-gauge").first()).toBeAttached({
+    await getGalleryDemo(page, "components/ha-gauge");
+
+    // ha-gauge page is markdown-based; gauge elements render in the description area.
+    await expect(galleryLocator(page, "ha-gauge").first()).toBeAttached({
      timeout: QUICK_TIMEOUT,
    });
  });

  test("ha-switch toggles state on click", async ({ page }) => {
-    await goToGalleryPage(page, "components/ha-switch");
-    const demo = page.locator("ha-gallery >> demo-components-ha-switch");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
+    const demo = await getGalleryDemo(page, "components/ha-switch");

    // Find the first interactive (non-disabled) switch. Pull its checked state
-    // from the property — ha-switch toggles via property, not the attribute.
+    // from the property because ha-switch toggles via property, not attribute.
    const switchEl = demo.locator("ha-switch:not([disabled])").first();
    await expect(switchEl).toBeAttached({ timeout: QUICK_TIMEOUT });

-    const before = await switchEl.evaluate((el: any) => el.checked === true);
+    const before = await switchEl.evaluate(
+      (el: HTMLElement & { checked?: boolean }) => el.checked === true
+    );
    await switchEl.click();
    await expect
-      .poll(() => switchEl.evaluate((el: any) => el.checked === true), {
-        timeout: QUICK_TIMEOUT,
-      })
+      .poll(
+        () =>
+          switchEl.evaluate(
+            (el: HTMLElement & { checked?: boolean }) => el.checked === true
+          ),
+        { timeout: QUICK_TIMEOUT }
+      )
      .toBe(!before);
  });
 });
@@ -0,0 +1,98 @@
+import { expect, type Locator, type Page } from "@playwright/test";
+import {
+  defineParallelSmokeTests,
+  expectNoPageErrors,
+  QUICK_TIMEOUT,
+  SHELL_TIMEOUT,
+  trackPageErrors,
+} from "../helpers";
+
+export const GALLERY_SHELL_IGNORED_PAGE_ERRORS: RegExp[] = [
+  /ResizeObserver/,
+  /Non-Error/,
+];
+
+export const GALLERY_IGNORED_PAGE_ERRORS: RegExp[] = [
+  ...GALLERY_SHELL_IGNORED_PAGE_ERRORS,
+  /Extension context/,
+  // Plain objects thrown by mock WebSocket/data-fetch show up as "Object".
+  /^Object$/,
+  // hui-group-entity-row calls .some() on a possibly-undefined entity_id array
+  // from mock state data - pre-existing gallery data issue.
+  /Cannot read properties of undefined \(reading 'some'\)/,
+];
+
+export interface GalleryPageSmokeCase {
+  name: string;
+  selector: string;
+}
+
+export const galleryLocator = (page: Page, selector: string) =>
+  page.locator(`ha-gallery >> ${selector}`);
+
+const galleryDemoTag = (hash: string) => `demo-${hash.replace(/\//g, "-")}`;
+
+async function waitForGalleryReady(page: Page) {
+  await expect(page.locator("ha-gallery")).toBeAttached({
+    timeout: SHELL_TIMEOUT,
+  });
+}
+
+export async function goToGalleryHome(page: Page) {
+  await page.goto("/");
+  await waitForGalleryReady(page);
+}
+
+export async function goToGalleryPage(page: Page, hash: string) {
+  await page.goto(`/#${hash}`);
+}
+
+async function expectGalleryPageSelector(page: Page, selector: string) {
+  const locator = galleryLocator(page, selector).first();
+  await expect(locator).toBeAttached({ timeout: SHELL_TIMEOUT });
+  return locator;
+}
+
+export async function getGalleryDemo(page: Page, hash: string) {
+  await goToGalleryPage(page, hash);
+  return expectGalleryPageSelector(page, galleryDemoTag(hash));
+}
+
+export async function assertGalleryPageLoads(
+  page: Page,
+  hash: string,
+  selector: string
+) {
+  const errors = trackPageErrors(page);
+  await goToGalleryPage(page, hash);
+  await expectGalleryPageSelector(page, selector);
+  expectNoPageErrors(errors, hash, GALLERY_IGNORED_PAGE_ERRORS);
+}
+
+export function defineGallerySmokeTests(
+  groupName: string,
+  routePrefix: string,
+  pages: GalleryPageSmokeCase[]
+) {
+  defineParallelSmokeTests({
+    groups: [{ name: groupName, routePrefix, pages }],
+    groupName: (group) => group.name,
+    cases: (group) => group.pages,
+    testName: (smokeCase) => `${smokeCase.name} renders without errors`,
+    run: async ({ page, group, smokeCase }) => {
+      await assertGalleryPageLoads(
+        page,
+        `${group.routePrefix}/${smokeCase.name}`,
+        smokeCase.selector
+      );
+    },
+  });
+}
+
+export async function expectGalleryDemoElement(
+  demo: Locator,
+  selector: string,
+  timeout = QUICK_TIMEOUT
+) {
+  await expect(demo.locator(selector).first()).toBeAttached({ timeout });
+}
@@ -0,0 +1,117 @@
+import type { GalleryPageSmokeCase } from "./helpers";
+
+export const componentPages: GalleryPageSmokeCase[] = [
+  { name: "ha-alert", selector: "demo-components-ha-alert" },
+  { name: "ha-badge", selector: "demo-components-ha-badge" },
+  { name: "ha-bar", selector: "demo-components-ha-bar" },
+  { name: "ha-button", selector: "demo-components-ha-button" },
+  { name: "ha-chips", selector: "demo-components-ha-chips" },
+  { name: "ha-control-button", selector: "demo-components-ha-control-button" },
+  {
+    name: "ha-control-circular-slider",
+    selector: "demo-components-ha-control-circular-slider",
+  },
+  {
+    name: "ha-control-number-buttons",
+    selector: "demo-components-ha-control-number-buttons",
+  },
+  {
+    name: "ha-control-select-menu",
+    selector: "demo-components-ha-control-select-menu",
+  },
+  { name: "ha-control-select", selector: "demo-components-ha-control-select" },
+  { name: "ha-control-slider", selector: "demo-components-ha-control-slider" },
+  { name: "ha-control-switch", selector: "demo-components-ha-control-switch" },
+  { name: "ha-dialog", selector: "demo-components-ha-dialog" },
+  { name: "ha-dropdown", selector: "demo-components-ha-dropdown" },
+  {
+    name: "ha-expansion-panel",
+    selector: "demo-components-ha-expansion-panel",
+  },
+  { name: "ha-faded", selector: "demo-components-ha-faded" },
+  { name: "ha-form", selector: "demo-components-ha-form" },
+  { name: "ha-gauge", selector: "demo-components-ha-gauge" },
+  {
+    name: "ha-hs-color-picker",
+    selector: "demo-components-ha-hs-color-picker",
+  },
+  { name: "ha-input", selector: "demo-components-ha-input" },
+  { name: "ha-label-badge", selector: "demo-components-ha-label-badge" },
+  { name: "ha-list", selector: "demo-components-ha-list" },
+  { name: "ha-marquee-text", selector: "demo-components-ha-marquee-text" },
+  {
+    name: "ha-progress-button",
+    selector: "demo-components-ha-progress-button",
+  },
+  { name: "ha-select-box", selector: "demo-components-ha-select-box" },
+  { name: "ha-selector", selector: "demo-components-ha-selector" },
+  { name: "ha-slider", selector: "demo-components-ha-slider" },
+  { name: "ha-spinner", selector: "demo-components-ha-spinner" },
+  { name: "ha-switch", selector: "demo-components-ha-switch" },
+  { name: "ha-textarea", selector: "demo-components-ha-textarea" },
+  { name: "ha-tip", selector: "demo-components-ha-tip" },
+  { name: "ha-tooltip", selector: "demo-components-ha-tooltip" },
+  {
+    name: "ha-adaptive-dialog",
+    selector: "demo-components-ha-adaptive-dialog",
+  },
+  {
+    name: "ha-adaptive-popover",
+    selector: "demo-components-ha-adaptive-popover",
+  },
+];
+
+export const moreInfoPages: GalleryPageSmokeCase[] = [
+  { name: "light", selector: "demo-more-info-light" },
+  { name: "climate", selector: "demo-more-info-climate" },
+  { name: "cover", selector: "demo-more-info-cover" },
+  { name: "fan", selector: "demo-more-info-fan" },
+  { name: "humidifier", selector: "demo-more-info-humidifier" },
+  { name: "input-number", selector: "demo-more-info-input-number" },
+  { name: "input-text", selector: "demo-more-info-input-text" },
+  { name: "lawn-mower", selector: "demo-more-info-lawn-mower" },
+  { name: "lock", selector: "demo-more-info-lock" },
+  { name: "media-player", selector: "demo-more-info-media-player" },
+  { name: "number", selector: "demo-more-info-number" },
+  { name: "scene", selector: "demo-more-info-scene" },
+  { name: "timer", selector: "demo-more-info-timer" },
+  { name: "update", selector: "demo-more-info-update" },
+  { name: "vacuum", selector: "demo-more-info-vacuum" },
+  { name: "water-heater", selector: "demo-more-info-water-heater" },
+];
+
+export const lovelacePages: GalleryPageSmokeCase[] = [
+  { name: "area-card", selector: "demo-lovelace-area-card" },
+  { name: "conditional-card", selector: "demo-lovelace-conditional-card" },
+  { name: "entities-card", selector: "demo-lovelace-entities-card" },
+  { name: "entity-button-card", selector: "demo-lovelace-entity-button-card" },
+  { name: "entity-filter-card", selector: "demo-lovelace-entity-filter-card" },
+  { name: "gauge-card", selector: "demo-lovelace-gauge-card" },
+  { name: "glance-card", selector: "demo-lovelace-glance-card" },
+  {
+    name: "grid-and-stack-card",
+    selector: "demo-lovelace-grid-and-stack-card",
+  },
+  { name: "iframe-card", selector: "demo-lovelace-iframe-card" },
+  { name: "light-card", selector: "demo-lovelace-light-card" },
+  { name: "map-card", selector: "demo-lovelace-map-card" },
+  { name: "markdown-card", selector: "demo-lovelace-markdown-card" },
+  { name: "media-control-card", selector: "demo-lovelace-media-control-card" },
+  { name: "media-player-row", selector: "demo-lovelace-media-player-row" },
+  { name: "picture-card", selector: "demo-lovelace-picture-card" },
+  {
+    name: "picture-elements-card",
+    selector: "demo-lovelace-picture-elements-card",
+  },
+  {
+    name: "picture-entity-card",
+    selector: "demo-lovelace-picture-entity-card",
+  },
+  {
+    name: "picture-glance-card",
+    selector: "demo-lovelace-picture-glance-card",
+  },
+  { name: "thermostat-card", selector: "demo-lovelace-thermostat-card" },
+  { name: "tile-card", selector: "demo-lovelace-tile-card" },
+  { name: "todo-list-card", selector: "demo-lovelace-todo-list-card" },
+];
@@ -1,6 +1,7 @@
 /**
 * Shared helpers and constants for Playwright e2e suites.
 */
+import { expect, test, type Page } from "@playwright/test";

 // ── Timeouts ────────────────────────────────────────────────────────────────
 // Centralised so tweaks don't require search-and-replace across spec files.
@@ -17,21 +18,67 @@ export const NAVIGATION_TIMEOUT = 30_000;

 // ── Error filtering ─────────────────────────────────────────────────────────

-/**
- * Filter out errors known to be unrelated to the app under test:
- *   - ResizeObserver loop notifications (browser quirk, harmless)
- *   - Non-Error rejections (mock data throws plain objects)
- *   - Browser extension noise
- */
-export function appErrors(errors: { message: string }[] | string[]) {
-  const messages =
-    typeof errors[0] === "string"
-      ? (errors as string[])
-      : (errors as { message: string }[]).map((e) => e.message);
-  return messages.filter(
-    (msg) =>
-      !msg.includes("ResizeObserver") &&
-      !msg.includes("Non-Error") &&
-      !msg.includes("Extension context")
-  );
+type PageError = { message: string } | string;
+
+export const IGNORED_PAGE_ERRORS: RegExp[] = [
+  /ResizeObserver/,
+  /Non-Error/,
+  /Extension context/,
+];
+
+export function trackPageErrors(page: Page) {
+  const errors: PageError[] = [];
+  page.on("pageerror", (error) => errors.push(error));
+  return errors;
+}
+
+function pageErrors(errors: PageError[], ignoredErrors = IGNORED_PAGE_ERRORS) {
+  return errors
+    .map((error) => (typeof error === "string" ? error : error.message))
+    .filter((message) =>
+      ignoredErrors.every((pattern) => !pattern.test(message))
+    );
+}
+
+export function expectNoPageErrors(
+  errors: PageError[],
+  context?: string,
+  ignoredErrors = IGNORED_PAGE_ERRORS
+) {
+  const realErrors = pageErrors(errors, ignoredErrors);
+  const details = realErrors.length ? `: ${realErrors.join("; ")}` : "";
+  expect(
+    realErrors,
+    context ? `JS errors on ${context}${details}` : `JS errors${details}`
+  ).toHaveLength(0);
+}
+
+export interface DefineParallelSmokeTestsOptions<TGroup, TCase> {
+  groups: readonly TGroup[];
+  groupName: (group: TGroup) => string;
+  cases: (group: TGroup) => readonly TCase[];
+  testName: (smokeCase: TCase, group: TGroup) => string;
+  run: (context: {
+    page: Page;
+    group: TGroup;
+    smokeCase: TCase;
+  }) => Promise<void>;
+}
+
+export function defineParallelSmokeTests<TGroup, TCase>({
+  groups,
+  groupName,
+  cases,
+  testName,
+  run,
+}: DefineParallelSmokeTestsOptions<TGroup, TCase>) {
+  for (const group of groups) {
+    test.describe(groupName(group), () => {
+      for (const smokeCase of cases(group)) {
+        test(testName(smokeCase, group), async ({ page }) => {
+          await run({ page, group, smokeCase });
+        });
+      }
+    });
+  }
 }
@@ -0,0 +1,21 @@
+const DEFAULT_LOCAL_WORKERS = "60%";
+const VALID_WORKERS = /^[1-9]\d*%?$/;
+
+export const getE2EWorkers = (): number | string => {
+  if (process.env.CI) {
+    return 1;
+  }
+
+  const workers = process.env.E2E_WORKERS;
+  if (!workers) {
+    return DEFAULT_LOCAL_WORKERS;
+  }
+
+  if (!VALID_WORKERS.test(workers)) {
+    throw new Error(
+      `E2E_WORKERS must be a positive integer or percentage, received "${workers}".`
+    );
+  }
+
+  return workers.endsWith("%") ? workers : Number(workers);
+};
@@ -1,4 +1,5 @@
 import { defineConfig, devices } from "@playwright/test";
+import { getE2EWorkers } from "./playwright-workers";

 const APP_PORT = 8095;
 const APP_BASE_URL = `http://localhost:${APP_PORT}`;
@@ -11,8 +12,10 @@ export default defineConfig({
  expect: { timeout: 15_000 },

  retries: process.env.CI ? 1 : 0,
+  fullyParallel: true,
+  workers: getE2EWorkers(),

-  outputDir: "test-results",
+  outputDir: "test-results/app",
  reporter: [["list"], ["blob", { outputDir: "reports/app" }]],

  use: {
@@ -1,4 +1,5 @@
 import { defineConfig, devices } from "@playwright/test";
+import { getE2EWorkers } from "./playwright-workers";

 // Port 8090 matches the `develop_demo` dev server (rspack-dev-server-demo).
 // This means running `demo/script/develop_demo` and then `yarn test:e2e:local`
@@ -16,8 +17,10 @@ export default defineConfig({
  expect: { timeout: 15_000 },

  retries: process.env.CI ? 1 : 0,
+  fullyParallel: true,
+  workers: getE2EWorkers(),

-  outputDir: "test-results",
+  outputDir: "test-results/demo",
  reporter: [["list"], ["blob", { outputDir: "reports/demo" }]],

  use: {
@@ -1,4 +1,5 @@
 import { defineConfig, devices } from "@playwright/test";
+import { getE2EWorkers } from "./playwright-workers";

 const GALLERY_PORT = 8100;
 const GALLERY_BASE_URL = `http://localhost:${GALLERY_PORT}`;
@@ -11,8 +12,10 @@ export default defineConfig({
  expect: { timeout: 15_000 },

  retries: process.env.CI ? 1 : 0,
+  fullyParallel: true,
+  workers: getE2EWorkers(),

-  outputDir: "test-results",
+  outputDir: "test-results/gallery",
  reporter: [["list"], ["blob", { outputDir: "reports/gallery" }]],

  use: {
@@ -1,16 +1,106 @@
 #!/usr/bin/env node
 // Runs each e2e suite (demo, app, gallery) regardless of individual failures,
-// then collects and merges blob reports and exits with a non-zero code if any
-// suite failed.
+// then collects and merges blob reports locally and exits with a non-zero code
+// if any suite failed.
 //
 // Usage: node test/e2e/run-suites.mjs <suite> [<suite> ...]
 // Where <suite> matches a test:e2e:<suite> script in package.json,
 // e.g. "demo", "app", "gallery".
 //
-// Using ; or running suites independently avoids the && short-circuit problem
-// where a failing suite skips the remaining suites and their blob reports.
+// Running suites independently avoids the && short-circuit problem where a
+// failing suite skips the remaining suites and their blob reports.
+// Set E2E_WORKERS to a number or percentage to override local workers.
+// Cold local builds run sequentially because suites share generated assets.

-import { execFileSync } from "child_process";
+import { execFileSync, spawn } from "child_process";
+
+const TRUE_VALUES = new Set(["1", "true", "yes"]);
+
+const SUITE_SERVERS = {
+  demo: { port: 8090, suite: "demo" },
+  app: { port: 8095, suite: "e2e-app" },
+  gallery: { port: 8100, suite: "gallery" },
+};
+
+const isTruthy = (value) => TRUE_VALUES.has(value?.toLowerCase() ?? "");
+
+const hasManagedServer = async (suite) => {
+  const server = SUITE_SERVERS[suite];
+  if (!server) return false;
+
+  try {
+    const response = await fetch(
+      `http://localhost:${server.port}/__ha_dev_status`,
+      { signal: AbortSignal.timeout(1000) }
+    );
+    if (!response.ok) return false;
+    const status = await response.json();
+    return status.server === "ha-frontend-dev" && status.suite === server.suite;
+  } catch {
+    return false;
+  }
+};
+
+const formatDuration = (ms) => {
+  const totalSeconds = Math.round(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return minutes ? `${minutes}m ${seconds}s` : `${seconds}s`;
+};
+
+const writePrefixed = (suite, stream, chunk, pending) => {
+  const lines = `${pending.value}${chunk}`.split(/\r?\n/);
+  pending.value = lines.pop() ?? "";
+  for (const line of lines) {
+    stream.write(`[${suite}] ${line}\n`);
+  }
+};
+
+const flushPrefixed = (suite, stream, pending) => {
+  if (!pending.value) return;
+  stream.write(`[${suite}] ${pending.value}\n`);
+  pending.value = "";
+};
+
+const runSuite = (suite, env) =>
+  new Promise((resolve) => {
+    const started = Date.now();
+    const child = spawn("yarn", [`test:e2e:${suite}`], {
+      stdio: ["ignore", "pipe", "pipe"],
+      env,
+    });
+    const pendingStdout = { value: "" };
+    const pendingStderr = { value: "" };
+    const workerLabel = env.E2E_WORKERS ? ` (workers: ${env.E2E_WORKERS})` : "";
+
+    process.stdout.write(
+      `\n--- Running suite: test:e2e:${suite}${workerLabel} ---\n`
+    );
+
+    child.stdout.on("data", (chunk) =>
+      writePrefixed(suite, process.stdout, chunk, pendingStdout)
+    );
+    child.stderr.on("data", (chunk) =>
+      writePrefixed(suite, process.stderr, chunk, pendingStderr)
+    );
+
+    child.on("error", (err) => {
+      flushPrefixed(suite, process.stdout, pendingStdout);
+      flushPrefixed(suite, process.stderr, pendingStderr);
+      process.stderr.write(`[${suite}] Failed to start: ${err.message}\n`);
+      resolve({ suite, code: 1, duration: Date.now() - started });
+    });
+
+    child.on("close", (code) => {
+      flushPrefixed(suite, process.stdout, pendingStdout);
+      flushPrefixed(suite, process.stderr, pendingStderr);
+      const duration = Date.now() - started;
+      process.stdout.write(
+        `--- Finished suite: test:e2e:${suite} (${formatDuration(duration)}) ---\n`
+      );
+      resolve({ suite, code: code ?? 1, duration });
+    });
+  });

 const suites = process.argv.slice(2);
 if (!suites.length) {
@@ -18,32 +108,72 @@ if (!suites.length) {
  process.exit(1);
 }

-const failures = [];
+const hasAllManagedServers = (
+  await Promise.all(suites.map(hasManagedServer))
+).every(Boolean);
+const sequential =
+  isTruthy(process.env.E2E_SEQUENTIAL) ||
+  (suites.length > 1 && !hasAllManagedServers);
+const skipMerge = isTruthy(process.env.E2E_SKIP_MERGE);
+const suiteWorkers =
+  !sequential &&
+  !process.env.CI &&
+  !process.env.E2E_WORKERS &&
+  suites.length > 1
+    ? `${Math.max(1, Math.floor(60 / suites.length))}%`
+    : undefined;
+const suiteEnv = suiteWorkers
+  ? { ...process.env, E2E_WORKERS: suiteWorkers }
+  : process.env;

-for (const suite of suites) {
-  process.stdout.write(`\n--- Running suite: test:e2e:${suite} ---\n`);
-  try {
-    execFileSync("yarn", [`test:e2e:${suite}`], { stdio: "inherit" });
-  } catch {
-    failures.push(suite);
+const results = [];
+
+if (sequential) {
+  if (!isTruthy(process.env.E2E_SEQUENTIAL)) {
+    process.stdout.write(
+      "Running suites sequentially because not all managed dev servers are available.\n"
+    );
  }
+  for (const suite of suites) {
+    // eslint-disable-next-line no-await-in-loop
+    results.push(await runSuite(suite, suiteEnv));
+  }
+} else {
+  results.push(
+    ...(await Promise.all(suites.map((suite) => runSuite(suite, suiteEnv))))
+  );
+}
+
+const failures = results
+  .filter(({ code }) => code !== 0)
+  .map(({ suite }) => suite);
+
+process.stdout.write("\nE2E suite timings:\n");
+for (const { suite, duration } of results) {
+  process.stdout.write(`- test:e2e:${suite}: ${formatDuration(duration)}\n`);
 }

 // Collect and merge blob reports regardless of suite outcomes.
-execFileSync("node", ["test/e2e/collect-blob-reports.mjs"], {
-  stdio: "inherit",
-});
-execFileSync(
-  "npx",
-  [
-    "playwright",
-    "merge-reports",
-    "-c",
-    "test/e2e/playwright.merge.config.ts",
-    "test/e2e/reports/blob",
-  ],
-  { stdio: "inherit" }
-);
+if (skipMerge) {
+  process.stdout.write(
+    "\nSkipping merged e2e report because E2E_SKIP_MERGE is set.\n"
+  );
+} else {
+  execFileSync("node", ["test/e2e/collect-blob-reports.mjs"], {
+    stdio: "inherit",
+  });
+  execFileSync(
+    "npx",
+    [
+      "playwright",
+      "merge-reports",
+      "-c",
+      "test/e2e/playwright.merge.config.ts",
+      "test/e2e/reports/blob",
+    ],
+    { stdio: "inherit" }
+  );
+}

 if (failures.length) {
  process.stderr.write(
@@ -1,127 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import {
-  migrateEntitiesCardConfig,
-  migrateGlanceCardConfig,
-} from "../../../../src/panels/lovelace/cards/migrate-card-config";
-import type {
-  EntitiesCardConfig,
-  GlanceCardConfig,
-} from "../../../../src/panels/lovelace/cards/types";
-
-describe("migrateEntitiesCardConfig", () => {
-  it("migrates the legacy `format` option to `time_format` on native rows", () => {
-    const config = {
-      type: "entities",
-      entities: [{ entity: "sensor.last_changed", format: "relative" }],
-    } as unknown as EntitiesCardConfig;
-
-    const result = migrateEntitiesCardConfig(config);
-
-    expect(result.entities).toEqual([
-      { entity: "sensor.last_changed", time_format: "relative" },
-    ]);
-    // `format` is dropped after migration
-    expect(result.entities[0]).not.toHaveProperty("format");
-  });
-
-  it("leaves custom rows untouched", () => {
-    const customRow = {
-      type: "custom:multiple-entity-row",
-      entity: "sensor.power",
-      format: "precision1",
-    };
-    const config = {
-      type: "entities",
-      entities: [customRow],
-    } as unknown as EntitiesCardConfig;
-
-    const result = migrateEntitiesCardConfig(config);
-
-    // Nothing changed, so the same config reference is returned and the
-    // custom row keeps its own `format` semantics.
-    expect(result).toBe(config);
-    expect(result.entities[0]).toEqual(customRow);
-  });
-
-  it("returns the same config reference when there is nothing to migrate", () => {
-    const config = {
-      type: "entities",
-      entities: [{ entity: "sensor.temperature" }, { entity: "light.kitchen" }],
-    } as EntitiesCardConfig;
-
-    expect(migrateEntitiesCardConfig(config)).toBe(config);
-  });
-
-  it("passes string rows through untouched", () => {
-    const config = {
-      type: "entities",
-      entities: ["sensor.temperature", { entity: "sensor.x", format: "time" }],
-    } as EntitiesCardConfig;
-
-    const result = migrateEntitiesCardConfig(config);
-
-    expect(result.entities[0]).toBe("sensor.temperature");
-    expect(result.entities[1]).toEqual({
-      entity: "sensor.x",
-      time_format: "time",
-    });
-  });
-
-  it("keeps a pre-existing `time_format` over the legacy `format`", () => {
-    const config = {
-      type: "entities",
-      entities: [
-        { entity: "sensor.x", format: "relative", time_format: "datetime" },
-      ],
-    } as unknown as EntitiesCardConfig;
-
-    const result = migrateEntitiesCardConfig(config);
-
-    expect(result.entities[0]).toEqual({
-      entity: "sensor.x",
-      time_format: "datetime",
-    });
-  });
-});
-
-describe("migrateGlanceCardConfig", () => {
-  it("migrates the legacy `format` option to `time_format`", () => {
-    const config = {
-      type: "glance",
-      entities: [{ entity: "sensor.last_changed", format: "relative" }],
-    } as unknown as GlanceCardConfig;
-
-    const result = migrateGlanceCardConfig(config);
-
-    expect(result.entities).toEqual([
-      { entity: "sensor.last_changed", time_format: "relative" },
-    ]);
-    expect(result.entities[0]).not.toHaveProperty("format");
-  });
-
-  it("returns the same config reference when there is nothing to migrate", () => {
-    const config = {
-      type: "glance",
-      entities: ["sensor.temperature", { entity: "light.kitchen" }],
-    } as GlanceCardConfig;
-
-    expect(migrateGlanceCardConfig(config)).toBe(config);
-  });
-
-  it("keeps a pre-existing `time_format` over the legacy `format`", () => {
-    const config = {
-      type: "glance",
-      entities: [
-        { entity: "sensor.x", format: "relative", time_format: "datetime" },
-      ],
-    } as unknown as GlanceCardConfig;
-
-    const result = migrateGlanceCardConfig(config);
-
-    expect(result.entities[0]).toEqual({
-      entity: "sensor.x",
-      time_format: "datetime",
-    });
-  });
-});
@@ -3434,10 +3434,10 @@ __metadata:
  languageName: node
  linkType: hard

-"@lokalise/node-api@npm:16.1.0":
-  version: 16.1.0
-  resolution: "@lokalise/node-api@npm:16.1.0"
-  checksum: 10/f77f9e7d25af18be950f15750863061d00382f0abd2cfab1461b4354ba3d7ecc514e30811bc656e9cf382632d205c099d5d3d974b487dba75ff00dc9c1e193e0
+"@lokalise/node-api@npm:16.0.0":
+  version: 16.0.0
+  resolution: "@lokalise/node-api@npm:16.0.0"
+  checksum: 10/88075629f30feb19537f8c40dabf7a85cc0539445322c216686f7e5a68ba6735a083d7ce1eee806ce31606d28ee6250ca39b185a783ce5ec263e1e0e71c3a701
  languageName: node
  linkType: hard

@@ -5741,105 +5741,105 @@ __metadata:
  languageName: node
  linkType: hard

-"@typescript-eslint/eslint-plugin@npm:8.64.0":
-  version: 8.64.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:8.64.0"
+"@typescript-eslint/eslint-plugin@npm:8.63.0":
+  version: 8.63.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.63.0"
  dependencies:
    "@eslint-community/regexpp": "npm:^4.12.2"
-    "@typescript-eslint/scope-manager": "npm:8.64.0"
-    "@typescript-eslint/type-utils": "npm:8.64.0"
-    "@typescript-eslint/utils": "npm:8.64.0"
-    "@typescript-eslint/visitor-keys": "npm:8.64.0"
+    "@typescript-eslint/scope-manager": "npm:8.63.0"
+    "@typescript-eslint/type-utils": "npm:8.63.0"
+    "@typescript-eslint/utils": "npm:8.63.0"
+    "@typescript-eslint/visitor-keys": "npm:8.63.0"
    ignore: "npm:^7.0.5"
    natural-compare: "npm:^1.4.0"
    ts-api-utils: "npm:^2.5.0"
  peerDependencies:
-    "@typescript-eslint/parser": ^8.64.0
+    "@typescript-eslint/parser": ^8.63.0
    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
    typescript: ">=4.8.4 <6.1.0"
-  checksum: 10/ec7cbcb44968386a4b9aff9272ce6b75bdcc7f398db5f2d07a21854baf0364ca33c74268c0e19d21386c6b87b9358b141df7bef3d26e4e4e7a9eb5f8f394dc75
+  checksum: 10/ab60da4c4a66e8b882b6d585457c6cd352492917940d43b255021f71fc057d327fe8e46856316b312a5c5b78b1245acb129869a7c60a7c2fa65e7822ef58c7c6
  languageName: node
  linkType: hard

-"@typescript-eslint/parser@npm:8.64.0":
-  version: 8.64.0
-  resolution: "@typescript-eslint/parser@npm:8.64.0"
+"@typescript-eslint/parser@npm:8.63.0":
+  version: 8.63.0
+  resolution: "@typescript-eslint/parser@npm:8.63.0"
  dependencies:
-    "@typescript-eslint/scope-manager": "npm:8.64.0"
-    "@typescript-eslint/types": "npm:8.64.0"
-    "@typescript-eslint/typescript-estree": "npm:8.64.0"
-    "@typescript-eslint/visitor-keys": "npm:8.64.0"
+    "@typescript-eslint/scope-manager": "npm:8.63.0"
+    "@typescript-eslint/types": "npm:8.63.0"
+    "@typescript-eslint/typescript-estree": "npm:8.63.0"
+    "@typescript-eslint/visitor-keys": "npm:8.63.0"
    debug: "npm:^4.4.3"
  peerDependencies:
    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
    typescript: ">=4.8.4 <6.1.0"
-  checksum: 10/7239b16a6ca6bb1764ad04bc1eb46997336541d049fcffb4966ef404fbb02324b2b33aed50c2b976359ec8d3c97b90668cfd6aa9177228b4b799152f01a3904a
+  checksum: 10/40ee2a1c703898b9c6df0731e5584ce0bf63d8c13fb464a952500dae156b68b41b522b2cb4755a2f0cb7e0d529b0888e3ba783e3eeb1236c062a3a7ca227f634
  languageName: node
  linkType: hard

-"@typescript-eslint/project-service@npm:8.64.0":
-  version: 8.64.0
-  resolution: "@typescript-eslint/project-service@npm:8.64.0"
+"@typescript-eslint/project-service@npm:8.63.0":
+  version: 8.63.0
+  resolution: "@typescript-eslint/project-service@npm:8.63.0"
  dependencies:
-    "@typescript-eslint/tsconfig-utils": "npm:^8.64.0"
-    "@typescript-eslint/types": "npm:^8.64.0"
+    "@typescript-eslint/tsconfig-utils": "npm:^8.63.0"
+    "@typescript-eslint/types": "npm:^8.63.0"
    debug: "npm:^4.4.3"
  peerDependencies:
    typescript: ">=4.8.4 <6.1.0"
-  checksum: 10/511b9a8f1dcb32c99003cab9791309056ac6e889fe46227600deb743e869a63b3e78d7d2d3ef1bf65b2d5e574b73add3040fbef4c0f94aed587368aaea149559
+  checksum: 10/16b07d0e95abfbe56eccc7c67185caf43e9059740c82a09a0f0f4393539f89a19f8c1b996d396f9476401af55bd804897fd19c988712db3e0f36562d2805c223
  languageName: node
  linkType: hard

-"@typescript-eslint/scope-manager@npm:8.64.0":
-  version: 8.64.0
-  resolution: "@typescript-eslint/scope-manager@npm:8.64.0"
+"@typescript-eslint/scope-manager@npm:8.63.0":
+  version: 8.63.0
+  resolution: "@typescript-eslint/scope-manager@npm:8.63.0"
  dependencies:
-    "@typescript-eslint/types": "npm:8.64.0"
-    "@typescript-eslint/visitor-keys": "npm:8.64.0"
-  checksum: 10/3c72c4915cee19d632ddc7491c3a4668dd04aa8bcb112fde8ac10aea2cc0364aaa8439d9939d0c62a7b4159fc22f4ced7cba3a77df4422b21d76497068f08076
+    "@typescript-eslint/types": "npm:8.63.0"
+    "@typescript-eslint/visitor-keys": "npm:8.63.0"
+  checksum: 10/6b0183e85d79e287660274d39fed1fc8321ae03ae40545acaad6718fd2524063d302f3348c04576d038a25f16f8c9ca4e8780a0ad754f1a494a00027e867deda
  languageName: node
  linkType: hard

-"@typescript-eslint/tsconfig-utils@npm:8.64.0, @typescript-eslint/tsconfig-utils@npm:^8.64.0":
-  version: 8.64.0
-  resolution: "@typescript-eslint/tsconfig-utils@npm:8.64.0"
+"@typescript-eslint/tsconfig-utils@npm:8.63.0, @typescript-eslint/tsconfig-utils@npm:^8.63.0":
+  version: 8.63.0
+  resolution: "@typescript-eslint/tsconfig-utils@npm:8.63.0"
  peerDependencies:
    typescript: ">=4.8.4 <6.1.0"
-  checksum: 10/905469c5067a9a2d18d065848c6497081ab787b22a9d7c06499f4bb593b7d67f9fb17e7861a114c46626555853cc52d4542db5311c8dc7cd138e45461a73e589
+  checksum: 10/7c23671159f8593b676d53bc52b4a3bd4c3ad62abe2ad99b379b70298abf3b784cdcf18ca2b10f2aa62a9f8e0232e6efb87364940a3bd4a32126a357f39ac3c8
  languageName: node
  linkType: hard

-"@typescript-eslint/type-utils@npm:8.64.0":
-  version: 8.64.0
-  resolution: "@typescript-eslint/type-utils@npm:8.64.0"
+"@typescript-eslint/type-utils@npm:8.63.0":
+  version: 8.63.0
+  resolution: "@typescript-eslint/type-utils@npm:8.63.0"
  dependencies:
-    "@typescript-eslint/types": "npm:8.64.0"
-    "@typescript-eslint/typescript-estree": "npm:8.64.0"
-    "@typescript-eslint/utils": "npm:8.64.0"
+    "@typescript-eslint/types": "npm:8.63.0"
+    "@typescript-eslint/typescript-estree": "npm:8.63.0"
+    "@typescript-eslint/utils": "npm:8.63.0"
    debug: "npm:^4.4.3"
    ts-api-utils: "npm:^2.5.0"
  peerDependencies:
    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
    typescript: ">=4.8.4 <6.1.0"
-  checksum: 10/7ab1fd8c0d292c0155cf137d316b1618681eca0fe4cf446a05d909de41311ec6bb64fed82513e822063a962508d5b3e615fb0155a4a565d6b9c6cb81d06a5cd2
+  checksum: 10/8a1001edb129aec55c4ef8567f5f33af4b0ee92e89463f45e7d8a006872e438db1a3cbe2364769d205124d9d143018c920e165868788a0e7aee15466ed6d38f0
  languageName: node
  linkType: hard

-"@typescript-eslint/types@npm:8.64.0, @typescript-eslint/types@npm:^8.56.0, @typescript-eslint/types@npm:^8.64.0":
-  version: 8.64.0
-  resolution: "@typescript-eslint/types@npm:8.64.0"
-  checksum: 10/b8951c00ce9b9702f3201f017354774ea5f39c30c2b6f815cb50d91f53f61c325e30f548329daf731d5169d752095cf102da54b754fb202bcfb619faa56fa9f4
+"@typescript-eslint/types@npm:8.63.0, @typescript-eslint/types@npm:^8.56.0, @typescript-eslint/types@npm:^8.63.0":
+  version: 8.63.0
+  resolution: "@typescript-eslint/types@npm:8.63.0"
+  checksum: 10/f72eb114970cae0da8e53f68cd8dca1b51ac410f4438141a2851655fa07aacb3090e24a2ae53462cf0970e4d5b52cabf9693aa6f07abdff5c210874806427e5b
  languageName: node
  linkType: hard

-"@typescript-eslint/typescript-estree@npm:8.64.0":
-  version: 8.64.0
-  resolution: "@typescript-eslint/typescript-estree@npm:8.64.0"
+"@typescript-eslint/typescript-estree@npm:8.63.0":
+  version: 8.63.0
+  resolution: "@typescript-eslint/typescript-estree@npm:8.63.0"
  dependencies:
-    "@typescript-eslint/project-service": "npm:8.64.0"
-    "@typescript-eslint/tsconfig-utils": "npm:8.64.0"
-    "@typescript-eslint/types": "npm:8.64.0"
-    "@typescript-eslint/visitor-keys": "npm:8.64.0"
+    "@typescript-eslint/project-service": "npm:8.63.0"
+    "@typescript-eslint/tsconfig-utils": "npm:8.63.0"
+    "@typescript-eslint/types": "npm:8.63.0"
+    "@typescript-eslint/visitor-keys": "npm:8.63.0"
    debug: "npm:^4.4.3"
    minimatch: "npm:^10.2.2"
    semver: "npm:^7.7.3"
@@ -5847,32 +5847,32 @@ __metadata:
    ts-api-utils: "npm:^2.5.0"
  peerDependencies:
    typescript: ">=4.8.4 <6.1.0"
-  checksum: 10/833101d25e820d1d0e317dfc9beca985b3c87e5458b20ed002c86c2d425667aa506f756f1759b54f724033effb529266f836f912c460ee662f347fb43dded6ed
+  checksum: 10/793e0227698f4d8b325922816f27a4e737760aae255874c2021c5e2179499fd036b9e87bf0346ead6360444fb7ab4815bb558c94a17d8481632351bbdb2780bf
  languageName: node
  linkType: hard

-"@typescript-eslint/utils@npm:8.64.0":
-  version: 8.64.0
-  resolution: "@typescript-eslint/utils@npm:8.64.0"
+"@typescript-eslint/utils@npm:8.63.0":
+  version: 8.63.0
+  resolution: "@typescript-eslint/utils@npm:8.63.0"
  dependencies:
    "@eslint-community/eslint-utils": "npm:^4.9.1"
-    "@typescript-eslint/scope-manager": "npm:8.64.0"
-    "@typescript-eslint/types": "npm:8.64.0"
-    "@typescript-eslint/typescript-estree": "npm:8.64.0"
+    "@typescript-eslint/scope-manager": "npm:8.63.0"
+    "@typescript-eslint/types": "npm:8.63.0"
+    "@typescript-eslint/typescript-estree": "npm:8.63.0"
  peerDependencies:
    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
    typescript: ">=4.8.4 <6.1.0"
-  checksum: 10/ff7e5374bd6ef60d7df723e6440468e3a5d4879d1d9876e322904319a1f1d2f98d858fc9b9169dbbd7ee0786a07102a058f13e2b6c16d1bf9aae9eb836a258a3
+  checksum: 10/017bd1998822902b5dde5af9e031908aeb8861565b947aa217d5641bac4758fb831c52629b600bb58a990fcfef1ca58eaf5b44595575bb71a43761c2f40a7f56
  languageName: node
  linkType: hard

-"@typescript-eslint/visitor-keys@npm:8.64.0":
-  version: 8.64.0
-  resolution: "@typescript-eslint/visitor-keys@npm:8.64.0"
+"@typescript-eslint/visitor-keys@npm:8.63.0":
+  version: 8.63.0
+  resolution: "@typescript-eslint/visitor-keys@npm:8.63.0"
  dependencies:
-    "@typescript-eslint/types": "npm:8.64.0"
+    "@typescript-eslint/types": "npm:8.63.0"
    eslint-visitor-keys: "npm:^5.0.0"
-  checksum: 10/d149be4ac0e67c51097cdb7335d8e2d29b9dc0de173961c5cc550e938a00a3af28b1f8ecd7ad832fcfe489d1b11e36fdd394b6ea92115a7558123562e31a704f
+  checksum: 10/9edcff478ba98f81f843b0c02874f3ef58c15b1001b2cf74d878416340c460a7c6e37442b4bee3ef226f0029131d620ee05a9ee3d19ec694ffa07fcf9a7a03ca
  languageName: node
  linkType: hard

@@ -7071,12 +7071,12 @@ __metadata:
  languageName: node
  linkType: hard

-"barcode-detector@npm:3.2.1":
-  version: 3.2.1
-  resolution: "barcode-detector@npm:3.2.1"
+"barcode-detector@npm:3.2.0":
+  version: 3.2.0
+  resolution: "barcode-detector@npm:3.2.0"
  dependencies:
-    zxing-wasm: "npm:3.1.1"
-  checksum: 10/17ba87cea89d3068794bb106851b09db0744fc4de1ae2998835564ac662876d8d9437ed89f7984c6765c941f2b366b0d33a4f5e8cc8d1c5a05f073a2b628cfce
+    zxing-wasm: "npm:3.1.0"
+  checksum: 10/f52eb18ddae2af3d4c9c76b47e7b639d0834cd32f558901d8a23cc00349047e53a6da5c3958653fa524dcb912ed9178f3e0d37939b9be00f9607772a84d90ccf
  languageName: node
  linkType: hard

@@ -9470,10 +9470,10 @@ __metadata:
  languageName: node
  linkType: hard

-"fuse.js@npm:7.5.0":
-  version: 7.5.0
-  resolution: "fuse.js@npm:7.5.0"
-  checksum: 10/44dafab623a1144971ccbb380d6874ef6c51a73c85474016b0d47d6ad732d819cdb070f056149cd968b5304e7c0975f1890aaf98f3c4def2e9c21aebe4d62e23
+"fuse.js@npm:7.4.2":
+  version: 7.4.2
+  resolution: "fuse.js@npm:7.4.2"
+  checksum: 10/1605bb929331056f9215a8f0a19b2d22615d9195e17794f41254bdeeb77b0145ed0ad6b6842227b329783a4ab53586d795924e7a4a3fb664295f365ef6e2405c
  languageName: node
  linkType: hard

@@ -9971,7 +9971,7 @@ __metadata:
    "@lit/context": "npm:1.1.6"
    "@lit/reactive-element": "npm:2.1.2"
    "@lit/task": "npm:1.0.3"
-    "@lokalise/node-api": "npm:16.1.0"
+    "@lokalise/node-api": "npm:16.0.0"
    "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch"
    "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
    "@material/web": "npm:2.4.1"
@@ -10011,7 +10011,7 @@ __metadata:
    "@webcomponents/webcomponentsjs": "npm:2.8.0"
    babel-loader: "npm:10.1.1"
    babel-plugin-polyfill-corejs3: "npm:1.0.0"
-    barcode-detector: "npm:3.2.1"
+    barcode-detector: "npm:3.2.0"
    browserslist-useragent-regexp: "npm:4.1.4"
    cally: "npm:0.9.2"
    color-name: "npm:2.1.0"
@@ -10036,7 +10036,7 @@ __metadata:
    eslint-plugin-wc: "npm:3.1.0"
    fancy-log: "npm:2.0.0"
    fs-extra: "npm:11.3.6"
-    fuse.js: "npm:7.5.0"
+    fuse.js: "npm:7.4.2"
    generate-license-file: "npm:4.2.1"
    glob: "npm:13.0.6"
    globals: "npm:17.7.0"
@@ -10089,7 +10089,7 @@ __metadata:
    tinykeys: "patch:tinykeys@npm%3A4.0.0#~/.yarn/patches/tinykeys-npm-4.0.0-a6ca3fd771.patch"
    ts-lit-plugin: "npm:2.0.2"
    typescript: "npm:6.0.3"
-    typescript-eslint: "npm:8.64.0"
+    typescript-eslint: "npm:8.63.0"
    vite-tsconfig-paths: "npm:6.1.1"
    vitest: "npm:4.1.10"
    webpack-stats-plugin: "npm:1.1.3"
@@ -15026,12 +15026,12 @@ __metadata:
  languageName: node
  linkType: hard

-"type-fest@npm:^5.8.0":
-  version: 5.8.0
-  resolution: "type-fest@npm:5.8.0"
+"type-fest@npm:^5.7.0":
+  version: 5.7.0
+  resolution: "type-fest@npm:5.7.0"
  dependencies:
    tagged-tag: "npm:^1.0.0"
-  checksum: 10/4dbe4c78ac6933d3d165b01f9d552991a84d63e5352110e01bebb5c46499fb1f44d199fc88835b18ee5662ee44c73926621f59525e46f7faa031086ac00b2686
+  checksum: 10/4867626aa489968df98e09ecdefbc45dfbb191ae5fb8924b3bd45da9cd940879b387086226366dce028570983a3fbe80adc53ad105a169bbbd27621c496bd6f0
  languageName: node
  linkType: hard

@@ -15088,18 +15088,18 @@ __metadata:
  languageName: node
  linkType: hard

-"typescript-eslint@npm:8.64.0":
-  version: 8.64.0
-  resolution: "typescript-eslint@npm:8.64.0"
+"typescript-eslint@npm:8.63.0":
+  version: 8.63.0
+  resolution: "typescript-eslint@npm:8.63.0"
  dependencies:
-    "@typescript-eslint/eslint-plugin": "npm:8.64.0"
-    "@typescript-eslint/parser": "npm:8.64.0"
-    "@typescript-eslint/typescript-estree": "npm:8.64.0"
-    "@typescript-eslint/utils": "npm:8.64.0"
+    "@typescript-eslint/eslint-plugin": "npm:8.63.0"
+    "@typescript-eslint/parser": "npm:8.63.0"
+    "@typescript-eslint/typescript-estree": "npm:8.63.0"
+    "@typescript-eslint/utils": "npm:8.63.0"
  peerDependencies:
    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
    typescript: ">=4.8.4 <6.1.0"
-  checksum: 10/7812e25506003c2a5b395a51ca3c31929028485d191049e6a813e65829e79fcebb07251ba42c5d75af8d15233a5bbb44dd37138345787779eabe07b88fcf75ec
+  checksum: 10/ab0f3324cbf6ab910903977b9364138c67ccad35675962702bfbe052231440439dcdc50de0c01a1eb1ccecde796a4e117858b10166d9d1153b3b2d82c73a92ba
  languageName: node
  linkType: hard

@@ -16514,14 +16514,14 @@ __metadata:
  languageName: node
  linkType: hard

-"zxing-wasm@npm:3.1.1":
-  version: 3.1.1
-  resolution: "zxing-wasm@npm:3.1.1"
+"zxing-wasm@npm:3.1.0":
+  version: 3.1.0
+  resolution: "zxing-wasm@npm:3.1.0"
  dependencies:
    "@types/emscripten": "npm:^1.41.5"
-    type-fest: "npm:^5.8.0"
+    type-fest: "npm:^5.7.0"
  peerDependencies:
    "@types/emscripten": ">=1.39.6"
-  checksum: 10/1a714b50156ca7dce5eecb1c1b1c843925c75b354cd030d743bab905e16eb20c9c65646260574aeb21b03639f17d790412b945b9d32890ffdba3ec9d7643fca3
+  checksum: 10/ea68d0cfbe31d8dabcd9b942dcfdb703866c1f76ee0d804fb75f1e49f092a26771575705dd48d69927bc6525f146fd9e35030a5a72341222716d7f62e5f6c788
  languageName: node
  linkType: hard
Author	SHA1	Message	Date
Aidan Timson	00ff96f7e6	Address E2E review findings	2026-07-16 08:12:03 +01:00
Aidan Timson	964dc10ed4	Limit gallery shell error filtering	2026-07-16 08:12:03 +01:00
Aidan Timson	79ffaee938	Keep app shell error checks strict	2026-07-16 08:12:03 +01:00
Aidan Timson	1700f56563	Restore real demo sidebar clicks	2026-07-16 08:12:03 +01:00
Aidan Timson	fb973bfdcf	Validate E2E worker overrides	2026-07-16 08:12:03 +01:00
Aidan Timson	0ce72ec3e4	Avoid concurrent cold E2E builds	2026-07-16 08:12:03 +01:00
Aidan Timson	d278feeea2	Stabilize demo sidebar navigation test	2026-07-16 08:12:03 +01:00
Aidan Timson	7b9b9e2e93	Clarify local E2E server workflow	2026-07-16 08:12:03 +01:00
Aidan Timson	32199c7a1a	Require helper reuse in test changes	2026-07-16 08:12:03 +01:00
Aidan Timson	06ea317b82	Keep page error filtering internal	2026-07-16 08:12:03 +01:00
Aidan Timson	7281f0b92c	Remove duplicate smoke test parallel mode	2026-07-16 08:12:03 +01:00
Aidan Timson	bb1eee367b	Remove unused route project filtering	2026-07-16 08:12:03 +01:00
Aidan Timson	107bc51968	Remove ineffective gallery test mode	2026-07-16 08:12:03 +01:00
Aidan Timson	292ac2d054	Restore demo page error tracking	2026-07-16 08:12:03 +01:00
Aidan Timson	edc9079ad9	Share parallel e2e smoke registration	2026-07-16 08:12:03 +01:00
Aidan Timson	0df2e9b3ad	Restore concurrency	2026-07-16 08:12:03 +01:00
Aidan Timson	09fef9dfdf	Restore concurrency	2026-07-16 08:12:03 +01:00
Aidan Timson	b176e6d280	Avoid duplicate gallery readiness wait	2026-07-16 08:12:03 +01:00
Aidan Timson	fd2791f6d6	Run app e2e readiness waits concurrently	2026-07-16 08:12:03 +01:00
Aidan Timson	e00343dbf4	Avoid slow gallery alert count wait	2026-07-16 08:12:03 +01:00
Aidan Timson	7d252d137d	Avoid duplicate gallery page waits	2026-07-16 08:12:03 +01:00
Aidan Timson	a096e35730	Consolidate config link e2e checks	2026-07-16 08:12:03 +01:00
Aidan Timson	79578a2208	Run e2e sidebar checks concurrently	2026-07-16 08:12:03 +01:00
Aidan Timson	f6ff17ac17	Remove redundant e2e test cases	2026-07-16 08:12:03 +01:00
Aidan Timson	36315cc13f	Use Playwright image for e2e tests	2026-07-16 08:12:03 +01:00
Aidan Timson	9a05abefd2	Remove local sharded e2e runner	2026-07-16 08:12:03 +01:00
Aidan Timson	1edf683896	4/4/2 sharding	2026-07-16 08:12:03 +01:00
Aidan Timson	655b4379f5	Build demo e2e artifact modern only	2026-07-16 08:12:03 +01:00
Aidan Timson	3aec9caa1e	Build e2e app artifact modern only	2026-07-16 08:12:03 +01:00
Aidan Timson	104c6e462b	Fix e2e benchmark concurrency	2026-07-16 08:12:03 +01:00
Aidan Timson	b5838c430f	Use test mode for e2e builds	2026-07-16 08:12:03 +01:00
Aidan Timson	d89b75e1ff	Queue e2e benchmark runs	2026-07-16 08:12:03 +01:00
Aidan Timson	4b62896c8c	Add local sharded e2e runner	2026-07-16 08:12:03 +01:00
Aidan Timson	f794ee5d3c	6,4,6	2026-07-16 08:12:03 +01:00
Aidan Timson	d39aaf2523	rm	2026-07-16 08:12:03 +01:00
Aidan Timson	efa3565f44	Shard demo (2) and gallery (3)	2026-07-16 08:12:03 +01:00
Aidan Timson	7e30976bc0	Double sharding count	2026-07-16 08:11:34 +01:00
Aidan Timson	bdb51d2ad2	Format	2026-07-16 08:11:34 +01:00
Aidan Timson	9bb5ebd3c0	Fix name	2026-07-16 08:11:34 +01:00
Aidan Timson	c642250e37	Fold e2e-local into report job	2026-07-16 08:11:34 +01:00
Aidan Timson	5f535be656	Shard e2e tests	2026-07-16 08:11:34 +01:00
Aidan Timson	80fe27946c	Enable workers and full paralelism to tests. Use 60% for local (4 in my case) and 1 for CI	2026-07-16 08:11:34 +01:00
Aidan Timson	7af6dd65ee	Move app e2e helpers into src	2026-07-16 08:11:34 +01:00
Aidan Timson	03133d21b8	Consolidate app e2e smoke data	2026-07-16 08:11:34 +01:00
Aidan Timson	bcfbf7d772	Split e2e helpers by suite	2026-07-16 08:11:34 +01:00
Aidan Timson	8875fa706e	Tighten app e2e smoke timeouts	2026-07-16 08:11:34 +01:00
Aidan Timson	3aece04889	Move app e2e smoke data out of spec	2026-07-16 08:11:34 +01:00
Aidan Timson	06cabb4ff3	Consolidate app route e2e helpers	2026-07-16 08:11:34 +01:00
Aidan Timson	3d58bdbda3	Make suites run as parallel jobs in CI. Merge reports after	2026-07-16 08:11:34 +01:00
Aidan Timson	124eee76d2	Run e2e suites in parallel	2026-07-16 08:11:34 +01:00