Update demo deployment for unique url

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

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

@@ -0,0 +1,98 @@
+---
+name: ha-frontend-components
+description: Home Assistant frontend component patterns. Use when implementing or reviewing dialogs, ha-form, ha-alert, keyboard shortcuts, tooltips, panels, Lovelace cards, or ha-button usage.
+---
+
+# HA Frontend Components
+
+Use this skill when creating or reviewing Home Assistant UI components and common interaction patterns.
+
+## Dialogs
+
+Open dialogs through the fire-event pattern:
+
+```ts
+fireEvent(this, "show-dialog", {
+  dialogTag: "dialog-example",
+  dialogImport: () => import("./dialog-example"),
+  dialogParams: { title: "Example", data: someData },
+});
+```
+
+Dialog implementation requirements:
+
+- Use `ha-dialog`.
+- Implement `HassDialog<T>`.
+- Use `@state() private _open = false` to control visibility.
+- Set `_open = true` in `showDialog()` and `_open = false` in `closeDialog()`.
+- Return `nothing` while required params are absent.
+- Fire `dialog-closed` in the close handler.
+- Use `header-title` and `header-subtitle` for simple header text.
+- Use slots when standard header attributes are not enough.
+- Use `ha-dialog-footer` with `primaryAction` and `secondaryAction` slots.
+- Add `autofocus` to the first focusable element, such as `<ha-form autofocus>`, and forward it internally if needed.
+
+Use standard dialog widths: `small`, `medium`, `large`, or `full`. Avoid custom dialog sizing unless there is a clear product need.
+
+## Buttons
+
+`ha-button` wraps the Web Awesome button in `src/components/ha-button.ts`.
+
+Axes:
+
+- `variant`: `brand`, `neutral`, `danger`, `warning`, `success`.
+- `appearance`: `accent`, `filled`, `outlined`, `plain`.
+- `size`: `xs`, `s`, `m`, `l`, `xl`.
+
+Common usage:
+
+- Use `appearance="filled"` for primary emphasis when needed.
+- Use `appearance="plain"` for cancel and dismiss actions.
+- Use `variant="danger"` for destructive actions.
+- Place primary actions in `slot="primaryAction"` and secondary actions in `slot="secondaryAction"`.
+
+## Forms
+
+`ha-form` is schema-driven with `HaFormSchema[]` and supports common selectors for entities, devices, areas, targets, numbers, booleans, time, actions, text, objects, selects, icons, media, and location.
+
+Use `computeLabel`, `computeError`, and `computeHelper` for translated labels, validation, and helper text.
+
+```ts
+<ha-form
+  .hass=${this.hass}
+  .data=${this._data}
+  .schema=${this._schema}
+  .error=${this._errors}
+  .computeLabel=${(schema) => this.hass.localize(`ui.panel.${schema.name}`)}
+  @value-changed=${this._valueChanged}
+></ha-form>
+```
+
+## Alerts
+
+Use `ha-alert` for user-visible status messaging.
+
+- Alert types: `error`, `warning`, `info`, `success`.
+- Useful properties: `title`, `alert-type`, `dismissable`, `narrow`.
+- Slots: `icon` for custom leading icon, `action` for custom action content.
+- Content is announced by screen readers when dynamically displayed.
+
+```html
+<ha-alert alert-type="error">Error message</ha-alert>
+<ha-alert alert-type="warning" title="Warning">Description</ha-alert>
+<ha-alert alert-type="success" dismissable>Success message</ha-alert>
+```
+
+## Shortcuts And Tooltips
+
+Use `ShortcutManager` from `src/common/keyboard/shortcuts.ts` for keyboard shortcuts. It blocks shortcuts in input fields, can prevent shortcuts during text selection, and supports character and KeyCode shortcuts for non-latin keyboards. See `src/state/quick-bar-mixin.ts` for global shortcut examples.
+
+Use `ha-tooltip` from `src/components/ha-tooltip.ts` for contextual hover help. See `src/components/ha-label.ts` for an example.
+
+## Panels And Lovelace Cards
+
+Panels commonly extend `SubscribeMixin(LitElement)` and receive route and narrow-layout properties.
+
+Lovelace cards should implement `LovelaceCard`, validate config in `setConfig()`, handle loading, error, unavailable, and missing-entity states, and add a configuration editor when needed.
+
+Cards are user-story surfaces. Support different households, entity types, responsive layouts, and accessible interaction states.

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

@@ -0,0 +1,78 @@
+---
+name: ha-frontend-contexts
+description: Home Assistant frontend Lit context and hass migration guidance. Use when adding or changing component state access, replacing hass reads, consuming entity or registry contexts, or reviewing rerender behavior.
+---
+
+# HA Frontend Contexts
+
+Use this skill when a component reads Home Assistant state, registries, localization, services, config, UI data, connection state, or API helpers.
+
+## Goal
+
+Move leaf components away from the broad `hass: HomeAssistant` object. Broad `hass` access rerenders components for unrelated changes, hides the data a component depends on, and makes tests harder to mock.
+
+Container components may keep `hass` when they own it and feed providers. Leaf components should consume the narrowest context that covers their reads.
+
+## Core Files
+
+- Context definitions: `src/data/context/index.ts`
+- Entity-scoped consume helpers: `src/common/decorators/consume-context-entry.ts`
+- Transform decorator: `src/common/decorators/transform.ts`
+- Canonical migration example: `src/panels/lovelace/cards/hui-button-card.ts`
+- Providers are wired by `contextMixin` on `HassBaseEl`; consumers do not wire providers manually.
+
+## Context Selection
+
+| Context                                                              | Replaces                                                                               |
+| -------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| `statesContext`                                                      | `hass.states`                                                                          |
+| `entitiesContext`, `devicesContext`, `areasContext`, `floorsContext` | `hass.entities`, `hass.devices`, `hass.areas`, `hass.floors`                           |
+| `registriesContext`                                                  | all four registries together                                                           |
+| `servicesContext`                                                    | `hass.services`                                                                        |
+| `internationalizationContext`                                        | `hass.localize`, `hass.locale`, `hass.language`                                        |
+| `formattersContext`                                                  | entity and attribute formatters                                                        |
+| `configContext`                                                      | `hass.config`, `hass.user`, `hass.auth`, `hass.userData`                               |
+| `connectionContext`                                                  | `hass.connection`, `hass.connected`, `hass.hassUrl`                                    |
+| `apiContext`                                                         | `hass.callService`, `hass.callApi`, `hass.callWS`, `hass.sendWS`, `hass.fetchWithAuth` |
+| `uiContext`                                                          | themes, selected theme, panels, sidebar, and UI state                                  |
+| `narrowViewportContext`                                              | narrow-layout boolean                                                                  |
+
+Lazy contexts subscribe on first consumer and tear down after the last consumer: `labelsContext`, `fullEntitiesContext`, `configEntriesContext`, and `manifestsContext`.
+
+The single-field contexts such as `localizeContext`, `themesContext`, and `userContext` are deprecated. Use grouped contexts instead.
+
+## Consumption Patterns
+
+Use entity-scoped helpers when the component watches an entity id held on the host:
+
+```ts
+@state() @consumeEntityState({ entityIdPath: ["_config", "entity"] })
+private _stateObj?: HassEntity;
+
+@state() @consumeEntityRegistryEntry({ entityIdPath: ["_config", "entity"] })
+private _entity?: EntityRegistryDisplayEntry;
+
+@state() @consumeLocalize()
+private _localize!: LocalizeFunc;
+```
+
+For a single field from a grouped context, pair `@consume` with `@transform`:
+
+```ts
+@state()
+@consume({ context: uiContext, subscribe: true })
+@transform<HomeAssistantUI, Themes>({ transformer: ({ themes }) => themes })
+private _themes!: Themes;
+```
+
+Use `@transform` with `watch` when the transformer depends on a host property, such as a computed entity id. `consumeEntityState` only watches the first path segment.
+
+To consume a whole group untransformed, omit `@transform` and type the field as `ContextType<typeof statesContext>` or the matching context type.
+
+## Review Checklist
+
+- The component consumes the narrowest context needed for the data it reads.
+- A broad `hass` property is kept only when the component is a container or external API requires it.
+- Entity-scoped reads use the consume helpers rather than ad hoc context transforms.
+- Context fields are marked `@state()` so updates trigger rendering.
+- Tests and mocks only provide the data the component actually consumes.

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

@@ -0,0 +1,73 @@
+---
+name: ha-frontend-review
+description: Home Assistant frontend PR and review guidance. Use when reviewing frontend changes, preparing a PR, checking recurring review issues, or applying the PR template.
+---
+
+# HA Frontend Review
+
+Use this skill when reviewing Home Assistant frontend changes or preparing a pull request.
+
+## Pull Request Body
+
+When creating a pull request, use `.github/PULL_REQUEST_TEMPLATE.md` as the body.
+
+- Do not omit, reorder, or rewrite template sections.
+- Check the appropriate "Type of change" box based on the actual change.
+- Do not check checklist items on behalf of the user.
+- If the PR includes UI changes, remind the user to add screenshots or a short video.
+- Explain what the change does for users, not only implementation details.
+- Use Markdown.
+
+## Pre-Submission Checklist
+
+- `yarn lint` passes when practical for the scope.
+- `yarn test` or focused relevant tests are green when practical for the scope.
+- Tests are added or updated for new data processing and utilities where applicable.
+- User-facing text is localized and follows `ha-frontend-user-facing-text` guidance.
+- Components handle loading, error, unavailable, and missing-entity states.
+- Entity existence is checked before property access.
+- Event listeners and subscriptions are cleaned up.
+- UI is accessible to screen readers and keyboard users.
+
+## Recurring Review Issues
+
+User experience and accessibility:
+
+- Forms need proper labels, helper text, and validation feedback.
+- Form markup should not cause password managers to identify fields incorrectly.
+- Clickable areas should be large enough for touch interaction.
+- Hover, active, disabled, loading, and focus states should be clear.
+
+Dialog and modal patterns:
+
+- Multi-step operations should show progress.
+- Dialog state should survive background operations correctly.
+- Cancel and close buttons should behave consistently.
+- Defaults should be helpful without blocking user override.
+
+Component design patterns:
+
+- Terminology should be consistent. Use words like "Join" or "Apply" instead of "Group" when that better matches the user action.
+- Visual hierarchy should use appropriate font sizes, weights, and spacing ratios.
+- Components should align to the design grid.
+- Badges and indicators should be placed consistently.
+
+Code quality:
+
+- Null and undefined paths should be handled explicitly.
+- Potentially undefined array and object access should be guarded.
+- Event handlers, timers, observers, and subscriptions should be cleaned up.
+
+Configuration and props:
+
+- Make configuration fields optional when sensible.
+- Provide reasonable defaults.
+- Keep APIs extensible without adding speculative abstractions.
+- Validate configuration before applying changes.
+
+## Review Flow
+
+- Identify behavioral regressions, bugs, accessibility issues, and missing tests first.
+- Keep style-only comments secondary unless they affect maintainability or user experience.
+- Prefer small, direct fixes over large refactors during review follow-up.
+- Cross-load `ha-frontend-contexts`, `ha-frontend-components`, `ha-frontend-styling`, `ha-frontend-testing`, or `ha-frontend-user-facing-text` when a finding falls in that area.

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

@@ -0,0 +1,78 @@
+---
+name: ha-frontend-styling
+description: Home Assistant frontend styling, theming, spacing, responsive layout, RTL, and View Transitions guidance. Use when editing CSS, layout, motion, or visual component structure.
+---
+
+# HA Frontend Styling
+
+Use this skill when editing CSS, layout, visual hierarchy, theme integration, responsive behavior, RTL support, or view transitions.
+
+## Theme And Layout Basics
+
+- Use Home Assistant CSS custom properties instead of hardcoded colors.
+- Use `--ha-space-*` spacing tokens instead of hardcoded spacing where possible.
+- Keep components mobile-first and enhance for desktop.
+- Keep layouts RTL-safe. Prefer logical properties when they fit.
+- Prefer `ha-*` components and current Web Awesome wrappers.
+- Avoid adding new legacy Material Web Components (`mwc-*`).
+- Scope styles to the component. Do not rely on global styles for component internals.
+
+Spacing tokens are defined in `src/resources/theme/core.globals.ts`. The scale runs from `--ha-space-1` at 4px through `--ha-space-20` at 80px in 4px increments. Common values are `--ha-space-2` at 8px, `--ha-space-4` at 16px, and `--ha-space-8` at 32px.
+
+```ts
+static get styles() {
+  return css`
+    :host {
+      padding: var(--ha-space-4);
+      color: var(--primary-text-color);
+      background-color: var(--card-background-color);
+    }
+
+    .content {
+      gap: var(--ha-space-2);
+    }
+
+    @media (max-width: 600px) {
+      :host {
+        padding: var(--ha-space-2);
+      }
+    }
+  `;
+}
+```
+
+## Interaction States
+
+- Make touch targets large enough for mobile.
+- Provide clear hover, active, focus, disabled, loading, error, and unavailable states.
+- Preserve keyboard navigation and visible focus indicators.
+- Maintain WCAG AA contrast for text and essential UI affordances.
+
+## View Transitions
+
+Use the View Transitions API only for meaningful continuity between DOM states.
+
+Core resources:
+
+- Utility wrapper: `src/common/util/view-transition.ts`, `withViewTransition()`.
+- Launch-screen fade example: `src/util/launch-screen.ts`.
+- Animation keyframes: `src/resources/theme/animations.globals.ts`.
+- Animation duration tokens: `src/resources/theme/core.globals.ts`.
+
+Implementation rules:
+
+- Use `withViewTransition()` for fallback behavior.
+- Keep transitions simple. Subtle fades and crossfades usually work best.
+- Use `--ha-animation-duration-fast`, `--ha-animation-duration-normal`, or `--ha-animation-duration-slow` for timing.
+- Ensure each `view-transition-name` is unique at any given time.
+- Remember only one view transition can run at a time.
+- View transitions operate at document level and do not work inside Shadow DOM style isolation. For web components, set `view-transition-name` on `:host` or use document-level transitions.
+- The root gets `view-transition-name: root` by default. Target `::view-transition-group(root)` to customize the default page transition.
+
+## Review Checklist
+
+- Styling uses theme variables and spacing tokens where practical.
+- Layout is mobile-first and RTL-safe.
+- Component styles are scoped.
+- Interactive states are clear and accessible.
+- Motion is subtle, tokenized, and respects reduced-motion behavior through existing globals.

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

@@ -0,0 +1,70 @@
+---
+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.
+---
+
+# HA Frontend Testing
+
+Use this skill when choosing or running validation for frontend changes.
+
+## Core Commands
+
+```bash
+yarn lint          # ESLint + Prettier + TypeScript + Lit
+yarn format        # Auto-fix ESLint + Prettier
+yarn lint:types    # TypeScript compiler, run without file arguments
+yarn test          # Vitest
+yarn dev           # App dev server
+yarn dev:serve     # Local serving dev server
+```
+
+Never run `tsc` or `yarn lint:types` with file arguments. File arguments make `tsc` ignore `tsconfig.json` and can emit `.js` files into `src/`.
+
+For focused type feedback on one file, use editor diagnostics instead of a file-scoped `tsc` command.
+
+## Unit And Utility Tests
+
+- Add or update Vitest tests for data processing, utility code, and behavior that can be tested without a browser.
+- Mock WebSocket connections and API calls at boundaries.
+- Cover loading, error, unavailable, and missing-entity states where relevant.
+- Test accessibility-sensitive behavior when it can be asserted without brittle DOM internals.
+
+## Dev Servers
+
+`yarn dev` builds and watches the app, served by a running Home Assistant core configured through `development_repo`.
+
+`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]`.
+
+## 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.
+
+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` |
+
+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.
+
+The app suite uses a stripped-down harness for e2e. Demo and gallery use their normal dev servers.
+
+## Benchmarks
+
+For chart data transforms such as history, statistics, energy, and downsampling, follow `test/benchmarks/README.md`.
+
+Use seeded fixtures, characterization snapshot tests, and `yarn test:bench` before and after optimization. Optimizations must keep output bit-identical.
+
+## Verification Selection
+
+- Documentation-only change: no code test required unless examples or commands changed.
+- Type-only or utility change: run focused Vitest if available, then `yarn lint:types` if practical.
+- Lit component change: run relevant tests plus lint or typecheck depending on scope.
+- E2E-sensitive flow: start the relevant e2e dev server and run the narrow Playwright suite.
+- Broad refactor: run `yarn lint` and relevant test suites when practical.

.agents/skills/ha-frontend-user-facing-text/SKILL.md

@@ -0,0 +1,98 @@
+---
+name: ha-frontend-user-facing-text
+description: Home Assistant frontend copy, localization, terminology, and user-facing text guidance. Use when adding or reviewing labels, buttons, dialogs, errors, translations, or UI strings.
+---
+
+# HA Frontend User-Facing Text
+
+Use this skill for all user-facing text, translations, labels, buttons, dialog copy, errors, helper text, and review comments about wording.
+
+## Localization
+
+- All user-facing text must be translatable.
+- Add translation keys to `src/translations/en.json` when introducing new strings.
+- Use the localization system instead of inline user-visible strings.
+- Prefer complete localized strings with placeholders over concatenating translated fragments.
+- Give translators enough context through key naming and placeholders.
+
+```ts
+this.hass.localize("ui.panel.config.updates.update_available", {
+  count: 5,
+});
+```
+
+## Voice And Style
+
+- Use American English.
+- Use a friendly, informational tone.
+- Address users directly with "you" and "your" when appropriate.
+- Be inclusive, objective, and non-discriminatory.
+- Be concise and clear.
+- Use active voice.
+- Avoid jargon where a familiar home automation term works.
+- Always write "Home Assistant" in full. Do not use "HA" or "HASS" in user-facing copy.
+- Spell out terms when possible.
+- Use sentence case for titles, headings, buttons, labels, and UI elements.
+- Use the Oxford comma in lists.
+- Prefer "like" over "e.g." and "for example" over "i.e.".
+- Avoid all caps for emphasis. Use wording, bold, or italics instead.
+- Write for both technical and non-technical users.
+
+Sentence case examples:
+
+- Use: "Create new automation"
+- Avoid: "Create New Automation"
+- Use: "Device settings"
+- Avoid: "Device Settings"
+
+## Terminology
+
+Use "integration" instead of "component" for user-facing product language unless referring to a frontend component in developer context.
+
+Technical product terms are lowercase in prose: automation, entity, device, service.
+
+## Delete, Remove, Create, Add
+
+Use "Remove" for actions that can be restored or reapplied:
+
+- Removing a user's permission.
+- Removing a user from a group.
+- Removing links between items.
+- Removing a widget from a dashboard.
+- Removing an item from a cart.
+
+Use "Delete" for permanent, non-recoverable actions:
+
+- Deleting a field.
+- Deleting a value in a field.
+- Deleting a task.
+- Deleting a group.
+- Deleting a permission.
+- Deleting a calendar event.
+
+Use "Add" for already-existing items:
+
+- Adding a permission to a user.
+- Adding a user to a group.
+- Adding links between items.
+- Adding a widget to a dashboard.
+- Adding an item to a cart.
+
+Use "Create" for something made from scratch:
+
+- Creating a new field.
+- Creating a new task.
+- Creating a new group.
+- Creating a new permission.
+- Creating a new calendar event.
+
+Create pairs with Delete. Add pairs with Remove.
+
+## Review Checklist
+
+- Text is localized.
+- Copy uses sentence case.
+- "Home Assistant" is written in full.
+- Delete/Remove and Create/Add match recoverability and object lifecycle.
+- Placeholders are used instead of string concatenation.
+- The wording is concise and understandable without implementation knowledge.

.claude/skills

@@ -0,0 +1 @@
+../.agents/skills

.github/ISSUE_TEMPLATE.md

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

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/actions/build/action.yml

@@ -0,0 +1,23 @@
+name: Build frontend target
+description: Run a gulp build target
+
+inputs:
+  target:
+    description: gulp target to run
+    required: true
+  github-token:
+    description: GitHub token for fetching nightly translations; omit to build English-only
+    default: ""
+  is-test:
+    description: Set IS_TEST for the build (skips source maps and compression)
+    default: "false"
+
+runs:
+  using: composite
+  steps:
+    - name: Build ${{ inputs.target }}
+      shell: bash
+      run: ./node_modules/.bin/gulp ${{ inputs.target }}
+      env:
+        GITHUB_TOKEN: ${{ inputs.github-token }}
+        IS_TEST: ${{ inputs.is-test }}

.github/actions/netlify-deploy/action.yml

@@ -0,0 +1,52 @@
+name: Deploy to Netlify
+description: Deploy a directory to Netlify (production when alias is empty, otherwise to the alias)
+
+inputs:
+  dir:
+    description: Directory to deploy
+    required: true
+  alias:
+    description: Deploy alias; leave empty to deploy to production
+    default: ""
+  auth-token:
+    description: NETLIFY_AUTH_TOKEN
+    required: true
+  site-id:
+    description: NETLIFY_SITE_ID
+    required: true
+
+outputs:
+  netlify_url:
+    description: The deployed URL
+    value: ${{ steps.deploy.outputs.netlify_url }}
+  unique_deploy_url:
+    description: The unique hash-based deployment URL for this specific build
+    value: ${{ steps.deploy.outputs.unique_deploy_url }}
+
+runs:
+  using: composite
+  steps:
+    - name: Deploy to Netlify
+      id: deploy
+      shell: bash
+      env:
+        DIR: ${{ inputs.dir }}
+        ALIAS: ${{ inputs.alias }}
+        NETLIFY_AUTH_TOKEN: ${{ inputs.auth-token }}
+        NETLIFY_SITE_ID: ${{ inputs.site-id }}
+      run: |
+        # Execute the deployment
+        if [ -n "$ALIAS" ]; then
+          npx -y netlify-cli deploy --dir="$DIR" --alias "$ALIAS" --json > deploy_output.json
+        else
+          npx -y netlify-cli deploy --dir="$DIR" --prod --json > deploy_output.json
+        fi
+
+        # Collect the urls from the deployment output
+        NETLIFY_URL=$(jq -r '.url // .deploy_url' deploy_output.json)
+        SITE_NAME=$(jq -r '.site_name' deploy_output.json)
+        DEPLOY_ID=$(jq -r '.deploy_id' deploy_output.json)
+        UNIQUE_URL="https://${DEPLOY_ID}--${SITE_NAME}.netlify.app"
+
+        echo "netlify_url=$NETLIFY_URL" >> "$GITHUB_OUTPUT"
+        echo "unique_deploy_url=$UNIQUE_URL" >> "$GITHUB_OUTPUT"

.github/actions/setup/action.yml

@@ -0,0 +1,23 @@
+name: Setup Node and install
+description: Set up Node from .nvmrc and install yarn dependencies
+
+inputs:
+  immutable:
+    description: Pass --immutable to yarn install
+    default: "true"
+  cache:
+    description: Enable the yarn cache in setup-node
+    default: "true"
+
+runs:
+  using: composite
+  steps:
+    - name: Setup Node
+      uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      with:
+        node-version-file: ".nvmrc"
+        cache: ${{ inputs.cache == 'true' && 'yarn' || '' }}
+
+    - name: Install dependencies
+      shell: bash
+      run: yarn install ${{ inputs.immutable == 'true' && '--immutable' || '' }}

.github/copilot-instructions.md

@@ -1,637 +0,0 @@
-# GitHub Copilot & Claude Code Instructions
-
-You are an assistant helping with development of the Home Assistant frontend. The frontend is built using Lit-based Web Components and TypeScript, providing a responsive and performant interface for home automation control.
-
-**Note**: This file contains high-level guidelines and references to implementation patterns. For detailed component documentation, API references, and usage examples, refer to the `gallery/` directory.
-
-## Table of Contents
-
-- [Quick Reference](#quick-reference)
-- [Core Architecture](#core-architecture)
-- [Development Standards](#development-standards)
-- [Component Library](#component-library)
-- [Common Patterns](#common-patterns)
-- [Text and Copy Guidelines](#text-and-copy-guidelines)
-- [Development Workflow](#development-workflow)
-- [Review Guidelines](#review-guidelines)
-
-## Quick Reference
-
-### Essential Commands
-
-```bash
-yarn lint          # ESLint + Prettier + TypeScript + Lit
-yarn format        # Auto-fix ESLint + Prettier
-yarn lint:types    # TypeScript compiler (run WITHOUT file arguments)
-yarn test          # Vitest
-script/develop     # Development server
-```
-
-> **WARNING:** Never run `tsc` or `yarn lint:types` with file arguments (e.g., `yarn lint:types src/file.ts`). When `tsc` receives file arguments, it ignores `tsconfig.json` and emits `.js` files into `src/`, polluting the codebase. Always run `yarn lint:types` without arguments. For individual file type checking, rely on IDE diagnostics. If `.js` files are accidentally generated, clean up with `git clean -fd src/`.
-
-### Component Prefixes
-
-- `ha-` - Home Assistant components
-- `hui-` - Lovelace UI components
-- `dialog-` - Dialog components
-
-### Import Patterns
-
-```typescript
-import type { HomeAssistant } from "../types";
-import { fireEvent } from "../common/dom/fire_event";
-import { showAlertDialog } from "../dialogs/generic/show-alert-dialog";
-```
-
-## Core Architecture
-
-The Home Assistant frontend is a modern web application that:
-
-- Uses Web Components (custom elements) built with Lit framework
-- Is written entirely in TypeScript with strict type checking
-- Communicates with the backend via WebSocket API
-- Provides comprehensive theming and internationalization
-
-## Development Standards
-
-### Code Quality Requirements
-
-**Linting and Formatting (Enforced by Tools)**
-
-- ESLint config extends Airbnb, TypeScript strict, Lit, Web Components, Accessibility
-- Prettier with ES5 trailing commas enforced
-- No console statements (`no-console: "error"`) - use proper logging
-- Import organization: No unused imports, consistent type imports
-
-**Naming Conventions**
-
-- PascalCase for types and classes
-- camelCase for variables, methods
-- Private methods require leading underscore
-- Public methods forbid leading underscore
-
-### TypeScript Usage
-
-- **Always use strict TypeScript**: Enable all strict flags, avoid `any` types
-- **Proper type imports**: Use `import type` for type-only imports
-- **Define interfaces**: Create proper interfaces for data structures
-- **Type component properties**: All Lit properties must be properly typed
-- **No unused variables**: Prefix with `_` if intentionally unused
-- **Consistent imports**: Use `@typescript-eslint/consistent-type-imports`
-
-```typescript
-// Good
-import type { HomeAssistant } from "../types";
-
-interface EntityConfig {
-  entity: string;
-  name?: string;
-}
-
-@property({ type: Object })
-hass!: HomeAssistant;
-
-// Bad
-@property()
-hass: any;
-```
-
-### Web Components with Lit
-
-- **Use Lit 3.x patterns**: Follow modern Lit practices
-- **Extend appropriate base classes**: Use `LitElement`, `SubscribeMixin`, or other mixins as needed
-- **Define custom element names**: Use `ha-` prefix for components
-
-```typescript
-@customElement("ha-my-component")
-export class HaMyComponent extends LitElement {
-  @property({ attribute: false })
-  hass!: HomeAssistant;
-
-  @state()
-  private _config?: MyComponentConfig;
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-      }
-    `;
-  }
-
-  render() {
-    return html`<div>Content</div>`;
-  }
-}
-```
-
-### Component Guidelines
-
-- **Use composition**: Prefer composition over inheritance
-- **Lazy load panels**: Heavy panels should be dynamically imported
-- **Optimize renders**: Use `@state()` for internal state, `@property()` for public API
-- **Handle loading states**: Always show appropriate loading indicators
-- **Support themes**: Use CSS custom properties from theme
-
-### Data Management
-
-- **Use WebSocket API**: All backend communication via home-assistant-js-websocket
-- **Cache appropriately**: Use collections and caching for frequently accessed data
-- **Handle errors gracefully**: All API calls should have error handling
-- **Update real-time**: Subscribe to state changes for live updates
-
-```typescript
-// Good
-try {
-  const result = await fetchEntityRegistry(this.hass.connection);
-  this._processResult(result);
-} catch (err) {
-  showAlertDialog(this, {
-    text: `Failed to load: ${err.message}`,
-  });
-}
-```
-
-### Styling Guidelines
-
-- **Use CSS custom properties**: Leverage the theme system
-- **Use spacing tokens**: Prefer `--ha-space-*` tokens over hardcoded values for consistent spacing
-  - Spacing scale: `--ha-space-1` (4px) through `--ha-space-20` (80px) in 4px increments
-  - Defined in `src/resources/theme/core.globals.ts`
-  - Common values: `--ha-space-2` (8px), `--ha-space-4` (16px), `--ha-space-8` (32px)
-- **Mobile-first responsive**: Design for mobile, enhance for desktop
-- **Follow Material Design**: Use Material Web Components where appropriate
-- **Support RTL**: Ensure all layouts work in RTL languages
-
-```typescript
-static get styles() {
-  return css`
-    :host {
-      padding: var(--ha-space-4);
-      color: var(--primary-text-color);
-      background-color: var(--card-background-color);
-    }
-
-    .content {
-      gap: var(--ha-space-2);
-    }
-
-    @media (max-width: 600px) {
-      :host {
-        padding: var(--ha-space-2);
-      }
-    }
-  `;
-}
-```
-
-### View Transitions
-
-The View Transitions API creates smooth animations between DOM state changes. When implementing view transitions:
-
-**Core Resources:**
-
-- **Utility wrapper**: `src/common/util/view-transition.ts` - `withViewTransition()` function with graceful fallback
-- **Real-world example**: `src/util/launch-screen.ts` - Launch screen fade pattern with browser support detection
-- **Animation keyframes**: `src/resources/theme/animations.globals.ts` - Global `fade-in`, `fade-out`, `scale` animations
-- **Animation duration**: `src/resources/theme/core.globals.ts` - `--ha-animation-duration-fast` (150ms), `--ha-animation-duration-normal` (250ms), `--ha-animation-duration-slow` (350ms) (all respect `prefers-reduced-motion`)
-
-**Implementation Guidelines:**
-
-1. Always use `withViewTransition()` wrapper for automatic fallback
-2. Keep transitions simple (subtle crossfades and fades work best)
-3. Use `--ha-animation-duration-*` CSS variables for consistent timing (`fast`, `normal`, `slow`)
-4. Assign unique `view-transition-name` to elements (must be unique at any given time)
-5. For Lit components: Override `performUpdate()` or use `::part()` for internal elements
-
-**Default Root Transition:**
-
-By default, `:root` receives `view-transition-name: root`, creating a full-page crossfade. Target with [`::view-transition-group(root)`](https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-group) to customize the default page transition.
-
-**Important Constraints:**
-
-- Each `view-transition-name` must be unique at any given time
-- Only one view transition can run at a time
-- **Shadow DOM incompatibility**: View transitions operate at document level and do not work within Shadow DOM due to style isolation ([spec discussion](https://github.com/w3c/csswg-drafts/issues/10303)). For web components, set `view-transition-name` on the `:host` element or use document-level transitions
-
-**Specification & Documentation:**
-
-For browser support, API details, and current specifications, refer to these authoritative sources (note: check publication dates as specs evolve):
-
-- [MDN: View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) - Comprehensive API reference
-- [Chrome for Developers: View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions) - Implementation guide and examples
-- [W3C Draft Specification](https://drafts.csswg.org/css-view-transitions/) - Official specification (evolving)
-
-### Performance Best Practices
-
-- **Code split**: Split code at the panel/dialog level
-- **Lazy load**: Use dynamic imports for heavy components
-- **Optimize bundle**: Keep initial bundle size minimal
-- **Use virtual scrolling**: For long lists, implement virtual scrolling
-- **Memoize computations**: Cache expensive calculations
-
-### Testing Requirements
-
-- **Write tests**: Add tests for data processing and utilities
-- **Test with Vitest**: Use the established test framework
-- **Mock appropriately**: Mock WebSocket connections and API calls
-- **Test accessibility**: Ensure components are accessible
-
-## Component Library
-
-### Dialog Component
-
-**Opening Dialogs (Fire Event Pattern - Recommended):**
-
-```typescript
-fireEvent(this, "show-dialog", {
-  dialogTag: "dialog-example",
-  dialogImport: () => import("./dialog-example"),
-  dialogParams: { title: "Example", data: someData },
-});
-```
-
-**Dialog Implementation Requirements:**
-
-- Use `ha-dialog` component
-- Implement `HassDialog<T>` interface
-- Use `@state() private _open = false` to control dialog visibility
-- Set `_open = true` in `showDialog()`, `_open = false` in `closeDialog()`
-- Return `nothing` when no params (loading state)
-- Fire `dialog-closed` event in `_dialogClosed()` handler
-- Use `header-title` attribute for simple titles
-- Use `header-subtitle` attribute for simple subtitles
-- Use slots for custom content where the standard attributes are not enough
-- Use `ha-dialog-footer` with `primaryAction`/`secondaryAction` slots for footer content
-- Add `autofocus` to first focusable element (e.g., `<ha-form autofocus>`). The component may need to forward this attribute internally.
-
-**Dialog Sizing:**
-
-- Use `width` attribute with predefined sizes: `"small"` (320px), `"medium"` (560px - default), `"large"` (720px), or `"full"`
-- Custom sizing is NOT recommended - use the standard width presets
-
-**Button Appearance Guidelines:**
-
-- **Primary action buttons**: Default appearance (no appearance attribute) or omit for standard styling
-- **Secondary action buttons**: Use `appearance="plain"` for cancel/dismiss actions
-- **Destructive actions**: Use `appearance="filled"` for delete/remove operations (combined with appropriate semantic styling)
-- **Button sizes**: Use `size="small"` (32px height) or default/medium (40px height)
-- Always place primary action in `slot="primaryAction"` and secondary in `slot="secondaryAction"` within `ha-dialog-footer`
-
-**Gallery Documentation:**
-
-- `gallery/src/pages/components/ha-dialog.markdown`
-- `gallery/src/pages/components/ha-dialogs.markdown`
-
-### Form Component (ha-form)
-
-- Schema-driven using `HaFormSchema[]`
-- Supports entity, device, area, target, number, boolean, time, action, text, object, select, icon, media, location selectors
-- Built-in validation with error display
-- Use `computeLabel`, `computeError`, `computeHelper` for translations
-
-```typescript
-<ha-form
-  .hass=${this.hass}
-  .data=${this._data}
-  .schema=${this._schema}
-  .error=${this._errors}
-  .computeLabel=${(schema) => this.hass.localize(`ui.panel.${schema.name}`)}
-  @value-changed=${this._valueChanged}
-></ha-form>
-```
-
-**Gallery Documentation:**
-
-- `gallery/src/pages/components/ha-form.markdown`
-
-### Alert Component (ha-alert)
-
-- Types: `error`, `warning`, `info`, `success`
-- Properties: `title`, `alert-type`, `dismissable`, `icon`, `action`, `rtl`
-- Content announced by screen readers when dynamically displayed
-
-```html
-<ha-alert alert-type="error">Error message</ha-alert>
-<ha-alert alert-type="warning" title="Warning">Description</ha-alert>
-<ha-alert alert-type="success" dismissable>Success message</ha-alert>
-```
-
-**Gallery Documentation:**
-
-- `gallery/src/pages/components/ha-alert.markdown`
-
-### Keyboard Shortcuts (ShortcutManager)
-
-The `ShortcutManager` class provides a unified way to register keyboard shortcuts with automatic input field protection.
-
-**Key Features:**
-
-- Automatically blocks shortcuts when input fields are focused
-- Prevents shortcuts during text selection (configurable via `allowWhenTextSelected`)
-- Supports both character-based and KeyCode-based shortcuts (for non-latin keyboards)
-
-**Implementation:**
-
-- **Class definition**: `src/common/keyboard/shortcuts.ts`
-- **Real-world example**: `src/state/quick-bar-mixin.ts` - Global shortcuts (e, c, d, m, a, Shift+?) with non-latin keyboard fallbacks
-
-### Tooltip Component (ha-tooltip)
-
-The `ha-tooltip` component wraps Web Awesome tooltip with Home Assistant theming. Use for providing contextual help text on hover.
-
-**Implementation:**
-
-- **Component definition**: `src/components/ha-tooltip.ts`
-- **Usage example**: `src/components/ha-label.ts`
-- **Gallery documentation**: `gallery/src/pages/components/ha-tooltip.markdown`
-
-## Common Patterns
-
-### Creating a Panel
-
-```typescript
-@customElement("ha-panel-myfeature")
-export class HaPanelMyFeature extends SubscribeMixin(LitElement) {
-  @property({ attribute: false })
-  hass!: HomeAssistant;
-
-  @property({ type: Boolean, reflect: true })
-  narrow!: boolean;
-
-  @property()
-  route!: Route;
-
-  hassSubscribe() {
-    return [
-      subscribeEntityRegistry(this.hass.connection, (entities) => {
-        this._entities = entities;
-      }),
-    ];
-  }
-}
-```
-
-#### Creating a Lovelace Card
-
-**Purpose**: Cards allow users to tell different stories about their house (based on gallery)
-
-```typescript
-@customElement("hui-my-card")
-export class HuiMyCard extends LitElement implements LovelaceCard {
-  @property({ attribute: false })
-  hass!: HomeAssistant;
-
-  @state()
-  private _config?: MyCardConfig;
-
-  public setConfig(config: MyCardConfig): void {
-    if (!config.entity) {
-      throw new Error("Entity required");
-    }
-    this._config = config;
-  }
-
-  public getCardSize(): number {
-    return 3; // Height in grid units
-  }
-
-  // Optional: Editor for card configuration
-  public static getConfigElement(): LovelaceCardEditor {
-    return document.createElement("hui-my-card-editor");
-  }
-
-  // Optional: Stub config for card picker
-  public static getStubConfig(): object {
-    return { entity: "" };
-  }
-}
-```
-
-**Card Guidelines:**
-
-- Cards are highly customizable for different households
-- Implement `LovelaceCard` interface with `setConfig()` and `getCardSize()`
-- Use proper error handling in `setConfig()`
-- Consider all possible states (loading, error, unavailable)
-- Support different entity types and states
-- Follow responsive design principles
-- Add configuration editor when needed
-
-### Internationalization
-
-- **Use localize**: Always use the localization system
-- **Add translation keys**: Add keys to src/translations/en.json
-- **Support placeholders**: Use proper placeholder syntax
-
-```typescript
-this.hass.localize("ui.panel.config.updates.update_available", {
-  count: 5,
-});
-```
-
-### Accessibility
-
-- **ARIA labels**: Add appropriate ARIA labels
-- **Keyboard navigation**: Ensure all interactions work with keyboard
-- **Screen reader support**: Test with screen readers
-- **Color contrast**: Meet WCAG AA standards
-
-## Development Workflow
-
-### Setup and Commands
-
-1. **Setup**: `script/setup` - Install dependencies
-2. **Develop**: `script/develop` - Development server
-3. **Lint**: `yarn lint` - Run all linting before committing
-4. **Test**: `yarn test` - Add and run tests
-5. **Build**: `script/build_frontend` - Test production build
-
-### Common Pitfalls to Avoid
-
-- Don't use `querySelector` - Use refs or component properties
-- Don't manipulate DOM directly - Let Lit handle rendering
-- Don't use global styles - Scope styles to components
-- Don't block the main thread - Use web workers for heavy computation
-- Don't ignore TypeScript errors - Fix all type issues
-
-### Security Best Practices
-
-- Sanitize HTML - Never use `unsafeHTML` with user content
-- Validate inputs - Always validate user inputs
-- Use HTTPS - All external resources must use HTTPS
-- CSP compliance - Ensure code works with Content Security Policy
-
-### Pull Requests
-
-When creating a pull request, you **must** use the PR template located at `.github/PULL_REQUEST_TEMPLATE.md`. Read the template file and use its full content as the PR body, filling in each section appropriately.
-
-- Do not omit, reorder, or rewrite the template sections
-- Check the appropriate "Type of change" box based on the changes
-- Do not check the checklist items on behalf of the user — those are the user's responsibility to review and check
-- If the PR includes UI changes, remind the user to add screenshots or a short video to the PR after creating it
-- Be simple and user friendly — explain what the change does, not implementation details
-- Use markdown so the user can copy it
-
-### Text and Copy Guidelines
-
-#### Terminology Standards
-
-**Delete vs Remove** (Based on gallery/src/pages/Text/remove-delete-add-create.markdown)
-
-- **Use "Remove"** for actions that can be restored or reapplied:
-  - Removing a user's permission
-  - Removing a user from a group
-  - Removing links between items
-  - Removing a widget from dashboard
-  - Removing an item from a cart
-- **Use "Delete"** for permanent, non-recoverable actions:
-  - Deleting a field
-  - Deleting a value in a field
-  - Deleting a task
-  - Deleting a group
-  - Deleting a permission
-  - Deleting a calendar event
-
-**Create vs Add** (Create pairs with Delete, Add pairs with Remove)
-
-- **Use "Add"** for already-existing items:
-  - Adding a permission to a user
-  - Adding a user to a group
-  - Adding links between items
-  - Adding a widget to dashboard
-  - Adding an item to a cart
-- **Use "Create"** for something made from scratch:
-  - Creating a new field
-  - Creating a new task
-  - Creating a new group
-  - Creating a new permission
-  - Creating a new calendar event
-
-#### Writing Style (Consistent with Home Assistant Documentation)
-
-- **Use American English**: Standard spelling and terminology
-- **Friendly, informational tone**: Be inspiring, personal, comforting, engaging
-- **Address users directly**: Use "you" and "your"
-- **Be inclusive**: Objective, non-discriminatory language
-- **Be concise**: Use clear, direct language
-- **Be consistent**: Follow established terminology patterns
-- **Use active voice**: "Delete the automation" not "The automation should be deleted"
-- **Avoid jargon**: Use terms familiar to home automation users
-
-#### Language Standards
-
-- **Always use "Home Assistant"** in full, never "HA" or "HASS"
-- **Avoid abbreviations**: Spell out terms when possible
-- **Use sentence case everywhere**: Titles, headings, buttons, labels, UI elements
-  - ✅ "Create new automation"
-  - ❌ "Create New Automation"
-  - ✅ "Device settings"
-  - ❌ "Device Settings"
-- **Oxford comma**: Use in lists (item 1, item 2, and item 3)
-- **Replace Latin terms**: Use "like" instead of "e.g.", "for example" instead of "i.e."
-- **Avoid CAPS for emphasis**: Use bold or italics instead
-- **Write for all skill levels**: Both technical and non-technical users
-
-#### Key Terminology
-
-- **"integration"** (preferred over "component")
-- **Technical terms**: Use lowercase (automation, entity, device, service)
-
-#### Translation Considerations
-
-- **Add translation keys**: All user-facing text must be translatable
-- **Use placeholders**: Support dynamic content in translations
-- **Keep context**: Provide enough context for translators
-
-```typescript
-// Good
-this.hass.localize("ui.panel.config.automation.delete_confirm", {
-  name: automation.alias,
-});
-
-// Bad - hardcoded text
-("Are you sure you want to delete this automation?");
-```
-
-### Common Review Issues (From PR Analysis)
-
-#### User Experience and Accessibility
-
-- **Form validation**: Always provide proper field labels and validation feedback
-- **Form accessibility**: Prevent password managers from incorrectly identifying fields
-- **Loading states**: Show clear progress indicators during async operations
-- **Error handling**: Display meaningful error messages when operations fail
-- **Mobile responsiveness**: Ensure components work well on small screens
-- **Hit targets**: Make clickable areas large enough for touch interaction
-- **Visual feedback**: Provide clear indication of interactive states
-
-#### Dialog and Modal Patterns
-
-- **Dialog width constraints**: Respect minimum and maximum width requirements
-- **Interview progress**: Show clear progress for multi-step operations
-- **State persistence**: Handle dialog state properly during background operations
-- **Cancel behavior**: Ensure cancel/close buttons work consistently
-- **Form prefilling**: Use smart defaults but allow user override
-
-#### Component Design Patterns
-
-- **Terminology consistency**: Use "Join"/"Apply" instead of "Group" when appropriate
-- **Visual hierarchy**: Ensure proper font sizes and spacing ratios
-- **Grid alignment**: Components should align to the design grid system
-- **Badge placement**: Position badges and indicators consistently
-- **Color theming**: Respect theme variables and design system colors
-
-#### Code Quality Issues
-
-- **Null checking**: Always check if entities exist before accessing properties
-- **TypeScript safety**: Handle potentially undefined array/object access
-- **Import organization**: Remove unused imports and use proper type imports
-- **Event handling**: Properly subscribe and unsubscribe from events
-- **Memory leaks**: Clean up subscriptions and event listeners
-
-#### Configuration and Props
-
-- **Optional parameters**: Make configuration fields optional when sensible
-- **Smart defaults**: Provide reasonable default values
-- **Future extensibility**: Design APIs that can be extended later
-- **Validation**: Validate configuration before applying changes
-
-## Review Guidelines
-
-### Core Requirements Checklist
-
-- [ ] TypeScript strict mode passes (`yarn lint:types`)
-- [ ] No ESLint errors or warnings (`yarn lint:eslint`)
-- [ ] Prettier formatting applied (`yarn lint:prettier`)
-- [ ] Lit analyzer passes (`yarn lint:lit`)
-- [ ] Component follows Lit best practices
-- [ ] Proper error handling implemented
-- [ ] Loading states handled
-- [ ] Mobile responsive
-- [ ] Theme variables used
-- [ ] Translations added
-- [ ] Accessible to screen readers
-- [ ] Tests added (where applicable)
-- [ ] No console statements (use proper logging)
-- [ ] Unused imports removed
-- [ ] Proper naming conventions
-
-### Text and Copy Checklist
-
-- [ ] Follows terminology guidelines (Delete vs Remove, Create vs Add)
-- [ ] Localization keys added for all user-facing text
-- [ ] Uses "Home Assistant" (never "HA" or "HASS")
-- [ ] Sentence case for ALL text (titles, headings, buttons, labels)
-- [ ] American English spelling
-- [ ] Friendly, informational tone
-- [ ] Avoids abbreviations and jargon
-- [ ] Correct terminology (integration not component)
-
-### Component-Specific Checks
-
-- [ ] ha-alert used correctly for messages
-- [ ] ha-form uses proper schema structure
-- [ ] Components handle all states (loading, error, unavailable)
-- [ ] Entity existence checked before property access
-- [ ] Event subscriptions properly cleaned up

.github/copilot-instructions.md

@@ -0,0 +1 @@
+../AGENTS.md

.github/dependabot.yml

@@ -1,7 +1,14 @@
 version: 2
 updates:
   - package-ecosystem: "github-actions"
-    directory: "/"
+    # Dependabot only scans .github/workflows by default; composite actions
+    # under .github/actions must be listed explicitly to stay updated.
+    # https://github.com/dependabot/dependabot-core/issues/6704
+    directories:
+      - "/"
+      - "/.github/actions/setup"
+      - "/.github/actions/build"
+      - "/.github/actions/netlify-deploy"
     schedule:
       interval: weekly
       time: "06:00"

.github/labeler.yml

@@ -42,5 +42,36 @@ Dependencies:
 GitHub Actions:
   - changed-files:
       - any-glob-to-any-file:
+          - .github/actions/**
           - .github/workflows/**
           - .github/*.yml
+
+"Tests: E2E":
+  - changed-files:
+      - any-glob-to-any-file:
+          - test/e2e/**
+
+"Tests: App":
+  - changed-files:
+      - any-glob-to-any-file:
+          - test/e2e/app.spec.ts
+          - test/e2e/app/**
+          - test/e2e/playwright.app.config.ts
+
+"Tests: Demo":
+  - changed-files:
+      - any-glob-to-any-file:
+          - test/e2e/demo.spec.ts
+          - test/e2e/playwright.demo.config.ts
+
+"Tests: Design":
+  - changed-files:
+      - any-glob-to-any-file:
+          - test/e2e/gallery.spec.ts
+          - test/e2e/playwright.gallery.config.ts
+
+"Tests: Unit":
+  - changed-files:
+      - any-glob-to-any-file:
+          - test/*.ts
+          - "test/!(e2e)/**"

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

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

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

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

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

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

.github/workflows/actionlint.yaml

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

.github/workflows/blocking-labels.yaml

@@ -0,0 +1,35 @@
+name: Blocking labels
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - labeled
+      - unlabeled
+    branches:
+      - dev
+      - master
+
+permissions:
+  contents: read
+
+jobs:
+  check:
+    name: Check for labels which block the Pull Request from being merged
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out workflow scripts
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+          sparse-checkout: .github/scripts
+      - name: Check for blocking labels
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        with:
+          script: |
+            const { default: checkBlockingLabels } = await import(
+              `${process.env.GITHUB_WORKSPACE}/.github/scripts/check-blocking-labels.mjs`
+            );
+            await checkBlockingLabels({ github, context, core });

.github/workflows/cast_deployment.yaml

@@ -21,35 +21,31 @@ jobs:
     if: github.event_name != 'push'
     environment:
       name: Cast Development
-      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
+      url: ${{ steps.deploy.outputs.netlify_url }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           ref: dev
           persist-credentials: false
 
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: ".nvmrc"
-          cache: yarn
-
-      - name: Install dependencies
-        run: yarn install --immutable
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
 
       - name: Build Cast
-        run: ./node_modules/.bin/gulp build-cast
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        uses: ./.github/actions/build
+        with:
+          target: build-cast
+          github-token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Deploy to Netlify
         id: deploy
-        run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --alias dev
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
+        uses: ./.github/actions/netlify-deploy
+        with:
+          dir: cast/dist
+          alias: dev
+          auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          site-id: ${{ secrets.NETLIFY_CAST_SITE_ID }}
 
   deploy_master:
     runs-on: ubuntu-latest
@@ -57,32 +53,27 @@ jobs:
     if: github.event_name == 'push'
     environment:
       name: Cast Production
-      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
+      url: ${{ steps.deploy.outputs.netlify_url }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           ref: master
           persist-credentials: false
 
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: ".nvmrc"
-          cache: yarn
-
-      - name: Install dependencies
-        run: yarn install --immutable
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
 
       - name: Build Cast
-        run: ./node_modules/.bin/gulp build-cast
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        uses: ./.github/actions/build
+        with:
+          target: build-cast
+          github-token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Deploy to Netlify
         id: deploy
-        run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --prod
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
+        uses: ./.github/actions/netlify-deploy
+        with:
+          dir: cast/dist
+          auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          site-id: ${{ secrets.NETLIFY_CAST_SITE_ID }}

.github/workflows/ci.yaml

@@ -12,7 +12,6 @@ on:
 
 env:
   NODE_OPTIONS: --max_old_space_size=6144
-  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
@@ -27,22 +26,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: ".nvmrc"
-          cache: yarn
-      - name: Install dependencies
-        run: yarn install --immutable
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
       - name: Check for duplicate dependencies
         run: yarn dedupe --check
       - name: Build resources
+        id: build_resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Setup lint cache
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
         with:
           path: |
             node_modules/.cache/prettier
@@ -53,58 +50,60 @@ jobs:
       - name: Run eslint
         run: yarn run lint:eslint --quiet
       - name: Run tsc
+        if: ${{ !cancelled() && steps.build_resources.outcome == 'success' }}
         run: yarn run lint:types
       - name: Run lit-analyzer
+        if: ${{ !cancelled() && steps.build_resources.outcome == 'success' }}
         run: yarn run lint:lit --quiet
       - name: Run prettier
+        if: ${{ !cancelled() && steps.build_resources.outcome == 'success' }}
         run: yarn run lint:prettier
       - name: Check dependency licenses
+        if: ${{ !cancelled() && steps.build_resources.outcome == 'success' }}
         run: yarn run lint:licenses
   test:
     name: Run tests
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: ".nvmrc"
-          cache: yarn
-      - name: Install dependencies
-        run: yarn install --immutable
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Run Tests
         run: yarn run test
   build:
     name: Build frontend
-    needs: [lint, test]
+    needs:
+      - lint
+      - test
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: ".nvmrc"
-          cache: yarn
-      - name: Install dependencies
-        run: yarn install --immutable
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
       - name: Build Application
-        run: ./node_modules/.bin/gulp build-app
-        env:
-          IS_TEST: "true"
+        uses: ./.github/actions/build
+        with:
+          target: build-app
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          is-test: true
       - name: Upload bundle stats
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
           if-no-files-found: error
+      - name: Check entrypoint bundle size budget
+        run: yarn run check-bundlesize
       - name: Upload frontend build
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:

.github/workflows/codeql-analysis.yaml

@@ -0,0 +1,43 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches:
+      - dev
+      - master
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches:
+      - dev
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    timeout-minutes: 360
+    permissions:
+      contents: read # To check out the repository
+      security-events: write # To upload CodeQL results
+
+    steps:
+      - name: Check out code from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
+        with:
+          languages: javascript-typescript
+          build-mode: none
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
+        with:
+          category: "/language:javascript-typescript"

.github/workflows/codeql-analysis.yml

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

.github/workflows/demo_deployment.yaml

@@ -22,35 +22,30 @@ jobs:
     if: github.event_name != 'push' || github.ref_name != 'master'
     environment:
       name: Demo Development
-      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
+      url: ${{ steps.deploy.outputs.netlify_url }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           ref: dev
           persist-credentials: false
 
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: ".nvmrc"
-          cache: yarn
-
-      - name: Install dependencies
-        run: yarn install --immutable
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
 
       - name: Build Demo
-        run: ./node_modules/.bin/gulp build-demo
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        uses: ./.github/actions/build
+        with:
+          target: build-demo
+          github-token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Deploy to Netlify
         id: deploy
-        run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
+        uses: ./.github/actions/netlify-deploy
+        with:
+          dir: demo/dist
+          auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          site-id: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
 
   deploy_master:
     runs-on: ubuntu-latest
@@ -58,32 +53,27 @@ jobs:
     if: github.event_name == 'push' && github.ref_name == 'master'
     environment:
       name: Demo Production
-      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
+      url: ${{ steps.deploy.outputs.netlify_url }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           ref: master
           persist-credentials: false
 
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: ".nvmrc"
-          cache: yarn
-
-      - name: Install dependencies
-        run: yarn install --immutable
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
 
       - name: Build Demo
-        run: ./node_modules/.bin/gulp build-demo
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        uses: ./.github/actions/build
+        with:
+          target: build-demo
+          github-token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Deploy to Netlify
         id: deploy
-        run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}
+        uses: ./.github/actions/netlify-deploy
+        with:
+          dir: demo/dist
+          auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          site-id: ${{ secrets.NETLIFY_DEMO_SITE_ID }}

.github/workflows/design_deployment.yaml

@@ -16,31 +16,26 @@ jobs:
     runs-on: ubuntu-latest
     environment:
       name: Design
-      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
+      url: ${{ steps.deploy.outputs.netlify_url }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
 
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: ".nvmrc"
-          cache: yarn
-
-      - name: Install dependencies
-        run: yarn install --immutable
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
 
       - name: Build Gallery
-        run: ./node_modules/.bin/gulp build-gallery
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        uses: ./.github/actions/build
+        with:
+          target: build-gallery
+          github-token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Deploy to Netlify
         id: deploy
-        run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --prod
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}
+        uses: ./.github/actions/netlify-deploy
+        with:
+          dir: gallery/dist
+          auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          site-id: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}

.github/workflows/design_preview.yaml

@@ -24,34 +24,27 @@ jobs:
     if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
 
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: ".nvmrc"
-          cache: yarn
-
-      - name: Install dependencies
-        run: yarn install --immutable
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
 
       - name: Build Gallery
-        run: ./node_modules/.bin/gulp build-gallery
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        uses: ./.github/actions/build
+        with:
+          target: build-gallery
+          github-token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Deploy preview to Netlify
         id: deploy
-        run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
-            --json > deploy_output.json
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}
+        uses: ./.github/actions/netlify-deploy
+        with:
+          dir: gallery/dist
+          alias: deploy-preview-${{ github.event.number }}
+          auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          site-id: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}
 
       - name: Generate summary
-        run: |
-          NETLIFY_LIVE_URL=$(jq -r '.deploy_url' deploy_output.json)
-          echo "$NETLIFY_LIVE_URL" >> "$GITHUB_STEP_SUMMARY"
+        run: echo "${{ steps.deploy.outputs.netlify_url }}" >> "$GITHUB_STEP_SUMMARY"

.github/workflows/e2e.yaml

@@ -0,0 +1,219 @@
+name: E2E Tests
+
+on:
+  push:
+    branches:
+      - dev
+      - master
+  pull_request:
+    branches:
+      - dev
+      - master
+  workflow_dispatch:
+
+env:
+  NODE_OPTIONS: --max_old_space_size=6144
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  # ── Build the demo once and share it across test jobs via artifact ──────────
+  build-demo:
+    name: Build demo
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
+
+      - name: Build demo
+        uses: ./.github/actions/build
+        with:
+          target: build-demo
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload demo build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: demo-dist
+          path: demo/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Build the e2e test app and share it via artifact ────────────────────────
+  build-e2e-test-app:
+    name: Build e2e test app
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
+
+      - name: Build e2e test app
+        uses: ./.github/actions/build
+        with:
+          target: build-e2e-test-app
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload e2e test app build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: e2e-test-app-dist
+          path: test/e2e/app/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Build the gallery and share it via artifact ─────────────────────────────
+  build-gallery:
+    name: Build gallery
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
+
+      - name: Build gallery
+        uses: ./.github/actions/build
+        with:
+          target: build-gallery
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload gallery build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: gallery-dist
+          path: gallery/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Run Playwright tests locally against Chromium ──────────────────────────
+  e2e-local:
+    name: E2E (local Chromium)
+    needs: [build-demo, build-e2e-test-app, build-gallery]
+    runs-on: ubuntu-latest
+    # Fail fast if anything hangs. The whole suite should take < 15 minutes on
+    # Chromium; anything longer is almost certainly an install or webServer
+    # hang.
+    timeout-minutes: 30
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - name: Setup Node 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: Download e2e test app build
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        with:
+          name: e2e-test-app-dist
+          path: test/e2e/app/dist/
+
+      - name: Download gallery build
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        with:
+          name: gallery-dist
+          path: gallery/dist/
+
+      - name: Run Playwright tests (local)
+        run: yarn test:e2e
+        timeout-minutes: 15
+
+      - name: Upload blob report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        if: always()
+        with:
+          name: blob-report-local
+          path: test/e2e/reports/
+          retention-days: 3
+
+  # ── Merge local blob reports and post PR comment ───────────────────────────
+  report:
+    name: Report
+    needs: [e2e-local]
+    runs-on: ubuntu-latest
+    if: ${{ !cancelled() }}
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
+
+      - name: Download blob report (local)
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        continue-on-error: true
+        with:
+          name: blob-report-local
+          path: test/e2e/reports/
+
+      - name: Stage blobs for merge
+        run: node test/e2e/collect-blob-reports.mjs
+
+      - name: Merge blob reports
+        run: npx playwright merge-reports -c test/e2e/playwright.merge.config.ts test/e2e/reports/blob
+
+      - name: Upload merged HTML report
+        id: upload-report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: playwright-report
+          path: test/e2e/reports/combined/
+          retention-days: 14
+
+      - name: Post report to PR
+        if: github.event_name == 'pull_request' && needs.e2e-local.result == 'failure'
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        with:
+          script: |
+            const { default: postReportComment } = await import(
+              `${process.env.GITHUB_WORKSPACE}/test/e2e/post-report-comment.mjs`
+            );
+            await postReportComment({ github, context, core });

.github/workflows/lock.yaml

@@ -13,13 +13,11 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@7266a7ce5c1df01b1c6db85bf8cd86c737dadbe7 # v6.0.0
+      - uses: dessant/lock-threads@89ae32b08ed1a541efecbab17912962a5e38981c # v6.0.2
         with:
           github-token: ${{ github.token }}
           process-only: "issues, prs"
-          issue-lock-inactive-days: "30"
-          issue-exclude-created-before: "2020-10-01T00:00:00Z"
+          issue-inactive-days: "30"
           issue-lock-reason: ""
-          pr-lock-inactive-days: "1"
-          pr-exclude-created-before: "2020-11-01T00:00:00Z"
+          pr-inactive-days: "1"
           pr-lock-reason: ""

.github/workflows/nightly.yaml

@@ -20,23 +20,19 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6
+        uses: actions/setup-python@ece7cb06caefa5fff74198d8649806c4678c61a1 # v6
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
         with:
-          node-version-file: ".nvmrc"
-          cache: yarn
-
-      - name: Install dependencies
-        run: yarn install
+          immutable: false
 
       - name: Download translations
         run: ./script/translations_download

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

@@ -0,0 +1,38 @@
+name: Pull request standards
+
+on:
+  pull_request_target: # zizmor: ignore[dangerous-triggers] -- safe: reads PR metadata from event payload only, checks out base repo scripts only, never PR head code
+    types:
+      - opened
+      - edited
+      - reopened
+      - ready_for_review
+    branches:
+      - dev
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  check:
+    name: Check pull request follows contribution standards
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write # To label and comment on pull requests
+    steps:
+      - name: Check out workflow scripts
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+          sparse-checkout: .github/scripts
+      - name: Check pull request standards
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        with:
+          script: |
+            const { default: checkStandards } = await import(
+              `${process.env.GITHUB_WORKSPACE}/.github/scripts/check-pull-request-standards.mjs`
+            );
+            await checkStandards({ github, context, core });

.github/workflows/release-drafter.yaml

@@ -18,6 +18,6 @@ jobs:
       pull-requests: read
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@c2e2804cc59f45f57076a99af580d0fedb697927 # v7.3.0
+      - uses: release-drafter/release-drafter@4d75298e00d9e34c483e5ff8c68d0ea1c1940c1e # v7.5.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -26,25 +26,23 @@ jobs:
     if: github.repository_owner == 'home-assistant'
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
+        uses: actions/setup-python@ece7cb06caefa5fff74198d8649806c4678c61a1 # v6.3.0
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@f6f29a7ee3fa0eccadf3620a7b9ee00ab54ec03b # master
+        uses: home-assistant/actions/helpers/verify-version@f4ca6f671bd429efb108c0f2fa0ae8af0215986c # master
 
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
         with:
-          node-version-file: ".nvmrc"
-
-      - name: Install dependencies
-        run: yarn install
+          immutable: false
+          cache: false
 
       - name: Download Translations
         run: ./script/translations_download
@@ -77,14 +75,27 @@ jobs:
         env:
           GITHUB_REF: ${{ github.ref }}
         run: |
-          # Sleep to give pypi time to populate the new version across mirrors
-          sleep 240
           version=$(echo "$GITHUB_REF" | awk -F"/" '{print $NF}' )
+          # Wait for the package to become available on PyPI
+          echo "Waiting for home-assistant-frontend==$version to appear on PyPI..."
+          for i in $(seq 1 30); do
+            status=$(curl -s -o /dev/null -w "%{http_code}" "https://pypi.org/pypi/home-assistant-frontend/$version/json")
+            if [ "$status" = "200" ]; then
+              echo "Package is available on PyPI!"
+              break
+            fi
+            if [ "$i" = "30" ]; then
+              echo "Timed out waiting for package to appear on PyPI"
+              exit 1
+            fi
+            echo "Not available yet (HTTP $status), retrying in 30 seconds... ($i/30)"
+            sleep 30
+          done
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       # home-assistant/wheels doesn't support SHA pinning
       - name: Build wheels
-        uses: home-assistant/wheels@e5742a69d69f0e274e2689c998900c7d19652c21 # 2025.12.0
+        uses: home-assistant/wheels@9e17ab1ed5c4c79d8b61e29fa63de25ca2710716 # 2026.07.0
         with:
           abi: cp314
           tag: musllinux_1_2
@@ -100,15 +111,14 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
         with:
-          node-version-file: ".nvmrc"
-      - name: Install dependencies
-        run: yarn install
+          immutable: false
+          cache: false
       - name: Download Translations
         run: ./script/translations_download
         env:

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

@@ -0,0 +1,56 @@
+name: Restrict task creation
+
+# yamllint disable-line rule:truthy
+on:
+  issues:
+    types: [opened]
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.issue.number }}
+
+jobs:
+  add-no-stale:
+    name: Add no-stale label
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write # To add labels to issues
+    if: >-
+      github.event.issue.type.name == 'Task'
+      || github.event.issue.type.name == 'Epic'
+      || github.event.issue.type.name == 'Opportunity'
+    steps:
+      - name: Add no-stale label
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        with:
+          script: |
+            await github.rest.issues.addLabels({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              labels: ['no-stale']
+            });
+
+  check-authorization:
+    name: Check authorization
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read # To check out workflow scripts
+      issues: write # To comment on, label, and close issues
+    # Only run if this is a Task issue type (from the issue form)
+    if: github.event.issue.type.name == 'Task'
+    steps:
+      - name: Check out workflow scripts
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+          sparse-checkout: .github/scripts
+      - name: Check if user is authorized
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        with:
+          script: |
+            const { default: checkTaskAuthorization } = await import(
+              `${process.env.GITHUB_WORKSPACE}/.github/scripts/check-task-authorization.mjs`
+            );
+            await checkTaskAuthorization({ github, context, core });

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

@@ -1,87 +0,0 @@
-name: Restrict task creation
-
-# yamllint disable-line rule:truthy
-on:
-  issues:
-    types: [opened]
-
-permissions: {}
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.issue.number }}
-
-jobs:
-  add-no-stale:
-    name: Add no-stale label
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write # To add labels to issues
-    if: >-
-      github.event.issue.type.name == 'Task'
-      || github.event.issue.type.name == 'Epic'
-      || github.event.issue.type.name == 'Opportunity'
-    steps:
-      - name: Add no-stale label
-        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
-        with:
-          script: |
-            await github.rest.issues.addLabels({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: context.issue.number,
-              labels: ['no-stale']
-            });
-
-  check-authorization:
-    name: Check authorization
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write # To comment on, label, and close issues
-    # Only run if this is a Task issue type (from the issue form)
-    if: github.event.issue.type.name == 'Task'
-    steps:
-      - name: Check if user is authorized
-        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
-        with:
-          script: |
-            const issueAuthor = context.payload.issue.user.login;
-
-            // Check if user is an organization member
-            try {
-              await github.rest.orgs.checkMembershipForUser({
-                org: 'home-assistant',
-                username: issueAuthor
-              });
-              console.log(`✅ ${issueAuthor} is an organization member`);
-              return; // Authorized
-            } catch (error) {
-              console.log(`❌ ${issueAuthor} is not authorized to create Task issues`);
-            }
-
-            // Close the issue with a comment
-            await github.rest.issues.createComment({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: context.issue.number,
-              body: `Hi @${issueAuthor}, thank you for your contribution!\n\n` +
-                    `Task issues are restricted to Open Home Foundation staff and authorized contributors.\n\n` +
-                    `If you would like to:\n` +
-                    `- Report a bug: Please use the [bug report form](https://github.com/home-assistant/frontend/issues/new?template=bug_report.yml)\n` +
-                    `- Request a feature: Please submit to [Feature Requests](https://github.com/orgs/home-assistant/discussions)\n\n` +
-                    `If you believe you should have access to create Task issues, please contact the maintainers.`
-            });
-
-            await github.rest.issues.update({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: context.issue.number,
-              state: 'closed'
-            });
-
-            // Add a label to indicate this was auto-closed
-            await github.rest.issues.addLabels({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: context.issue.number,
-              labels: ['auto-closed']
-            });

.github/workflows/stale.yaml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f # v10.2.0
+        uses: actions/stale@eb5cf3af3ac0a1aa4c9c45633dd1ae542a27a899 # v10.3.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

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

@@ -0,0 +1,47 @@
+name: Sync numeric device classes
+
+# Mirrors Home Assistant Core's numeric `SensorDeviceClass` list into the
+# build-time default in src/data/sensor_numeric_device_classes.ts and opens a PR
+# when it drifts. Reads homeassistant/generated/sensor.json from core.
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "0 4 * * *" # Daily, 04:00 UTC
+
+permissions:
+  contents: read
+
+jobs:
+  sync:
+    name: Sync
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
+
+      - name: Regenerate numeric device classes
+        run: ./script/gen_numeric_device_classes
+
+      - name: Format
+        run: yarn prettier --write src/data/sensor_numeric_device_classes.ts
+
+      - name: Create pull request
+        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
+        with:
+          branch: chore/sync-numeric-device-classes
+          commit-message: Update numeric sensor device classes
+          title: Update numeric sensor device classes
+          body: |
+            Regenerated `SENSOR_NUMERIC_DEVICE_CLASSES` from Home Assistant Core's
+            `SensorDeviceClass`.
+
+            Automated by `.github/workflows/sync-numeric-device-classes.yaml`.

.github/workflows/translations.yaml

@@ -6,6 +6,7 @@ on:
     branches:
       - dev
     paths:
+      - .github/workflows/translations.yaml
       - src/translations/en.json
 
 permissions:
@@ -17,11 +18,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
 
       - name: Upload Translations
-        run: |
-          export LOKALISE_TOKEN="${{ secrets.LOKALISE_TOKEN }}"
-          ./script/translations_upload_base
+        run: ./script/translations_upload_base
+        env:
+          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}

.gitignore

@@ -6,6 +6,8 @@ build/
 dist/
 /hass_frontend/
 /translations/
+# Composite action source, not build output
+!/.github/actions/build/
 
 # yarn
 .yarn/*
@@ -54,7 +56,19 @@ src/cast/dev_const.ts
 # test coverage
 test/coverage/
 
+# Playwright e2e output
+test/e2e/reports/
+test/e2e/test-results/
+# E2E test app build output
+test/e2e/app/dist/
+# MCP server
+.playwright-mcp/
+
 # AI tooling
-.claude
+.claude/*
+!.claude/skills
 .cursor
 .opencode
+.serena
+
+test/benchmarks/results/

.nvmrc

@@ -1 +1 @@
-24.15.0
+24.18.0

.yarn/patches/tinykeys-npm-4.0.0-a6ca3fd771.patch

@@ -0,0 +1,86 @@
+diff --git a/dist/tinykeys.cjs b/dist/tinykeys.cjs
+index 08c98b6eff3b8fb4b727fe8e6b096951d6ef6347..9c44f14862f582766ea1733b6dc0e97f962800d8 100644
+--- a/dist/tinykeys.cjs
++++ b/dist/tinykeys.cjs
+@@ -61,6 +61,18 @@ function defaultKeybindingsHandlerIgnore(event) {
+ function getModifierState(event, mod) {
+ 	return typeof event.getModifierState === "function" ? event.getModifierState(mod) || ALT_GRAPH_ALIASES.includes(mod) && event.getModifierState("AltGraph") : false;
+ }
++function splitKeybindingPress(press) {
++	let parts = [];
++	let start = 0;
++	for (let index = 0; index < press.length; index++) {
++		if (press[index] === "+" && /[\w\]]/.test(press[index - 1] || "")) {
++			parts.push(press.slice(start, index));
++			start = index + 1;
++		}
++	}
++	parts.push(press.slice(start));
++	return parts;
++}
+ /**
+ * Parses a keybinding string into its parts.
+ *
+@@ -76,10 +88,10 @@ function getModifierState(event, mod) {
+ */
+ function parseKeybinding(str) {
+ 	return str.trim().split(" ").map((press) => {
+-		let parts = press.split(/(?<=\w|\])\+/);
++		let parts = splitKeybindingPress(press);
+ 		let last = parts.pop();
+ 		let regex = last.match(/^\((.+)\)$/);
+-		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "iv") : last;
++		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "i") : last;
+ 		let requiredModifiers = [];
+ 		let optionalModifiers = [];
+ 		for (const part of parts) {
+@@ -201,5 +213,3 @@ exports.defaultKeybindingsHandlerIgnore = defaultKeybindingsHandlerIgnore;
+ exports.matchKeybindingPress = matchKeybindingPress;
+ exports.parseKeybinding = parseKeybinding;
+ exports.tinykeys = tinykeys;
+-
+-//# sourceMappingURL=tinykeys.cjs.map
+\ No newline at end of file
+diff --git a/dist/tinykeys.mjs b/dist/tinykeys.mjs
+index c289972d2728e03d9b272268c38fd3392e8845bf..e22897b00aae6cdb0dbbb971445227c07be52918 100644
+--- a/dist/tinykeys.mjs
++++ b/dist/tinykeys.mjs
+@@ -60,6 +60,18 @@ function defaultKeybindingsHandlerIgnore(event) {
+ function getModifierState(event, mod) {
+ 	return typeof event.getModifierState === "function" ? event.getModifierState(mod) || ALT_GRAPH_ALIASES.includes(mod) && event.getModifierState("AltGraph") : false;
+ }
++function splitKeybindingPress(press) {
++	let parts = [];
++	let start = 0;
++	for (let index = 0; index < press.length; index++) {
++		if (press[index] === "+" && /[\w\]]/.test(press[index - 1] || "")) {
++			parts.push(press.slice(start, index));
++			start = index + 1;
++		}
++	}
++	parts.push(press.slice(start));
++	return parts;
++}
+ /**
+ * Parses a keybinding string into its parts.
+ *
+@@ -75,10 +87,10 @@ function getModifierState(event, mod) {
+ */
+ function parseKeybinding(str) {
+ 	return str.trim().split(" ").map((press) => {
+-		let parts = press.split(/(?<=\w|\])\+/);
++		let parts = splitKeybindingPress(press);
+ 		let last = parts.pop();
+ 		let regex = last.match(/^\((.+)\)$/);
+-		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "iv") : last;
++		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "i") : last;
+ 		let requiredModifiers = [];
+ 		let optionalModifiers = [];
+ 		for (const part of parts) {
+@@ -196,5 +208,3 @@ function tinykeys(target, keybindingMap, options = {}) {
+ }
+ //#endregion
+ export { createKeybindingsHandler, defaultKeybindingsHandlerIgnore, matchKeybindingPress, parseKeybinding, tinykeys };
+-
+-//# sourceMappingURL=tinykeys.mjs.map
+\ No newline at end of file

.yarnrc.yml

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

AGENTS.md

@@ -1 +0,0 @@
-.github/copilot-instructions.md

AGENTS.md

@@ -0,0 +1,52 @@
+# Home Assistant Frontend Agent Guide
+
+You are helping develop the Home Assistant frontend. This repository is a TypeScript application built from Lit-based Web Components for the Home Assistant web UI.
+
+For gallery-specific documentation, demos, page structure, and examples, read `gallery/AGENTS.md` when working under `gallery/`.
+
+## Essential Commands
+
+```bash
+yarn lint          # ESLint + Prettier + TypeScript + Lit
+yarn format        # Auto-fix ESLint + Prettier
+yarn lint:types    # TypeScript compiler, run without file arguments
+yarn test          # Vitest
+yarn dev           # App dev server, supports --background/--status/--stop/--logs
+yarn dev:serve     # Local serving dev server, supports -c core URL, -p port, and dev flags
+```
+
+Never run `tsc` or `yarn lint:types` with file arguments. When `tsc` receives file arguments, it ignores `tsconfig.json` and can emit `.js` files into `src/`. Always run `yarn lint:types` without arguments. For individual file type checking, rely on editor diagnostics.
+
+## Architecture
+
+- The frontend uses custom elements built with Lit and TypeScript strict mode.
+- Components communicate with the backend through the Home Assistant WebSocket API.
+- Use `ha-` for Home Assistant components, `hui-` for Lovelace UI components, and `dialog-` for dialogs.
+- Prefer `ha-*` components and current Web Awesome wrappers. Avoid adding new legacy `mwc-*` usage.
+- Leaf components should consume narrow Lit contexts instead of taking the broad `hass` object unless they are containers that own and provide `hass`.
+
+## Development Standards
+
+- Use strict TypeScript, proper interfaces, and `import type` for type-only imports.
+- Avoid `any`; model data with existing Home Assistant types or narrow new types.
+- Keep imports organized and remove unused imports.
+- Do not use `console`; use existing logging or user-visible error patterns.
+- Use `@state()` for internal Lit state and `@property()` for public API.
+- Do not query or manipulate DOM manually when Lit decorators, component refs, or render state are appropriate.
+- Scope styles to components, use theme custom properties, and keep layouts mobile-first and RTL-safe.
+- All user-facing text must be localized through the translation system.
+
+## Project Skills
+
+Detailed guidance lives in project skills under `.agents/skills/`. Load the matching skill before detailed implementation or review:
+
+- `ha-frontend-contexts`: Lit contexts, `hass` migration, and rerender-sensitive state access.
+- `ha-frontend-components`: dialogs, forms, alerts, shortcuts, tooltips, panels, and Lovelace cards.
+- `ha-frontend-styling`: theme variables, spacing tokens, responsive layout, RTL, and view transitions.
+- `ha-frontend-testing`: lint, typecheck, Vitest, Playwright e2e dev servers, and benchmarks.
+- `ha-frontend-user-facing-text`: localization, terminology, sentence case, and Home Assistant text style.
+- `ha-frontend-review`: PR template use, review checklist, and recurring review issues.
+
+## Pull Requests
+
+When creating a pull request, use `.github/PULL_REQUEST_TEMPLATE.md` as the PR body. Preserve template sections, check only the appropriate type-of-change boxes, and do not check checklist items on behalf of the user. If the PR includes UI changes, remind the user to add screenshots or a short video.

CLAUDE.md

@@ -1 +1 @@
-.github/copilot-instructions.md
+AGENTS.md

build-scripts/bundle-budget.json

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

build-scripts/bundle.cjs

@@ -1,4 +1,3 @@
-/* global require, module, __dirname, process */
 const path = require("path");
 const env = require("./env.cjs");
 const paths = require("./paths.cjs");
@@ -84,12 +83,7 @@ module.exports.swcOptions = () => ({
   },
 });
 
-module.exports.babelOptions = ({
-  latestBuild,
-  isProdBuild,
-  isTestBuild,
-  sw,
-}) => ({
+module.exports.babelOptions = ({ latestBuild, isTestBuild, sw }) => ({
   babelrc: false,
   compact: false,
   assumptions: {
@@ -102,14 +96,22 @@ module.exports.babelOptions = ({
     [
       "@babel/preset-env",
       {
-        useBuiltIns: "usage",
-        corejs: dependencies["core-js"],
-        bugfixes: true,
         shippedProposals: true,
       },
     ],
   ],
   plugins: [
+    // Inject Core-JS polyfills on demand. Babel 8 removed preset-env's
+    // `useBuiltIns`/`corejs` options, so the equivalent polyfill provider is
+    // configured directly here (`usage-global` matches the old `useBuiltIns: "usage"`).
+    [
+      "babel-plugin-polyfill-corejs3",
+      {
+        method: "usage-global",
+        version: dependencies["core-js"],
+        shippedProposals: true,
+      },
+    ],
     [
       path.join(BABEL_PLUGINS, "inline-constants-plugin.cjs"),
       {
@@ -117,32 +119,14 @@ module.exports.babelOptions = ({
         ignoreModuleNotFound: true,
       },
     ],
-    // Minify template literals for production
-    isProdBuild && [
-      "template-html-minifier",
-      {
-        modules: {
-          ...Object.fromEntries(
-            ["lit", "lit-element", "lit-html"].map((m) => [
-              m,
-              [
-                "html",
-                { name: "svg", encapsulation: "svg" },
-                { name: "css", encapsulation: "style" },
-              ],
-            ])
-          ),
-          "@polymer/polymer/lib/utils/html-tag.js": ["html"],
-        },
-        strictCSS: true,
-        htmlMinifier: module.exports.htmlMinifierOptions,
-        failOnError: false, // we can turn this off in case of false positives
-      },
-    ],
-    // Import helpers and regenerator from runtime package
+    // Import helpers and regenerator from runtime package.
+    // `moduleName` is pinned so helpers resolve from `@babel/runtime`: the
+    // corejs3 polyfill provider above otherwise redirects them to the
+    // (uninstalled) `@babel/runtime-corejs3`, which preset-env used to suppress
+    // internally when it owned the polyfill injection via `useBuiltIns`.
     [
       "@babel/plugin-transform-runtime",
-      { version: dependencies["@babel/runtime"] },
+      { version: dependencies["@babel/runtime"], moduleName: "@babel/runtime" },
     ],
     "@babel/plugin-transform-class-properties",
     "@babel/plugin-transform-private-methods",
@@ -321,4 +305,22 @@ module.exports.config = {
       isLandingPageBuild: true,
     };
   },
+
+  e2eTestApp({ isProdBuild, latestBuild, isStatsBuild }) {
+    return {
+      name: "e2e-test-app" + nameSuffix(latestBuild),
+      entry: {
+        main: path.resolve(paths.e2eTestApp_dir, "src/entrypoint.ts"),
+      },
+      outputPath: outputPath(paths.e2eTestApp_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      defineOverlay: {
+        __VERSION__: JSON.stringify(`E2E-TEST-${env.version()}`),
+        __DEMO__: true,
+      },
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+    };
+  },
 };

build-scripts/check-bundle-size.cjs

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

build-scripts/dev-server.mjs

@@ -0,0 +1,678 @@
+// Manage a Home Assistant frontend dev server with an agent-friendly interface.
+//
+//   node build-scripts/dev-server.mjs --suite <suite> [mode] [extra args]
+//
+//   (no mode)          Run in the foreground.
+//   --background       Start detached, wait until it is ready, print the URL
+//                      (when it has one) and pid, then exit and leave it running.
+//   --status           Report whether the suite's dev server is running.
+//   --stop             Stop a running background dev server.
+//   --logs [--follow]  Print (or follow) the background dev server log.
+//
+// Extra args (for example -p or -c on app-serve) are forwarded to the underlying
+// script. Suites use one of two liveness models:
+//
+//   health   demo, gallery, e2e-app: a fixed port plus the /__ha_dev_status
+//            endpoint each dev server exposes (see runDevServer in
+//            build-scripts/gulp/rspack.js). The port is the source of truth and
+//            the pid is found from it; no state file.
+//   process  app (yarn dev) and app-serve (yarn dev:serve): the app watcher has
+//            no health endpoint, and plain yarn dev has no port at all, so these
+//            track a pidfile and treat the first "Build done" log line as ready.
+
+import { spawn, execFileSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const repoRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  ".."
+);
+const gulpBin = path.join(repoRoot, "node_modules", ".bin", "gulp");
+const developAndServeScript = path.join(
+  repoRoot,
+  "script",
+  "develop_and_serve"
+);
+const logDir = path.join(repoRoot, "node_modules", ".cache", "ha-dev-server");
+
+// Each suite names its yarn alias (for hints), a liveness model, and how to
+// spawn it. health suites carry a fixed port; process suites carry the log line
+// that means "ready" and, for app-serve, forward extra args to the script.
+const SUITES = {
+  "e2e-app": {
+    alias: "test:e2e:app:dev",
+    liveness: "health",
+    port: 8095,
+    spawn: { cmd: gulpBin, args: ["develop-e2e-test-app"] },
+  },
+  demo: {
+    alias: "dev:demo",
+    liveness: "health",
+    port: 8090,
+    spawn: { cmd: gulpBin, args: ["develop-demo"] },
+  },
+  gallery: {
+    alias: "dev:gallery",
+    liveness: "health",
+    port: 8100,
+    spawn: { cmd: gulpBin, args: ["develop-gallery"] },
+  },
+  app: {
+    alias: "dev",
+    liveness: "process",
+    readyLog: /Build done @/,
+    spawn: { cmd: gulpBin, args: ["develop-app"] },
+  },
+  "app-serve": {
+    alias: "dev:serve",
+    liveness: "process",
+    acceptsArgs: true,
+    readyLog: /Build done @/,
+    spawn: { cmd: developAndServeScript, args: [] },
+  },
+};
+
+// Cover a cold build on a slow machine before the server starts listening.
+// Override with HA_DEV_SERVER_TIMEOUT (seconds).
+const READY_TIMEOUT_MS =
+  Number(process.env.HA_DEV_SERVER_TIMEOUT || "180") * 1000;
+
+// Detect a coding agent from a small set of environment markers set by common
+// agent CLIs (env-only; no process-ancestry detection).
+const detectAgent = () => {
+  const env = process.env;
+  const has = (name) => Boolean(env[name]);
+  const eq = (name, value) => env[name] === value;
+  const signals = {
+    opencode: () =>
+      [
+        "OPENCODE",
+        "OPENCODE_BIN_PATH",
+        "OPENCODE_SERVER",
+        "OPENCODE_APP_INFO",
+      ].some(has),
+    "claude-code": () => has("CLAUDECODE"),
+    cursor: () => has("CURSOR_TRACE_ID"),
+    "github-copilot": () =>
+      eq("TERM_PROGRAM", "vscode") && eq("GIT_PAGER", "cat"),
+    // Convention shared by several agents (Crush, Amp, ...).
+    generic: () => has("AGENT") || has("AI_AGENT"),
+  };
+  return Object.keys(signals).find((id) => signals[id]());
+};
+
+const usage = () => {
+  const suites = Object.keys(SUITES).join("|");
+  process.stderr.write(
+    `Usage: node build-scripts/dev-server.mjs --suite <${suites}> ` +
+      `[--background | --status | --stop | --logs [--follow]]\n`
+  );
+};
+
+const parseArgs = (argv) => {
+  const args = {
+    mode: "foreground",
+    follow: false,
+    suite: undefined,
+    passthrough: [],
+  };
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    switch (arg) {
+      case "--suite":
+        args.suite = argv[++i];
+        break;
+      case "--background":
+        args.mode = "background";
+        break;
+      case "--status":
+        args.mode = "status";
+        break;
+      case "--stop":
+        args.mode = "stop";
+        break;
+      case "--logs":
+        args.mode = "logs";
+        break;
+      case "--follow":
+        args.follow = true;
+        break;
+      default:
+        // Anything unrecognised is forwarded to the underlying script.
+        args.passthrough.push(arg);
+    }
+  }
+  return args;
+};
+
+const sleep = (ms) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
+const logFileFor = (suite) => path.join(logDir, `${suite}.log`);
+const pidFileFor = (suite) => path.join(logDir, `${suite}.pid`);
+
+const hints = (suite) => {
+  const alias = `yarn ${SUITES[suite].alias}`;
+  return (
+    `  Stop:   ${alias} --stop\n` +
+    `  Status: ${alias} --status\n` +
+    `  Logs:   ${alias} --logs\n`
+  );
+};
+
+// --- shared spawning and lifecycle ------------------------------------------
+
+// Signal the whole process group (the background server is its group leader),
+// falling back to the bare pid if that is not permitted.
+const killProcessTree = (pid, sig) => {
+  try {
+    process.kill(-pid, sig);
+  } catch {
+    try {
+      process.kill(pid, sig);
+    } catch {
+      // Already gone.
+    }
+  }
+};
+
+const urlSuffix = (port) => (port ? ` at http://localhost:${port}` : "");
+
+// Run a server in the foreground, inheriting stdio; resolve with its exit code.
+const spawnInherit = (cmd, args) =>
+  new Promise((resolve) => {
+    const child = spawn(cmd, args, { cwd: repoRoot, stdio: "inherit" });
+    child.on("exit", (code) => resolve(code ?? 0));
+  });
+
+// Spawn a detached server that writes stdout and stderr to the suite's log file.
+const spawnDetachedToLog = (suite, cmd, args) => {
+  fs.mkdirSync(logDir, { recursive: true });
+  const logFile = logFileFor(suite);
+  const fd = fs.openSync(logFile, "w");
+  const child = spawn(cmd, args, {
+    cwd: repoRoot,
+    detached: true,
+    stdio: ["ignore", fd, fd],
+  });
+  fs.closeSync(fd);
+  child.unref();
+  return { child, logFile };
+};
+
+// Poll until the server is ready, the child exits, or we time out. Prints the
+// progress dots and outcome; returns 0 when ready, 1 otherwise. onExit runs if
+// the child dies before it is ready (used to clear a stale pidfile).
+const awaitReady = async ({ suite, child, logFile, port, isReady, onExit }) => {
+  let childExited = false;
+  child.on("exit", () => {
+    childExited = true;
+  });
+  const deadline = Date.now() + READY_TIMEOUT_MS;
+  process.stdout.write(`Starting ${suite} dev server`);
+  /* eslint-disable no-await-in-loop -- poll until the server is ready */
+  while (Date.now() < deadline) {
+    if (childExited) {
+      process.stdout.write("\n");
+      process.stderr.write(
+        `Dev server (${suite}) exited before it was ready. See ${logFile}\n`
+      );
+      onExit?.();
+      return 1;
+    }
+    if (await isReady()) {
+      process.stdout.write("\n");
+      process.stdout.write(
+        `Dev server (${suite}) running${urlSuffix(port)} ` +
+          `(pid ${child.pid})\n${hints(suite)}`
+      );
+      return 0;
+    }
+    process.stdout.write(".");
+    await sleep(1000);
+  }
+  /* eslint-enable no-await-in-loop */
+  process.stdout.write("\n");
+  process.stderr.write(
+    `Dev server (${suite}) did not become ready within ${
+      READY_TIMEOUT_MS / 1000
+    }s. See ${logFile}\n`
+  );
+  return 1;
+};
+
+// Stop a running background server: SIGTERM, wait for it to go, then SIGKILL.
+// isStopped reports when it is gone; onStopped runs on success (pidfile cleanup).
+const terminate = async (suite, pid, isStopped, onStopped) => {
+  killProcessTree(pid, "SIGTERM");
+  const deadline = Date.now() + 10_000;
+  /* eslint-disable no-await-in-loop -- poll until the server is gone */
+  while (Date.now() < deadline) {
+    await sleep(300);
+    if (await isStopped()) {
+      onStopped?.();
+      process.stdout.write(`Stopped dev server (${suite}) (pid ${pid}).\n`);
+      return 0;
+    }
+  }
+  /* eslint-enable no-await-in-loop */
+  // Escalate if it is still up.
+  killProcessTree(pid, "SIGKILL");
+  await sleep(300);
+  if (!(await isStopped())) {
+    process.stderr.write(
+      `Failed to stop dev server (${suite}) (pid ${pid}). Stop it manually.\n`
+    );
+    return 1;
+  }
+  onStopped?.();
+  process.stdout.write(`Stopped dev server (${suite}) (pid ${pid}).\n`);
+  return 0;
+};
+
+// --- health liveness (port + /__ha_dev_status) ------------------------------
+
+/**
+ * Probe the health endpoint. Dev servers bind IPv4 or IPv6 localhost depending
+ * on the OS, so try each; the port is "free" only if every address refuses.
+ * @returns {Promise<{state: "ours" | "foreign" | "free", suite?: string}>}
+ */
+const PROBE_HOSTS = ["localhost", "127.0.0.1", "[::1]"];
+
+const probe = async (port, timeoutMs = 1000) => {
+  let sawResponse = false;
+  /* eslint-disable no-await-in-loop -- probe localhost addresses in order, stopping at the first that answers */
+  for (const host of PROBE_HOSTS) {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), timeoutMs);
+    try {
+      const res = await fetch(`http://${host}:${port}/__ha_dev_status`, {
+        signal: controller.signal,
+      });
+      sawResponse = true;
+      if (res.ok) {
+        const body = await res.json().catch(() => null);
+        if (body && body.server === "ha-frontend-dev") {
+          return { state: "ours", suite: body.suite };
+        }
+      }
+    } catch {
+      // Try the next address.
+    } finally {
+      clearTimeout(timer);
+    }
+  }
+  /* eslint-enable no-await-in-loop */
+  return sawResponse ? { state: "foreign" } : { state: "free" };
+};
+
+// Find the pid listening on a port via the first available tool (no state file).
+const pidFromPort = (port) => {
+  const attempts = [
+    [
+      "lsof",
+      ["-ti", `tcp:${port}`, "-sTCP:LISTEN"],
+      (out) => out.trim().split("\n")[0],
+    ],
+    [
+      "ss",
+      ["-ltnpH", `sport = :${port}`],
+      (out) => out.match(/pid=(\d+)/)?.[1],
+    ],
+    ["fuser", [`${port}/tcp`], (out) => out.trim().split(/\s+/)[0]],
+  ];
+  for (const [cmd, cmdArgs, extract] of attempts) {
+    try {
+      const out = execFileSync(cmd, cmdArgs, {
+        encoding: "utf8",
+        stdio: ["ignore", "pipe", "ignore"],
+      });
+      const pid = Number(extract(out));
+      if (Number.isInteger(pid) && pid > 0) {
+        return pid;
+      }
+    } catch {
+      // Try the next tool.
+    }
+  }
+  return undefined;
+};
+
+const runForegroundHealth = async (suite, cfg) => {
+  const { port } = cfg;
+  const status = await probe(port);
+  if (status.state === "ours" && status.suite === suite) {
+    process.stdout.write(
+      `Dev server (${suite}) is already running at http://localhost:${port}\n`
+    );
+    return 0;
+  }
+  if (status.state === "foreign") {
+    process.stderr.write(
+      `Port ${port} is in use by another process; not the ${suite} dev server.\n`
+    );
+    return 1;
+  }
+  return spawnInherit(cfg.spawn.cmd, cfg.spawn.args);
+};
+
+const runBackgroundHealth = async (suite, cfg) => {
+  const { port } = cfg;
+  const preflight = await probe(port);
+  if (preflight.state === "ours" && preflight.suite === suite) {
+    const pid = pidFromPort(port);
+    process.stdout.write(
+      `Dev server (${suite}) already running at http://localhost:${port}` +
+        `${pid ? ` (pid ${pid})` : ""}\n${hints(suite)}`
+    );
+    return 0;
+  }
+  if (preflight.state === "foreign") {
+    process.stderr.write(
+      `Port ${port} is in use by another process; not the ${suite} dev server.\n`
+    );
+    return 1;
+  }
+
+  const { child, logFile } = spawnDetachedToLog(
+    suite,
+    cfg.spawn.cmd,
+    cfg.spawn.args
+  );
+  return awaitReady({
+    suite,
+    child,
+    logFile,
+    port,
+    isReady: async () => {
+      const status = await probe(port, 1000);
+      return status.state === "ours" && status.suite === suite;
+    },
+  });
+};
+
+const runStatusHealth = async (suite, cfg) => {
+  const { port } = cfg;
+  const status = await probe(port);
+  if (status.state === "ours" && status.suite === suite) {
+    const pid = pidFromPort(port);
+    process.stdout.write(
+      `Dev server (${suite}) running at http://localhost:${port}` +
+        `${pid ? ` (pid ${pid})` : ""}\n`
+    );
+  } else if (status.state === "ours") {
+    process.stdout.write(
+      `Port ${port} is serving a different Home Assistant frontend dev server (suite ${status.suite ?? "unknown"}); not ${suite}.\n`
+    );
+  } else if (status.state === "foreign") {
+    process.stdout.write(
+      `Port ${port} is in use by another process; not the ${suite} dev server.\n`
+    );
+  } else {
+    process.stdout.write(`Dev server (${suite}) not running.\n`);
+  }
+  return 0;
+};
+
+const runStopHealth = async (suite, cfg) => {
+  const { port } = cfg;
+  const status = await probe(port);
+  if (!(status.state === "ours" && status.suite === suite)) {
+    // Idempotent: stopping something that is not running is a success.
+    process.stdout.write(`Dev server (${suite}) not running.\n`);
+    return 0;
+  }
+  const pid = pidFromPort(port);
+  if (!pid) {
+    process.stderr.write(
+      `Dev server (${suite}) is running but its pid could not be found ` +
+        `(no lsof/ss/fuser?). Stop it manually.\n`
+    );
+    return 1;
+  }
+  return terminate(
+    suite,
+    pid,
+    async () => (await probe(port, 800)).state === "free"
+  );
+};
+
+// --- process liveness (pidfile + log-readiness) -----------------------------
+
+const isAlive = (pid) => {
+  if (!Number.isInteger(pid) || pid <= 0) {
+    return false;
+  }
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch (err) {
+    // EPERM means the process exists but is owned by someone else.
+    return err.code === "EPERM";
+  }
+};
+
+const readPidFile = (suite) => {
+  try {
+    const data = JSON.parse(fs.readFileSync(pidFileFor(suite), "utf8"));
+    if (data && Number.isInteger(data.pid)) {
+      return data;
+    }
+  } catch {
+    // Missing or corrupt.
+  }
+  return undefined;
+};
+
+const writePidFile = (suite, data) => {
+  fs.mkdirSync(logDir, { recursive: true });
+  fs.writeFileSync(pidFileFor(suite), JSON.stringify(data));
+};
+
+const removePidFile = (suite) => {
+  try {
+    fs.rmSync(pidFileFor(suite));
+  } catch {
+    // Already gone.
+  }
+};
+
+const logIsReady = (logFile, readyLog) => {
+  try {
+    return readyLog.test(fs.readFileSync(logFile, "utf8"));
+  } catch {
+    return false;
+  }
+};
+
+// app-serve serves on 8124 by default (8123 in a devcontainer), or whatever -p
+// the caller passed. Used only to show a URL; liveness comes from the pidfile.
+const resolveServePort = (passthrough) => {
+  const i = passthrough.indexOf("-p");
+  if (i !== -1) {
+    const port = Number(passthrough[i + 1]);
+    if (Number.isInteger(port) && port > 0) {
+      return port;
+    }
+  }
+  return process.env.DEVCONTAINER ? 8123 : 8124;
+};
+
+const spawnArgs = (cfg, passthrough) => [
+  ...cfg.spawn.args,
+  ...(cfg.acceptsArgs ? passthrough : []),
+];
+
+const runForegroundProcess = async (suite, cfg, passthrough) => {
+  const existing = readPidFile(suite);
+  if (existing && isAlive(existing.pid)) {
+    process.stdout.write(
+      `Dev server (${suite}) already running in the background ` +
+        `(pid ${existing.pid}). Stop it with yarn ${cfg.alias} --stop.\n`
+    );
+    return 0;
+  }
+  if (existing) {
+    removePidFile(suite);
+  }
+  return spawnInherit(cfg.spawn.cmd, spawnArgs(cfg, passthrough));
+};
+
+const runBackgroundProcess = async (suite, cfg, passthrough) => {
+  const existing = readPidFile(suite);
+  if (existing && isAlive(existing.pid)) {
+    process.stdout.write(
+      `Dev server (${suite}) already running${urlSuffix(existing.port)} ` +
+        `(pid ${existing.pid})\n${hints(suite)}`
+    );
+    return 0;
+  }
+  if (existing) {
+    removePidFile(suite);
+  }
+
+  const { child, logFile } = spawnDetachedToLog(
+    suite,
+    cfg.spawn.cmd,
+    spawnArgs(cfg, passthrough)
+  );
+
+  const port = cfg.acceptsArgs ? resolveServePort(passthrough) : cfg.port;
+  writePidFile(suite, { pid: child.pid, port });
+
+  return awaitReady({
+    suite,
+    child,
+    logFile,
+    port,
+    isReady: () => logIsReady(logFile, cfg.readyLog),
+    onExit: () => removePidFile(suite),
+  });
+};
+
+const runStatusProcess = async (suite) => {
+  const existing = readPidFile(suite);
+  if (existing && isAlive(existing.pid)) {
+    process.stdout.write(
+      `Dev server (${suite}) running${urlSuffix(existing.port)} ` +
+        `(pid ${existing.pid})\n`
+    );
+  } else {
+    if (existing) {
+      removePidFile(suite);
+    }
+    process.stdout.write(`Dev server (${suite}) not running.\n`);
+  }
+  return 0;
+};
+
+const runStopProcess = async (suite) => {
+  const existing = readPidFile(suite);
+  if (!existing || !isAlive(existing.pid)) {
+    // Idempotent: stopping something that is not running is a success.
+    if (existing) {
+      removePidFile(suite);
+    }
+    process.stdout.write(`Dev server (${suite}) not running.\n`);
+    return 0;
+  }
+  const { pid } = existing;
+  return terminate(
+    suite,
+    pid,
+    () => !isAlive(pid),
+    () => removePidFile(suite)
+  );
+};
+
+// --- shared -----------------------------------------------------------------
+
+const runLogs = (suite, follow) => {
+  const logFile = logFileFor(suite);
+  if (!fs.existsSync(logFile)) {
+    process.stdout.write(
+      `No log for the ${suite} dev server yet (${logFile}).\n`
+    );
+    return Promise.resolve(0);
+  }
+  if (!follow) {
+    process.stdout.write(fs.readFileSync(logFile, "utf8"));
+    return Promise.resolve(0);
+  }
+  return new Promise((resolve) => {
+    const tail = spawn("tail", ["-f", logFile], { stdio: "inherit" });
+    tail.on("error", () => {
+      // No tail available; fall back to a one-shot dump.
+      process.stdout.write(fs.readFileSync(logFile, "utf8"));
+      resolve(0);
+    });
+    tail.on("exit", (code) => resolve(code ?? 0));
+  });
+};
+
+const main = async () => {
+  const args = parseArgs(process.argv.slice(2));
+  const cfg = SUITES[args.suite];
+  if (!cfg) {
+    usage();
+    return 1;
+  }
+  if (args.passthrough.length && !cfg.acceptsArgs) {
+    process.stderr.write(
+      `Ignoring unexpected arguments: ${args.passthrough.join(" ")}\n`
+    );
+  }
+
+  // A plain dev:<suite> under a coding agent backgrounds itself; explicit modes
+  // are untouched.
+  let { mode } = args;
+  if (
+    mode === "foreground" &&
+    !["0", "false"].includes(process.env.HA_DEV_BACKGROUND)
+  ) {
+    const agent = detectAgent();
+    if (agent) {
+      process.stdout.write(
+        `Detected coding agent (${agent}); starting in the background. ` +
+          `Set HA_DEV_BACKGROUND=0 to force foreground.\n`
+      );
+      mode = "background";
+    }
+  }
+
+  const health = cfg.liveness === "health";
+  switch (mode) {
+    case "background":
+      return health
+        ? runBackgroundHealth(args.suite, cfg)
+        : runBackgroundProcess(args.suite, cfg, args.passthrough);
+    case "status":
+      return health
+        ? runStatusHealth(args.suite, cfg)
+        : runStatusProcess(args.suite);
+    case "stop":
+      return health
+        ? runStopHealth(args.suite, cfg)
+        : runStopProcess(args.suite);
+    case "logs":
+      return runLogs(args.suite, args.follow);
+    default:
+      return health
+        ? runForegroundHealth(args.suite, cfg)
+        : runForegroundProcess(args.suite, cfg, args.passthrough);
+  }
+};
+
+main().then(
+  (code) => {
+    process.exitCode = code;
+  },
+  (err) => {
+    process.stderr.write(`${err?.stack || err}\n`);
+    process.exitCode = 1;
+  }
+);

build-scripts/eslint.config.mjs

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

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

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

build-scripts/gulp/clean.js

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

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

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

build-scripts/gulp/entry-html.js

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

build-scripts/gulp/gallery.js

@@ -1,7 +1,7 @@
 import fs from "fs";
 import { glob } from "glob";
 import gulp from "gulp";
-import yaml from "js-yaml";
+import { load as loadYaml } from "js-yaml";
 import { marked } from "marked";
 import path from "path";
 import paths from "../paths.cjs";
@@ -47,7 +47,7 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
 
       if (descriptionContent.startsWith("---")) {
         const metadataEnd = descriptionContent.indexOf("---", 3);
-        metadata = yaml.load(descriptionContent.substring(3, metadataEnd));
+        metadata = loadYaml(descriptionContent.substring(3, metadataEnd));
         descriptionContent = descriptionContent
           .substring(metadataEnd + 3)
           .trim();
@@ -57,7 +57,9 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
       if (descriptionContent === "") {
         hasDescription = false;
       } else {
-        descriptionContent = marked(descriptionContent).replace(/`/g, "\\`");
+        descriptionContent = marked(descriptionContent)
+          .replace(/\\/g, "\\\\")
+          .replace(/`/g, "\\`");
         fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true });
         fs.writeFileSync(
           path.resolve(galleryBuild, `${pageId}-description.ts`),
@@ -101,12 +103,29 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
 
     if (!toProcess) {
       console.error("Unknown category", group.category);
-      if (!group.pages) {
+      if (!group.subsections && !group.pages) {
         group.pages = [];
       }
       continue;
     }
 
+    if (group.subsections) {
+      // Listed pages keep their per-subsection order.
+      for (const subsection of group.subsections) {
+        for (const page of subsection.pages) {
+          if (!toProcess.delete(page)) {
+            console.error("Found unreferenced demo", page);
+          }
+        }
+      }
+      // Any remaining pages land in a trailing "Other" subsection.
+      const leftover = Array.from(toProcess).sort();
+      if (leftover.length) {
+        group.subsections.push({ header: "Other", pages: leftover });
+      }
+      continue;
+    }
+
     // Any pre-defined groups will not be sorted.
     if (group.pages) {
       for (const page of group.pages) {

build-scripts/gulp/gather-static.js

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

build-scripts/gulp/gen-numeric-device-classes.js

@@ -0,0 +1,40 @@
+import { writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import process from "node:process";
+import gulp from "gulp";
+import paths from "../paths.cjs";
+
+const SOURCE_URL =
+  process.env.SENSOR_METADATA_URL ||
+  "https://raw.githubusercontent.com/home-assistant/core/dev/homeassistant/generated/sensor.json";
+
+const TARGET = join(
+  paths.root_dir,
+  "src",
+  "data",
+  "sensor_numeric_device_classes.ts"
+);
+
+gulp.task("gen-numeric-device-classes", async () => {
+  const response = await fetch(SOURCE_URL);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${SOURCE_URL}: ${response.status}`);
+  }
+
+  const data = await response.json();
+  const classes = [...(data.numeric_device_classes ?? [])].sort();
+  if (!classes.length) {
+    throw new Error(`No numeric_device_classes found in ${SOURCE_URL}`);
+  }
+
+  const content = `// This file is auto-generated from Home Assistant Core's \`SensorDeviceClass\`
+// (all values minus \`NON_NUMERIC_DEVICE_CLASSES\`). Do not edit by hand.
+// Regenerate with \`script/gen_numeric_device_classes\`.
+
+export const SENSOR_NUMERIC_DEVICE_CLASSES: string[] = [
+${classes.map((deviceClass) => `  "${deviceClass}",`).join("\n")}
+];
+`;
+
+  await writeFile(TARGET, content);
+});

build-scripts/gulp/index.mjs

@@ -4,11 +4,13 @@ import "./clean.js";
 import "./compress.js";
 import "./demo.js";
 import "./download-translations.js";
+import "./e2e-test-app.js";
 import "./entry-html.js";
 import "./fetch-nightly-translations.js";
 import "./gallery.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
+import "./gen-numeric-device-classes.js";
 import "./landing-page.js";
 import "./locale-data.js";
 import "./rspack.js";

build-scripts/gulp/licenses.js

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

build-scripts/gulp/rspack.js

@@ -14,6 +14,7 @@ import {
   createDemoConfig,
   createGalleryConfig,
   createLandingPageConfig,
+  createE2eTestAppConfig,
 } from "../rspack.cjs";
 
 const bothBuilds = (createConfigFunc, params) => [
@@ -33,7 +34,10 @@ const isWsl =
  *   compiler: import("@rspack/core").Compiler,
  *   contentBase: string,
  *   port: number,
- *   listenHost?: string
+ *   listenHost?: string,
+ *   open?: boolean,
+ *   logUrlAfterFirstBuild?: boolean,
+ *   suite?: string,
  * }}
  */
 const runDevServer = async ({
@@ -41,16 +45,32 @@ const runDevServer = async ({
   contentBase,
   port,
   listenHost = undefined,
+  open = true,
+  logUrlAfterFirstBuild = false,
   proxy = undefined,
+  suite = undefined,
 }) => {
   if (listenHost === undefined) {
     // For dev container, we need to listen on all hosts
     listenHost = env.isDevContainer() ? "0.0.0.0" : "localhost";
   }
+  const url = `http://localhost:${port}`;
+  let loggedUrl = false;
+  if (logUrlAfterFirstBuild) {
+    compiler.hooks.done.tap("log-dev-server-url", () => {
+      if (loggedUrl) {
+        return;
+      }
+      loggedUrl = true;
+      setTimeout(() => {
+        log("[rspack-dev-server]", `Project is running at ${url}`);
+      }, 0);
+    });
+  }
   const server = new RspackDevServer(
     {
       hot: false,
-      open: true,
+      open,
       host: listenHost,
       port,
       static: {
@@ -63,6 +83,19 @@ const runDevServer = async ({
             !error?.message?.includes("ResizeObserver loop"),
         },
       },
+      setupMiddlewares: (middlewares) => {
+        // Status endpoint so the dev-server manager can confirm this is our
+        // server for the expected suite. Unshifted to beat the static handler.
+        middlewares.unshift({
+          name: "ha-dev-status",
+          path: "/__ha_dev_status",
+          middleware: (_req, res) => {
+            res.setHeader("Content-Type", "application/json");
+            res.end(JSON.stringify({ server: "ha-frontend-dev", suite, port }));
+          },
+        });
+        return middlewares;
+      },
       proxy,
     },
     compiler
@@ -70,7 +103,9 @@ const runDevServer = async ({
 
   await server.start();
   // Server listening
-  log("[rspack-dev-server]", `Project is running at http://localhost:${port}`);
+  if (!logUrlAfterFirstBuild) {
+    log("[rspack-dev-server]", `Project is running at ${url}`);
+  }
 };
 
 const doneHandler = (done) => (err, stats) => {
@@ -132,6 +167,8 @@ gulp.task("rspack-dev-server-demo", () =>
     ),
     contentBase: paths.demo_output_root,
     port: 8090,
+    open: false,
+    suite: "demo",
   })
 );
 
@@ -153,6 +190,7 @@ gulp.task("rspack-dev-server-cast", () =>
     port: 8080,
     // Accessible from the network, because that's how Cast hits it.
     listenHost: "0.0.0.0",
+    suite: "cast",
   })
 );
 
@@ -172,6 +210,9 @@ gulp.task("rspack-dev-server-gallery", () =>
     contentBase: paths.gallery_output_root,
     port: 8100,
     listenHost: "0.0.0.0",
+    open: false,
+    logUrlAfterFirstBuild: true,
+    suite: "gallery",
   })
 );
 
@@ -210,3 +251,24 @@ gulp.task("rspack-prod-landing-page", () =>
     })
   )
 );
+
+gulp.task("rspack-dev-server-e2e-test-app", () =>
+  runDevServer({
+    compiler: rspack(
+      createE2eTestAppConfig({ isProdBuild: false, latestBuild: true })
+    ),
+    contentBase: paths.e2eTestApp_output_root,
+    port: 8095,
+    open: false,
+    suite: "e2e-app",
+  })
+);
+
+gulp.task("rspack-prod-e2e-test-app", () =>
+  prodBuild(
+    bothBuilds(createE2eTestAppConfig, {
+      isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+    })
+  )
+);

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

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

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

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

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

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

build-scripts/paths.cjs

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

build-scripts/rspack.cjs

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

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

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

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

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

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

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

demo/script/develop_demo

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

demo/src/cloud/cloud-demo-controls.ts

@@ -0,0 +1,304 @@
+import { mdiClose, mdiFlaskOutline } from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, state } from "lit/decorators";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import { mainWindow } from "../../../src/common/dom/get_main_window";
+import { navigate } from "../../../src/common/navigate";
+import "../../../src/components/ha-button";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-icon-button";
+import "../../../src/components/ha-svg-icon";
+import "../../../src/components/ha-switch";
+import type { HaSwitch } from "../../../src/components/ha-switch";
+import type { CloudDemoScenario } from "../stubs/cloud-demo-state";
+import {
+  getCloudDemoScenario,
+  setCloudDemoScenario,
+  subscribeCloudDemoScenario,
+} from "../stubs/cloud-demo-state";
+
+// Walk the DOM, descending into shadow roots, to find the first matching
+// element. Used to reach <ha-panel-config> (which owns the cloud status) so we
+// can ask it to re-fetch after a scenario change.
+const deepQuery = (
+  selector: string,
+  root: Document | ShadowRoot = document
+): Element | null => {
+  const direct = root.querySelector(selector);
+  if (direct) {
+    return direct;
+  }
+  const elements = root.querySelectorAll("*");
+  for (const element of elements) {
+    const shadow = element.shadowRoot;
+    if (shadow) {
+      const found = deepQuery(selector, shadow);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+
+/**
+ * Demo-only floating panel that flips the mocked Home Assistant Cloud state so
+ * reviewers can preview every UI state of the cloud account page. It writes to
+ * the shared {@link CloudDemoScenario} (which the cloud/backup mocks read) and
+ * then nudges the page to re-read it. Lives entirely under demo/.
+ */
+@customElement("cloud-demo-controls")
+export class CloudDemoControls extends LitElement {
+  @state() private _open = true;
+
+  @state() private _visible = false;
+
+  @state() private _scenario: CloudDemoScenario = getCloudDemoScenario();
+
+  private _unsub?: () => void;
+
+  // The demo uses hash-based routing (navigate() sets location.hash), so the
+  // active route lives in the hash, not the pathname.
+  private get _currentPath(): string {
+    const hash = mainWindow.location.hash;
+    return hash.startsWith("#/") ? hash.slice(1) : mainWindow.location.pathname;
+  }
+
+  private _locationChanged = () => {
+    this._visible = this._currentPath.startsWith("/config/cloud");
+  };
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this._locationChanged();
+    mainWindow.addEventListener("location-changed", this._locationChanged);
+    mainWindow.addEventListener("popstate", this._locationChanged);
+    mainWindow.addEventListener("hashchange", this._locationChanged);
+    this._unsub = subscribeCloudDemoScenario((scenario) => {
+      this._scenario = { ...scenario };
+    });
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    mainWindow.removeEventListener("location-changed", this._locationChanged);
+    mainWindow.removeEventListener("popstate", this._locationChanged);
+    mainWindow.removeEventListener("hashchange", this._locationChanged);
+    this._unsub?.();
+  }
+
+  protected render() {
+    if (!this._visible) {
+      return nothing;
+    }
+    if (!this._open) {
+      return html`
+        <ha-icon-button
+          class="fab"
+          label="Cloud demo controls"
+          .path=${mdiFlaskOutline}
+          @click=${this._toggleOpen}
+        ></ha-icon-button>
+      `;
+    }
+    return html`
+      <ha-card>
+        <div class="header">
+          <ha-svg-icon .path=${mdiFlaskOutline}></ha-svg-icon>
+          <span class="title">Cloud demo controls</span>
+          <ha-icon-button
+            label="Close"
+            .path=${mdiClose}
+            @click=${this._toggleOpen}
+          ></ha-icon-button>
+        </div>
+        <p class="note">
+          Demo only. Flips the mocked cloud state shown on this page.
+        </p>
+        <div class="controls">
+          ${this._segment("Subscription", "account", [
+            ["active", "Active"],
+            ["trialing", "Trialing"],
+            ["canceled", "Canceled"],
+            ["expired", "Expired"],
+            ["unknown", "Unknown"],
+          ])}
+          ${this._toggle("Onboarded", "onboarded")}
+          ${this._toggle("Onboarding postponed", "postponed")}
+          ${this._toggle("Remote access", "remote")}
+          ${this._segment("Remote status", "remoteStatus", [
+            ["ready", "Ready"],
+            ["generating", "Preparing"],
+            ["loading", "Loading"],
+            ["loaded", "Loaded"],
+            ["error", "Error"],
+          ])}
+          ${this._segment("Backups", "backup", [
+            ["fresh", "Recent"],
+            ["stale", "Old"],
+            ["failed", "Failed"],
+            ["local", "Local only"],
+            ["none", "None"],
+          ])}
+          ${this._toggle("Alexa linked", "alexa")}
+          ${this._toggle("Google linked", "google")}
+          ${this._toggle("Cameras (WebRTC)", "webrtc")}
+          ${this._toggle("Has webhooks", "webhooks")}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _segment(
+    label: string,
+    field: keyof CloudDemoScenario,
+    options: [string, string][]
+  ) {
+    return html`
+      <div class="row">
+        <span>${label}</span>
+        <div class="segment">
+          ${options.map(
+            ([value, text]) => html`
+              <ha-button
+                size="s"
+                appearance=${
+                  this._scenario[field] === value ? "filled" : "plain"
+                }
+                data-field=${field}
+                data-value=${value}
+                @click=${this._segmentClick}
+              >
+                ${text}
+              </ha-button>
+            `
+          )}
+        </div>
+      </div>
+    `;
+  }
+
+  private _toggle(label: string, field: keyof CloudDemoScenario) {
+    return html`
+      <div class="row">
+        <span>${label}</span>
+        <ha-switch
+          .checked=${this._scenario[field] as boolean}
+          data-field=${field}
+          @change=${this._toggleChange}
+        ></ha-switch>
+      </div>
+    `;
+  }
+
+  private _toggleOpen() {
+    this._open = !this._open;
+  }
+
+  private _segmentClick(ev: Event) {
+    const target = ev.currentTarget as HTMLElement;
+    this._set(
+      target.dataset.field as keyof CloudDemoScenario,
+      target.dataset.value!
+    );
+  }
+
+  private _toggleChange(ev: Event) {
+    const target = ev.target as HaSwitch;
+    this._set(target.dataset.field as keyof CloudDemoScenario, target.checked);
+  }
+
+  private _set(field: keyof CloudDemoScenario, value: string | boolean) {
+    setCloudDemoScenario({ [field]: value } as Partial<CloudDemoScenario>);
+    this._refresh();
+  }
+
+  private _refresh() {
+    // Refresh the shared cloud status so login-state changes (signed out) and
+    // status-derived fields update.
+    const panel = deepQuery("ha-panel-config");
+    if (panel) {
+      fireEvent(panel as HTMLElement, "ha-refresh-cloud-status");
+    }
+    // cloud-account fetches its subscription/backup/webhook data once on mount
+    // and is not cached by the router, so bounce through a sibling cloud route
+    // to force a clean remount that re-reads the updated mocks.
+    const path = this._currentPath;
+    if (path.startsWith("/config/cloud") && path !== "/config/cloud/login") {
+      const sibling =
+        path === "/config/cloud/remote"
+          ? "/config/cloud/account"
+          : "/config/cloud/remote";
+      navigate(sibling, { replace: true });
+      window.setTimeout(() => navigate(path, { replace: true }), 0);
+    }
+  }
+
+  static styles = css`
+    :host {
+      position: fixed;
+      right: 16px;
+      bottom: 16px;
+      z-index: 9999;
+    }
+    .fab {
+      --mdc-icon-button-size: 48px;
+      --mdc-icon-size: 24px;
+      background-color: var(--primary-color);
+      color: var(--text-primary-color, #fff);
+      border-radius: 50%;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+    }
+    ha-card {
+      display: block;
+      width: 320px;
+      max-height: 80vh;
+      overflow: auto;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+    }
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 8px 8px 16px;
+      border-bottom: 1px solid var(--divider-color);
+    }
+    .header .title {
+      flex: 1;
+      font-weight: var(--ha-font-weight-medium, 500);
+    }
+    .header ha-svg-icon {
+      color: var(--secondary-text-color);
+    }
+    .note {
+      margin: 8px 16px;
+      color: var(--secondary-text-color);
+      font-size: var(--ha-font-size-s, 0.875rem);
+    }
+    .controls {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 0 16px 16px;
+    }
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      min-height: 36px;
+    }
+    .segment {
+      display: flex;
+      gap: 4px;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "cloud-demo-controls": CloudDemoControls;
+  }
+}

demo/src/configs/types.ts

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

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

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

demo/src/ha-demo.ts

@@ -8,7 +8,7 @@ import type { HomeAssistant } from "../../src/types";
 import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
-import { mockConfigEntries } from "./stubs/config_entries";
+import { demoDevices } from "./stubs/devices";
 import { mockDeviceRegistry } from "./stubs/device_registry";
 import { mockEnergy } from "./stubs/energy";
 import { energyEntities } from "./stubs/entities";
@@ -16,6 +16,7 @@ import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
 import { mockFloorRegistry } from "./stubs/floor_registry";
 import { mockFrontend } from "./stubs/frontend";
+import { mockIntegration } from "./stubs/integration";
 import { mockLabelRegistry } from "./stubs/label_registry";
 import { mockIcons } from "./stubs/icons";
 import { mockHistory } from "./stubs/history";
@@ -28,6 +29,34 @@ import { mockSystemLog } from "./stubs/system_log";
 import { mockTemplate } from "./stubs/template";
 import { mockTodo } from "./stubs/todo";
 import { mockTranslations } from "./stubs/translations";
+import "./cloud/cloud-demo-controls";
+
+// WS command / REST path prefixes whose mocks live in the lazily imported
+// config-panel chunk (see ./stubs/config-panel). Must stay in sync with it.
+const CONFIG_PANEL_COMMANDS = [
+  "cloud/",
+  "webhook/list",
+  "validate_config",
+  "config_entries/",
+  "device_automation/",
+  "entity/source",
+  "blueprint/",
+  "homeassistant/expose",
+  "zone/list",
+  "person/list",
+  "network/url",
+  "application_credentials/",
+  "system_health/",
+  "backup/",
+  "automation/config",
+  "script/config",
+  "config/automation/config",
+  "config/script/config",
+  "config/scene/config",
+  "search/related",
+  "tag/list",
+  "assist_pipeline/",
+];
 
 @customElement("ha-demo")
 export class HaDemo extends HomeAssistantAppEl {
@@ -39,7 +68,25 @@ export class HaDemo extends HomeAssistantAppEl {
         this._updateHass(hassUpdate),
     };
 
-    const hass = provideHass(this, initial, true);
+    // `false` for contexts: HomeAssistantAppEl already provides them via
+    // `contextMixin`, so let provideHass skip them to avoid duplicate providers.
+    const hass = provideHass(this, initial, true, false);
+
+    // The cloud account page only fetches backup config and the webhook count
+    // when those integrations are loaded. Enable them here (demo only) so the
+    // mocked backup/config/info and webhook/list are queried.
+    hass.updateHass({
+      config: {
+        ...hass.config,
+        components: [...(hass.config?.components ?? []), "backup", "webhook"],
+      },
+    });
+
+    // Demo-only floating panel to flip the mocked cloud state. Mounted once at
+    // the document level; it shows itself only on the cloud panel.
+    if (!document.querySelector("cloud-demo-controls")) {
+      document.body.appendChild(document.createElement("cloud-demo-controls"));
+    }
     const localizePromise =
       // @ts-ignore
       this._loadFragmentTranslations(hass.language, "page-demo").then(
@@ -61,9 +108,18 @@ export class HaDemo extends HomeAssistantAppEl {
     mockIcons(hass);
     mockEnergy(hass);
     mockPersistentNotification(hass);
-    mockConfigEntries(hass);
+    // Consumed app-wide via the lazy manifests context, so register eagerly.
+    mockIntegration(hass);
+    // Config panel mocks are code-split: the loader runs (and the chunk is
+    // dynamically imported) the first time one of these config-only WS/REST
+    // commands is requested, i.e. when the config panel is opened.
+    hass.mockLazyLoad(
+      (command) => CONFIG_PANEL_COMMANDS.some((p) => command.startsWith(p)),
+      () =>
+        import("./stubs/config-panel").then((mod) => mod.mockConfigPanel(hass))
+    );
     mockAreaRegistry(hass);
-    mockDeviceRegistry(hass);
+    mockDeviceRegistry(hass, demoDevices);
     mockFloorRegistry(hass);
     mockLabelRegistry(hass);
     mockEntityRegistry(hass, [

demo/src/stubs/application_credentials.ts

@@ -0,0 +1,19 @@
+import type { ApplicationCredential } from "../../../src/data/application_credential";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const credentials: ApplicationCredential[] = [
+  {
+    id: "mock-credential",
+    domain: "spotify",
+    client_id: "demo-client-id",
+    client_secret: "demo-client-secret",
+    name: "Spotify",
+  },
+];
+
+export const mockApplicationCredentials = (hass: MockHomeAssistant) => {
+  hass.mockWS("application_credentials/list", () => credentials);
+  hass.mockWS("application_credentials/config", () => ({
+    integrations: { spotify: { description_placeholders: {} } },
+  }));
+};

demo/src/stubs/assist.ts

@@ -0,0 +1,53 @@
+import type { AssistPipeline } from "../../../src/data/assist_pipeline";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const pipelines: AssistPipeline[] = [
+  {
+    id: "01home_assistant_cloud",
+    name: "Home Assistant Cloud",
+    language: "en",
+    conversation_engine: "conversation.home_assistant",
+    conversation_language: "en",
+    stt_engine: "cloud",
+    stt_language: "en-US",
+    tts_engine: "cloud",
+    tts_language: "en-US",
+    tts_voice: "JennyNeural",
+    wake_word_entity: null,
+    wake_word_id: null,
+  },
+  {
+    id: "01local",
+    name: "Local",
+    language: "en",
+    conversation_engine: "conversation.home_assistant",
+    conversation_language: "en",
+    stt_engine: "stt.faster_whisper",
+    stt_language: "en",
+    tts_engine: "tts.piper",
+    tts_language: "en",
+    tts_voice: null,
+    wake_word_entity: null,
+    wake_word_id: null,
+  },
+];
+
+export const mockAssist = (hass: MockHomeAssistant) => {
+  // Stub for assist pipeline list — returns a cloud and a local pipeline so the
+  // voice assistants config panel shows configured assistants.
+  hass.mockWS("assist_pipeline/pipeline/list", () => ({
+    pipelines,
+    preferred_pipeline: "01home_assistant_cloud",
+  }));
+
+  // Stub for assist pipeline run — immediately sends run-end event so
+  // the UI does not hang waiting for a response.
+  hass.mockWS("assist_pipeline/run", (_msg, _hass, onChange) => {
+    if (onChange) {
+      onChange({
+        type: "run-end",
+      });
+    }
+    return null;
+  });
+};

demo/src/stubs/auth.ts

@@ -3,4 +3,7 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 export const mockAuth = (hass: MockHomeAssistant) => {
   hass.mockWS("config/auth/list", () => []);
   hass.mockWS("auth/refresh_tokens", () => []);
+  hass.mockWS("auth/sign_path", (msg: { path: string }) => ({
+    path: msg.path,
+  }));
 };

demo/src/stubs/automation.ts

@@ -0,0 +1,69 @@
+import type { AutomationConfig } from "../../../src/data/automation";
+import type { ScriptConfig } from "../../../src/data/script";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const demoAutomationConfig = (entityId: string): AutomationConfig => ({
+  id: entityId.split(".")[1],
+  alias: "Demo automation",
+  description: "An example automation shown in the demo.",
+  triggers: [
+    { trigger: "state", entity_id: "binary_sensor.basement_floor_wet" },
+  ],
+  conditions: [],
+  actions: [
+    {
+      action: "light.turn_on",
+      target: { entity_id: "light.bed_light" },
+    },
+  ],
+  mode: "single",
+});
+
+const demoScriptConfig = (): ScriptConfig => ({
+  alias: "Demo script",
+  description: "An example script shown in the demo.",
+  sequence: [
+    {
+      action: "light.turn_on",
+      target: { entity_id: "light.bed_light" },
+    },
+  ],
+  mode: "single",
+});
+
+export const mockAutomation = (hass: MockHomeAssistant) => {
+  hass.mockWS("automation/config", (msg: { entity_id: string }) => ({
+    config: demoAutomationConfig(msg.entity_id),
+  }));
+  hass.mockWS("script/config", () => ({ config: demoScriptConfig() }));
+
+  hass.mockAPI(/config\/automation\/config\/.+/, () =>
+    demoAutomationConfig("automation.demo")
+  );
+  hass.mockAPI(/config\/script\/config\/.+/, () => demoScriptConfig());
+
+  // Trigger/condition type pickers subscribe for integration-provided
+  // platforms. The demo only uses the built-in ones, so emit empty records.
+  hass.mockWS(
+    "trigger_platforms/subscribe",
+    (
+      _msg,
+      _hass,
+      onChange?: (descriptions: Record<string, unknown>) => void
+    ) => {
+      onChange?.({});
+      return () => undefined;
+    }
+  );
+  hass.mockWS(
+    "condition_platforms/subscribe",
+    (
+      _msg,
+      _hass,
+      onChange?: (descriptions: Record<string, unknown>) => void
+    ) => {
+      onChange?.({});
+      return () => undefined;
+    }
+  );
+};

demo/src/stubs/backup.ts

@@ -0,0 +1,197 @@
+import type {
+  BackupAgentsInfo,
+  BackupConfig,
+  BackupContent,
+  BackupInfo,
+} from "../../../src/data/backup";
+import { BackupScheduleRecurrence } from "../../../src/data/backup";
+import type { ManagerStateEvent } from "../../../src/data/backup_manager";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import type { DemoCloudBackup } from "./cloud-demo-state";
+import {
+  getCloudDemoScenario,
+  setCloudDemoScenario,
+  subscribeCloudDemoScenario,
+} from "./cloud-demo-state";
+
+const CLOUD_AGENT = "cloud.cloud";
+
+const backupInfo: BackupInfo = {
+  backups: [],
+  agent_errors: {},
+  last_attempted_automatic_backup: null,
+  last_completed_automatic_backup: null,
+  last_action_event: { manager_state: "idle" },
+  next_automatic_backup: null,
+  next_automatic_backup_additional: false,
+  state: "idle",
+};
+
+const backupConfig: BackupConfig = {
+  automatic_backups_configured: true,
+  last_attempted_automatic_backup: null,
+  last_completed_automatic_backup: null,
+  next_automatic_backup: null,
+  next_automatic_backup_additional: false,
+  create_backup: {
+    agent_ids: ["backup.local", CLOUD_AGENT],
+    include_addons: [],
+    include_all_addons: true,
+    include_database: true,
+    include_folders: [],
+    name: null,
+    password: null,
+  },
+  retention: { copies: 3, days: null },
+  schedule: {
+    recurrence: BackupScheduleRecurrence.DAILY,
+    time: null,
+    days: [],
+  },
+  agents: {
+    "backup.local": { protected: true, retention: null },
+    "cloud.cloud": { protected: true, retention: null },
+  },
+};
+
+const agentsInfo: BackupAgentsInfo = {
+  agents: [
+    { agent_id: "backup.local", name: "This device" },
+    { agent_id: "cloud.cloud", name: "Home Assistant Cloud" },
+  ],
+};
+
+// Map the demo "Backups" scenario onto the mutable backup config/info, so the
+// cloud overview status line and the backup sub-page reflect the chosen state.
+const applyScenario = () => {
+  const kind = getCloudDemoScenario().backup;
+  const now = Date.now();
+  const recent = new Date(now - 12 * 3600 * 1000).toISOString();
+  const old = new Date(now - 5 * 86400000).toISOString();
+  const future = new Date(now + 86400000).toISOString();
+  // Comfortably past BACKUP_OVERDUE_MARGIN_HOURS (3h) so the "stale" scenario
+  // actually reads as overdue rather than slipping under the margin.
+  const overdue = new Date(now - 6 * 3600 * 1000).toISOString();
+
+  // The cloud agent is a backup target for the cloud-backed states only. For
+  // "local" a backup exists but is stored locally (no cloud copy), and for
+  // "none" there are no automatic backups at all.
+  const cloudEnabled =
+    kind === "fresh" || kind === "stale" || kind === "failed";
+  backupConfig.create_backup.agent_ids = cloudEnabled
+    ? ["backup.local", CLOUD_AGENT]
+    : ["backup.local"];
+
+  switch (kind) {
+    case "fresh":
+      backupConfig.automatic_backups_configured = true;
+      backupConfig.last_completed_automatic_backup = recent;
+      backupConfig.last_attempted_automatic_backup = recent;
+      backupConfig.next_automatic_backup = future;
+      break;
+    case "local":
+      // Automatic backups run, but only to the local agent.
+      backupConfig.automatic_backups_configured = true;
+      backupConfig.last_completed_automatic_backup = recent;
+      backupConfig.last_attempted_automatic_backup = recent;
+      backupConfig.next_automatic_backup = future;
+      break;
+    case "stale":
+      backupConfig.automatic_backups_configured = true;
+      backupConfig.last_completed_automatic_backup = old;
+      backupConfig.last_attempted_automatic_backup = old;
+      // Next scheduled backup is in the past, so it reads as overdue.
+      backupConfig.next_automatic_backup = overdue;
+      break;
+    case "failed":
+      backupConfig.automatic_backups_configured = true;
+      backupConfig.last_completed_automatic_backup = old;
+      // Most recent attempt is newer than the last success, so it failed.
+      backupConfig.last_attempted_automatic_backup = recent;
+      backupConfig.next_automatic_backup = future;
+      break;
+    case "none":
+      backupConfig.automatic_backups_configured = false;
+      backupConfig.last_completed_automatic_backup = null;
+      backupConfig.last_attempted_automatic_backup = null;
+      backupConfig.next_automatic_backup = null;
+      break;
+  }
+
+  backupInfo.last_completed_automatic_backup =
+    backupConfig.last_completed_automatic_backup;
+  backupInfo.last_attempted_automatic_backup =
+    backupConfig.last_attempted_automatic_backup;
+  backupInfo.next_automatic_backup = backupConfig.next_automatic_backup;
+  backupInfo.backups =
+    cloudEnabled && backupConfig.last_completed_automatic_backup
+      ? [
+          {
+            backup_id: "demo-backup-1",
+            name: "Automatic backup DEMO",
+            date: backupConfig.last_completed_automatic_backup,
+            with_automatic_settings: true,
+            agents: {
+              "backup.local": { size: 1024 * 1024 * 512, protected: true },
+              "cloud.cloud": { size: 1024 * 1024 * 512, protected: true },
+            },
+          } as BackupContent,
+        ]
+      : [];
+};
+
+applyScenario();
+subscribeCloudDemoScenario(applyScenario);
+
+export const mockBackup = (hass: MockHomeAssistant) => {
+  // Fresh objects each fetch so re-reading after a mutation actually re-renders
+  // (Lit change detection is identity-based; the real WS API returns new
+  // objects too).
+  hass.mockWS("backup/info", () => ({ ...backupInfo }));
+  hass.mockWS("backup/config/info", () => ({ config: { ...backupConfig } }));
+  hass.mockWS("backup/agents/info", () => agentsInfo);
+  hass.mockWS("backup/config/update", (msg) => {
+    const { type, ...update } = msg;
+    if (update.create_backup) {
+      backupConfig.create_backup = {
+        ...backupConfig.create_backup,
+        ...update.create_backup,
+      };
+    }
+    if (update.automatic_backups_configured !== undefined) {
+      backupConfig.automatic_backups_configured =
+        update.automatic_backups_configured;
+    }
+    if (update.schedule) {
+      backupConfig.schedule = { ...backupConfig.schedule, ...update.schedule };
+    }
+    if (update.retention) {
+      backupConfig.retention = update.retention;
+    }
+    if (update.agents) {
+      backupConfig.agents = { ...backupConfig.agents, ...update.agents };
+    }
+    // Reflect the UI-driven backup change into the demo scenario so the demo
+    // controls panel stays in sync with the mocked state.
+    const cloudNow = backupConfig.create_backup.agent_ids.includes(CLOUD_AGENT);
+    const current = getCloudDemoScenario().backup;
+    const next: DemoCloudBackup = !backupConfig.automatic_backups_configured
+      ? "none"
+      : cloudNow
+        ? current === "fresh" || current === "stale" || current === "failed"
+          ? current
+          : "fresh"
+        : "local";
+    if (next !== current) {
+      setCloudDemoScenario({ backup: next });
+    }
+    return null;
+  });
+  hass.mockWS(
+    "backup/subscribe_events",
+    (_msg, _hass, onChange?: (event: ManagerStateEvent) => void) => {
+      onChange?.({ manager_state: "idle" });
+      return () => undefined;
+    }
+  );
+};

demo/src/stubs/blueprint.ts

@@ -0,0 +1,45 @@
+import type { BlueprintDomain, Blueprints } from "../../../src/data/blueprint";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const automationBlueprints: Blueprints = {
+  "homeassistant/motion_light.yaml": {
+    metadata: {
+      domain: "automation",
+      name: "Motion-activated Light",
+      description: "Turn on a light when motion is detected.",
+      author: "Home Assistant",
+      source_url:
+        "https://github.com/home-assistant/core/blob/dev/homeassistant/components/automation/blueprints/motion_light.yaml",
+      input: {
+        motion_entity: { name: "Motion Sensor" },
+        light_target: { name: "Light" },
+      },
+    },
+  },
+  "homeassistant/notify_leaving_zone.yaml": {
+    metadata: {
+      domain: "automation",
+      name: "Send notification when leaving a zone",
+      description: "Get a notification when a person leaves a zone.",
+      author: "Home Assistant",
+    },
+  },
+};
+
+const scriptBlueprints: Blueprints = {
+  "homeassistant/confirmable_notification.yaml": {
+    metadata: {
+      domain: "script",
+      name: "Confirmable Notification",
+      description:
+        "A script that sends an actionable notification with a confirmation.",
+      author: "Home Assistant",
+    },
+  },
+};
+
+export const mockBlueprint = (hass: MockHomeAssistant) => {
+  hass.mockWS("blueprint/list", (msg: { domain: BlueprintDomain }) =>
+    msg.domain === "script" ? scriptBlueprints : automationBlueprints
+  );
+};

demo/src/stubs/cloud-demo-state.ts

@@ -0,0 +1,89 @@
+// Demo-only switchable Home Assistant Cloud scenario.
+//
+// The redesigned cloud account page (src/panels/config/cloud/account) renders
+// purely from real WS data. To let reviewers preview every UI state without a
+// real cloud account, this module holds a mutable "scenario" that the cloud and
+// backup mocks read from, plus the floating <cloud-demo-controls> panel writes
+// to. It is persisted to localStorage so the choice survives the data the page
+// fetches once per visit (subscription, backup config, webhooks).
+//
+// This lives entirely under demo/ — no production code imports it.
+
+import type { RemoteCertificateStatus } from "../../../src/data/cloud";
+
+// The five PaymentSubscriptionState values.
+export type DemoCloudAccount =
+  "active" | "trialing" | "canceled" | "expired" | "unknown";
+
+// "local": automatic backups are configured, but not to the cloud agent
+// (a backup exists, just no cloud copy). "none": no automatic backups at all.
+export type DemoCloudBackup = "fresh" | "stale" | "failed" | "local" | "none";
+
+export interface CloudDemoScenario {
+  account: DemoCloudAccount;
+  onboarded: boolean;
+  // Onboarding postponed server-side (maps to onboarding_postponed); hides
+  // the onboarding UI without marking it completed.
+  postponed: boolean;
+  remote: boolean;
+  remoteStatus: RemoteCertificateStatus;
+  backup: DemoCloudBackup;
+  alexa: boolean;
+  google: boolean;
+  webrtc: boolean;
+  webhooks: boolean;
+}
+
+export const DEFAULT_CLOUD_DEMO_SCENARIO: CloudDemoScenario = {
+  account: "active",
+  onboarded: true,
+  postponed: false,
+  remote: true,
+  remoteStatus: "ready",
+  backup: "fresh",
+  alexa: true,
+  google: true,
+  webrtc: true,
+  webhooks: true,
+};
+
+const STORAGE_KEY = "cloudDemoScenario";
+
+const readScenario = (): CloudDemoScenario => {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      return { ...DEFAULT_CLOUD_DEMO_SCENARIO, ...JSON.parse(raw) };
+    }
+  } catch (_err) {
+    // Ignore malformed or unavailable storage and fall back to the default.
+  }
+  return { ...DEFAULT_CLOUD_DEMO_SCENARIO };
+};
+
+let scenario: CloudDemoScenario = readScenario();
+
+const listeners = new Set<(scenario: CloudDemoScenario) => void>();
+
+export const getCloudDemoScenario = (): CloudDemoScenario => scenario;
+
+export const subscribeCloudDemoScenario = (
+  listener: (scenario: CloudDemoScenario) => void
+): (() => void) => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+
+export const setCloudDemoScenario = (
+  partial: Partial<CloudDemoScenario>
+): void => {
+  scenario = { ...scenario, ...partial };
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(scenario));
+  } catch (_err) {
+    // Ignore storage failures (e.g. private mode); state still applies in-memory.
+  }
+  listeners.forEach((listener) => listener(scenario));
+};

demo/src/stubs/cloud.ts

@@ -0,0 +1,273 @@
+import type {
+  CloudStatusLoggedIn,
+  SubscriptionInfo,
+} from "../../../src/data/cloud";
+import { ONBOARDING_ITEMS } from "../../../src/data/cloud";
+import type { CloudTTSInfo } from "../../../src/data/cloud/tts";
+import type { Webhook } from "../../../src/data/webhook";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import {
+  getCloudDemoScenario,
+  setCloudDemoScenario,
+  subscribeCloudDemoScenario,
+} from "./cloud-demo-state";
+
+const emptyFilter = () => ({
+  include_domains: [],
+  include_entities: [],
+  exclude_domains: [],
+  exclude_entities: [],
+});
+
+const demoWebhooks: Webhook[] = [
+  {
+    webhook_id: "demo_front_door",
+    domain: "automation",
+    name: "Front door motion",
+    local_only: false,
+  },
+  {
+    webhook_id: "demo_companion_app",
+    domain: "mobile_app",
+    name: "Companion app",
+    local_only: false,
+  },
+];
+
+// A single mutable status object so that preference changes made in the demo
+// (both via the real UI and the demo scenario controls) are reflected back.
+const cloudStatus: CloudStatusLoggedIn = {
+  logged_in: true,
+  cloud: "connected",
+  cloud_last_disconnect_reason: null,
+  email: "demo@home-assistant.io",
+  google_registered: true,
+  google_entities: emptyFilter(),
+  google_domains: ["light", "switch", "climate", "cover"],
+  alexa_registered: true,
+  alexa_entities: emptyFilter(),
+  remote_domain: "demo-instance.ui.nabu.casa",
+  remote_connected: true,
+  remote_certificate: {
+    common_name: "demo-instance.ui.nabu.casa",
+    expire_date: "2099-01-01T00:00:00+00:00",
+    fingerprint: "demodemodemodemodemodemodemodemodemodemodemodemodemo",
+    alternative_names: ["demo-instance.ui.nabu.casa"],
+  },
+  remote_certificate_status: "ready",
+  http_use_ssl: false,
+  active_subscription: true,
+  onboarding_postponed: false,
+  onboarding_completed: true,
+  prefs: {
+    google_enabled: true,
+    alexa_enabled: true,
+    remote_enabled: true,
+    remote_allow_remote_enable: true,
+    strict_connection: "disabled",
+    google_secure_devices_pin: undefined,
+    cloudhooks: {},
+    alexa_report_state: true,
+    google_report_state: true,
+    tts_default_voice: ["en-US", "JennyNeural"],
+    cloud_ice_servers_enabled: true,
+    onboarded_items: [...ONBOARDING_ITEMS],
+    onboarding_postponed_until: null,
+  },
+};
+
+const subscription: SubscriptionInfo = {
+  human_description: "Demo subscription, renews automatically",
+  provider: "Nabu Casa, Inc.",
+  plan_renewal_date: 4102444800,
+  subscription: { status: "active" },
+};
+
+const ttsInfo: CloudTTSInfo = {
+  languages: [
+    ["en-US", "JennyNeural", "Jenny"],
+    ["en-US", "GuyNeural", "Guy"],
+    ["en-GB", "LibbyNeural", "Libby"],
+    ["nl-NL", "ColetteNeural", "Colette"],
+    ["de-DE", "KatjaNeural", "Katja"],
+  ],
+};
+
+// Map the high-level demo scenario onto the mutable cloud status / subscription.
+const applyScenario = () => {
+  const scenario = getCloudDemoScenario();
+
+  switch (scenario.account) {
+    case "trialing":
+      cloudStatus.active_subscription = true;
+      subscription.subscription = { status: "trialing" };
+      break;
+    case "canceled":
+      cloudStatus.active_subscription = false;
+      subscription.subscription = { status: "canceled" };
+      break;
+    case "expired":
+      cloudStatus.active_subscription = false;
+      subscription.subscription = { status: "expired" };
+      break;
+    case "unknown":
+      cloudStatus.active_subscription = true;
+      subscription.subscription = { status: "unknown" };
+      break;
+    default:
+      // "active"
+      cloudStatus.active_subscription = true;
+      subscription.subscription = { status: "active" };
+  }
+
+  cloudStatus.prefs.onboarded_items = scenario.onboarded
+    ? [...ONBOARDING_ITEMS]
+    : [];
+  cloudStatus.onboarding_completed = scenario.onboarded;
+  cloudStatus.onboarding_postponed = scenario.postponed;
+  cloudStatus.prefs.onboarding_postponed_until = scenario.postponed
+    ? new Date(Date.now() + 24 * 3600 * 1000).toISOString()
+    : null;
+  cloudStatus.prefs.remote_enabled = scenario.remote;
+  cloudStatus.remote_connected = scenario.remote;
+  cloudStatus.remote_certificate_status = scenario.remoteStatus;
+  cloudStatus.alexa_registered = scenario.alexa;
+  cloudStatus.google_registered = scenario.google;
+  cloudStatus.prefs.cloud_ice_servers_enabled = scenario.webrtc;
+
+  const hasCloudhooks = Object.keys(cloudStatus.prefs.cloudhooks).length > 0;
+  if (scenario.webhooks && !hasCloudhooks) {
+    cloudStatus.prefs.cloudhooks = Object.fromEntries(
+      demoWebhooks.map((webhook) => [
+        webhook.webhook_id,
+        {
+          webhook_id: webhook.webhook_id,
+          cloudhook_id: `demo-${webhook.webhook_id}`,
+          cloudhook_url: `https://hooks.nabu.casa/demo-${webhook.webhook_id}`,
+          managed: false,
+        },
+      ])
+    );
+  } else if (!scenario.webhooks && hasCloudhooks) {
+    cloudStatus.prefs.cloudhooks = {};
+  }
+};
+
+applyScenario();
+subscribeCloudDemoScenario(applyScenario);
+
+// Reflect UI-driven changes (onboarding toggles, remote connect/disconnect)
+// back into the demo scenario so the demo controls panel stays in sync with the
+// mocked state. Only writes when a value actually changed, to avoid needless
+// re-projection. `applyScenario` re-applies the (now matching) scenario, so
+// this stays idempotent and does not fight the direct mutation above.
+const syncScenarioFromStatus = () => {
+  const scenario = getCloudDemoScenario();
+  const next = {
+    onboarded: cloudStatus.onboarding_completed,
+    postponed: cloudStatus.onboarding_postponed,
+    remote: cloudStatus.prefs.remote_enabled,
+    webrtc: cloudStatus.prefs.cloud_ice_servers_enabled,
+    webhooks: Object.keys(cloudStatus.prefs.cloudhooks).length > 0,
+  };
+  if (
+    scenario.onboarded !== next.onboarded ||
+    scenario.postponed !== next.postponed ||
+    scenario.remote !== next.remote ||
+    scenario.webrtc !== next.webrtc ||
+    scenario.webhooks !== next.webhooks
+  ) {
+    setCloudDemoScenario(next);
+  }
+};
+
+export const mockCloud = (hass: MockHomeAssistant) => {
+  hass.mockWS("cloud/status", () => ({
+    ...cloudStatus,
+    prefs: { ...cloudStatus.prefs },
+  }));
+  hass.mockWS("cloud/subscription", () => subscription);
+  hass.mockWS("cloud/tts/info", () => ttsInfo);
+  hass.mockWS("webhook/list", () => demoWebhooks);
+
+  hass.mockWS("cloud/update_prefs", (msg) => {
+    const { type, ...prefs } = msg;
+    cloudStatus.prefs = { ...cloudStatus.prefs, ...prefs };
+    syncScenarioFromStatus();
+    return { success: true };
+  });
+
+  hass.mockWS("cloud/onboarding/postpone", () => {
+    cloudStatus.prefs.onboarding_postponed_until = new Date(
+      Date.now() + 24 * 3600 * 1000
+    ).toISOString();
+    cloudStatus.onboarding_postponed = true;
+    syncScenarioFromStatus();
+    // Backend returns the full logged-in status object.
+    return { ...cloudStatus, prefs: { ...cloudStatus.prefs } };
+  });
+
+  hass.mockWS("cloud/onboarding/complete", (msg) => {
+    const items: string[] = msg.items ?? [];
+    const missing = items.filter(
+      (item) => !cloudStatus.prefs.onboarded_items.includes(item)
+    );
+    if (missing.length) {
+      cloudStatus.prefs.onboarded_items = [
+        ...cloudStatus.prefs.onboarded_items,
+        ...missing,
+      ];
+    }
+    cloudStatus.onboarding_completed = ONBOARDING_ITEMS.every(
+      (onboardingItem) =>
+        cloudStatus.prefs.onboarded_items.includes(onboardingItem)
+    );
+    syncScenarioFromStatus();
+    // Backend returns the full logged-in status object.
+    return { ...cloudStatus, prefs: { ...cloudStatus.prefs } };
+  });
+
+  hass.mockWS("cloud/cloudhook/create", (msg) => {
+    const webhook = {
+      webhook_id: msg.webhook_id,
+      cloudhook_id: "demo-cloudhook-id",
+      cloudhook_url: `https://hooks.nabu.casa/demo-${msg.webhook_id}`,
+      managed: false,
+    };
+    cloudStatus.prefs.cloudhooks = {
+      ...cloudStatus.prefs.cloudhooks,
+      [msg.webhook_id]: webhook,
+    };
+    return webhook;
+  });
+
+  hass.mockWS("cloud/cloudhook/delete", (msg) => {
+    const cloudhooks = { ...cloudStatus.prefs.cloudhooks };
+    delete cloudhooks[msg.webhook_id];
+    cloudStatus.prefs.cloudhooks = cloudhooks;
+    syncScenarioFromStatus();
+    return null;
+  });
+
+  hass.mockWS("cloud/remote/connect", () => {
+    cloudStatus.remote_connected = true;
+    cloudStatus.prefs.remote_enabled = true;
+    syncScenarioFromStatus();
+    return null;
+  });
+  hass.mockWS("cloud/remote/disconnect", () => {
+    cloudStatus.remote_connected = false;
+    cloudStatus.prefs.remote_enabled = false;
+    syncScenarioFromStatus();
+    return null;
+  });
+
+  hass.mockWS("cloud/remove_data", () => null);
+  hass.mockWS("cloud/google_assistant/entities/update", () => null);
+  hass.mockWS("cloud/alexa/entities", () => []);
+  hass.mockWS("cloud/google_assistant/entities", () => []);
+
+  hass.mockAPI("cloud/logout", () => ({}));
+  hass.mockAPI("cloud/google_actions/sync", () => ({}));
+  hass.mockAPI("cloud/support_package", () => "Demo support package");
+};

demo/src/stubs/config-panel.ts

@@ -0,0 +1,42 @@
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { mockApplicationCredentials } from "./application_credentials";
+import { mockAssist } from "./assist";
+import { mockAutomation } from "./automation";
+import { mockBackup } from "./backup";
+import { mockBlueprint } from "./blueprint";
+import { mockCloud } from "./cloud";
+import { mockConfig } from "./config";
+import { mockConfigEntries } from "./config_entries";
+import { mockDeviceAutomation } from "./device_automation";
+import { mockEntitySources } from "./entity_sources";
+import { mockExpose } from "./expose";
+import { mockNetwork } from "./network";
+import { mockPerson } from "./person";
+import { mockScene } from "./scene";
+import { mockSearch } from "./search";
+import { mockSystemHealth } from "./system_health";
+import { mockTags } from "./tags";
+import { mockZone } from "./zone";
+
+// Registers every mock that is only needed once the config panel is opened.
+// This module is dynamically imported so its data stays out of the main bundle.
+export const mockConfigPanel = (hass: MockHomeAssistant) => {
+  mockCloud(hass);
+  mockConfig(hass);
+  mockConfigEntries(hass);
+  mockDeviceAutomation(hass);
+  mockEntitySources(hass);
+  mockBlueprint(hass);
+  mockExpose(hass);
+  mockZone(hass);
+  mockPerson(hass);
+  mockNetwork(hass);
+  mockApplicationCredentials(hass);
+  mockSystemHealth(hass);
+  mockBackup(hass);
+  mockAutomation(hass);
+  mockScene(hass);
+  mockSearch(hass);
+  mockTags(hass);
+  mockAssist(hass);
+};

demo/src/stubs/config_entries.ts

@@ -1,26 +1,126 @@
-import type { getConfigEntries } from "../../../src/data/config_entries";
+import type {
+  ConfigEntry,
+  ConfigEntryUpdate,
+} from "../../../src/data/config_entries";
+import type { ConfigFlowInProgressMessage } from "../../../src/data/config_flow";
+import type { IntegrationType } from "../../../src/data/integration";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
-export const mockConfigEntries = (hass: MockHomeAssistant) => {
-  hass.mockWS<typeof getConfigEntries>("config_entries/get", () => [
-    {
-      entry_id: "mock-entry-co2signal",
+const baseEntry = {
+  source: "user",
+  state: "loaded" as const,
+  supports_options: false,
+  supports_remove_device: false,
+  supports_unload: true,
+  supports_reconfigure: true,
+  supported_subentry_types: {},
+  num_subentries: 0,
+  pref_disable_new_entities: false,
+  pref_disable_polling: false,
+  disabled_by: null,
+  reason: null,
+  error_reason_translation_key: null,
+  error_reason_translation_placeholders: null,
+};
+
+// Each entry is tagged with its integration type so we can honor the
+// `type_filter` that the integrations and helpers panels subscribe with.
+export const demoConfigEntries: {
+  entry: ConfigEntry;
+  type: IntegrationType;
+}[] = [
+  {
+    type: "service",
+    entry: {
+      ...baseEntry,
+      entry_id: "co2signal",
       domain: "co2signal",
       title: "Electricity Maps",
-      source: "user",
-      state: "loaded",
-      supports_options: false,
-      supports_remove_device: false,
-      supports_unload: true,
-      supports_reconfigure: true,
-      supported_subentry_types: {},
-      pref_disable_new_entities: false,
-      pref_disable_polling: false,
-      disabled_by: null,
-      reason: null,
-      num_subentries: 0,
-      error_reason_translation_key: null,
-      error_reason_translation_placeholders: null,
     },
-  ]);
+  },
+  {
+    type: "hub",
+    entry: {
+      ...baseEntry,
+      entry_id: "mock-hue",
+      domain: "hue",
+      title: "Philips Hue",
+      source: "zeroconf",
+      supports_options: true,
+      supports_remove_device: true,
+    },
+  },
+  {
+    type: "hub",
+    entry: {
+      ...baseEntry,
+      entry_id: "mock-sonos",
+      domain: "sonos",
+      title: "Sonos",
+      source: "zeroconf",
+      supports_options: true,
+    },
+  },
+  {
+    type: "service",
+    entry: {
+      ...baseEntry,
+      entry_id: "mock-met",
+      domain: "met",
+      title: "Forecast.Home",
+    },
+  },
+  {
+    type: "helper",
+    entry: {
+      ...baseEntry,
+      entry_id: "mock-template-helper",
+      domain: "template",
+      title: "Comfort level",
+    },
+  },
+];
+
+const filterEntries = (filters?: {
+  type_filter?: IntegrationType[];
+  domain?: string;
+}): ConfigEntry[] =>
+  demoConfigEntries
+    .filter(
+      (e) =>
+        (!filters?.type_filter || filters.type_filter.includes(e.type)) &&
+        (!filters?.domain || filters.domain === e.entry.domain)
+    )
+    .map((e) => e.entry);
+
+export const mockConfigEntries = (hass: MockHomeAssistant) => {
+  hass.mockWS(
+    "config_entries/get",
+    (msg: { type_filter?: IntegrationType[]; domain?: string }) =>
+      filterEntries(msg)
+  );
+
+  hass.mockWS(
+    "config_entries/subscribe",
+    (
+      msg: { type_filter?: IntegrationType[]; domain?: string },
+      _hass,
+      onChange?: (updates: ConfigEntryUpdate[]) => void
+    ) => {
+      onChange?.(filterEntries(msg).map((entry) => ({ type: null, entry })));
+      return () => undefined;
+    }
+  );
+
+  hass.mockWS(
+    "config_entries/flow/subscribe",
+    (
+      _msg,
+      _hass,
+      onChange?: (updates: ConfigFlowInProgressMessage[]) => void
+    ) => {
+      onChange?.([]);
+      return () => undefined;
+    }
+  );
 };

demo/src/stubs/device_automation.ts

@@ -0,0 +1,18 @@
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+// The demo's devices don't expose device-specific automations, so report empty
+// lists and no extra capability fields for the device automation pickers.
+export const mockDeviceAutomation = (hass: MockHomeAssistant) => {
+  hass.mockWS("device_automation/trigger/list", () => []);
+  hass.mockWS("device_automation/condition/list", () => []);
+  hass.mockWS("device_automation/action/list", () => []);
+  hass.mockWS("device_automation/trigger/capabilities", () => ({
+    extra_fields: [],
+  }));
+  hass.mockWS("device_automation/condition/capabilities", () => ({
+    extra_fields: [],
+  }));
+  hass.mockWS("device_automation/action/capabilities", () => ({
+    extra_fields: [],
+  }));
+};

demo/src/stubs/devices.ts

@@ -0,0 +1,53 @@
+import type { DeviceRegistryEntry } from "../../../src/data/device/device_registry";
+
+const baseDevice = {
+  config_entries_subentries: {},
+  connections: [] as [string, string][],
+  identifiers: [] as [string, string][],
+  model_id: null,
+  labels: [] as string[],
+  sw_version: null,
+  hw_version: null,
+  serial_number: null,
+  via_device_id: null,
+  area_id: null,
+  name_by_user: null,
+  disabled_by: null,
+  configuration_url: null,
+  created_at: 0,
+  modified_at: 0,
+};
+
+export const demoDevices: DeviceRegistryEntry[] = [
+  {
+    ...baseDevice,
+    id: "co2signal",
+    name: "Electricity Maps",
+    manufacturer: "Electricity Maps",
+    model: "CO2 Signal",
+    config_entries: ["co2signal"],
+    primary_config_entry: "co2signal",
+    entry_type: "service",
+  },
+  {
+    ...baseDevice,
+    id: "hue-bridge",
+    name: "Philips Hue Bridge",
+    manufacturer: "Signify",
+    model: "Hue Bridge (BSB002)",
+    sw_version: "1.50.0",
+    config_entries: ["mock-hue"],
+    primary_config_entry: "mock-hue",
+    entry_type: null,
+  },
+  {
+    ...baseDevice,
+    id: "sonos-living",
+    name: "Living Room",
+    manufacturer: "Sonos",
+    model: "One",
+    config_entries: ["mock-sonos"],
+    primary_config_entry: "mock-sonos",
+    entry_type: null,
+  },
+];

demo/src/stubs/energy.ts

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

demo/src/stubs/entity_registry.ts

@@ -1,4 +1,7 @@
-import type { EntityRegistryEntry } from "../../../src/data/entity/entity_registry";
+import type {
+  EntityRegistryEntry,
+  ExtEntityRegistryEntry,
+} from "../../../src/data/entity/entity_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockEntityRegistry = (
@@ -6,4 +9,17 @@ export const mockEntityRegistry = (
   data: EntityRegistryEntry[] = []
 ) => {
   hass.mockWS("config/entity_registry/list", () => data);
+  hass.mockWS(
+    "config/entity_registry/get_entries",
+    (msg: { entity_ids: string[] }) => {
+      const result: Record<string, ExtEntityRegistryEntry> = {};
+      for (const entityId of msg.entity_ids) {
+        const entry = data.find((e) => e.entity_id === entityId);
+        if (entry) {
+          result[entityId] = { ...entry, capabilities: {}, aliases: [] };
+        }
+      }
+      return result;
+    }
+  );
 };

demo/src/stubs/entity_sources.ts

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

demo/src/stubs/expose.ts

@@ -0,0 +1,44 @@
+import type { ExposeEntitySettings } from "../../../src/data/expose";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const exposedEntities: Record<string, ExposeEntitySettings> = {
+  "light.floor_lamp": {
+    conversation: true,
+    "cloud.alexa": true,
+    "cloud.google_assistant": true,
+  },
+  "light.living_room_spotlights": {
+    conversation: true,
+    "cloud.alexa": true,
+    "cloud.google_assistant": false,
+  },
+  "light.bar_lamp": {
+    conversation: true,
+    "cloud.alexa": false,
+    "cloud.google_assistant": true,
+  },
+  "light.kitchen_spotlights": {
+    conversation: true,
+    "cloud.alexa": true,
+    "cloud.google_assistant": true,
+  },
+  "light.outdoor_light": {
+    conversation: true,
+    "cloud.alexa": true,
+    "cloud.google_assistant": true,
+  },
+};
+
+export const mockExpose = (hass: MockHomeAssistant) => {
+  hass.mockWS("homeassistant/expose_entity/list", () => ({
+    exposed_entities: exposedEntities,
+  }));
+  hass.mockWS(
+    "homeassistant/expose_new_entities/get",
+    (msg: { assistant: string }) => ({
+      expose_new: msg.assistant !== "cloud.google_assistant",
+    })
+  );
+  hass.mockWS("homeassistant/expose_entity", () => null);
+  hass.mockWS("homeassistant/expose_new_entities/set", () => null);
+};

demo/src/stubs/frontend.ts

@@ -42,6 +42,7 @@ export const mockFrontend = (hass: MockHomeAssistant) => {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};
   });
+  hass.mockWS("frontend/get_system_data", () => ({ value: null }));
   hass.mockWS("repairs/list_issues", () => ({ issues: [] }));
   hass.mockWS("frontend/get_themes", (_msg, currentHass) => currentHass.themes);
 };

demo/src/stubs/integration.ts

@@ -0,0 +1,72 @@
+import type { IntegrationManifest } from "../../../src/data/integration";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const manifest = (
+  domain: string,
+  name: string,
+  overrides: Partial<IntegrationManifest> = {}
+): IntegrationManifest => ({
+  is_built_in: true,
+  domain,
+  name,
+  config_flow: true,
+  documentation: `https://www.home-assistant.io/integrations/${domain}/`,
+  iot_class: "local_push",
+  ...overrides,
+});
+
+const manifests: IntegrationManifest[] = [
+  manifest("co2signal", "Electricity Maps", { iot_class: "cloud_polling" }),
+  manifest("hue", "Philips Hue"),
+  manifest("sonos", "Sonos"),
+  manifest("met", "Met.no", { iot_class: "cloud_polling" }),
+  // Helpers
+  manifest("template", "Template", { integration_type: "helper" }),
+  manifest("input_boolean", "Toggle", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("input_number", "Number", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("input_select", "Dropdown", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("input_text", "Text", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("input_datetime", "Date and/or time", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("counter", "Counter", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("timer", "Timer", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("schedule", "Schedule", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+];
+
+export const mockIntegration = (hass: MockHomeAssistant) => {
+  hass.mockWS("manifest/list", () => manifests);
+  hass.mockWS("manifest/get", (msg: { integration: string }) =>
+    manifests.find((m) => m.domain === msg.integration)
+  );
+};

demo/src/stubs/network.ts

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

demo/src/stubs/person.ts

@@ -0,0 +1,20 @@
+import type { Person } from "../../../src/data/person";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const storage: Person[] = [
+  {
+    id: "demo_user",
+    name: "Demo User",
+    user_id: "abcd",
+    device_trackers: [],
+  },
+  {
+    id: "anne_therese",
+    name: "Anne Therese",
+    device_trackers: [],
+  },
+];
+
+export const mockPerson = (hass: MockHomeAssistant) => {
+  hass.mockWS("person/list", () => ({ storage, config: [] as Person[] }));
+};

demo/src/stubs/scene.ts

@@ -0,0 +1,18 @@
+import type { SceneConfig } from "../../../src/data/scene";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const demoSceneConfig = (id: string): SceneConfig => ({
+  id,
+  name: "Demo scene",
+  entities: {
+    "light.bed_light": { state: "on" },
+  },
+});
+
+export const mockScene = (hass: MockHomeAssistant) => {
+  hass.mockAPI(/config\/scene\/config\/.+/, (_hass, method, path) => {
+    const id = path.split("/").pop()!;
+    // GET returns the config; POST/DELETE just acknowledge.
+    return method === "GET" ? demoSceneConfig(id) : {};
+  });
+};

demo/src/stubs/search.ts

@@ -0,0 +1,7 @@
+import type { RelatedResult } from "../../../src/data/search";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockSearch = (hass: MockHomeAssistant) => {
+  // The demo has no relationship graph, so report no related items.
+  hass.mockWS("search/related", (): RelatedResult => ({}));
+};

demo/src/stubs/system_health.ts

@@ -0,0 +1,37 @@
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockSystemHealth = (hass: MockHomeAssistant) => {
+  hass.mockWS(
+    "system_health/info",
+    (_msg, _hass, onChange?: (event: any) => void) => {
+      // Defer so the consumer's unsubscribe handle is initialized first
+      // (real WS events arrive asynchronously).
+      setTimeout(() => {
+        onChange?.({
+          type: "initial",
+          data: {
+            homeassistant: {
+              info: {
+                version: "DEMO",
+                installation_type: "Home Assistant OS",
+                dev: false,
+                hassio: true,
+                docker: true,
+                container_arch: "aarch64",
+                user: "root",
+                virtualenv: false,
+                python_version: "3.13.0",
+                os_name: "Linux",
+                os_version: "6.6.0",
+                arch: "aarch64",
+                timezone: "America/Los_Angeles",
+                config_dir: "/config",
+              },
+            },
+          },
+        });
+      });
+      return () => undefined;
+    }
+  );
+};

demo/src/stubs/system_log.ts

@@ -1,5 +1,33 @@
+import type { LoggedError } from "../../../src/data/system_log";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
+const now = Date.now() / 1000;
+
+const logs: LoggedError[] = [
+  {
+    name: "homeassistant.components.demo",
+    message: ["Demo integration failed to update sensor data"],
+    level: "warning",
+    source: ["components/demo/sensor.py", 142],
+    exception: "",
+    count: 2,
+    timestamp: now - 120,
+    first_occurred: now - 3600,
+  },
+  {
+    name: "homeassistant.config_entries",
+    message: ["Config entry for met.no could not be set up"],
+    level: "error",
+    source: ["config_entries.py", 512],
+    exception:
+      'Traceback (most recent call last):\n  File "config_entries.py", line 512',
+    count: 1,
+    timestamp: now - 600,
+    first_occurred: now - 600,
+  },
+];
+
 export const mockSystemLog = (hass: MockHomeAssistant) => {
   hass.mockAPI("error/all", () => []);
+  hass.mockWS("system_log/list", () => logs);
 };