Update src/dialogs/analytics/dialog-analytics-optin.ts

Co-authored-by: Bram Kragten <[email protected]>
2026-08-19 04:57:06 +00:00 · 2021-04-27 16:30:52 +02:00 · 2021-04-27 15:28:54 +02:00 · 2021-04-27 11:33:39 +00:00 · 2021-04-27 11:23:53 +00:00 · 2021-04-27 11:09:02 +00:00
334 changed files with 16096 additions and 5757 deletions
@@ -84,7 +84,8 @@
    "@typescript-eslint/no-unused-vars": 0,
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/explicit-module-boundary-types": 0,
-    "@typescript-eslint/no-shadow": ["error"]
+    "@typescript-eslint/no-shadow": ["error"],
+    "lit/attribute-value-entities": 0
  },
  "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
  "processor": "disable/disable"
@@ -1,8 +1,6 @@
 name: Report a bug with the UI, Frontend or Lovelace
-about: Report an issue related to the Home Assistant frontend.
+description: Report an issue related to the Home Assistant frontend.
 labels: bug
-title: ""
-issue_body: true
 body:
  - type: markdown
    attributes:
@@ -97,11 +95,7 @@ body:
        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.
-      value: |
-        ```yaml
-        # Paste your state here.
-
-        ```
+      render: txt
  - type: textarea
    attributes:
      label: Problem-relevant frontend configuration
@@ -110,29 +104,18 @@ body:
        configuration of the used cards. Fill this out even if it seems
        unimportant to you. Please be sure to remove personal information like
        passwords, private URLs and other credentials.
-      value: |
-        ```yaml
-        # Paste your YAML here.
-
-        ```
+      render: yaml
  - type: textarea
    attributes:
      label: Javascript errors shown in your browser console/inspector
      description: >
        If you come across any Javascript or other error logs, e.g., in your
        browser console/inspector please provide them.
-      value: |
-        ```txt
-        # Paste your logs here.
-
-        ```
-  - type: markdown
+      render: txt
+  - type: textarea
    attributes:
-      value: |
-        ## Additional information
-  - type: markdown
-    attributes:
-      value: |
+      label: Additional information
+      description: >
        If you have any additional information for us, use the field below.
-        Please note, you can attach screenshots or screen recordings here,
-        by dragging and dropping files in the field below.
+        Please note, you can attach screenshots or screen recordings here, by
+        dragging and dropping files in the field below.
@@ -35,11 +35,12 @@ class HcLovelace extends LitElement {
    }
    const lovelace: Lovelace = {
      config: this.lovelaceConfig,
+      rawConfig: this.lovelaceConfig,
      editMode: false,
      urlPath: this.urlPath!,
      enableFullEditMode: () => undefined,
      mode: "storage",
-      language: "en",
+      locale: this.hass.locale,
      saveConfig: async () => undefined,
      deleteConfig: async () => undefined,
      setEditMode: () => undefined,
@@ -221,11 +221,17 @@ export class HcMain extends HassElement {
  }

  private async _generateLovelaceConfig() {
-    const { generateLovelaceConfigFromHass } = await import(
-      "../../../../src/panels/lovelace/common/generate-lovelace-config"
+    const { generateLovelaceDashboardStrategy } = await import(
+      "../../../../src/panels/lovelace/strategies/get-strategy"
    );
    this._handleNewLovelaceConfig(
-      await generateLovelaceConfigFromHass(this.hass!)
+      await generateLovelaceDashboardStrategy(
+        {
+          hass: this.hass!,
+          narrow: false,
+        },
+        "original-states"
+      )
    );
  }

@@ -2,22 +2,27 @@ import { DemoTrace } from "./types";

 export const basicTrace: DemoTrace = {
  trace: {
-    last_action: "action/0/choose/0/sequence/0",
-    last_condition: "condition/0",
+    last_step: "action/2",
    run_id: "0",
    state: "stopped",
    timestamp: {
-      start: "2021-03-22T19:17:09.519178+00:00",
-      finish: "2021-03-22T19:17:09.556129+00:00",
+      start: "2021-03-25T04:36:51.223693+00:00",
+      finish: "2021-03-25T04:36:51.266132+00:00",
    },
    trigger: "state of input_boolean.toggle_1",
    domain: "automation",
    item_id: "1615419646544",
-    action_trace: {
-      "action/0": [
+    trace: {
+      "trigger/0": [
        {
-          path: "action/0",
-          timestamp: "2021-03-22T19:17:09.526794+00:00",
+          path: "trigger/0",
+          timestamp: "2021-03-25T04:36:51.223693+00:00",
+        },
+      ],
+      "condition/0": [
+        {
+          path: "condition/0",
+          timestamp: "2021-03-25T04:36:51.228243+00:00",
          changed_variables: {
            trigger: {
              platform: "state",
@@ -29,10 +34,10 @@ export const basicTrace: DemoTrace = {
                  editable: true,
                  friendly_name: "Toggle 1",
                },
-                last_changed: "2021-03-22T19:11:24.418709+00:00",
-                last_updated: "2021-03-22T19:11:24.418709+00:00",
+                last_changed: "2021-03-24T19:03:59.141440+00:00",
+                last_updated: "2021-03-24T19:03:59.141440+00:00",
                context: {
-                  id: "55daa6c47a7613b0800fe0ec81090a84",
+                  id: "5d0918eb379214d07554bdab6a08bcff",
                  parent_id: null,
                  user_id: null,
                },
@@ -44,10 +49,58 @@ export const basicTrace: DemoTrace = {
                  editable: true,
                  friendly_name: "Toggle 1",
                },
-                last_changed: "2021-03-22T19:17:09.516874+00:00",
-                last_updated: "2021-03-22T19:17:09.516874+00:00",
+                last_changed: "2021-03-25T04:36:51.220696+00:00",
+                last_updated: "2021-03-25T04:36:51.220696+00:00",
                context: {
-                  id: "116d7a6562d594b114f7efe728619a3f",
+                  id: "664d6d261450a9ecea6738e97269a149",
+                  parent_id: null,
+                  user_id: "d1b4e89da01445fa8bc98e39fac477ca",
+                },
+              },
+              for: null,
+              attribute: null,
+              description: "state of input_boolean.toggle_1",
+            },
+          },
+          result: {
+            result: true,
+          },
+        },
+      ],
+      "action/0": [
+        {
+          path: "action/0",
+          timestamp: "2021-03-25T04:36:51.243018+00:00",
+          changed_variables: {
+            trigger: {
+              platform: "state",
+              entity_id: "input_boolean.toggle_1",
+              from_state: {
+                entity_id: "input_boolean.toggle_1",
+                state: "on",
+                attributes: {
+                  editable: true,
+                  friendly_name: "Toggle 1",
+                },
+                last_changed: "2021-03-24T19:03:59.141440+00:00",
+                last_updated: "2021-03-24T19:03:59.141440+00:00",
+                context: {
+                  id: "5d0918eb379214d07554bdab6a08bcff",
+                  parent_id: null,
+                  user_id: null,
+                },
+              },
+              to_state: {
+                entity_id: "input_boolean.toggle_1",
+                state: "off",
+                attributes: {
+                  editable: true,
+                  friendly_name: "Toggle 1",
+                },
+                last_changed: "2021-03-25T04:36:51.220696+00:00",
+                last_updated: "2021-03-25T04:36:51.220696+00:00",
+                context: {
+                  id: "664d6d261450a9ecea6738e97269a149",
                  parent_id: null,
                  user_id: "d1b4e89da01445fa8bc98e39fac477ca",
                },
@@ -57,38 +110,56 @@ export const basicTrace: DemoTrace = {
              description: "state of input_boolean.toggle_1",
            },
            context: {
-              id: "54a7371cff31be0f4010c9fde2317322",
-              parent_id: "116d7a6562d594b114f7efe728619a3f",
+              id: "6cfcae368e7b3686fad6c59e83ae76c9",
+              parent_id: "664d6d261450a9ecea6738e97269a149",
              user_id: null,
            },
          },
+          result: {
+            params: {
+              domain: "input_boolean",
+              service: "toggle",
+              service_data: {},
+              target: {
+                entity_id: ["input_boolean.toggle_4"],
+              },
+            },
+            running_script: false,
+            limit: 10,
+          },
+        },
+      ],
+      "action/1": [
+        {
+          path: "action/1",
+          timestamp: "2021-03-25T04:36:51.252406+00:00",
          result: {
            choice: 0,
          },
        },
      ],
-      "action/0/choose/0": [
+      "action/1/choose/0": [
        {
-          path: "action/0/choose/0",
-          timestamp: "2021-03-22T19:17:09.530176+00:00",
+          path: "action/1/choose/0",
+          timestamp: "2021-03-25T04:36:51.254569+00:00",
          result: {
            result: true,
          },
        },
      ],
-      "action/0/choose/0/conditions/0": [
+      "action/1/choose/0/conditions/0": [
        {
-          path: "action/0/choose/0/conditions/0",
-          timestamp: "2021-03-22T19:17:09.539155+00:00",
+          path: "action/1/choose/0/conditions/0",
+          timestamp: "2021-03-25T04:36:51.254697+00:00",
          result: {
            result: true,
          },
        },
      ],
-      "action/0/choose/0/sequence/0": [
+      "action/1/choose/0/sequence/0": [
        {
-          path: "action/0/choose/0/sequence/0",
-          timestamp: "2021-03-22T19:17:09.542769+00:00",
+          path: "action/1/choose/0/sequence/0",
+          timestamp: "2021-03-25T04:36:51.257360+00:00",
          result: {
            params: {
              domain: "input_boolean",
@@ -103,57 +174,44 @@ export const basicTrace: DemoTrace = {
          },
        },
      ],
-    },
-    condition_trace: {
-      "condition/0": [
+      "action/1/choose/0/sequence/1": [
        {
-          path: "condition/0",
-          timestamp: "2021-03-22T19:17:09.520267+00:00",
-          changed_variables: {
-            trigger: {
-              platform: "state",
-              entity_id: "input_boolean.toggle_1",
-              from_state: {
-                entity_id: "input_boolean.toggle_1",
-                state: "on",
-                attributes: {
-                  editable: true,
-                  friendly_name: "Toggle 1",
-                },
-                last_changed: "2021-03-22T19:11:24.418709+00:00",
-                last_updated: "2021-03-22T19:11:24.418709+00:00",
-                context: {
-                  id: "55daa6c47a7613b0800fe0ec81090a84",
-                  parent_id: null,
-                  user_id: null,
-                },
-              },
-              to_state: {
-                entity_id: "input_boolean.toggle_1",
-                state: "off",
-                attributes: {
-                  editable: true,
-                  friendly_name: "Toggle 1",
-                },
-                last_changed: "2021-03-22T19:17:09.516874+00:00",
-                last_updated: "2021-03-22T19:17:09.516874+00:00",
-                context: {
-                  id: "116d7a6562d594b114f7efe728619a3f",
-                  parent_id: null,
-                  user_id: "d1b4e89da01445fa8bc98e39fac477ca",
-                },
-              },
-              for: null,
-              attribute: null,
-              description: "state of input_boolean.toggle_1",
-            },
-          },
+          path: "action/1/choose/0/sequence/1",
+          timestamp: "2021-03-25T04:36:51.260658+00:00",
          result: {
-            result: true,
+            params: {
+              domain: "input_boolean",
+              service: "toggle",
+              service_data: {},
+              target: {
+                entity_id: ["input_boolean.toggle_3"],
+              },
+            },
+            running_script: false,
+            limit: 10,
+          },
+        },
+      ],
+      "action/2": [
+        {
+          path: "action/2",
+          timestamp: "2021-03-25T04:36:51.264159+00:00",
+          result: {
+            params: {
+              domain: "input_boolean",
+              service: "toggle",
+              service_data: {},
+              target: {
+                entity_id: ["input_boolean.toggle_4"],
+              },
+            },
+            running_script: false,
+            limit: 10,
          },
        },
      ],
    },
+
    config: {
      id: "1615419646544",
      alias: "Ensure Party mode",
@@ -172,11 +230,23 @@ export const basicTrace: DemoTrace = {
        },
      ],
      action: [
+        {
+          service: "input_boolean.toggle",
+          target: {
+            entity_id: "input_boolean.toggle_4",
+          },
+        },
        {
          choose: [
            {
              alias: "If toggle 3 is on",
-              conditions: "{{ is_state('input_boolean.toggle_3', 'on') }}",
+              conditions: [
+                {
+                  condition: "template",
+                  value_template:
+                    "{{ is_state('input_boolean.toggle_3', 'on') }}",
+                },
+              ],
              sequence: [
                {
                  service: "input_boolean.toggle",
@@ -185,6 +255,13 @@ export const basicTrace: DemoTrace = {
                    entity_id: "input_boolean.toggle_2",
                  },
                },
+                {
+                  service: "input_boolean.toggle",
+                  alias: "Toggle 3",
+                  target: {
+                    entity_id: "input_boolean.toggle_3",
+                  },
+                },
              ],
            },
          ],
@@ -198,53 +275,21 @@ export const basicTrace: DemoTrace = {
            },
          ],
        },
+        {
+          service: "input_boolean.toggle",
+          target: {
+            entity_id: "input_boolean.toggle_4",
+          },
+        },
      ],
      mode: "single",
    },
    context: {
-      id: "54a7371cff31be0f4010c9fde2317322",
-      parent_id: "116d7a6562d594b114f7efe728619a3f",
+      id: "6cfcae368e7b3686fad6c59e83ae76c9",
+      parent_id: "664d6d261450a9ecea6738e97269a149",
      user_id: null,
    },
-    variables: {
-      trigger: {
-        platform: "state",
-        entity_id: "input_boolean.toggle_1",
-        from_state: {
-          entity_id: "input_boolean.toggle_1",
-          state: "on",
-          attributes: {
-            editable: true,
-            friendly_name: "Toggle 1",
-          },
-          last_changed: "2021-03-22T19:11:24.418709+00:00",
-          last_updated: "2021-03-22T19:11:24.418709+00:00",
-          context: {
-            id: "55daa6c47a7613b0800fe0ec81090a84",
-            parent_id: null,
-            user_id: null,
-          },
-        },
-        to_state: {
-          entity_id: "input_boolean.toggle_1",
-          state: "off",
-          attributes: {
-            editable: true,
-            friendly_name: "Toggle 1",
-          },
-          last_changed: "2021-03-22T19:17:09.516874+00:00",
-          last_updated: "2021-03-22T19:17:09.516874+00:00",
-          context: {
-            id: "116d7a6562d594b114f7efe728619a3f",
-            parent_id: null,
-            user_id: "d1b4e89da01445fa8bc98e39fac477ca",
-          },
-        },
-        for: null,
-        attribute: null,
-        description: "state of input_boolean.toggle_1",
-      },
-    },
+    script_execution: "finished",
  },
  logbookEntries: [
    {
@@ -252,12 +297,23 @@ export const basicTrace: DemoTrace = {
      message: "has been triggered by state of input_boolean.toggle_1",
      source: "state of input_boolean.toggle_1",
      entity_id: "automation.toggle_toggles",
-      context_id: "54a7371cff31be0f4010c9fde2317322",
-      when: "2021-03-22T19:17:09.523041+00:00",
+      context_id: "6cfcae368e7b3686fad6c59e83ae76c9",
+      when: "2021-03-25T04:36:51.240832+00:00",
      domain: "automation",
    },
    {
-      when: "2021-03-22T19:17:09.549346+00:00",
+      when: "2021-03-25T04:36:51.249828+00:00",
+      name: "Toggle 4",
+      state: "on",
+      entity_id: "input_boolean.toggle_4",
+      context_entity_id: "automation.toggle_toggles",
+      context_entity_id_name: "Ensure Party mode",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Ensure Party mode",
+    },
+    {
+      when: "2021-03-25T04:36:51.258947+00:00",
      name: "Toggle 2",
      state: "on",
      entity_id: "input_boolean.toggle_2",
@@ -267,5 +323,27 @@ export const basicTrace: DemoTrace = {
      context_domain: "automation",
      context_name: "Ensure Party mode",
    },
+    {
+      when: "2021-03-25T04:36:51.261806+00:00",
+      name: "Toggle 3",
+      state: "off",
+      entity_id: "input_boolean.toggle_3",
+      context_entity_id: "automation.toggle_toggles",
+      context_entity_id_name: "Ensure Party mode",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Ensure Party mode",
+    },
+    {
+      when: "2021-03-25T04:36:51.265246+00:00",
+      name: "Toggle 4",
+      state: "off",
+      entity_id: "input_boolean.toggle_4",
+      context_entity_id: "automation.toggle_toggles",
+      context_entity_id_name: "Ensure Party mode",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Ensure Party mode",
+    },
  ],
 };
@@ -0,0 +1,44 @@
+import { LogbookEntry } from "../../../../src/data/logbook";
+import { AutomationTraceExtended } from "../../../../src/data/trace";
+import { DemoTrace } from "./types";
+
+export const mockDemoTrace = (
+  tracePartial: Partial<AutomationTraceExtended>,
+  logbookEntries?: LogbookEntry[]
+): DemoTrace => ({
+  trace: {
+    last_step: "",
+    run_id: "0",
+    state: "stopped",
+    timestamp: {
+      start: "2021-03-25T04:36:51.223693+00:00",
+      finish: "2021-03-25T04:36:51.266132+00:00",
+    },
+    trigger: "mocked trigger",
+    domain: "automation",
+    item_id: "1615419646544",
+    trace: {
+      "trigger/0": [
+        {
+          path: "trigger/0",
+          changed_variables: {
+            trigger: {
+              description: "mocked trigger",
+            },
+          },
+          timestamp: "2021-03-25T04:36:51.223693+00:00",
+        },
+      ],
+    },
+    config: {
+      trigger: [],
+      action: [],
+    },
+    context: {
+      id: "abcd",
+    },
+    script_execution: "finished",
+    ...tracePartial,
+  },
+  logbookEntries: logbookEntries || [],
+});
@@ -2,8 +2,7 @@ import { DemoTrace } from "./types";

 export const motionLightTrace: DemoTrace = {
  trace: {
-    last_action: "action/3",
-    last_condition: null,
+    last_step: "action/3",
    run_id: "1",
    state: "stopped",
    timestamp: {
@@ -13,7 +12,13 @@ export const motionLightTrace: DemoTrace = {
    trigger: "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
    domain: "automation",
    item_id: "1614732497392",
-    action_trace: {
+    trace: {
+      "trigger/0": [
+        {
+          path: "trigger/0",
+          timestamp: "2021-03-25T04:36:51.223693+00:00",
+        },
+      ],
      "action/0": [
        {
          path: "action/0",
@@ -124,7 +129,6 @@ export const motionLightTrace: DemoTrace = {
        },
      ],
    },
-    condition_trace: {},
    config: {
      mode: "restart",
      max_exceeded: "silent",
@@ -172,45 +176,7 @@ export const motionLightTrace: DemoTrace = {
      parent_id: "e22ddfd5f11dc4aad9a52fc10dab613b",
      user_id: null,
    },
-    variables: {
-      trigger: {
-        platform: "state",
-        entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
-        from_state: {
-          entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
-          state: "off",
-          attributes: {
-            friendly_name: "Paulus’s MacBook Pro Camera In Use",
-            icon: "mdi:camera-off",
-          },
-          last_changed: "2021-03-14T06:06:29.235325+00:00",
-          last_updated: "2021-03-14T06:06:29.235325+00:00",
-          context: {
-            id: "ad4864c5ce957c38a07b50378eeb245d",
-            parent_id: null,
-            user_id: null,
-          },
-        },
-        to_state: {
-          entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
-          state: "on",
-          attributes: {
-            friendly_name: "Paulus’s MacBook Pro Camera In Use",
-            icon: "mdi:camera",
-          },
-          last_changed: "2021-03-14T06:07:01.762009+00:00",
-          last_updated: "2021-03-14T06:07:01.762009+00:00",
-          context: {
-            id: "e22ddfd5f11dc4aad9a52fc10dab613b",
-            parent_id: null,
-            user_id: null,
-          },
-        },
-        for: null,
-        attribute: null,
-        description: "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
-      },
-    },
+    script_execution: "finished",
  },
  logbookEntries: [
    {
@@ -0,0 +1,102 @@
+import { safeDump } from "js-yaml";
+import {
+  customElement,
+  html,
+  css,
+  LitElement,
+  TemplateResult,
+  property,
+} from "lit-element";
+import "../../../src/components/ha-card";
+import { describeAction } from "../../../src/data/script_i18n";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
+
+const actions = [
+  { wait_template: "{{ true }}", alias: "Something with an alias" },
+  { delay: "0:05" },
+  { wait_template: "{{ true }}" },
+  {
+    condition: "template",
+    value_template: "{{ true }}",
+  },
+  { event: "happy_event" },
+  {
+    device_id: "abcdefgh",
+    domain: "plex",
+    entity_id: "media_player.kitchen",
+  },
+  { scene: "scene.kitchen_morning" },
+  {
+    wait_for_trigger: [
+      {
+        platform: "state",
+        entity_id: "input_boolean.toggle_1",
+      },
+    ],
+  },
+  {
+    variables: {
+      hello: "world",
+    },
+  },
+  {
+    service: "input_boolean.toggle",
+    target: {
+      entity_id: "input_boolean.toggle_4",
+    },
+  },
+];
+
+@customElement("demo-automation-describe-action")
+export class DemoAutomationDescribeAction extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+    return html`
+      <ha-card header="Actions">
+        ${actions.map(
+          (conf) => html`
+            <div class="action">
+              <span>${describeAction(this.hass, conf as any)}</span>
+              <pre>${safeDump(conf)}</pre>
+            </div>
+          `
+        )}
+      </ha-card>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .action {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      span {
+        margin-right: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-automation-describe-action": DemoAutomationDescribeAction;
+  }
+}
@@ -0,0 +1,65 @@
+import { safeDump } from "js-yaml";
+import {
+  customElement,
+  html,
+  css,
+  LitElement,
+  TemplateResult,
+} from "lit-element";
+import "../../../src/components/ha-card";
+import { describeCondition } from "../../../src/data/automation_i18n";
+
+const conditions = [
+  { condition: "and" },
+  { condition: "not" },
+  { condition: "or" },
+  { condition: "state" },
+  { condition: "numeric_state" },
+  { condition: "sun", after: "sunset" },
+  { condition: "sun", after: "sunrise" },
+  { condition: "zone" },
+  { condition: "time" },
+  { condition: "template" },
+];
+
+@customElement("demo-automation-describe-condition")
+export class DemoAutomationDescribeCondition extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <ha-card header="Conditions">
+        ${conditions.map(
+          (conf) => html`
+            <div class="condition">
+              <span>${describeCondition(conf as any)}</span>
+              <pre>${safeDump(conf)}</pre>
+            </div>
+          `
+        )}
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .condition {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      span {
+        margin-right: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-automation-describe-condition": DemoAutomationDescribeCondition;
+  }
+}
@@ -0,0 +1,68 @@
+import { safeDump } from "js-yaml";
+import {
+  customElement,
+  html,
+  css,
+  LitElement,
+  TemplateResult,
+} from "lit-element";
+import "../../../src/components/ha-card";
+import { describeTrigger } from "../../../src/data/automation_i18n";
+
+const triggers = [
+  { platform: "state" },
+  { platform: "mqtt" },
+  { platform: "geo_location" },
+  { platform: "homeassistant" },
+  { platform: "numeric_state" },
+  { platform: "sun" },
+  { platform: "time_pattern" },
+  { platform: "webhook" },
+  { platform: "zone" },
+  { platform: "tag" },
+  { platform: "time" },
+  { platform: "template" },
+  { platform: "event" },
+];
+
+@customElement("demo-automation-describe-trigger")
+export class DemoAutomationDescribeTrigger extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <ha-card header="Triggers">
+        ${triggers.map(
+          (conf) => html`
+            <div class="trigger">
+              <span>${describeTrigger(conf as any)}</span>
+              <pre>${safeDump(conf)}</pre>
+            </div>
+          `
+        )}
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .trigger {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      span {
+        margin-right: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-automation-describe-trigger": DemoAutomationDescribeTrigger;
+  }
+}
@@ -0,0 +1,87 @@
+import {
+  customElement,
+  html,
+  css,
+  LitElement,
+  TemplateResult,
+  property,
+} from "lit-element";
+import "../../../src/components/ha-card";
+import "../../../src/components/trace/hat-script-graph";
+import "../../../src/components/trace/hat-trace-timeline";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
+import { mockDemoTrace } from "../data/traces/mock-demo-trace";
+import { DemoTrace } from "../data/traces/types";
+
+const traces: DemoTrace[] = [
+  mockDemoTrace({ state: "running" }),
+  mockDemoTrace({ state: "debugged" }),
+  mockDemoTrace({ state: "stopped", script_execution: "failed_conditions" }),
+  mockDemoTrace({ state: "stopped", script_execution: "failed_single" }),
+  mockDemoTrace({ state: "stopped", script_execution: "failed_max_runs" }),
+  mockDemoTrace({ state: "stopped", script_execution: "finished" }),
+  mockDemoTrace({ state: "stopped", script_execution: "aborted" }),
+  mockDemoTrace({
+    state: "stopped",
+    script_execution: "error",
+    error: 'Variable "beer" cannot be None',
+  }),
+  mockDemoTrace({ state: "stopped", script_execution: "cancelled" }),
+];
+
+@customElement("demo-automation-trace-timeline")
+export class DemoAutomationTraceTimeline extends LitElement {
+  @property({ attribute: false }) hass?: HomeAssistant;
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+    return html`
+      ${traces.map(
+        (trace) => html`
+          <ha-card .header=${trace.trace.config.alias}>
+            <div class="card-content">
+              <hat-trace-timeline
+                .hass=${this.hass}
+                .trace=${trace.trace}
+                .logbookEntries=${trace.logbookEntries}
+              ></hat-trace-timeline>
+              <button @click=${() => console.log(trace)}>Log trace</button>
+            </div>
+          </ha-card>
+        `
+      )}
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px;
+      }
+      .card-content {
+        display: flex;
+      }
+      button {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-automation-trace-timeline": DemoAutomationTraceTimeline;
+  }
+}
@@ -4,10 +4,12 @@ import {
  css,
  LitElement,
  TemplateResult,
+  internalProperty,
  property,
 } from "lit-element";
 import "../../../src/components/ha-card";
-import "../../../src/components/trace/hat-trace";
+import "../../../src/components/trace/hat-script-graph";
+import "../../../src/components/trace/hat-trace-timeline";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import { HomeAssistant } from "../../../src/types";
 import { DemoTrace } from "../data/traces/types";
@@ -20,20 +22,38 @@ const traces: DemoTrace[] = [basicTrace, motionLightTrace];
 export class DemoAutomationTrace extends LitElement {
  @property({ attribute: false }) hass?: HomeAssistant;

+  @internalProperty() private _selected = {};
+
  protected render(): TemplateResult {
    if (!this.hass) {
      return html``;
    }
    return html`
      ${traces.map(
-        (trace) => html`
-          <ha-card .heading=${trace.trace.config.alias}>
+        (trace, idx) => html`
+          <ha-card .header=${trace.trace.config.alias}>
            <div class="card-content">
-              <hat-trace
+              <hat-script-graph
+                .trace=${trace.trace}
+                .selected=${this._selected[idx]}
+                @graph-node-selected=${(ev) => {
+                  this._selected = { ...this._selected, [idx]: ev.detail.path };
+                }}
+              ></hat-script-graph>
+              <hat-trace-timeline
+                allowPick
                .hass=${this.hass}
                .trace=${trace.trace}
                .logbookEntries=${trace.logbookEntries}
-              ></hat-trace>
+                .selectedPath=${this._selected[idx]}
+                @value-changed=${(ev) => {
+                  this._selected = {
+                    ...this._selected,
+                    [idx]: ev.detail.value,
+                  };
+                }}
+              ></hat-trace-timeline>
+              <button @click=${() => console.log(trace)}>Log trace</button>
            </div>
          </ha-card>
        `
@@ -53,6 +73,20 @@ export class DemoAutomationTrace extends LitElement {
        max-width: 600px;
        margin: 24px;
      }
+      .card-content {
+        display: flex;
+      }
+      .card-content > * {
+        margin-right: 16px;
+      }
+      .card-content > *:last-child {
+        margin-right: 0;
+      }
+      button {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
    `;
  }
 }
@@ -0,0 +1,350 @@
+import {
+  customElement,
+  html,
+  css,
+  internalProperty,
+  LitElement,
+  TemplateResult,
+  property,
+} from "lit-element";
+import "../../../src/components/ha-formfield";
+import "../../../src/components/ha-switch";
+
+import { IntegrationManifest } from "../../../src/data/integration";
+
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
+import "../../../src/panels/config/integrations/ha-integration-card";
+import "../../../src/panels/config/integrations/ha-ignored-config-entry-card";
+import "../../../src/panels/config/integrations/ha-config-flow-card";
+import type {
+  ConfigEntryExtended,
+  DataEntryFlowProgressExtended,
+} from "../../../src/panels/config/integrations/ha-config-integrations";
+import { DeviceRegistryEntry } from "../../../src/data/device_registry";
+import { EntityRegistryEntry } from "../../../src/data/entity_registry";
+import { classMap } from "lit-html/directives/class-map";
+
+const createConfigEntry = (
+  title: string,
+  override: Partial<ConfigEntryExtended> = {}
+): ConfigEntryExtended => ({
+  entry_id: title,
+  domain: "esphome",
+  localized_domain_name: "ESPHome",
+  title,
+  source: "zeroconf",
+  state: "loaded",
+  connection_class: "local_push",
+  supports_options: false,
+  supports_unload: true,
+  disabled_by: null,
+  reason: null,
+  ...override,
+});
+
+const createManifest = (
+  isCustom: boolean,
+  isCloud: boolean,
+  name = "ESPHome"
+): IntegrationManifest => ({
+  name,
+  domain: "esphome",
+  is_built_in: !isCustom,
+  config_flow: false,
+  documentation: "https://www.home-assistant.io/integrations/esphome/",
+  iot_class: isCloud ? "cloud_polling" : "local_polling",
+});
+
+const loadedEntry = createConfigEntry("Loaded");
+const nameAsDomainEntry = createConfigEntry("ESPHome");
+const longNameEntry = createConfigEntry(
+  "Entry with a super long name that is going to the next line"
+);
+const configPanelEntry = createConfigEntry("Config Panel", {
+  domain: "mqtt",
+  localized_domain_name: "MQTT",
+});
+const optionsFlowEntry = createConfigEntry("Options Flow", {
+  supports_options: true,
+});
+const setupErrorEntry = createConfigEntry("Setup Error", {
+  state: "setup_error",
+});
+const migrationErrorEntry = createConfigEntry("Migration Error", {
+  state: "migration_error",
+});
+const setupRetryEntry = createConfigEntry("Setup Retry", {
+  state: "setup_retry",
+});
+const setupRetryReasonEntry = createConfigEntry("Setup Retry", {
+  state: "setup_retry",
+  reason: "connection_error",
+});
+const setupRetryReasonMissingKeyEntry = createConfigEntry("Setup Retry", {
+  state: "setup_retry",
+  reason: "resolve_error",
+});
+const failedUnloadEntry = createConfigEntry("Failed Unload", {
+  state: "failed_unload",
+});
+const notLoadedEntry = createConfigEntry("Not Loaded", { state: "not_loaded" });
+const disabledEntry = createConfigEntry("Disabled", {
+  state: "not_loaded",
+  disabled_by: "user",
+});
+const disabledFailedUnloadEntry = createConfigEntry(
+  "Disabled - Failed Unload",
+  {
+    state: "failed_unload",
+    disabled_by: "user",
+  }
+);
+
+const configFlows: DataEntryFlowProgressExtended[] = [
+  {
+    flow_id: "adbb401329d8439ebb78ef29837826a8",
+    handler: "roku",
+    context: {
+      source: "ssdp",
+      unique_id: "YF008D862864",
+      title_placeholders: {
+        name: "Living room Roku",
+      },
+    },
+    step_id: "discovery_confirm",
+    localized_title: "Living room Roku",
+  },
+  {
+    flow_id: "adbb401329d8439ebb78ef29837826a8",
+    handler: "hue",
+    context: {
+      source: "reauth",
+      unique_id: "YF008D862864",
+      title_placeholders: {
+        name: "Living room Roku",
+      },
+    },
+    step_id: "discovery_confirm",
+    localized_title: "Philips Hue",
+  },
+];
+
+const configEntries: Array<{
+  items: ConfigEntryExtended[];
+  is_custom?: boolean;
+  disabled?: boolean;
+  highlight?: string;
+}> = [
+  { items: [loadedEntry] },
+  { items: [configPanelEntry] },
+  { items: [optionsFlowEntry] },
+  { items: [nameAsDomainEntry] },
+  { items: [longNameEntry] },
+  { items: [setupErrorEntry] },
+  { items: [migrationErrorEntry] },
+  { items: [setupRetryEntry] },
+  { items: [setupRetryReasonEntry] },
+  { items: [setupRetryReasonMissingKeyEntry] },
+  { items: [failedUnloadEntry] },
+  { items: [notLoadedEntry] },
+  {
+    items: [
+      loadedEntry,
+      setupErrorEntry,
+      migrationErrorEntry,
+      longNameEntry,
+      setupRetryEntry,
+      failedUnloadEntry,
+      notLoadedEntry,
+      disabledEntry,
+      nameAsDomainEntry,
+      configPanelEntry,
+      optionsFlowEntry,
+    ],
+  },
+  { disabled: true, items: [disabledEntry] },
+  { disabled: true, items: [disabledFailedUnloadEntry] },
+  {
+    disabled: true,
+    items: [disabledEntry, disabledFailedUnloadEntry],
+  },
+  {
+    items: [loadedEntry, configPanelEntry],
+    highlight: "Loaded",
+  },
+];
+
+const createEntityRegistryEntries = (
+  item: ConfigEntryExtended
+): EntityRegistryEntry[] => [
+  {
+    config_entry_id: item.entry_id,
+    device_id: "mock-device-id",
+    area_id: null,
+    disabled_by: null,
+    entity_id: "binary_sensor.updater",
+    name: null,
+    icon: null,
+    platform: "updater",
+  },
+];
+
+const createDeviceRegistryEntries = (
+  item: ConfigEntryExtended
+): DeviceRegistryEntry[] => [
+  {
+    entry_type: null,
+    config_entries: [item.entry_id],
+    connections: [],
+    manufacturer: "ESPHome",
+    model: "Mock Device",
+    name: "Tag Reader",
+    sw_version: null,
+    id: "mock-device-id",
+    identifiers: [],
+    via_device_id: null,
+    area_id: null,
+    name_by_user: null,
+    disabled_by: null,
+  },
+];
+
+@customElement("demo-integration-card")
+export class DemoIntegrationCard extends LitElement {
+  @property({ attribute: false }) hass?: HomeAssistant;
+
+  @internalProperty() isCustomIntegration = false;
+
+  @internalProperty() isCloud = false;
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+    return html`
+      <div class="container">
+        <div class="filters">
+          <ha-formfield label="Custom Integration">
+            <ha-switch @change=${this._toggleCustomIntegration}></ha-switch>
+          </ha-formfield>
+          <ha-formfield label="Relies on cloud">
+            <ha-switch @change=${this._toggleCloud}></ha-switch>
+          </ha-formfield>
+        </div>
+
+        <ha-ignored-config-entry-card
+          .hass=${this.hass}
+          .entry=${createConfigEntry("Ignored Entry")}
+          .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
+        ></ha-ignored-config-entry-card>
+
+        ${configFlows.map(
+          (flow) => html`
+            <ha-config-flow-card
+              .hass=${this.hass}
+              .flow=${flow}
+              .manifest=${createManifest(
+                this.isCustomIntegration,
+                this.isCloud,
+                flow.handler === "roku" ? "Roku" : "Philips Hue"
+              )}
+            ></ha-config-flow-card>
+          `
+        )}
+        ${configEntries.map(
+          (info) => html`
+            <ha-integration-card
+              class=${classMap({
+                highlight: info.highlight !== undefined,
+              })}
+              .hass=${this.hass}
+              domain="esphome"
+              .items=${info.items}
+              .manifest=${createManifest(
+                this.isCustomIntegration,
+                this.isCloud
+              )}
+              .entityRegistryEntries=${createEntityRegistryEntries(
+                info.items[0]
+              )}
+              .deviceRegistryEntries=${createDeviceRegistryEntries(
+                info.items[0]
+              )}
+              ?disabled=${info.disabled}
+              .selectedConfigEntryId=${info.highlight}
+            ></ha-integration-card>
+          `
+        )}
+      </div>
+      <div class="container">
+        <!-- One that is standalone to see how it increases height if height
+           not defined by other cards. -->
+        <ha-integration-card
+          .hass=${this.hass}
+          domain="esphome"
+          .items=${[
+            loadedEntry,
+            setupErrorEntry,
+            migrationErrorEntry,
+            setupRetryEntry,
+            failedUnloadEntry,
+          ]}
+          .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
+          .entityRegistryEntries=${createEntityRegistryEntries(loadedEntry)}
+          .deviceRegistryEntries=${createDeviceRegistryEntries(loadedEntry)}
+        ></ha-integration-card>
+      </div>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    // Normally this string is loaded from backend
+    hass.addTranslations(
+      {
+        "component.esphome.config.error.connection_error":
+          "Can't connect to ESP. Please make sure your YAML file contains an 'api:' line.",
+      },
+      "en"
+    );
+  }
+
+  private _toggleCustomIntegration() {
+    this.isCustomIntegration = !this.isCustomIntegration;
+  }
+
+  private _toggleCloud() {
+    this.isCloud = !this.isCloud;
+  }
+
+  static get styles() {
+    return css`
+      .container {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        grid-gap: 16px 16px;
+        padding: 8px 16px 16px;
+        margin-bottom: 64px;
+      }
+
+      .container > * {
+        max-width: 500px;
+      }
+
+      ha-formfield {
+        margin: 8px 0;
+        display: block;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-integration-card": DemoIntegrationCard;
+  }
+}
@@ -177,8 +177,9 @@ class HassioAddonDashboard extends LitElement {
      const requestedAddon = extractSearchParam("addon");
      if (requestedAddon) {
        const addonsInfo = await fetchHassioAddonsInfo(this.hass);
-        const validAddon = addonsInfo.addons
-          .some((addon) => addon.slug === requestedAddon);
+        const validAddon = addonsInfo.addons.some(
+          (addon) => addon.slug === requestedAddon
+        );
        if (!validAddon) {
          this._error = this.supervisor.localize("my.error_addon_not_found");
        } else {
@@ -242,14 +242,18 @@ class HassioAddonInfo extends LitElement {
              ? html`
                  Current version: ${this.addon.version}
                  <div class="changelog" @click=${this._openChangelog}>
-                    (<span class="changelog-link">${
-                      this.supervisor.localize("addon.dashboard.changelog")}</span
+                    (<span class="changelog-link"
+                      >${this.supervisor.localize(
+                        "addon.dashboard.changelog"
+                      )}</span
                    >)
                  </div>
                `
-              : html`<span class="changelog-link" @click=${this._openChangelog}>${
-                  this.supervisor.localize("addon.dashboard.changelog")
-                }</span>`}
+              : html`<span class="changelog-link" @click=${this._openChangelog}
+                  >${this.supervisor.localize(
+                    "addon.dashboard.changelog"
+                  )}</span
+                >`}
          </div>

          <div class="description light-color">
@@ -73,7 +73,7 @@ class SupervisorMetric extends LitElement {
        );
      }
      .value {
-        width: 42px;
+        width: 48px;
        padding-right: 4px;
      }
    `;
@@ -18,7 +18,6 @@ import {
 } from "lit-element";
 import { cache } from "lit-html/directives/cache";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-chips";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
@@ -44,7 +44,10 @@ export class HassioMain extends SupervisorBaseElement {
    // We changed the navigate event to fire directly on the window, as that's
    // where we are listening for it. However, the older panel_custom will
    // listen on this element for navigation events, so we need to forward them.
-    window.addEventListener("location-changed", (ev) =>
+
+    // Joakim - April 26, 2021
+    // Due to changes in behavior in Google Chrome, we changed navigate to fire on the top element
+    top.addEventListener("location-changed", (ev) =>
      // @ts-ignore
      fireEvent(this, ev.type, ev.detail, {
        bubbles: false,
@@ -8,6 +8,7 @@ import {
  property,
  TemplateResult,
 } from "lit-element";
+import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
@@ -38,6 +39,7 @@ import "../components/supervisor-metric";
 import { hassioStyle } from "../resources/hassio-style";

 const UNSUPPORTED_REASON_URL = {
+  apparmor: "/more-info/unsupported/apparmor",
  container: "/more-info/unsupported/container",
  dbus: "/more-info/unsupported/dbus",
  docker_configuration: "/more-info/unsupported/docker_configuration",
@@ -150,30 +152,32 @@ class HassioSupervisorInfo extends LitElement {
            </ha-settings-row>

            ${this.supervisor.supervisor.supported
-              ? html` <ha-settings-row three-line>
-                  <span slot="heading">
-                    ${this.supervisor.localize(
-                      "system.supervisor.share_diagnostics"
-                    )}
-                  </span>
-                  <div slot="description" class="diagnostics-description">
-                    ${this.supervisor.localize(
-                      "system.supervisor.share_diagnostics_description"
-                    )}
-                    <button
-                      class="link"
-                      .title=${this.supervisor.localize("common.show_more")}
-                      @click=${this._diagnosticsInformationDialog}
-                    >
-                      ${this.supervisor.localize("common.learn_more")}
-                    </button>
-                  </div>
-                  <ha-switch
-                    haptic
-                    .checked=${this.supervisor.supervisor.diagnostics}
-                    @change=${this._toggleDiagnostics}
-                  ></ha-switch>
-                </ha-settings-row>`
+              ? !atLeastVersion(this.hass.config.version, 2021, 4)
+                ? html` <ha-settings-row three-line>
+                    <span slot="heading">
+                      ${this.supervisor.localize(
+                        "system.supervisor.share_diagnostics"
+                      )}
+                    </span>
+                    <div slot="description" class="diagnostics-description">
+                      ${this.supervisor.localize(
+                        "system.supervisor.share_diagnostics_description"
+                      )}
+                      <button
+                        class="link"
+                        .title=${this.supervisor.localize("common.show_more")}
+                        @click=${this._diagnosticsInformationDialog}
+                      >
+                        ${this.supervisor.localize("common.learn_more")}
+                      </button>
+                    </div>
+                    <ha-switch
+                      haptic
+                      .checked=${this.supervisor.supervisor.diagnostics}
+                      @change=${this._toggleDiagnostics}
+                    ></ha-switch>
+                  </ha-settings-row>`
+                : ""
              : html`<div class="error">
                  ${this.supervisor.localize(
                    "system.supervisor.unsupported_title"
@@ -265,13 +269,15 @@ class HassioSupervisorInfo extends LitElement {
          </b>
          <br /><br />
          ${this.supervisor.localize("system.supervisor.beta_release_items")}
-          <li>Home Assistant Core</li>
-          <li>Home Assistant Supervisor</li>
-          <li>Home Assistant Operating System</li>
+          <ul>
+            <li>Home Assistant Core</li>
+            <li>Home Assistant Supervisor</li>
+            <li>Home Assistant Operating System</li>
+          </ul>
          <br />
-          ${this.supervisor.localize("system.supervisor.join_beta_action")}`,
+          ${this.supervisor.localize("system.supervisor.beta_join_confirm")}`,
        confirmText: this.supervisor.localize(
-          "system.supervisor.beta_join_confirm"
+          "system.supervisor.join_beta_action"
        ),
        dismissText: this.supervisor.localize("common.cancel"),
      });
@@ -100,7 +100,6 @@
    "@webcomponents/webcomponentsjs": "^2.2.7",
    "chart.js": "~2.8.0",
    "chartjs-chart-timeline": "^0.3.0",
-    "codemirror": "^5.49.0",
    "comlink": "^4.3.0",
    "core-js": "^3.6.5",
    "cropperjs": "^1.5.7",
@@ -109,7 +108,7 @@
    "fecha": "^4.2.0",
    "fuse.js": "^6.0.0",
    "google-timezones-json": "^1.0.2",
-    "hls.js": "^0.13.2",
+    "hls.js": "^1.0.1",
    "home-assistant-js-websocket": "^5.9.0",
    "idb-keyval": "^3.2.0",
    "intl-messageformat": "^8.3.9",
@@ -168,7 +167,6 @@
    "@types/chromecast-caf-receiver": "^5.0.11",
    "@types/chromecast-caf-sender": "^1.0.3",
    "@types/codemirror": "^0.0.97",
-    "@types/hls.js": "^0.12.3",
    "@types/js-yaml": "^3.12.1",
    "@types/leaflet": "^1.4.3",
    "@types/leaflet-draw": "^1.0.1",
@@ -228,7 +226,7 @@
    "terser-webpack-plugin": "^5.1.1",
    "ts-lit-plugin": "^1.2.1",
    "ts-mocha": "^7.0.0",
-    "typescript": "^4.0.3",
+    "typescript": "^4.2.4",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0",
    "webpack": "^5.24.1",
@@ -10,10 +10,10 @@ function patch(version) {

 function today() {
  const now = new Date();
-  return `${now.getFullYear()}${String(now.getMonth() + 1).padStart(
+  return `${now.getUTCFullYear()}${String(now.getUTCMonth() + 1).padStart(
    2,
    "0"
-  )}${String(now.getDate()).padStart(2, "0")}.0`;
+  )}${String(now.getUTCDate()).padStart(2, "0")}.0`;
 }

 function auto(version) {
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages

 setup(
    name="home-assistant-frontend",
-    version="20210324.0",
+    version="20210423.0",
    description="The Home Assistant frontend",
    url="https://github.com/home-assistant/home-assistant-polymer",
    author="The Home Assistant Authors",
@@ -8,6 +8,7 @@ import {
  PropertyValues,
 } from "lit-element";
 import punycode from "punycode";
+import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import { extractSearchParamsObject } from "../common/url/search-params";
 import {
  AuthProvider,
@@ -116,6 +117,20 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
    this._fetchAuthProviders();
    this._fetchDiscoveryInfo();

+    if (matchMedia("(prefers-color-scheme: dark)").matches) {
+      applyThemesOnElement(
+        document.documentElement,
+        {
+          default_theme: "default",
+          default_dark_theme: null,
+          themes: {},
+          darkMode: false,
+        },
+        "default",
+        { dark: true }
+      );
+    }
+
    if (!this.redirectUri) {
      return;
    }
@@ -62,7 +62,7 @@ export const ensureConnectedCastSession = (cast: CastManager, auth: Auth) => {
    return undefined;
  }

-  return new Promise((resolve) => {
+  return new Promise<void>((resolve) => {
    const unsub = cast.addEventListener("connection-changed", () => {
      if (cast.castConnectedToOurHass) {
        unsub();
@@ -1,9 +1,10 @@
 import { format } from "fecha";
+import { FrontendTranslationData } from "../../data/translation";
 import { toLocaleDateStringSupportsOptions } from "./check_options_support";

 export const formatDate = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleDateString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleDateString(locales.language, {
        year: "numeric",
        month: "long",
        day: "numeric",
@@ -11,8 +12,8 @@ export const formatDate = toLocaleDateStringSupportsOptions
  : (dateObj: Date) => format(dateObj, "longDate");

 export const formatDateWeekday = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleDateString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleDateString(locales.language, {
        weekday: "long",
        month: "short",
        day: "numeric",
@@ -1,9 +1,10 @@
 import { format } from "fecha";
+import { FrontendTranslationData } from "../../data/translation";
 import { toLocaleStringSupportsOptions } from "./check_options_support";

 export const formatDateTime = toLocaleStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleString(locales.language, {
        year: "numeric",
        month: "long",
        day: "numeric",
@@ -13,8 +14,8 @@ export const formatDateTime = toLocaleStringSupportsOptions
  : (dateObj: Date) => format(dateObj, "MMMM D, YYYY, HH:mm");

 export const formatDateTimeWithSeconds = toLocaleStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleString(locales.language, {
        year: "numeric",
        month: "long",
        day: "numeric",
@@ -1,17 +1,18 @@
 import { format } from "fecha";
+import { FrontendTranslationData } from "../../data/translation";
 import { toLocaleTimeStringSupportsOptions } from "./check_options_support";

 export const formatTime = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleTimeString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleTimeString(locales.language, {
        hour: "numeric",
        minute: "2-digit",
      })
  : (dateObj: Date) => format(dateObj, "shortTime");

 export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleTimeString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleTimeString(locales.language, {
        hour: "numeric",
        minute: "2-digit",
        second: "2-digit",
@@ -19,8 +20,8 @@ export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
  : (dateObj: Date) => format(dateObj, "mediumTime");

 export const formatTimeWeekday = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleTimeString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleTimeString(locales.language, {
        weekday: "long",
        hour: "numeric",
        minute: "2-digit",
@@ -70,13 +70,18 @@ export const applyThemesOnElement = (
      themeRules["text-accent-color"] =
        rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
    }
+
+    // Nothing was changed
+    if (element._themes?.cacheKey === cacheKey) {
+      return;
+    }
  }

  if (selectedTheme && themes.themes[selectedTheme]) {
    themeRules = themes.themes[selectedTheme];
  }

-  if (!element._themes && !Object.keys(themeRules).length) {
+  if (!element._themes?.keys && !Object.keys(themeRules).length) {
    // No styles to reset, and no styles to set
    return;
  }
@@ -87,8 +92,8 @@ export const applyThemesOnElement = (
      : undefined;

  // Add previous set keys to reset them, and new theme
-  const styles = { ...element._themes, ...newTheme?.styles };
-  element._themes = newTheme?.keys;
+  const styles = { ...element._themes?.keys, ...newTheme?.styles };
+  element._themes = { cacheKey, keys: newTheme?.keys };

  // Set and/or reset styles
  if (element.updateStyles) {
@@ -1,6 +1,10 @@
-export const ensureArray = (value?: any) => {
-  if (!value || Array.isArray(value)) {
+type NonUndefined<T> = T extends undefined ? never : T;
+
+export function ensureArray(value: undefined): undefined;
+export function ensureArray<T>(value: T | T[]): NonUndefined<T>[];
+export function ensureArray(value) {
+  if (value === undefined || Array.isArray(value)) {
    return value;
  }
  return [value];
-};
+}
@@ -1,5 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
+import { FrontendTranslationData } from "../../data/translation";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
@@ -10,7 +11,7 @@ import { computeStateDomain } from "./compute_state_domain";
 export const computeStateDisplay = (
  localize: LocalizeFunc,
  stateObj: HassEntity,
-  language: string,
+  locale: FrontendTranslationData,
  state?: string
 ): string => {
  const compareState = state !== undefined ? state : stateObj.state;
@@ -20,7 +21,7 @@ export const computeStateDisplay = (
  }

  if (stateObj.attributes.unit_of_measurement) {
-    return `${formatNumber(compareState, language)} ${
+    return `${formatNumber(compareState, locale)} ${
      stateObj.attributes.unit_of_measurement
    }`;
  }
@@ -35,7 +36,7 @@ export const computeStateDisplay = (
        stateObj.attributes.month - 1,
        stateObj.attributes.day
      );
-      return formatDate(date, language);
+      return formatDate(date, locale);
    }
    if (!stateObj.attributes.has_date) {
      const now = new Date();
@@ -48,7 +49,7 @@ export const computeStateDisplay = (
        stateObj.attributes.hour,
        stateObj.attributes.minute
      );
-      return formatTime(date, language);
+      return formatTime(date, locale);
    }

    date = new Date(
@@ -58,7 +59,7 @@ export const computeStateDisplay = (
      stateObj.attributes.hour,
      stateObj.attributes.minute
    );
-    return formatDateTime(date, language);
+    return formatDateTime(date, locale);
  }

  if (domain === "humidifier") {
@@ -67,8 +68,13 @@ export const computeStateDisplay = (
    }
  }

-  if (domain === "counter") {
-    return formatNumber(compareState, language);
+  // `counter` `number` and `input_number` domains do not have a unit of measurement but should still use `formatNumber`
+  if (
+    domain === "counter" ||
+    domain === "number" ||
+    domain === "input_number"
+  ) {
+    return formatNumber(compareState, locale);
  }

  return (
@@ -12,16 +12,24 @@ declare global {
 export const navigate = (_node: any, path: string, replace = false) => {
  if (__DEMO__) {
    if (replace) {
-      history.replaceState(null, "", `${location.pathname}#${path}`);
+      top.history.replaceState(
+        top.history.state?.root ? { root: true } : null,
+        "",
+        `${top.location.pathname}#${path}`
+      );
    } else {
-      window.location.hash = path;
+      top.location.hash = path;
    }
  } else if (replace) {
-    history.replaceState(null, "", path);
+    top.history.replaceState(
+      top.history.state?.root ? { root: true } : null,
+      "",
+      path
+    );
  } else {
-    history.pushState(null, "", path);
+    top.history.pushState(null, "", path);
  }
-  fireEvent(window, "location-changed", {
+  fireEvent(top, "location-changed", {
    replace,
  });
 };
@@ -34,14 +34,12 @@ const _maxLen = 128;

 function initTable() {
  const table: number[][] = [];
-  const row: number[] = [0];
-  for (let i = 1; i <= _maxLen; i++) {
-    row.push(-i);
+  const row: number[] = [];
+  for (let i = 0; i <= _maxLen; i++) {
+    row[i] = 0;
  }
  for (let i = 0; i <= _maxLen; i++) {
-    const thisRow = row.slice(0);
-    thisRow[0] = -i;
-    table.push(thisRow);
+    table.push(row.slice(0));
  }
  return table;
 }
@@ -50,7 +48,7 @@ function isSeparatorAtPos(value: string, index: number): boolean {
  if (index < 0 || index >= value.length) {
    return false;
  }
-  const code = value.charCodeAt(index);
+  const code = value.codePointAt(index);
  switch (code) {
    case CharCode.Underline:
    case CharCode.Dash:
@@ -62,8 +60,16 @@ function isSeparatorAtPos(value: string, index: number): boolean {
    case CharCode.DoubleQuote:
    case CharCode.Colon:
    case CharCode.DollarSign:
+    case CharCode.LessThan:
+    case CharCode.OpenParen:
+    case CharCode.OpenSquareBracket:
      return true;
+    case undefined:
+      return false;
    default:
+      if (isEmojiImprecise(code)) {
+        return true;
+      }
      return false;
  }
 }
@@ -92,10 +98,15 @@ function isPatternInWord(
  patternLen: number,
  wordLow: string,
  wordPos: number,
-  wordLen: number
+  wordLen: number,
+  fillMinWordPosArr = false
 ): boolean {
  while (patternPos < patternLen && wordPos < wordLen) {
    if (patternLow[patternPos] === wordLow[wordPos]) {
+      if (fillMinWordPosArr) {
+        // Remember the min word position for each pattern position
+        _minWordMatchPos[patternPos] = wordPos;
+      }
      patternPos += 1;
    }
    wordPos += 1;
@@ -104,42 +115,22 @@ function isPatternInWord(
 }

 enum Arrow {
-  Top = 0b1,
-  Diag = 0b10,
-  Left = 0b100,
+  Diag = 1,
+  Left = 2,
+  LeftLeft = 3,
 }

 /**
- * A tuple of three values.
+ * An array representating a fuzzy match.
+ *
 * 0. the score
- * 1. the matches encoded as bitmask (2^53)
- * 2. the offset at which matching started
+ * 1. the offset at which matching started
+ * 2. `<match_pos_N>`
+ * 3. `<match_pos_1>`
+ * 4. `<match_pos_0>` etc
 */
-export type FuzzyScore = [number, number, number];
-
-interface FilterGlobals {
-  _matchesCount: number;
-  _topMatch2: number;
-  _topScore: number;
-  _wordStart: number;
-  _firstMatchCanBeWeak: boolean;
-  _table: number[][];
-  _scores: number[][];
-  _arrows: Arrow[][];
-}
-
-function initGlobals(): FilterGlobals {
-  return {
-    _matchesCount: 0,
-    _topMatch2: 0,
-    _topScore: 0,
-    _wordStart: 0,
-    _firstMatchCanBeWeak: false,
-    _table: initTable(),
-    _scores: initTable(),
-    _arrows: <Arrow[][]>initTable(),
-  };
-}
+// export type FuzzyScore = [score: number, wordStart: number, ...matches: number[]];// [number, number, number];
+export type FuzzyScore = Array<number>;

 export function fuzzyScore(
  pattern: string,
@@ -150,7 +141,6 @@ export function fuzzyScore(
  wordStart: number,
  firstMatchCanBeWeak: boolean
 ): FuzzyScore | undefined {
-  const globals = initGlobals();
  const patternLen = pattern.length > _maxLen ? _maxLen : pattern.length;
  const wordLen = word.length > _maxLen ? _maxLen : word.length;

@@ -172,18 +162,30 @@ export function fuzzyScore(
      patternLen,
      wordLow,
      wordStart,
-      wordLen
+      wordLen,
+      true
    )
  ) {
    return undefined;
  }

+  // Find the max matching word position for each pattern position
+  // NOTE: the min matching word position was filled in above, in the `isPatternInWord` call
+  _fillInMaxWordMatchPos(
+    patternLen,
+    wordLen,
+    patternStart,
+    wordStart,
+    patternLow,
+    wordLow
+  );
+
  let row = 1;
  let column = 1;
  let patternPos = patternStart;
  let wordPos = wordStart;

-  let hasStrongFirstMatch = false;
+  const hasStrongFirstMatch = [false];

  // There will be a match, fill in tables
  for (
@@ -191,83 +193,146 @@ export function fuzzyScore(
    patternPos < patternLen;
    row++, patternPos++
  ) {
+    // Reduce search space to possible matching word positions and to possible access from next row
+    const minWordMatchPos = _minWordMatchPos[patternPos];
+    const maxWordMatchPos = _maxWordMatchPos[patternPos];
+    const nextMaxWordMatchPos =
+      patternPos + 1 < patternLen ? _maxWordMatchPos[patternPos + 1] : wordLen;
+
    for (
-      column = 1, wordPos = wordStart;
-      wordPos < wordLen;
+      column = minWordMatchPos - wordStart + 1, wordPos = minWordMatchPos;
+      wordPos < nextMaxWordMatchPos;
      column++, wordPos++
    ) {
-      const score = _doScore(
-        pattern,
-        patternLow,
-        patternPos,
-        patternStart,
-        word,
-        wordLow,
-        wordPos
-      );
+      let score = Number.MIN_SAFE_INTEGER;
+      let canComeDiag = false;

-      if (patternPos === patternStart && score > 1) {
-        hasStrongFirstMatch = true;
+      if (wordPos <= maxWordMatchPos) {
+        score = _doScore(
+          pattern,
+          patternLow,
+          patternPos,
+          patternStart,
+          word,
+          wordLow,
+          wordPos,
+          wordLen,
+          wordStart,
+          _diag[row - 1][column - 1] === 0,
+          hasStrongFirstMatch
+        );
      }

-      globals._scores[row][column] = score;
+      let diagScore = 0;
+      if (score !== Number.MAX_SAFE_INTEGER) {
+        canComeDiag = true;
+        diagScore = score + _table[row - 1][column - 1];
+      }

-      const diag =
-        globals._table[row - 1][column - 1] + (score > 1 ? 1 : score);
-      const top = globals._table[row - 1][column] + -1;
-      const left = globals._table[row][column - 1] + -1;
+      const canComeLeft = wordPos > minWordMatchPos;
+      const leftScore = canComeLeft
+        ? _table[row][column - 1] + (_diag[row][column - 1] > 0 ? -5 : 0)
+        : 0; // penalty for a gap start

-      if (left >= top) {
-        // left or diag
-        if (left > diag) {
-          globals._table[row][column] = left;
-          globals._arrows[row][column] = Arrow.Left;
-        } else if (left === diag) {
-          globals._table[row][column] = left;
-          globals._arrows[row][column] = Arrow.Left || Arrow.Diag;
-        } else {
-          globals._table[row][column] = diag;
-          globals._arrows[row][column] = Arrow.Diag;
-        }
-      } else if (top > diag) {
-        globals._table[row][column] = top;
-        globals._arrows[row][column] = Arrow.Top;
-      } else if (top === diag) {
-        globals._table[row][column] = top;
-        globals._arrows[row][column] = Arrow.Top || Arrow.Diag;
+      const canComeLeftLeft =
+        wordPos > minWordMatchPos + 1 && _diag[row][column - 1] > 0;
+      const leftLeftScore = canComeLeftLeft
+        ? _table[row][column - 2] + (_diag[row][column - 2] > 0 ? -5 : 0)
+        : 0; // penalty for a gap start
+
+      if (
+        canComeLeftLeft &&
+        (!canComeLeft || leftLeftScore >= leftScore) &&
+        (!canComeDiag || leftLeftScore >= diagScore)
+      ) {
+        // always prefer choosing left left to jump over a diagonal because that means a match is earlier in the word
+        _table[row][column] = leftLeftScore;
+        _arrows[row][column] = Arrow.LeftLeft;
+        _diag[row][column] = 0;
+      } else if (canComeLeft && (!canComeDiag || leftScore >= diagScore)) {
+        // always prefer choosing left since that means a match is earlier in the word
+        _table[row][column] = leftScore;
+        _arrows[row][column] = Arrow.Left;
+        _diag[row][column] = 0;
+      } else if (canComeDiag) {
+        _table[row][column] = diagScore;
+        _arrows[row][column] = Arrow.Diag;
+        _diag[row][column] = _diag[row - 1][column - 1] + 1;
      } else {
-        globals._table[row][column] = diag;
-        globals._arrows[row][column] = Arrow.Diag;
+        throw new Error(`not possible`);
      }
    }
  }

  if (_debug) {
-    printTables(pattern, patternStart, word, wordStart, globals);
+    printTables(pattern, patternStart, word, wordStart);
  }

-  if (!hasStrongFirstMatch && !firstMatchCanBeWeak) {
+  if (!hasStrongFirstMatch[0] && !firstMatchCanBeWeak) {
    return undefined;
  }

-  globals._matchesCount = 0;
-  globals._topScore = -100;
-  globals._wordStart = wordStart;
-  globals._firstMatchCanBeWeak = firstMatchCanBeWeak;
+  row--;
+  column--;

-  _findAllMatches2(
-    row - 1,
-    column - 1,
-    patternLen === wordLen ? 1 : 0,
-    0,
-    false,
-    globals
-  );
-  if (globals._matchesCount === 0) {
-    return undefined;
+  const result: FuzzyScore = [_table[row][column], wordStart];
+
+  let backwardsDiagLength = 0;
+  let maxMatchColumn = 0;
+
+  while (row >= 1) {
+    // Find the column where we go diagonally up
+    let diagColumn = column;
+    do {
+      const arrow = _arrows[row][diagColumn];
+      if (arrow === Arrow.LeftLeft) {
+        diagColumn -= 2;
+      } else if (arrow === Arrow.Left) {
+        diagColumn -= 1;
+      } else {
+        // found the diagonal
+        break;
+      }
+    } while (diagColumn >= 1);
+
+    // Overturn the "forwards" decision if keeping the "backwards" diagonal would give a better match
+    if (
+      backwardsDiagLength > 1 && // only if we would have a contiguous match of 3 characters
+      patternLow[patternStart + row - 1] === wordLow[wordStart + column - 1] && // only if we can do a contiguous match diagonally
+      !isUpperCaseAtPos(diagColumn + wordStart - 1, word, wordLow) && // only if the forwards chose diagonal is not an uppercase
+      backwardsDiagLength + 1 > _diag[row][diagColumn] // only if our contiguous match would be longer than the "forwards" contiguous match
+    ) {
+      diagColumn = column;
+    }
+
+    if (diagColumn === column) {
+      // this is a contiguous match
+      backwardsDiagLength++;
+    } else {
+      backwardsDiagLength = 1;
+    }
+
+    if (!maxMatchColumn) {
+      // remember the last matched column
+      maxMatchColumn = diagColumn;
+    }
+
+    row--;
+    column = diagColumn - 1;
+    result.push(column);
  }

-  return [globals._topScore, globals._topMatch2, wordStart];
+  if (wordLen === patternLen) {
+    // the word matches the pattern with all characters!
+    // giving the score a total match boost (to come up ahead other words)
+    result[0] += 2;
+  }
+
+  // Add 1 penalty for each skipped character in the word
+  const skippedCharsCount = maxMatchColumn - patternLen;
+  result[0] -= skippedCharsCount;
+
+  return result;
 }

 function _doScore(
@@ -277,50 +342,81 @@ function _doScore(
  patternStart: number,
  word: string,
  wordLow: string,
-  wordPos: number
-) {
+  wordPos: number,
+  wordLen: number,
+  wordStart: number,
+  newMatchStart: boolean,
+  outFirstMatchStrong: boolean[]
+): number {
  if (patternLow[patternPos] !== wordLow[wordPos]) {
-    return -1;
+    return Number.MIN_SAFE_INTEGER;
  }
+
+  let score = 1;
+  let isGapLocation = false;
  if (wordPos === patternPos - patternStart) {
    // common prefix: `foobar <-> foobaz`
    //                            ^^^^^
-    if (pattern[patternPos] === word[wordPos]) {
-      return 7;
-    }
-    return 5;
-  }
-
-  if (
+    score = pattern[patternPos] === word[wordPos] ? 7 : 5;
+  } else if (
    isUpperCaseAtPos(wordPos, word, wordLow) &&
    (wordPos === 0 || !isUpperCaseAtPos(wordPos - 1, word, wordLow))
  ) {
    // hitting upper-case: `foo <-> forOthers`
    //                              ^^ ^
-    if (pattern[patternPos] === word[wordPos]) {
-      return 7;
-    }
-    return 5;
-  }
-
-  if (
+    score = pattern[patternPos] === word[wordPos] ? 7 : 5;
+    isGapLocation = true;
+  } else if (
    isSeparatorAtPos(wordLow, wordPos) &&
    (wordPos === 0 || !isSeparatorAtPos(wordLow, wordPos - 1))
  ) {
    // hitting a separator: `. <-> foo.bar`
    //                                ^
-    return 5;
-  }
-
-  if (
+    score = 5;
+  } else if (
    isSeparatorAtPos(wordLow, wordPos - 1) ||
    isWhitespaceAtPos(wordLow, wordPos - 1)
  ) {
    // post separator: `foo <-> bar_foo`
    //                              ^^^
-    return 5;
+    score = 5;
+    isGapLocation = true;
  }
-  return 1;
+
+  if (score > 1 && patternPos === patternStart) {
+    outFirstMatchStrong[0] = true;
+  }
+
+  if (!isGapLocation) {
+    isGapLocation =
+      isUpperCaseAtPos(wordPos, word, wordLow) ||
+      isSeparatorAtPos(wordLow, wordPos - 1) ||
+      isWhitespaceAtPos(wordLow, wordPos - 1);
+  }
+
+  //
+  if (patternPos === patternStart) {
+    // first character in pattern
+    if (wordPos > wordStart) {
+      // the first pattern character would match a word character that is not at the word start
+      // so introduce a penalty to account for the gap preceding this match
+      score -= isGapLocation ? 3 : 5;
+    }
+  } else if (newMatchStart) {
+    // this would be the beginning of a new match (i.e. there would be a gap before this location)
+    score += isGapLocation ? 2 : 0;
+  } else {
+    // this is part of a contiguous match, so give it a slight bonus, but do so only if it would not be a prefered gap location
+    score += isGapLocation ? 0 : 1;
+  }
+
+  if (wordPos + 1 === wordLen) {
+    // we always penalize gaps, but this gives unfair advantages to a match that would match the last character in the word
+    // so pretend there is a gap after the last character in the word to normalize things
+    score -= isGapLocation ? 3 : 5;
+  }
+
+  return score;
 }

 function printTable(
@@ -360,104 +456,96 @@ function printTables(
  pattern: string,
  patternStart: number,
  word: string,
-  wordStart: number,
-  globals: FilterGlobals
+  wordStart: number
 ): void {
  pattern = pattern.substr(patternStart);
  word = word.substr(wordStart);
-  console.log(
-    printTable(globals._table, pattern, pattern.length, word, word.length)
-  );
-  console.log(
-    printTable(globals._arrows, pattern, pattern.length, word, word.length)
-  );
-  console.log(
-    printTable(globals._scores, pattern, pattern.length, word, word.length)
-  );
+  console.log(printTable(_table, pattern, pattern.length, word, word.length));
+  console.log(printTable(_arrows, pattern, pattern.length, word, word.length));
+  console.log(printTable(_diag, pattern, pattern.length, word, word.length));
 }

-function _findAllMatches2(
-  row: number,
-  column: number,
-  total: number,
-  matches: number,
-  lastMatched: boolean,
-  globals: FilterGlobals
-): void {
-  if (globals._matchesCount >= 10 || total < -25) {
-    // stop when having already 10 results, or
-    // when a potential alignment as already 5 gaps
-    return;
+const _minWordMatchPos = initArr(2 * _maxLen); // min word position for a certain pattern position
+const _maxWordMatchPos = initArr(2 * _maxLen); // max word position for a certain pattern position
+const _diag = initTable(); // the length of a contiguous diagonal match
+const _table = initTable();
+const _arrows = <Arrow[][]>initTable();
+
+function initArr(maxLen: number) {
+  const row: number[] = [];
+  for (let i = 0; i <= maxLen; i++) {
+    row[i] = 0;
  }
+  return row;
+}

-  let simpleMatchCount = 0;
+function _fillInMaxWordMatchPos(
+  patternLen: number,
+  wordLen: number,
+  patternStart: number,
+  wordStart: number,
+  patternLow: string,
+  wordLow: string
+) {
+  let patternPos = patternLen - 1;
+  let wordPos = wordLen - 1;
+  while (patternPos >= patternStart && wordPos >= wordStart) {
+    if (patternLow[patternPos] === wordLow[wordPos]) {
+      _maxWordMatchPos[patternPos] = wordPos;
+      patternPos--;
+    }
+    wordPos--;
+  }
+}

-  while (row > 0 && column > 0) {
-    const score = globals._scores[row][column];
-    const arrow = globals._arrows[row][column];
+export interface FuzzyScorer {
+  (
+    pattern: string,
+    lowPattern: string,
+    patternPos: number,
+    word: string,
+    lowWord: string,
+    wordPos: number,
+    firstMatchCanBeWeak: boolean
+  ): FuzzyScore | undefined;
+}

-    if (arrow === Arrow.Left) {
-      // left -> no match, skip a word character
-      column -= 1;
-      if (lastMatched) {
-        total -= 5; // new gap penalty
-      } else if (matches !== 0) {
-        total -= 1; // gap penalty after first match
-      }
-      lastMatched = false;
-      simpleMatchCount = 0;
-    } else if (arrow && Arrow.Diag) {
-      if (arrow && Arrow.Left) {
-        // left
-        _findAllMatches2(
-          row,
-          column - 1,
-          matches !== 0 ? total - 1 : total, // gap penalty after first match
-          matches,
-          lastMatched,
-          globals
-        );
-      }
-
-      // diag
-      total += score;
-      row -= 1;
-      column -= 1;
-      lastMatched = true;
-
-      // match -> set a 1 at the word pos
-      matches += 2 ** (column + globals._wordStart);
-
-      // count simple matches and boost a row of
-      // simple matches when they yield in a
-      // strong match.
-      if (score === 1) {
-        simpleMatchCount += 1;
-
-        if (row === 0 && !globals._firstMatchCanBeWeak) {
-          // when the first match is a weak
-          // match we discard it
-          return;
-        }
-      } else {
-        // boost
-        total += 1 + simpleMatchCount * (score - 1);
-        simpleMatchCount = 0;
-      }
+export function createMatches(score: undefined | FuzzyScore): Match[] {
+  if (typeof score === "undefined") {
+    return [];
+  }
+  const res: Match[] = [];
+  const wordPos = score[1];
+  for (let i = score.length - 1; i > 1; i--) {
+    const pos = score[i] + wordPos;
+    const last = res[res.length - 1];
+    if (last && last.end === pos) {
+      last.end = pos + 1;
    } else {
-      return;
+      res.push({ start: pos, end: pos + 1 });
    }
  }
-
-  total -= column >= 3 ? 9 : column * 3; // late start penalty
-
-  // dynamically keep track of the current top score
-  // and insert the current best score at head, the rest at tail
-  globals._matchesCount += 1;
-  if (total > globals._topScore) {
-    globals._topScore = total;
-    globals._topMatch2 = matches;
-  }
+  return res;
 }

-// #endregion
+/**
+ * A fast function (therefore imprecise) to check if code points are emojis.
+ * Generated using https://github.com/alexdima/unicode-utils/blob/master/generate-emoji-test.js
+ */
+export function isEmojiImprecise(x: number): boolean {
+  return (
+    (x >= 0x1f1e6 && x <= 0x1f1ff) ||
+    x === 8986 ||
+    x === 8987 ||
+    x === 9200 ||
+    x === 9203 ||
+    (x >= 9728 && x <= 10175) ||
+    x === 11088 ||
+    x === 11093 ||
+    (x >= 127744 && x <= 128591) ||
+    (x >= 128640 && x <= 128764) ||
+    (x >= 128992 && x <= 129003) ||
+    (x >= 129280 && x <= 129535) ||
+    (x >= 129648 && x <= 129750)
+  );
+}
@@ -10,10 +10,13 @@ import { fuzzyScore } from "./filter";
 * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
 */

-export const fuzzySequentialMatch = (filter: string, ...words: string[]) => {
-  let topScore = 0;
+export const fuzzySequentialMatch = (
+  filter: string,
+  item: ScorableTextItem
+) => {
+  let topScore = Number.NEGATIVE_INFINITY;

-  for (const word of words) {
+  for (const word of item.strings) {
    const scores = fuzzyScore(
      filter,
      filter.toLowerCase(),
@@ -28,22 +31,39 @@ export const fuzzySequentialMatch = (filter: string, ...words: string[]) => {
      continue;
    }

-    // The VS Code implementation of filter treats a score of "0" as just barely a match
-    // But we will typically use this matcher in a .filter(), which interprets 0 as a failure.
-    // By shifting all scores up by 1, we allow "0" matches, while retaining score precedence
-    const score = scores[0] + 1;
+    // The VS Code implementation of filter returns a 0 for a weak match.
+    // But if .filter() sees a "0", it considers that a failed match and will remove it.
+    // So, we set score to 1 in these cases so the match will be included, and mostly respect correct ordering.
+    const score = scores[0] === 0 ? 1 : scores[0];

    if (score > topScore) {
      topScore = score;
    }
  }
+
+  if (topScore === Number.NEGATIVE_INFINITY) {
+    return undefined;
+  }
+
  return topScore;
 };

+/**
+ * An interface that objects must extend in order to use the fuzzy sequence matcher
+ *
+ * @param {number} score - A number representing the existence and strength of a match.
+ *    - `< 0` means a good match that starts in the middle of the string
+ *    - `> 0` means a good match that starts at the beginning of the string
+ *    - `0` means just barely a match
+ *    - `undefined` means not a match
+ *
+ * @param {string} strings - Array of strings (aliases) representing the item. The filter string will be compared against each of these for a match.
+ *
+ */
+
 export interface ScorableTextItem {
  score?: number;
-  text: string;
-  altText?: string;
+  strings: string[];
 }

 type FuzzyFilterSort = <T extends ScorableTextItem>(
@@ -54,12 +74,10 @@ type FuzzyFilterSort = <T extends ScorableTextItem>(
 export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) => {
  return items
    .map((item) => {
-      item.score = item.altText
-        ? fuzzySequentialMatch(filter, item.text, item.altText)
-        : fuzzySequentialMatch(filter, item.text);
+      item.score = fuzzySequentialMatch(filter, item);
      return item;
    })
-    .filter((item) => item.score !== undefined && item.score > 0)
+    .filter((item) => item.score !== undefined)
    .sort(({ score: scoreA = 0 }, { score: scoreB = 0 }) =>
      scoreA > scoreB ? -1 : scoreA < scoreB ? 1 : 0
    );
@@ -1,14 +1,36 @@
+import { FrontendTranslationData, NumberFormat } from "../../data/translation";
+
 /**
- * Formats a number based on the specified language with thousands separator(s) and decimal character for better legibility.
+ * Formats a number based on the user's preference with thousands separator(s) and decimal character for better legibility.
 *
 * @param num The number to format
- * @param language The language to use when formatting the number
+ * @param locale The user-selected language and number format, from `hass.locale`
+ * @param options Intl.NumberFormatOptions to use
 */
 export const formatNumber = (
  num: string | number,
-  language: string,
+  locale?: FrontendTranslationData,
  options?: Intl.NumberFormatOptions
 ): string => {
+  let format: string | string[] | undefined;
+
+  switch (locale?.number_format) {
+    case NumberFormat.comma_decimal:
+      format = ["en-US", "en"]; // Use United States with fallback to English formatting 1,234,567.89
+      break;
+    case NumberFormat.decimal_comma:
+      format = ["de", "es", "it"]; // Use German with fallback to Spanish then Italian formatting 1.234.567,89
+      break;
+    case NumberFormat.space_comma:
+      format = ["fr", "sv", "cs"]; // Use French with fallback to Swedish and Czech formatting 1 234 567,89
+      break;
+    case NumberFormat.system:
+      format = undefined;
+      break;
+    default:
+      format = locale?.language;
+  }
+
  // Polyfill for Number.isNaN, which is more reliable than the global isNaN()
  Number.isNaN =
    Number.isNaN ||
@@ -16,11 +38,25 @@ export const formatNumber = (
      return typeof input === "number" && isNaN(input);
    };

-  if (!Number.isNaN(Number(num)) && Intl) {
-    return new Intl.NumberFormat(
-      language,
-      getDefaultFormatOptions(num, options)
-    ).format(Number(num));
+  if (
+    !Number.isNaN(Number(num)) &&
+    Intl &&
+    locale?.number_format !== NumberFormat.none
+  ) {
+    try {
+      return new Intl.NumberFormat(
+        format,
+        getDefaultFormatOptions(num, options)
+      ).format(Number(num));
+    } catch (error) {
+      // Don't fail when using "TEST" language
+      // eslint-disable-next-line no-console
+      console.error(error);
+      return new Intl.NumberFormat(
+        undefined,
+        getDefaultFormatOptions(num, options)
+      ).format(Number(num));
+    }
  }
  return num.toString();
 };
@@ -1,4 +1,5 @@
-const isTemplateRegex = new RegExp("{%|{{|{#");
+const isTemplateRegex = new RegExp("{%|{{");
+
 export const isTemplate = (value: string): boolean =>
  isTemplateRegex.test(value);

@@ -11,7 +12,7 @@ export const hasTemplate = (value: unknown): boolean => {
  }
  if (typeof value === "object") {
    const values = Array.isArray(value) ? value : Object.values(value!);
-    return values.some((val) => hasTemplate(val));
+    return values.some((val) => val && hasTemplate(val));
  }
  return false;
 };
@@ -0,0 +1,2 @@
+export const strStartsWith = (value: string, search: string) =>
+  value.substring(0, search.length) === search;
@@ -0,0 +1,5 @@
+export const constructUrlCurrentPath = (searchParams: string): string => {
+  const base = window.location.pathname;
+  // Prevent trailing "?" if no parameters exist
+  return searchParams ? base + "?" + searchParams : base;
+};
@@ -19,3 +19,17 @@ export const createSearchParam = (params: Record<string, string>): string => {
  });
  return urlParams.toString();
 };
+
+export const addSearchParam = (params: Record<string, string>): string => {
+  const urlParams = new URLSearchParams(window.location.search);
+  Object.entries(params).forEach(([key, value]) => {
+    urlParams.set(key, value);
+  });
+  return urlParams.toString();
+};
+
+export const removeSearchParam = (param: string): string => {
+  const urlParams = new URLSearchParams(window.location.search);
+  urlParams.delete(param);
+  return urlParams.toString();
+};
@@ -1,4 +1,4 @@
-export const afterNextRender = (cb: () => void): void => {
+export const afterNextRender = (cb: (value: unknown) => void): void => {
  requestAnimationFrame(() => setTimeout(cb, 0));
 };

@@ -1,65 +0,0 @@
-import { html, LitElement } from "lit-element";
-import { fireEvent } from "../../common/dom/fire_event";
-import "./ha-progress-button";
-
-class HaCallApiButton extends LitElement {
-  render() {
-    return html`
-      <ha-progress-button
-        .progress="${this.progress}"
-        @click="${this._buttonTapped}"
-        ?disabled="${this.disabled}"
-        ><slot></slot
-      ></ha-progress-button>
-    `;
-  }
-
-  constructor() {
-    super();
-    this.method = "POST";
-    this.data = {};
-    this.disabled = false;
-    this.progress = false;
-  }
-
-  static get properties() {
-    return {
-      hass: {},
-      progress: Boolean,
-      path: String,
-      method: String,
-      data: {},
-      disabled: Boolean,
-    };
-  }
-
-  get progressButton() {
-    return this.renderRoot.querySelector("ha-progress-button");
-  }
-
-  async _buttonTapped() {
-    this.progress = true;
-    const eventData = {
-      method: this.method,
-      path: this.path,
-      data: this.data,
-    };
-
-    try {
-      const resp = await this.hass.callApi(this.method, this.path, this.data);
-      this.progress = false;
-      this.progressButton.actionSuccess();
-      eventData.success = true;
-      eventData.response = resp;
-    } catch (err) {
-      this.progress = false;
-      this.progressButton.actionError();
-      eventData.success = false;
-      eventData.response = err;
-    }
-
-    fireEvent(this, "hass-api-called", eventData);
-  }
-}
-
-customElements.define("ha-call-api-button", HaCallApiButton);
@@ -0,0 +1,77 @@
+import { css, CSSResult, html, LitElement, property, query } from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import { HomeAssistant } from "../../types";
+import "./ha-progress-button";
+
+class HaCallApiButton extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public method: "POST" | "GET" | "PUT" | "DELETE" = "POST";
+
+  @property() public data = {};
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public progress = false;
+
+  @property() public path?: string;
+
+  @query("ha-progress-button", true) private _progressButton;
+
+  render() {
+    return html`
+      <ha-progress-button
+        .progress=${this.progress}
+        @click=${this._buttonTapped}
+        ?disabled=${this.disabled}
+        ><slot></slot
+      ></ha-progress-button>
+    `;
+  }
+
+  async _buttonTapped() {
+    this.progress = true;
+    const eventData: {
+      method: string;
+      path: string;
+      data: any;
+      success?: boolean;
+      response?: any;
+    } = {
+      method: this.method,
+      path: this.path!,
+      data: this.data,
+    };
+
+    try {
+      const resp = await this.hass.callApi(this.method, this.path!, this.data);
+      this.progress = false;
+      this._progressButton.actionSuccess();
+      eventData.success = true;
+      eventData.response = resp;
+    } catch (err) {
+      this.progress = false;
+      this._progressButton.actionError();
+      eventData.success = false;
+      eventData.response = err;
+    }
+
+    fireEvent(this, "hass-api-called", eventData as any);
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host([disabled]) {
+        pointer-events: none;
+      }
+    `;
+  }
+}
+
+customElements.define("ha-call-api-button", HaCallApiButton);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-call-api-button": HaCallApiButton;
+  }
+}
@@ -63,7 +63,7 @@ export interface DataTableSortColumnData {
 }

 export interface DataTableColumnData extends DataTableSortColumnData {
-  title: string;
+  title: TemplateResult | string;
  type?: "numeric" | "icon" | "icon-button";
  template?: <T>(data: any, row: T) => TemplateResult | string;
  width?: string;
@@ -74,7 +74,7 @@ export interface DataTableColumnData extends DataTableSortColumnData {
 }

 type ClonedDataTableColumnData = Omit<DataTableColumnData, "title"> & {
-  title?: string;
+  title?: TemplateResult | string;
 };

 export interface DataTableRowData {
@@ -132,7 +132,7 @@ export class HaDataTable extends LitElement {

  @query("slot[name='header']") private _header!: HTMLSlotElement;

-  private _items: DataTableRowData[] = [];
+  @internalProperty() private _items: DataTableRowData[] = [];

  private _checkableRowsCount?: number;

@@ -160,9 +160,9 @@ export class HaDataTable extends LitElement {

  public connectedCallback() {
    super.connectedCallback();
-    if (this._filteredData.length) {
+    if (this._items.length) {
      // Force update of location of rows
-      this._filteredData = [...this._filteredData];
+      this._items = [...this._items];
    }
  }

@@ -550,7 +550,9 @@ export class HaDataTable extends LitElement {

  private _checkedRowsChanged() {
    // force scroller to update, change it's items
-    this._filteredData = [...this._filteredData];
+    if (this._items.length) {
+      this._items = [...this._items];
+    }
    fireEvent(this, "selection-changed", {
      value: this._checkedRows,
    });
@@ -100,7 +100,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
  public excludeDomains?: string[];

  /**
-   * Show only deviced with entities of these device classes.
+   * Show only devices with entities of these device classes.
   * @type {Array}
   * @attr include-device-classes
   */
@@ -113,7 +113,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {

  @internalProperty() private _opened?: boolean;

-  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
+  @query("ha-combo-box", true) public comboBox!: HaComboBox;

  private _init = false;

@@ -242,11 +242,11 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
  );

  public open() {
-    this._comboBox?.open();
+    this.comboBox?.open();
  }

  public focus() {
-    this._comboBox?.focus();
+    this.comboBox?.focus();
  }

  public hassSubscribe(): UnsubscribeFunc[] {
@@ -269,7 +269,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
      (changedProps.has("_opened") && this._opened)
    ) {
      this._init = true;
-      (this._comboBox as any).items = this._getDevices(
+      (this.comboBox as any).items = this._getDevices(
        this.devices!,
        this.areas!,
        this.entities!,
@@ -371,7 +371,7 @@ class HaChartBase extends mixinBehaviors(
      return value;
    }
    const date = new Date(values[index].value);
-    return formatTime(date, this.hass.language);
+    return formatTime(date, this.hass.locale);
  }

  drawChart() {
@@ -99,7 +99,7 @@ export class HaEntityPicker extends LitElement {

  @property({ type: Boolean }) private _opened = false;

-  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
+  @query("vaadin-combo-box-light", true) private comboBox!: HTMLElement;

  public open() {
    this.updateComplete.then(() => {
@@ -208,7 +208,7 @@ export class HaEntityPicker extends LitElement {
        this.entityFilter,
        this.includeDeviceClasses
      );
-      (this._comboBox as any).filteredItems = this._states;
+      (this.comboBox as any).filteredItems = this._states;
      this._initedStates = true;
    }
  }
@@ -296,7 +296,7 @@ export class HaEntityPicker extends LitElement {

  private _filterChanged(ev: CustomEvent): void {
    const filterString = ev.detail.value.toLowerCase();
-    (this._comboBox as any).filteredItems = this._states.filter(
+    (this.comboBox as any).filteredItems = this._states.filter(
      (state) =>
        state.entity_id.toLowerCase().includes(filterString) ||
        computeStateName(state).toLowerCase().includes(filterString)
@@ -116,12 +116,8 @@ export class HaStateLabelBadge extends LitElement {
          : state.state === UNKNOWN
          ? "-"
          : state.attributes.unit_of_measurement
-          ? formatNumber(state.state, this.hass!.language)
-          : computeStateDisplay(
-              this.hass!.localize,
-              state,
-              this.hass!.language
-            );
+          ? formatNumber(state.state, this.hass!.locale)
+          : computeStateDisplay(this.hass!.localize, state, this.hass!.locale);
    }
  }

@@ -84,7 +84,7 @@ class StateInfo extends LitElement {
    }

    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass || oldHass.language !== this.hass.language) {
+    if (!oldHass || oldHass.locale !== this.hass.locale) {
      this.rtl = computeRTL(this.hass);
    }
  }
@@ -0,0 +1,10 @@
+import { html } from "lit-element";
+import { HomeAssistant } from "../types";
+import { documentationUrl } from "../util/documentation-url";
+
+export const analyticsLearnMore = (hass: HomeAssistant) => html`<a
+  .href=${documentationUrl(hass, "/integrations/analytics/")}
+  target="_blank"
+  rel="noreferrer"
+  >${hass.localize("ui.panel.config.core.section.core.analytics.learn_more")}</a
+>`;
@@ -0,0 +1,199 @@
+import "@polymer/paper-tooltip/paper-tooltip";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { isComponentLoaded } from "../common/config/is_component_loaded";
+import { fireEvent } from "../common/dom/fire_event";
+import { Analytics, AnalyticsPreferences } from "../data/analytics";
+import { haStyle } from "../resources/styles";
+import { HomeAssistant } from "../types";
+import "./ha-checkbox";
+import type { HaCheckbox } from "./ha-checkbox";
+import "./ha-settings-row";
+
+const ADDITIONAL_PREFERENCES = ["usage", "statistics"];
+
+declare global {
+  interface HASSDomEvents {
+    "analytics-preferences-changed": { preferences: AnalyticsPreferences };
+  }
+}
+
+@customElement("ha-analytics")
+export class HaAnalytics extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public analytics?: Analytics;
+
+  protected render(): TemplateResult {
+    const loading = this.analytics === undefined;
+    const baseEnabled = !loading && this.analytics!.preferences.base;
+
+    return html`
+      <ha-settings-row>
+        <span slot="prefix">
+          <ha-checkbox
+            @change=${this._handleRowCheckboxClick}
+            .checked=${baseEnabled}
+            .preference=${"base"}
+            .disabled=${loading}
+            name="base"
+          >
+          </ha-checkbox>
+        </span>
+        <span slot="heading" data-for="base">
+          ${this.hass.localize(
+            `ui.panel.config.core.section.core.analytics.preference.base.title`
+          )}
+        </span>
+        <span slot="description" data-for="base">
+          ${this.hass.localize(
+            `ui.panel.config.core.section.core.analytics.preference.base.description`
+          )}
+        </span>
+      </ha-settings-row>
+      ${ADDITIONAL_PREFERENCES.map(
+        (preference) =>
+          html`<ha-settings-row>
+            <span slot="prefix">
+              <ha-checkbox
+                @change=${this._handleRowCheckboxClick}
+                .checked=${this.analytics?.preferences[preference]}
+                .preference=${preference}
+                name=${preference}
+              >
+              </ha-checkbox>
+              ${!baseEnabled
+                ? html`<paper-tooltip animation-delay="0" position="right"
+                    >${this.hass.localize(
+                      "ui.panel.config.core.section.core.analytics.needs_base"
+                    )}
+                  </paper-tooltip>`
+                : ""}
+            </span>
+            <span slot="heading" data-for=${preference}>
+              ${preference === "usage"
+                ? isComponentLoaded(this.hass, "hassio")
+                  ? this.hass.localize(
+                      `ui.panel.config.core.section.core.analytics.preference.usage_supervisor.title`
+                    )
+                  : this.hass.localize(
+                      `ui.panel.config.core.section.core.analytics.preference.usage.title`
+                    )
+                : this.hass.localize(
+                    `ui.panel.config.core.section.core.analytics.preference.${preference}.title`
+                  )}
+            </span>
+            <span slot="description" data-for=${preference}>
+              ${preference !== "usage"
+                ? this.hass.localize(
+                    `ui.panel.config.core.section.core.analytics.preference.${preference}.description`
+                  )
+                : isComponentLoaded(this.hass, "hassio")
+                ? this.hass.localize(
+                    `ui.panel.config.core.section.core.analytics.preference.usage_supervisor.description`
+                  )
+                : this.hass.localize(
+                    `ui.panel.config.core.section.core.analytics.preference.usage.description`
+                  )}
+            </span>
+          </ha-settings-row>`
+      )}
+      <ha-settings-row>
+        <span slot="prefix">
+          <ha-checkbox
+            @change=${this._handleRowCheckboxClick}
+            .checked=${this.analytics?.preferences.diagnostics}
+            .preference=${"diagnostics"}
+            .disabled=${loading}
+            name="diagnostics"
+          >
+          </ha-checkbox>
+        </span>
+        <span slot="heading" data-for="diagnostics">
+          ${this.hass.localize(
+            `ui.panel.config.core.section.core.analytics.preference.diagnostics.title`
+          )}
+        </span>
+        <span slot="description" data-for="diagnostics">
+          ${this.hass.localize(
+            `ui.panel.config.core.section.core.analytics.preference.diagnostics.description`
+          )}
+        </span>
+      </ha-settings-row>
+    `;
+  }
+
+  protected updated(changedProps) {
+    super.updated(changedProps);
+
+    this.shadowRoot!.querySelectorAll("*[data-for]").forEach((el) => {
+      const forEl = (el as HTMLElement).dataset.for;
+      delete (el as HTMLElement).dataset.for;
+
+      el.addEventListener("click", () => {
+        const toFocus = this.shadowRoot!.querySelector(
+          `*[name=${forEl}]`
+        ) as HTMLElement | null;
+
+        if (toFocus) {
+          toFocus.focus();
+          toFocus.click();
+        }
+      });
+    });
+  }
+
+  private _handleRowCheckboxClick(ev: Event) {
+    const checkbox = ev.currentTarget as HaCheckbox;
+    const preference = (checkbox as any).preference;
+    const preferences = this.analytics ? { ...this.analytics.preferences } : {};
+
+    if (preferences[preference] === checkbox.checked) {
+      return;
+    }
+
+    preferences[preference] = checkbox.checked;
+
+    if (ADDITIONAL_PREFERENCES.includes(preference) && checkbox.checked) {
+      preferences.base = true;
+    } else if (preference === "base" && !checkbox.checked) {
+      preferences.usage = false;
+      preferences.statistics = false;
+    }
+
+    fireEvent(this, "analytics-preferences-changed", { preferences });
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .error {
+          color: var(--error-color);
+        }
+
+        ha-settings-row {
+          padding: 0;
+        }
+
+        span[slot="heading"],
+        span[slot="description"] {
+          cursor: pointer;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-analytics": HaAnalytics;
+  }
+}
@@ -127,7 +127,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {

  @internalProperty() private _opened?: boolean;

-  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
+  @query("vaadin-combo-box-light", true) public comboBox!: HTMLElement;

  private _init = false;

@@ -319,7 +319,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
      (changedProps.has("_opened") && this._opened)
    ) {
      this._init = true;
-      (this._comboBox as any).items = this._getAreas(
+      (this.comboBox as any).items = this._getAreas(
        this._areas!,
        this._devices!,
        this._entities!,
@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import "@material/mwc-menu";
 import type { Corner, Menu } from "@material/mwc-menu";
 import {
@@ -11,8 +10,6 @@ import {
  query,
  TemplateResult,
 } from "lit-element";
-import "./ha-icon-button";
-
@customElement("ha-button-menu")
 export class HaButtonMenu extends LitElement {
  @property() public corner: Corner = "TOP_START";
@@ -0,0 +1,207 @@
+import "@material/mwc-icon-button";
+import type { Corner } from "@material/mwc-menu";
+import { mdiFilterVariant } from "@mdi/js";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import "@material/mwc-menu/mwc-menu-surface";
+import { fireEvent } from "../common/dom/fire_event";
+import { findRelated, RelatedResult } from "../data/search";
+import type { HomeAssistant } from "../types";
+import "./ha-svg-icon";
+import "./ha-area-picker";
+import "./device/ha-device-picker";
+import "./entity/ha-entity-picker";
+import { computeStateName } from "../common/entity/compute_state_name";
+import { computeDeviceName } from "../data/device_registry";
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "related-changed": {
+      value?: FilterValue;
+      items?: RelatedResult;
+      filter?: string;
+    };
+  }
+}
+
+interface FilterValue {
+  area?: string;
+  device?: string;
+  entity?: string;
+}
+
+@customElement("ha-button-related-filter-menu")
+export class HaRelatedFilterButtonMenu extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public corner: Corner = "TOP_START";
+
+  @property({ type: Boolean, reflect: true }) public narrow = false;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ attribute: false }) public value?: FilterValue;
+
+  /**
+   * Show no entities of these domains.
+   * @type {Array}
+   * @attr exclude-domains
+   */
+  @property({ type: Array, attribute: "exclude-domains" })
+  public excludeDomains?: string[];
+
+  @internalProperty() private _open = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <mwc-icon-button @click=${this._handleClick}>
+        <ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
+      </mwc-icon-button>
+      <mwc-menu-surface
+        .open=${this._open}
+        .anchor=${this}
+        .fullwidth=${this.narrow}
+        .corner=${this.corner}
+        @closed=${this._onClosed}
+      >
+        <ha-area-picker
+          .label=${this.hass.localize(
+            "ui.components.related-filter-menu.filter_by_area"
+          )}
+          .hass=${this.hass}
+          .value=${this.value?.area}
+          no-add
+          @value-changed=${this._areaPicked}
+        ></ha-area-picker>
+        <ha-device-picker
+          .label=${this.hass.localize(
+            "ui.components.related-filter-menu.filter_by_device"
+          )}
+          .hass=${this.hass}
+          .value=${this.value?.device}
+          @value-changed=${this._devicePicked}
+        ></ha-device-picker>
+        <ha-entity-picker
+          .label=${this.hass.localize(
+            "ui.components.related-filter-menu.filter_by_entity"
+          )}
+          .hass=${this.hass}
+          .value=${this.value?.entity}
+          .excludeDomains=${this.excludeDomains}
+          @value-changed=${this._entityPicked}
+        ></ha-entity-picker>
+      </mwc-menu-surface>
+    `;
+  }
+
+  private _handleClick(): void {
+    if (this.disabled) {
+      return;
+    }
+    this._open = true;
+  }
+
+  private _onClosed(): void {
+    this._open = false;
+  }
+
+  private async _entityPicked(ev: CustomEvent) {
+    const entityId = ev.detail.value;
+    if (!entityId) {
+      fireEvent(this, "related-changed", { value: undefined });
+      return;
+    }
+    const filter = this.hass.localize(
+      "ui.components.related-filter-menu.filtered_by_entity",
+      "entity_name",
+      computeStateName((ev.currentTarget as any).comboBox.selectedItem)
+    );
+    const items = await findRelated(this.hass, "entity", entityId);
+    fireEvent(this, "related-changed", {
+      value: { entity: entityId },
+      filter,
+      items,
+    });
+  }
+
+  private async _devicePicked(ev: CustomEvent) {
+    const deviceId = ev.detail.value;
+    if (!deviceId) {
+      fireEvent(this, "related-changed", { value: undefined });
+      return;
+    }
+    const filter = this.hass.localize(
+      "ui.components.related-filter-menu.filtered_by_device",
+      "device_name",
+      computeDeviceName(
+        (ev.currentTarget as any).comboBox.selectedItem,
+        this.hass
+      )
+    );
+    const items = await findRelated(this.hass, "device", deviceId);
+
+    fireEvent(this, "related-changed", {
+      value: { device: deviceId },
+      filter,
+      items,
+    });
+  }
+
+  private async _areaPicked(ev: CustomEvent) {
+    const areaId = ev.detail.value;
+    if (!areaId) {
+      fireEvent(this, "related-changed", { value: undefined });
+      return;
+    }
+    const filter = this.hass.localize(
+      "ui.components.related-filter-menu.filtered_by_area",
+      "area_name",
+      (ev.currentTarget as any).comboBox.selectedItem.name
+    );
+    const items = await findRelated(this.hass, "area", areaId);
+    fireEvent(this, "related-changed", {
+      value: { area: areaId },
+      filter,
+      items,
+    });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+      :host([narrow]) {
+        position: static;
+      }
+      ha-area-picker,
+      ha-device-picker,
+      ha-entity-picker {
+        display: block;
+        width: 300px;
+        padding: 4px 16px;
+        box-sizing: border-box;
+      }
+      :host([narrow]) ha-area-picker,
+      :host([narrow]) ha-device-picker {
+        width: 100%;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-button-related-filter-menu": HaRelatedFilterButtonMenu;
+  }
+}
@@ -1,6 +1,5 @@
 // @ts-ignore
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
-import { ripple } from "@material/mwc-ripple/ripple-directive";
 import {
  css,
  CSSResult,
@@ -12,6 +11,7 @@ import {
  unsafeCSS,
 } from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
+import "./ha-chip";

 declare global {
  // for fire event
@@ -20,8 +20,8 @@ declare global {
  }
 }

-@customElement("ha-chips")
-export class HaChips extends LitElement {
+@customElement("ha-chip-set")
+export class HaChipSet extends LitElement {
  @property() public items = [];

  protected render(): TemplateResult {
@@ -33,18 +33,9 @@ export class HaChips extends LitElement {
        ${this.items.map(
          (item, idx) =>
            html`
-              <div class="mdc-chip" .index=${idx} @click=${this._handleClick}>
-                <div class="mdc-chip__ripple" .ripple="${ripple()}"></div>
-                <span role="gridcell">
-                  <span
-                    role="button"
-                    tabindex="0"
-                    class="mdc-chip__primary-action"
-                  >
-                    <span class="mdc-chip__text">${item}</span>
-                  </span>
-                </span>
-              </div>
+              <ha-chip .index=${idx} @click=${this._handleClick}>
+                ${item}
+              </ha-chip>
            `
        )}
      </div>
@@ -60,9 +51,9 @@ export class HaChips extends LitElement {
  static get styles(): CSSResult {
    return css`
      ${unsafeCSS(chipStyles)}
-      .mdc-chip {
-        background-color: rgba(var(--rgb-primary-text-color), 0.15);
-        color: var(--primary-text-color);
+
+      ha-chip {
+        margin: 4px;
      }
    `;
  }
@@ -70,6 +61,6 @@ export class HaChips extends LitElement {

 declare global {
  interface HTMLElementTagNameMap {
-    "ha-chips": HaChips;
+    "ha-chip-set": HaChipSet;
  }
 }
@@ -0,0 +1,74 @@
+// @ts-ignore
+import chipStyles from "@material/chips/dist/mdc.chips.min.css";
+import { ripple } from "@material/mwc-ripple/ripple-directive";
+import "./ha-icon";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+  unsafeCSS,
+} from "lit-element";
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "chip-clicked": { index: string };
+  }
+}
+
+@customElement("ha-chip")
+export class HaChip extends LitElement {
+  @property() public index = 0;
+
+  @property({ type: Boolean }) public hasIcon = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="mdc-chip" .index=${this.index}>
+        ${this.hasIcon
+          ? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
+              <slot name="icon"></slot>
+            </div>`
+          : null}
+        <div class="mdc-chip__ripple" .ripple="${ripple()}"></div>
+        <span role="gridcell">
+          <span role="button" tabindex="0" class="mdc-chip__primary-action">
+            <span class="mdc-chip__text"><slot></slot></span>
+          </span>
+        </span>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      ${unsafeCSS(chipStyles)}
+      .mdc-chip {
+        background-color: var(
+          --ha-chip-background-color,
+          rgba(var(--rgb-primary-text-color), 0.15)
+        );
+        color: var(--ha-chip-text-color, var(--primary-text-color));
+      }
+
+      .mdc-chip:hover {
+        color: var(--ha-chip-text-color, var(--primary-text-color));
+      }
+
+      .mdc-chip__icon--leading {
+        --mdc-icon-size: 20px;
+        color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-chip": HaChip;
+  }
+}
@@ -53,14 +53,14 @@ class HaClimateState extends LitElement {
    if (this.stateObj.attributes.current_temperature != null) {
      return `${formatNumber(
        this.stateObj.attributes.current_temperature,
-        this.hass!.language
+        this.hass.locale
      )} ${this.hass.config.unit_system.temperature}`;
    }

    if (this.stateObj.attributes.current_humidity != null) {
      return `${formatNumber(
        this.stateObj.attributes.current_humidity,
-        this.hass!.language
+        this.hass.locale
      )} %`;
    }

@@ -78,17 +78,17 @@ class HaClimateState extends LitElement {
    ) {
      return `${formatNumber(
        this.stateObj.attributes.target_temp_low,
-        this.hass!.language
+        this.hass.locale
      )}-${formatNumber(
        this.stateObj.attributes.target_temp_high,
-        this.hass!.language
+        this.hass.locale
      )} ${this.hass.config.unit_system.temperature}`;
    }

    if (this.stateObj.attributes.temperature != null) {
      return `${formatNumber(
        this.stateObj.attributes.temperature,
-        this.hass!.language
+        this.hass.locale
      )} ${this.hass.config.unit_system.temperature}`;
    }
    if (
@@ -97,17 +97,17 @@ class HaClimateState extends LitElement {
    ) {
      return `${formatNumber(
        this.stateObj.attributes.target_humidity_low,
-        this.hass!.language
+        this.hass.locale
      )}-${formatNumber(
        this.stateObj.attributes.target_humidity_high,
-        this.hass!.language
+        this.hass.locale
      )} %`;
    }

    if (this.stateObj.attributes.humidity != null) {
      return `${formatNumber(
        this.stateObj.attributes.humidity,
-        this.hass!.language
+        this.hass.locale
      )} %`;
    }

@@ -86,6 +86,10 @@ export class HaComboBox extends LitElement {
    });
  }

+  public get selectedItem() {
+    return (this._comboBox as any).selectedItem;
+  }
+
  protected render(): TemplateResult {
    return html`
      <vaadin-combo-box-light
@@ -149,9 +153,9 @@ export class HaComboBox extends LitElement {
    fireEvent(this, ev.type, ev.detail);
  }

-  private _filterChanged(ev: PolymerChangedEvent<boolean>) {
+  private _filterChanged(ev: PolymerChangedEvent<string>) {
    // @ts-ignore
-    fireEvent(this, ev.type, ev.detail);
+    fireEvent(this, ev.type, ev.detail, { composed: false });
  }

  private _valueChanged(ev: PolymerChangedEvent<string>) {
@@ -1,62 +1,61 @@
-import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker";
+import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker-light";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  PropertyValues,
+  query,
+} from "lit-element";
+import "@polymer/paper-input/paper-input";
+import { fireEvent } from "../common/dom/fire_event";
+import { mdiCalendar } from "@mdi/js";
+import "./ha-svg-icon";

-const VaadinDatePicker = customElements.get("vaadin-date-picker");
-
-const documentContainer = document.createElement("template");
-documentContainer.setAttribute("style", "display: none;");
-documentContainer.innerHTML = `
-  <dom-module id="ha-date-input-styles" theme-for="vaadin-text-field">
-    <template>
-      <style>
-      [part="input-field"] {
-        top: 2px;
-        height: 30px;
-        color: var(--primary-text-color);
-      }
-      [part="value"] {
-        text-align: center;
-      }
-      </style>
-    </template>
-  </dom-module>
-`;
-document.head.appendChild(documentContainer.content);
-
-export class HaDateInput extends VaadinDatePicker {
-  constructor() {
-    super();
-
-    this.i18n.formatDate = this._formatISODate;
-    this.i18n.parseDate = this._parseISODate;
-  }
-
-  ready() {
-    super.ready();
-    const styleEl = document.createElement("style");
-    styleEl.innerHTML = `
-      :host {
-        width: 12ex;
-        margin-top: -6px;
-        --material-body-font-size: 16px;
-        --_material-text-field-input-line-background-color: var(--primary-text-color);
-        --_material-text-field-input-line-opacity: 1;
-        --material-primary-color: var(--primary-text-color);
-      }
-    `;
-    this.shadowRoot.appendChild(styleEl);
-    this._inputElement.querySelector("[part='toggle-button']").style.display =
-      "none";
-  }
-
-  private _formatISODate(d) {
+const i18n = {
+  monthNames: [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ],
+  weekdays: [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ],
+  weekdaysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+  firstDayOfWeek: 0,
+  week: "Week",
+  calendar: "Calendar",
+  clear: "Clear",
+  today: "Today",
+  cancel: "Cancel",
+  formatTitle: (monthName, fullYear) => {
+    return monthName + " " + fullYear;
+  },
+  formatDate: (d: { day: number; month: number; year: number }) => {
    return [
      ("0000" + String(d.year)).slice(-4),
      ("0" + String(d.month + 1)).slice(-2),
      ("0" + String(d.day)).slice(-2),
    ].join("-");
-  }
-
-  private _parseISODate(text) {
+  },
+  parseDate: (text: string) => {
    const parts = text.split("-");
    const today = new Date();
    let date;
@@ -80,11 +79,75 @@ export class HaDateInput extends VaadinDatePicker {
      return { day: date, month, year };
    }
    return undefined;
+  },
+};
+@customElement("ha-date-input")
+export class HaDateInput extends LitElement {
+  @property() public value?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property() public label?: string;
+
+  @query("vaadin-date-picker-light", true) private _datePicker;
+
+  private _inited = false;
+
+  updated(changedProps: PropertyValues) {
+    if (changedProps.has("value")) {
+      this._datePicker.value = this.value;
+      this._inited = true;
+    }
+  }
+
+  render() {
+    return html`<vaadin-date-picker-light
+      .disabled=${this.disabled}
+      @value-changed=${this._valueChanged}
+      attr-for-value="value"
+      .i18n=${i18n}
+    >
+      <paper-input .label=${this.label} no-label-float>
+        <ha-svg-icon slot="suffix" .path=${mdiCalendar}></ha-svg-icon>
+      </paper-input>
+    </vaadin-date-picker-light>`;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    if (
+      !this.value ||
+      (this._inited && !this._compareStringDates(ev.detail.value, this.value))
+    ) {
+      this.value = ev.detail.value;
+      fireEvent(this, "change");
+      fireEvent(this, "value-changed", { value: ev.detail.value });
+    }
+  }
+
+  private _compareStringDates(a: string, b: string): boolean {
+    const aParts = a.split("-");
+    const bParts = b.split("-");
+    let i = 0;
+    for (const aPart of aParts) {
+      if (Number(aPart) !== Number(bParts[i])) {
+        return false;
+      }
+      i++;
+    }
+    return true;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      paper-input {
+        width: 110px;
+      }
+      ha-svg-icon {
+        color: var(--secondary-text-color);
+      }
+    `;
  }
 }
-
-customElements.define("ha-date-input", HaDateInput as any);
-
 declare global {
  interface HTMLElementTagNameMap {
    "ha-date-input": HaDateInput;
@@ -43,7 +43,7 @@ export class HaDateRangePicker extends LitElement {
  protected updated(changedProps: PropertyValues) {
    if (changedProps.has("hass")) {
      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.language !== this.hass.language) {
+      if (!oldHass || oldHass.locale !== this.hass.locale) {
        this._hour24format = this._compute24hourFormat();
        this._rtlDirection = computeRTLDirection(this.hass);
      }
@@ -62,7 +62,7 @@ export class HaDateRangePicker extends LitElement {
        <div slot="input" class="date-range-inputs">
          <ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>
          <paper-input
-            .value=${formatDateTime(this.startDate, this.hass.language)}
+            .value=${formatDateTime(this.startDate, this.hass.locale)}
            .label=${this.hass.localize(
              "ui.components.date-range-picker.start_date"
            )}
@@ -71,7 +71,7 @@ export class HaDateRangePicker extends LitElement {
            readonly
          ></paper-input>
          <paper-input
-            .value=${formatDateTime(this.endDate, this.hass.language)}
+            .value=${formatDateTime(this.endDate, this.hass.locale)}
            label=${this.hass.localize(
              "ui.components.date-range-picker.end_date"
            )}
@@ -11,6 +11,7 @@ import { ifDefined } from "lit-html/directives/if-defined";
 import { styleMap } from "lit-html/directives/style-map";
 import { formatNumber } from "../common/string/format_number";
 import { afterNextRender } from "../common/util/render-status";
+import { FrontendTranslationData } from "../data/translation";
 import { getValueInPercentage, normalize } from "../util/calculate";

 const getAngle = (value: number, min: number, max: number) => {
@@ -29,7 +30,7 @@ export class Gauge extends LitElement {

  @property({ type: Number }) public value = 0;

-  @property({ type: String }) public language = "";
+  @property() public locale!: FrontendTranslationData;

  @property() public label = "";

@@ -90,7 +91,7 @@ export class Gauge extends LitElement {
      </svg>
      <svg class="text">
        <text class="value-text">
-          ${formatNumber(this.value, this.language)} ${this.label}
+          ${formatNumber(this.value, this.locale)} ${this.label}
        </text>
      </svg>`;
  }
@@ -1,3 +1,4 @@
+import type HlsType from "hls.js";
 import {
  css,
  CSSResult,
@@ -15,8 +16,6 @@ import { nextRender } from "../common/util/render-status";
 import { getExternalConfig } from "../external_app/external_config";
 import type { HomeAssistant } from "../types";

-type HLSModule = typeof import("hls.js");
-
@customElement("ha-hls-player")
 class HaHLSPlayer extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -43,7 +42,7 @@ class HaHLSPlayer extends LitElement {

  @internalProperty() private _attached = false;

-  private _hlsPolyfillInstance?: Hls;
+  private _hlsPolyfillInstance?: HlsType;

  private _useExoPlayer = false;

@@ -107,8 +106,8 @@ class HaHLSPlayer extends LitElement {
    const useExoPlayerPromise = this._getUseExoPlayer();
    const masterPlaylistPromise = fetch(this.url);

-    const hls = ((await import("hls.js")) as any).default as HLSModule;
-    let hlsSupported = hls.isSupported();
+    const Hls = (await import("hls.js")).default;
+    let hlsSupported = Hls.isSupported();

    if (!hlsSupported) {
      hlsSupported =
@@ -144,8 +143,8 @@ class HaHLSPlayer extends LitElement {
    // If codec is HEVC and ExoPlayer is supported, use ExoPlayer.
    if (this._useExoPlayer && match !== null && match[1] !== undefined) {
      this._renderHLSExoPlayer(playlist_url);
-    } else if (hls.isSupported()) {
-      this._renderHLSPolyfill(videoEl, hls, playlist_url);
+    } else if (Hls.isSupported()) {
+      this._renderHLSPolyfill(videoEl, Hls, playlist_url);
    } else {
      this._renderHLSNative(videoEl, playlist_url);
    }
@@ -182,7 +181,7 @@ class HaHLSPlayer extends LitElement {

  private async _renderHLSPolyfill(
    videoEl: HTMLVideoElement,
-    Hls: HLSModule,
+    Hls: typeof HlsType,
    url: string
  ) {
    const hls = new Hls({
@@ -1,12 +1,9 @@
 import { customElement, html, LitElement, property } from "lit-element";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { TimeSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "../paper-time-input";
-
-const test = new Date().toLocaleString();
-const useAMPM = test.includes("AM") || test.includes("PM");
-
@customElement("ha-selector-time")
 export class HaTimeSelector extends LitElement {
  @property() public hass!: HomeAssistant;
@@ -19,16 +16,24 @@ export class HaTimeSelector extends LitElement {

  @property({ type: Boolean }) public disabled = false;

+  private _useAmPm = memoizeOne((language: string) => {
+    const test = new Date().toLocaleString(language);
+    return test.includes("AM") || test.includes("PM");
+  });
+
  protected render() {
+    const useAMPM = this._useAmPm(this.hass.locale.language);
+
    const parts = this.value?.split(":") || [];
-    const hours = useAMPM ? parts[0] ?? "12" : parts[0] ?? "0";
+    const hours = parts[0];

    return html`
      <paper-time-input
        .label=${this.label}
-        .hour=${useAMPM && Number(hours) > 12 ? Number(hours) - 12 : hours}
-        .min=${parts[1] ?? "00"}
-        .sec=${parts[2] ?? "00"}
+        .hour=${hours &&
+        (useAMPM && Number(hours) > 12 ? Number(hours) - 12 : hours)}
+        .min=${parts[1]}
+        .sec=${parts[2]}
        .format=${useAMPM ? 12 : 24}
        .amPm=${useAMPM && (Number(hours) > 12 ? "PM" : "AM")}
        .disabled=${this.disabled}
@@ -42,12 +47,16 @@ export class HaTimeSelector extends LitElement {

  private _timeChanged(ev) {
    let value = ev.target.value;
-    if (useAMPM) {
-      let hours = Number(ev.target.hour);
+    const useAMPM = this._useAmPm(this.hass.locale.language);
+    let hours = Number(ev.target.hour || 0);
+    if (value && useAMPM) {
      if (ev.target.amPm === "PM") {
        hours += 12;
      }
-      value = `${hours}:${ev.target.min}:${ev.target.sec}`;
+      value = `${hours}:${ev.target.min || "00"}:${ev.target.sec || "00"}`;
+    }
+    if (value === this.value) {
+      return;
    }
    fireEvent(this, "value-changed", {
      value,
@@ -1,3 +1,4 @@
+import { mdiHelpCircle } from "@mdi/js";
 import { HassService, HassServiceTarget } from "home-assistant-js-websocket";
 import {
  css,
@@ -18,11 +19,12 @@ import { ENTITY_COMPONENT_DOMAINS } from "../data/entity";
 import { Selector } from "../data/selector";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
+import { documentationUrl } from "../util/documentation-url";
+import "./ha-checkbox";
 import "./ha-selector/ha-selector";
 import "./ha-service-picker";
 import "./ha-settings-row";
 import "./ha-yaml-editor";
-import "./ha-checkbox";
 import type { HaYamlEditor } from "./ha-yaml-editor";

 interface ExtHassService extends Omit<HassService, "fields"> {
@@ -49,6 +51,8 @@ export class HaServiceControl extends LitElement {
    data?: Record<string, any>;
  };

+  @internalProperty() private _value!: this["value"];
+
  @property({ reflect: true, type: Boolean }) public narrow!: boolean;

  @property({ type: Boolean }) public showAdvanced?: boolean;
@@ -57,7 +61,7 @@ export class HaServiceControl extends LitElement {

  @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;

-  protected updated(changedProperties: PropertyValues) {
+  protected updated(changedProperties: PropertyValues<this>) {
    if (!changedProperties.has("value")) {
      return;
    }
@@ -92,21 +96,23 @@ export class HaServiceControl extends LitElement {
        target.device_id = this.value.data.device_id;
      }

-      this.value = {
+      this._value = {
        ...this.value,
        target,
        data: { ...this.value.data },
      };

-      delete this.value.data!.entity_id;
-      delete this.value.data!.device_id;
-      delete this.value.data!.area_id;
+      delete this._value.data!.entity_id;
+      delete this._value.data!.device_id;
+      delete this._value.data!.area_id;
+    } else {
+      this._value = this.value;
    }

-    if (this.value?.data) {
+    if (this._value?.data) {
      const yamlEditor = this._yamlEditor;
-      if (yamlEditor && yamlEditor.value !== this.value.data) {
-        yamlEditor.setValue(this.value.data);
+      if (yamlEditor && yamlEditor.value !== this._value.data) {
+        yamlEditor.setValue(this._value.data);
      }
    }
  }
@@ -151,12 +157,12 @@ export class HaServiceControl extends LitElement {
  });

  protected render() {
-    const serviceData = this._getServiceInfo(this.value?.service);
+    const serviceData = this._getServiceInfo(this._value?.service);

    const shouldRenderServiceDataYaml =
      (serviceData?.fields.length && !serviceData.hasSelector.length) ||
      (serviceData &&
-        Object.keys(this.value?.data || {}).some(
+        Object.keys(this._value?.data || {}).some(
          (key) => !serviceData!.hasSelector.includes(key)
        ));

@@ -171,10 +177,32 @@ export class HaServiceControl extends LitElement {

    return html`<ha-service-picker
        .hass=${this.hass}
-        .value=${this.value?.service}
+        .value=${this._value?.service}
        @value-changed=${this._serviceChanged}
      ></ha-service-picker>
-      <p>${serviceData?.description}</p>
+      <div class="description">
+        <p>${serviceData?.description}</p>
+        ${this.value?.service
+          ? html` <a
+              href="${documentationUrl(
+                this.hass,
+                "/integrations/" + computeDomain(this.value?.service)
+              )}"
+              title="${this.hass.localize(
+                "ui.components.service-control.integration_doc"
+              )}"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <mwc-icon-button>
+                <ha-svg-icon
+                  path=${mdiHelpCircle}
+                  class="help-icon"
+                ></ha-svg-icon>
+              </mwc-icon-button>
+            </a>`
+          : ""}
+      </div>
      ${serviceData && "target" in serviceData
        ? html`<ha-settings-row .narrow=${this.narrow}>
            ${hasOptional
@@ -195,19 +223,19 @@ export class HaServiceControl extends LitElement {
                ? { target: serviceData.target }
                : {
                    target: {
-                      entity: { domain: computeDomain(this.value!.service) },
+                      entity: { domain: computeDomain(this._value!.service) },
                    },
                  }}
              @value-changed=${this._targetChanged}
-              .value=${this.value?.target}
+              .value=${this._value?.target}
            ></ha-selector
          ></ha-settings-row>`
        : entityId
        ? html`<ha-entity-picker
            .hass=${this.hass}
-            .value=${this.value?.data?.entity_id}
+            .value=${this._value?.data?.entity_id}
            .label=${entityId.description}
-            .includeDomains=${this._domainFilter(this.value!.service)}
+            .includeDomains=${this._domainFilter(this._value!.service)}
            @value-changed=${this._entityPicked}
            allow-custom-entity
          ></ha-entity-picker>`
@@ -218,15 +246,15 @@ export class HaServiceControl extends LitElement {
              "ui.components.service-control.service_data"
            )}
            .name=${"data"}
-            .defaultValue=${this.value?.data}
+            .defaultValue=${this._value?.data}
            @value-changed=${this._dataChanged}
          ></ha-yaml-editor>`
        : serviceData?.fields.map((dataField) =>
            dataField.selector &&
            (!dataField.advanced ||
              this.showAdvanced ||
-              (this.value?.data &&
-                this.value.data[dataField.key] !== undefined))
+              (this._value?.data &&
+                this._value.data[dataField.key] !== undefined))
              ? html`<ha-settings-row .narrow=${this.narrow}>
                  ${dataField.required
                    ? hasOptional
@@ -235,8 +263,8 @@ export class HaServiceControl extends LitElement {
                    : html`<ha-checkbox
                        .key=${dataField.key}
                        .checked=${this._checkedKeys.has(dataField.key) ||
-                        (this.value?.data &&
-                          this.value.data[dataField.key] !== undefined)}
+                        (this._value?.data &&
+                          this._value.data[dataField.key] !== undefined)}
                        @change=${this._checkboxChanged}
                        slot="prefix"
                      ></ha-checkbox>`}
@@ -245,15 +273,15 @@ export class HaServiceControl extends LitElement {
                  ><ha-selector
                    .disabled=${!dataField.required &&
                    !this._checkedKeys.has(dataField.key) &&
-                    (!this.value?.data ||
-                      this.value.data[dataField.key] === undefined)}
+                    (!this._value?.data ||
+                      this._value.data[dataField.key] === undefined)}
                    .hass=${this.hass}
                    .selector=${dataField.selector}
                    .key=${dataField.key}
                    @value-changed=${this._serviceDataChanged}
-                    .value=${this.value?.data &&
-                    this.value.data[dataField.key] !== undefined
-                      ? this.value.data[dataField.key]
+                    .value=${this._value?.data &&
+                    this._value.data[dataField.key] !== undefined
+                      ? this._value.data[dataField.key]
                      : dataField.default}
                  ></ha-selector
                ></ha-settings-row>`
@@ -268,13 +296,13 @@ export class HaServiceControl extends LitElement {
      this._checkedKeys.add(key);
    } else {
      this._checkedKeys.delete(key);
-      const data = { ...this.value?.data };
+      const data = { ...this._value?.data };

      delete data[key];

      fireEvent(this, "value-changed", {
        value: {
-          ...this.value,
+          ...this._value,
          data,
        },
      });
@@ -284,7 +312,7 @@ export class HaServiceControl extends LitElement {

  private _serviceChanged(ev: PolymerChangedEvent<string>) {
    ev.stopPropagation();
-    if (ev.detail.value === this.value?.service) {
+    if (ev.detail.value === this._value?.service) {
      return;
    }
    fireEvent(this, "value-changed", {
@@ -295,17 +323,17 @@ export class HaServiceControl extends LitElement {
  private _entityPicked(ev: CustomEvent) {
    ev.stopPropagation();
    const newValue = ev.detail.value;
-    if (this.value?.data?.entity_id === newValue) {
+    if (this._value?.data?.entity_id === newValue) {
      return;
    }
    let value;
-    if (!newValue && this.value?.data) {
-      value = { ...this.value };
+    if (!newValue && this._value?.data) {
+      value = { ...this._value };
      delete value.data.entity_id;
    } else {
      value = {
-        ...this.value,
-        data: { ...this.value?.data, entity_id: ev.detail.value },
+        ...this._value,
+        data: { ...this._value?.data, entity_id: ev.detail.value },
      };
    }
    fireEvent(this, "value-changed", {
@@ -316,15 +344,15 @@ export class HaServiceControl extends LitElement {
  private _targetChanged(ev: CustomEvent) {
    ev.stopPropagation();
    const newValue = ev.detail.value;
-    if (this.value?.target === newValue) {
+    if (this._value?.target === newValue) {
      return;
    }
    let value;
    if (!newValue) {
-      value = { ...this.value };
+      value = { ...this._value };
      delete value.target;
    } else {
-      value = { ...this.value, target: ev.detail.value };
+      value = { ...this._value, target: ev.detail.value };
    }
    fireEvent(this, "value-changed", {
      value,
@@ -335,11 +363,14 @@ export class HaServiceControl extends LitElement {
    ev.stopPropagation();
    const key = (ev.currentTarget as any).key;
    const value = ev.detail.value;
-    if (this.value?.data && this.value.data[key] === value) {
+    if (
+      this._value?.data?.[key] === value ||
+      (!this._value?.data?.[key] && (value === "" || value === undefined))
+    ) {
      return;
    }

-    const data = { ...this.value?.data, [key]: value };
+    const data = { ...this._value?.data, [key]: value };

    if (value === "" || value === undefined) {
      delete data[key];
@@ -347,7 +378,7 @@ export class HaServiceControl extends LitElement {

    fireEvent(this, "value-changed", {
      value: {
-        ...this.value,
+        ...this._value,
        data,
      },
    });
@@ -360,7 +391,7 @@ export class HaServiceControl extends LitElement {
    }
    fireEvent(this, "value-changed", {
      value: {
-        ...this.value,
+        ...this._value,
        data: ev.detail.value,
      },
    });
@@ -403,6 +434,15 @@ export class HaServiceControl extends LitElement {
      ha-checkbox {
        margin-left: -16px;
      }
+      .help-icon {
+        color: var(--secondary-text-color);
+      }
+      .description {
+        justify-content: space-between;
+        display: flex;
+        align-items: center;
+        padding-right: 2px;
+      }
    `;
  }
 }
@@ -245,7 +245,7 @@ class HaSidebar extends LitElement {
      hass.panelUrl !== oldHass.panelUrl ||
      hass.user !== oldHass.user ||
      hass.localize !== oldHass.localize ||
-      hass.language !== oldHass.language ||
+      hass.locale !== oldHass.locale ||
      hass.states !== oldHass.states ||
      hass.defaultPanel !== oldHass.defaultPanel
    );
@@ -281,7 +281,7 @@ class HaSidebar extends LitElement {
    }

    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass || oldHass.language !== this.hass.language) {
+    if (!oldHass || oldHass.locale !== this.hass.locale) {
      this.rtl = computeRTL(this.hass);
    }

@@ -125,35 +125,41 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
      return html``;
    }
    return html`<div class="mdc-chip-set items">
-        ${ensureArray(this.value?.area_id)?.map((area_id) => {
-          const area = this._areas![area_id];
-          return this._renderChip(
-            "area_id",
-            area_id,
-            area?.name || area_id,
-            undefined,
-            mdiSofa
-          );
-        })}
-        ${ensureArray(this.value?.device_id)?.map((device_id) => {
-          const device = this._devices![device_id];
-          return this._renderChip(
-            "device_id",
-            device_id,
-            device ? computeDeviceName(device, this.hass) : device_id,
-            undefined,
-            mdiDevices
-          );
-        })}
-        ${ensureArray(this.value?.entity_id)?.map((entity_id) => {
-          const entity = this.hass.states[entity_id];
-          return this._renderChip(
-            "entity_id",
-            entity_id,
-            entity ? computeStateName(entity) : entity_id,
-            entity ? stateIcon(entity) : undefined
-          );
-        })}
+        ${this.value?.area_id
+          ? ensureArray(this.value.area_id).map((area_id) => {
+              const area = this._areas![area_id];
+              return this._renderChip(
+                "area_id",
+                area_id,
+                area?.name || area_id,
+                undefined,
+                mdiSofa
+              );
+            })
+          : ""}
+        ${this.value?.device_id
+          ? ensureArray(this.value.device_id).map((device_id) => {
+              const device = this._devices![device_id];
+              return this._renderChip(
+                "device_id",
+                device_id,
+                device ? computeDeviceName(device, this.hass) : device_id,
+                undefined,
+                mdiDevices
+              );
+            })
+          : ""}
+        ${this.value?.entity_id
+          ? ensureArray(this.value.entity_id).map((entity_id) => {
+              const entity = this.hass.states[entity_id];
+              return this._renderChip(
+                "entity_id",
+                entity_id,
+                entity ? computeStateName(entity) : entity_id,
+                entity ? stateIcon(entity) : undefined
+              );
+            })
+          : ""}
      </div>
      ${this._renderPicker()}
      <div class="mdc-chip-set">
@@ -344,6 +350,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
          .includeDeviceClasses=${this.includeDeviceClasses}
          .includeDomains=${this.includeDomains}
          @value-changed=${this._targetPicked}
+          allow-custom-entity
        ></ha-entity-picker>`;
    }
    return html``;
@@ -2,6 +2,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { computeStateDisplay } from "../common/entity/compute_state_display";
+import { formatNumber } from "../common/string/format_number";
 import LocalizeMixin from "../mixins/localize-mixin";

 /*
@@ -55,21 +56,31 @@ class HaWaterHeaterState extends LocalizeMixin(PolymerElement) {
  computeTarget(hass, stateObj) {
    if (!hass || !stateObj) return null;
    // We're using "!= null" on purpose so that we match both null and undefined.
+
    if (
      stateObj.attributes.target_temp_low != null &&
      stateObj.attributes.target_temp_high != null
    ) {
-      return `${stateObj.attributes.target_temp_low} - ${stateObj.attributes.target_temp_high} ${hass.config.unit_system.temperature}`;
+      return `${formatNumber(
+        stateObj.attributes.target_temp_low,
+        this.hass.locale
+      )} - ${formatNumber(
+        stateObj.attributes.target_temp_high,
+        this.hass.locale
+      )} ${hass.config.unit_system.temperature}`;
    }
    if (stateObj.attributes.temperature != null) {
-      return `${stateObj.attributes.temperature} ${hass.config.unit_system.temperature}`;
+      return `${formatNumber(
+        stateObj.attributes.temperature,
+        this.hass.locale
+      )} ${hass.config.unit_system.temperature}`;
    }

    return "";
  }

  _localizeState(stateObj) {
-    return computeStateDisplay(this.hass.localize, stateObj);
+    return computeStateDisplay(this.hass.localize, stateObj, this.hass.locale);
  }
 }
 customElements.define("ha-water_heater-state", HaWaterHeaterState);
@@ -133,7 +133,7 @@ export class PaperTimeInput extends PolymerElement {
          always-float-label$="[[alwaysFloatInputLabels]]"
          disabled="[[disabled]]"
        >
-          <span suffix="" slot="suffix">:</span>
+          <span suffix slot="suffix">:</span>
        </paper-input>

        <!-- Min Input -->
@@ -303,28 +303,28 @@ export class PaperTimeInput extends PolymerElement {
        notify: true,
      },
      /**
-       * Suffix for the hour input
+       * Label for the hour input
       */
      hourLabel: {
        type: String,
        value: "",
      },
      /**
-       * Suffix for the min input
+       * Label for the min input
       */
      minLabel: {
        type: String,
-        value: ":",
+        value: "",
      },
      /**
-       * Suffix for the sec input
+       * Label for the sec input
       */
      secLabel: {
        type: String,
        value: "",
      },
      /**
-       * Suffix for the milli sec input
+       * Label for the milli sec input
       */
      millisecLabel: {
        type: String,
@@ -361,7 +361,7 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
      const item = items[0];
      const date = data.datasets[item.datasetIndex].data[item.index].x;

-      return formatDateTimeWithSeconds(date, this.hass.language);
+      return formatDateTimeWithSeconds(date, this.hass.locale);
    };

    const chartOptions = {
@@ -201,8 +201,8 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
    const formatTooltipLabel = (item, data) => {
      const values = data.datasets[item.datasetIndex].data[item.index];

-      const start = formatDateTimeWithSeconds(values[0], this.hass.language);
-      const end = formatDateTimeWithSeconds(values[1], this.hass.language);
+      const start = formatDateTimeWithSeconds(values[0], this.hass.locale);
+      const end = formatDateTimeWithSeconds(values[1], this.hass.locale);
      const state = values[2];

      return [state, start, end];
@@ -12,9 +12,11 @@ import { buttonLinkStyle } from "../../resources/styles";
 import "../ha-svg-icon";

@customElement("ha-timeline")
-class HaTimeline extends LitElement {
+export class HaTimeline extends LitElement {
  @property({ type: Boolean, reflect: true }) public label = false;

+  @property({ type: Boolean, reflect: true }) public raised = false;
+
  @property({ type: Boolean }) public lastItem = false;

  @property({ type: String }) public icon?: string;
@@ -86,6 +88,10 @@ class HaTimeline extends LitElement {
            --timeline-ball-color,
            var(--timeline-color, var(--secondary-text-color))
          );
+          border-radius: 50%;
+        }
+        :host([raised]) ha-svg-icon {
+          transform: scale(1.3);
        }
        .line {
          flex: 1;
@@ -0,0 +1,166 @@
+import { css, customElement, LitElement, property, svg } from "lit-element";
+
+import { NODE_SIZE, SPACING } from "./hat-graph";
+
+@customElement("hat-graph-node")
+export class HatGraphNode extends LitElement {
+  @property() iconPath?: string;
+
+  @property({ reflect: true, type: Boolean }) disabled?: boolean;
+
+  @property({ reflect: true, type: Boolean }) graphstart?: boolean;
+
+  @property({ reflect: true, type: Boolean }) nofocus?: boolean;
+
+  @property({ reflect: true, type: Number }) badge?: number;
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("tabindex") && !this.nofocus)
+      this.setAttribute("tabindex", "0");
+  }
+
+  render() {
+    const height = NODE_SIZE + (this.graphstart ? 2 : SPACING + 1);
+    const width = SPACING + NODE_SIZE;
+    return svg`
+    <svg
+    width="${width}px"
+    height="${height}px"
+    viewBox="-${Math.ceil(width / 2)} -${
+      this.graphstart
+        ? Math.ceil(height / 2)
+        : Math.ceil((NODE_SIZE + SPACING * 2) / 2)
+    } ${width} ${height}"
+    >
+      ${
+        this.graphstart
+          ? ``
+          : svg`
+          <path
+            class="connector"
+            d="
+              M 0 ${-SPACING - NODE_SIZE / 2}
+              L 0 0
+            "
+            line-caps="round"
+          />
+          `
+      }
+    <g class="node">
+      <circle
+        cx="0"
+        cy="0"
+        r="${NODE_SIZE / 2}"
+      />
+      }
+      ${
+        this.badge
+          ? svg`
+        <g class="number">
+          <circle
+            cx="8"
+            cy="${-NODE_SIZE / 2}"
+            r="8"
+          ></circle>
+          <text
+            x="8"
+            y="${-NODE_SIZE / 2}"
+            text-anchor="middle"
+            alignment-baseline="middle"
+          >${this.badge > 9 ? "9+" : this.badge}</text>
+        </g>
+      `
+          : ""
+      }
+      <g
+        style="pointer-events: none"
+        transform="translate(${-12} ${-12})"
+      >
+        ${this.iconPath ? svg`<path class="icon" d="${this.iconPath}"/>` : ""}
+      </g>
+    </g>
+      </svg>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+      :host(.track) {
+        --stroke-clr: var(--track-clr);
+        --icon-clr: var(--default-icon-clr);
+      }
+      :host(.active) circle {
+        --stroke-clr: var(--active-clr);
+        --icon-clr: var(--default-icon-clr);
+      }
+      :host(:focus) {
+        outline: none;
+      }
+      :host(:hover) circle {
+        --stroke-clr: var(--hover-clr);
+        --icon-clr: var(--default-icon-clr);
+      }
+      :host([disabled]) circle {
+        stroke: var(--disabled-clr);
+      }
+      :host-context([disabled]) {
+        --stroke-clr: var(--disabled-clr);
+      }
+      :host([nofocus]):host-context(.active),
+      :host([nofocus]):host-context(:focus) {
+        --circle-clr: var(--active-clr);
+        --icon-clr: var(--default-icon-clr);
+      }
+      circle,
+      path.connector {
+        stroke: var(--stroke-clr);
+        stroke-width: 2;
+        fill: none;
+      }
+      circle {
+        fill: var(--background-clr);
+        stroke: var(--circle-clr, var(--stroke-clr));
+      }
+      .number circle {
+        fill: var(--track-clr);
+        stroke: none;
+        stroke-width: 0;
+      }
+      .number text {
+        font-size: smaller;
+      }
+      path.icon {
+        fill: var(--icon-clr);
+      }
+
+      :host(.triggered) svg {
+        overflow: visible;
+      }
+      :host(.triggered) circle {
+        animation: glow 10s;
+      }
+      @keyframes glow {
+        0% {
+          filter: drop-shadow(0px 0px 5px rgba(var(--rgb-trigger-color), 0));
+        }
+        10% {
+          filter: drop-shadow(0px 0px 10px rgba(var(--rgb-trigger-color), 1));
+        }
+        100% {
+          filter: drop-shadow(0px 0px 5px rgba(var(--rgb-trigger-color), 0));
+        }
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hat-graph-node": HatGraphNode;
+  }
+}
@@ -0,0 +1,55 @@
+import { css, customElement, LitElement, property, svg } from "lit-element";
+
+import { NODE_SIZE, SPACING } from "./hat-graph";
+
+@customElement("hat-graph-spacer")
+export class HatGraphSpacer extends LitElement {
+  @property({ reflect: true, type: Boolean }) disabled?: boolean;
+
+  render() {
+    return svg`
+    <svg
+    width="${SPACING}px"
+    height="${SPACING + NODE_SIZE + 1}px"
+    viewBox="-${SPACING / 2} 0 10 ${SPACING + NODE_SIZE + 1}"
+    >
+          <path
+            class="connector"
+            d="
+              M 0 ${SPACING + NODE_SIZE + 1}
+              L 0 0
+            "
+            line-caps="round"
+          />
+      }
+      </svg>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+      :host(.track) {
+        --stroke-clr: var(--track-clr);
+        --icon-clr: var(--default-icon-clr);
+      }
+      :host-context([disabled]) {
+        --stroke-clr: var(--disabled-clr);
+      }
+      path.connector {
+        stroke: var(--stroke-clr);
+        stroke-width: 2;
+        fill: none;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hat-graph-spacer": HatGraphSpacer;
+  }
+}
@@ -0,0 +1,225 @@
+import {
+  css,
+  customElement,
+  html,
+  LitElement,
+  property,
+  svg,
+} from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
+
+export const BRANCH_HEIGHT = 20;
+export const SPACING = 10;
+export const NODE_SIZE = 30;
+
+const track_converter = {
+  fromAttribute: (value) => value.split(",").map((v) => parseInt(v)),
+  toAttribute: (value) =>
+    value instanceof Array ? value.join(",") : `${value}`,
+};
+
+export interface NodeInfo {
+  path: string;
+  config: any;
+}
+
+interface BranchConfig {
+  x: number;
+  height: number;
+  start: boolean;
+  end: boolean;
+}
+
+@customElement("hat-graph")
+export class HatGraph extends LitElement {
+  @property({ type: Number }) _num_items = 0;
+
+  @property({ reflect: true, type: Boolean }) branching?: boolean;
+
+  @property({ reflect: true, converter: track_converter })
+  track_start?: number[];
+
+  @property({ reflect: true, converter: track_converter }) track_end?: number[];
+
+  @property({ reflect: true, type: Boolean }) disabled?: boolean;
+
+  @property({ reflect: true, type: Boolean }) selected?: boolean;
+
+  @property({ reflect: true, type: Boolean }) short = false;
+
+  async updateChildren() {
+    this._num_items = this.children.length;
+  }
+
+  render() {
+    const branches: BranchConfig[] = [];
+    let total_width = 0;
+    let max_height = 0;
+    let min_height = Number.POSITIVE_INFINITY;
+    if (this.branching) {
+      for (const c of Array.from(this.children)) {
+        if (c.slot === "head") continue;
+        const rect = c.getBoundingClientRect();
+        branches.push({
+          x: rect.width / 2 + total_width,
+          height: rect.height,
+          start: c.getAttribute("graphStart") != null,
+          end: c.getAttribute("graphEnd") != null,
+        });
+        total_width += rect.width;
+        max_height = Math.max(max_height, rect.height);
+        min_height = Math.min(min_height, rect.height);
+      }
+    }
+
+    return html`
+      <slot name="head" @slotchange=${this.updateChildren}> </slot>
+      ${this.branching
+        ? svg`
+            <svg
+              id="top"
+              width="${total_width}"
+              height="${BRANCH_HEIGHT}"
+            >
+              ${branches.map((branch, i) => {
+                if (branch.start) return "";
+                return svg`
+                  <path
+                    class="${classMap({
+                      line: true,
+                      track: this.track_start?.includes(i) ?? false,
+                    })}"
+                    id="${this.track_start?.includes(i) ? "track-start" : ""}"
+                    index=${i}
+                    d="
+                      M ${total_width / 2} 0
+                      L ${branch.x} ${BRANCH_HEIGHT}
+                      "/>
+                `;
+              })}
+              <use xlink:href="#track-start" />
+            </svg>
+          `
+        : ""}
+      <div id="branches">
+        ${this.branching
+          ? svg`
+              <svg
+                id="lines"
+                width="${total_width}"
+                height="${max_height}"
+              >
+                ${branches.map((branch, i) => {
+                  if (branch.end) return "";
+                  return svg`
+                    <path
+                      class="${classMap({
+                        line: true,
+                        track: this.track_end?.includes(i) ?? false,
+                      })}"
+                      index=${i}
+                      d="
+                        M ${branch.x} ${branch.height}
+                        l 0 ${max_height - branch.height}
+                        "/>
+                  `;
+                })}
+              </svg>
+            `
+          : ""}
+        <slot @slotchange=${this.updateChildren}></slot>
+      </div>
+
+      ${this.branching && !this.short
+        ? svg`
+            <svg
+              id="bottom"
+              width="${total_width}"
+              height="${BRANCH_HEIGHT + SPACING}"
+            >
+              ${branches.map((branch, i) => {
+                if (branch.end) return "";
+                return svg`
+                  <path
+                    class="${classMap({
+                      line: true,
+                      track: this.track_end?.includes(i) ?? false,
+                    })}"
+                    id="${this.track_end?.includes(i) ? "track-end" : ""}"
+                    index=${i}
+                    d="
+                      M ${branch.x} 0
+                      L ${branch.x} ${SPACING}
+                      L ${total_width / 2} ${BRANCH_HEIGHT + SPACING}
+                      "/>
+                `;
+              })}
+              <use xlink:href="#track-end" />
+            </svg>
+          `
+        : ""}
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        --stroke-clr: var(--stroke-color, var(--secondary-text-color));
+        --active-clr: var(--active-color, var(--primary-color));
+        --track-clr: var(--track-color, var(--accent-color));
+        --hover-clr: var(--hover-color, var(--primary-color));
+        --disabled-clr: var(--disabled-color, var(--disabled-text-color));
+        --default-trigger-color: 3, 169, 244;
+        --rgb-trigger-color: var(--trigger-color, var(--default-trigger-color));
+        --background-clr: var(--background-color, white);
+        --default-icon-clr: var(--icon-color, black);
+        --icon-clr: var(--stroke-clr);
+      }
+      :host(:focus) {
+        outline: none;
+      }
+      #branches {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      :host([branching]) #branches {
+        flex-direction: row;
+        align-items: start;
+      }
+      :host([branching]) ::slotted(*) {
+        z-index: 1;
+      }
+      :host([branching]) ::slotted([slot="head"]) {
+        margin-bottom: ${-BRANCH_HEIGHT / 2}px;
+      }
+
+      #lines {
+        position: absolute;
+      }
+
+      path.line {
+        stroke: var(--stroke-clr);
+        stroke-width: 2;
+        fill: none;
+      }
+      path.line.track {
+        stroke: var(--track-clr);
+      }
+      :host([disabled]) path.line {
+        stroke: var(--disabled-clr);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hat-graph": HatGraph;
+  }
+}
@@ -0,0 +1,26 @@
+import { LitElement, css, html, customElement } from "lit-element";
+
+@customElement("hat-logbook-note")
+class HatLogbookNote extends LitElement {
+  render() {
+    return html`
+      Not all shown logbook entries might be related to this automation.
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      text-align: center;
+      font-style: italic;
+      padding: 16px;
+      margin-top: 8px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hat-logbook-note": HatLogbookNote;
+  }
+}
@@ -0,0 +1,573 @@
+import {
+  html,
+  LitElement,
+  property,
+  customElement,
+  PropertyValues,
+  css,
+} from "lit-element";
+import "@material/mwc-icon-button/mwc-icon-button";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../ha-svg-icon";
+import {
+  AutomationTraceExtended,
+  ChooseActionTraceStep,
+  ConditionTraceStep,
+} from "../../data/trace";
+import {
+  mdiAbTesting,
+  mdiArrowUp,
+  mdiAsterisk,
+  mdiCallSplit,
+  mdiCheckboxBlankOutline,
+  mdiCheckBoxOutline,
+  mdiChevronDown,
+  mdiChevronRight,
+  mdiChevronUp,
+  mdiClose,
+  mdiCodeBrackets,
+  mdiDevices,
+  mdiExclamation,
+  mdiRefresh,
+  mdiTimerOutline,
+  mdiTrafficLight,
+} from "@mdi/js";
+import "./hat-graph-node";
+import { classMap } from "lit-html/directives/class-map";
+import { NODE_SIZE, SPACING, NodeInfo } from "./hat-graph";
+import { Condition, Trigger } from "../../data/automation";
+import {
+  Action,
+  ChooseAction,
+  DelayAction,
+  DeviceAction,
+  EventAction,
+  RepeatAction,
+  SceneAction,
+  ServiceAction,
+  WaitAction,
+  WaitForTriggerAction,
+} from "../../data/script";
+import { ensureArray } from "../../common/ensure-array";
+import "./hat-graph-spacer";
+
+declare global {
+  interface HASSDomEvents {
+    "graph-node-selected": NodeInfo;
+  }
+}
+
+@customElement("hat-script-graph")
+class HatScriptGraph extends LitElement {
+  @property({ attribute: false }) public trace!: AutomationTraceExtended;
+
+  @property({ attribute: false }) public selected;
+
+  @property() trackedNodes: Record<string, any> = {};
+
+  private selectNode(config, path) {
+    return () => {
+      fireEvent(this, "graph-node-selected", { config, path });
+    };
+  }
+
+  private render_trigger(config: Trigger, i: number) {
+    const path = `trigger/${i}`;
+    const tracked = this.trace && path in this.trace.trace;
+    if (tracked) {
+      this.trackedNodes[path] = { config, path };
+    }
+    return html`
+      <hat-graph-node
+        graphStart
+        @focus=${this.selectNode(config, path)}
+        class=${classMap({
+          track: tracked,
+          active: this.selected === path,
+        })}
+        .iconPath=${mdiAsterisk}
+        tabindex=${tracked ? "0" : "-1"}
+      ></hat-graph-node>
+    `;
+  }
+
+  private render_condition(config: Condition, i: number) {
+    const path = `condition/${i}`;
+    const trace = this.trace.trace[path] as ConditionTraceStep[] | undefined;
+    const track_path =
+      trace?.[0].result === undefined ? 0 : trace[0].result.result ? 1 : 2;
+    if (trace) {
+      this.trackedNodes[path] = { config, path };
+    }
+    return html`
+      <hat-graph
+        branching
+        @focus=${this.selectNode(config, path)}
+        class=${classMap({
+          track: track_path,
+          active: this.selected === path,
+        })}
+        .track_start=${[track_path]}
+        .track_end=${[track_path]}
+        tabindex=${trace ? "-1" : "0"}
+        short
+      >
+        <hat-graph-node
+          slot="head"
+          class=${classMap({
+            track: trace !== undefined,
+          })}
+          .iconPath=${mdiAbTesting}
+          nofocus
+          graphEnd
+        ></hat-graph-node>
+        <div
+          style=${`width: ${NODE_SIZE + SPACING}px;`}
+          graphStart
+          graphEnd
+        ></div>
+        <div></div>
+        <hat-graph-node
+          .iconPath=${mdiClose}
+          graphEnd
+          nofocus
+          class=${classMap({
+            track: track_path === 2,
+          })}
+        ></hat-graph-node>
+      </hat-graph>
+    `;
+  }
+
+  private render_choose_node(config: ChooseAction, path: string) {
+    const trace = this.trace.trace[path] as ChooseActionTraceStep[] | undefined;
+    const trace_path = trace?.[0].result
+      ? trace[0].result.choice === "default"
+        ? [config.choose?.length || 0]
+        : [trace[0].result.choice]
+      : [];
+    return html`
+      <hat-graph
+        tabindex=${trace === undefined ? "-1" : "0"}
+        branching
+        .track_start=${trace_path}
+        .track_end=${trace_path}
+        @focus=${this.selectNode(config, path)}
+        class=${classMap({
+          track: trace !== undefined,
+          active: this.selected === path,
+        })}
+      >
+        <hat-graph-node
+          .iconPath=${mdiCallSplit}
+          class=${classMap({
+            track: trace !== undefined,
+          })}
+          slot="head"
+          nofocus
+        ></hat-graph-node>
+
+        ${config.choose?.map((branch, i) => {
+          const branch_path = `${path}/choose/${i}`;
+          const track_this =
+            trace !== undefined && trace[0].result?.choice === i;
+          if (track_this) {
+            this.trackedNodes[branch_path] = { config, path: branch_path };
+          }
+          return html`
+            <hat-graph>
+              <hat-graph-node
+                .iconPath=${!trace || track_this
+                  ? mdiCheckBoxOutline
+                  : mdiCheckboxBlankOutline}
+                @focus=${this.selectNode(config, branch_path)}
+                class=${classMap({
+                  active: this.selected === branch_path,
+                  track: track_this,
+                })}
+              ></hat-graph-node>
+              ${ensureArray(branch.sequence).map((action, j) =>
+                this.render_node(action, `${branch_path}/sequence/${j}`)
+              )}
+            </hat-graph>
+          `;
+        })}
+        <hat-graph>
+          <hat-graph-spacer
+            class=${classMap({
+              track:
+                trace !== undefined && trace[0].result?.choice === "default",
+            })}
+          ></hat-graph-spacer>
+          ${ensureArray(config.default)?.map((action, i) =>
+            this.render_node(action, `${path}/default/${i}`)
+          )}
+        </hat-graph>
+      </hat-graph>
+    `;
+  }
+
+  private render_condition_node(node: Condition, path: string) {
+    const trace = (this.trace.trace[path] as ConditionTraceStep[]) || undefined;
+    const track_path =
+      trace?.[0].result === undefined ? 0 : trace[0].result.result ? 1 : 2;
+    return html`
+      <hat-graph
+        branching
+        @focus=${this.selectNode(node, path)}
+        class=${classMap({
+          track: track_path,
+          active: this.selected === path,
+        })}
+        .track_start=${[track_path]}
+        .track_end=${[track_path]}
+        tabindex=${trace === undefined ? "-1" : "0"}
+        short
+      >
+        <hat-graph-node
+          slot="head"
+          class=${classMap({
+            track: Boolean(trace),
+          })}
+          .iconPath=${mdiAbTesting}
+          nofocus
+          graphEnd
+        ></hat-graph-node>
+        <div
+          style=${`width: ${NODE_SIZE + SPACING}px;`}
+          graphStart
+          graphEnd
+        ></div>
+        <div></div>
+        <hat-graph-node
+          .iconPath=${mdiClose}
+          graphEnd
+          nofocus
+          class=${classMap({
+            track: track_path === 2,
+          })}
+        ></hat-graph-node>
+      </hat-graph>
+    `;
+  }
+
+  private render_delay_node(node: DelayAction, path: string) {
+    return html`
+      <hat-graph-node
+        .iconPath=${mdiTimerOutline}
+        @focus=${this.selectNode(node, path)}
+        class=${classMap({
+          track: path in this.trace.trace,
+          active: this.selected === path,
+        })}
+        tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
+      ></hat-graph-node>
+    `;
+  }
+
+  private render_device_node(node: DeviceAction, path: string) {
+    return html`
+      <hat-graph-node
+        .iconPath=${mdiDevices}
+        @focus=${this.selectNode(node, path)}
+        class=${classMap({
+          track: path in this.trace.trace,
+          active: this.selected === path,
+        })}
+        tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
+      ></hat-graph-node>
+    `;
+  }
+
+  private render_event_node(node: EventAction, path: string) {
+    return html`
+      <hat-graph-node
+        .iconPath=${mdiExclamation}
+        @focus=${this.selectNode(node, path)}
+        class=${classMap({
+          track: path in this.trace.trace,
+          active: this.selected === path,
+        })}
+        tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
+      ></hat-graph-node>
+    `;
+  }
+
+  private render_repeat_node(node: RepeatAction, path: string) {
+    const trace: any = this.trace.trace[path];
+    const track_path = trace ? [0, 1] : [];
+    const repeats = this.trace?.trace[`${path}/repeat/sequence/0`]?.length;
+    return html`
+      <hat-graph
+        .track_start=${track_path}
+        .track_end=${track_path}
+        tabindex=${trace === undefined ? "-1" : "0"}
+        branching
+        @focus=${this.selectNode(node, path)}
+        class=${classMap({
+          track: path in this.trace.trace,
+          active: this.selected === path,
+        })}
+      >
+        <hat-graph-node
+          .iconPath=${mdiRefresh}
+          class=${classMap({
+            track: trace,
+          })}
+          slot="head"
+          nofocus
+        ></hat-graph-node>
+        <hat-graph-node
+          .iconPath=${mdiArrowUp}
+          nofocus
+          class=${classMap({
+            track: track_path.includes(1),
+          })}
+          .badge=${repeats}
+        ></hat-graph-node>
+        <hat-graph>
+          ${ensureArray(node.repeat.sequence).map((action, i) =>
+            this.render_node(action, `${path}/repeat/sequence/${i}`)
+          )}
+        </hat-graph>
+      </hat-graph>
+    `;
+  }
+
+  private render_scene_node(node: SceneAction, path: string) {
+    return html`
+      <hat-graph-node
+        .iconPath=${mdiExclamation}
+        @focus=${this.selectNode(node, path)}
+        class=${classMap({
+          track: path in this.trace.trace,
+          active: this.selected === path,
+        })}
+        tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
+      ></hat-graph-node>
+    `;
+  }
+
+  private render_service_node(node: ServiceAction, path: string) {
+    return html`
+      <hat-graph-node
+        .iconPath=${mdiChevronRight}
+        @focus=${this.selectNode(node, path)}
+        class=${classMap({
+          track: path in this.trace.trace,
+          active: this.selected === path,
+        })}
+        tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
+      ></hat-graph-node>
+    `;
+  }
+
+  private render_wait_node(
+    node: WaitAction | WaitForTriggerAction,
+    path: string
+  ) {
+    return html`
+      <hat-graph-node
+        .iconPath=${mdiTrafficLight}
+        @focus=${this.selectNode(node, path)}
+        class=${classMap({
+          track: path in this.trace.trace,
+          active: this.selected === path,
+        })}
+        tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
+      ></hat-graph-node>
+    `;
+  }
+
+  private render_other_node(node: Action, path: string) {
+    return html`
+      <hat-graph-node
+        .iconPath=${mdiCodeBrackets}
+        @focus=${this.selectNode(node, path)}
+        class=${classMap({
+          track: path in this.trace.trace,
+          active: this.selected === path,
+        })}
+      ></hat-graph-node>
+    `;
+  }
+
+  private render_node(node: Action, path: string) {
+    const NODE_TYPES = {
+      choose: this.render_choose_node,
+      condition: this.render_condition_node,
+      delay: this.render_delay_node,
+      device_id: this.render_device_node,
+      event: this.render_event_node,
+      repeat: this.render_repeat_node,
+      scene: this.render_scene_node,
+      service: this.render_service_node,
+      wait_template: this.render_wait_node,
+      wait_for_trigger: this.render_wait_node,
+      other: this.render_other_node,
+    };
+
+    const type = Object.keys(NODE_TYPES).find((key) => key in node) || "other";
+    const nodeEl = NODE_TYPES[type].bind(this)(node, path);
+    if (this.trace && path in this.trace.trace) {
+      this.trackedNodes[path] = { config: node, path };
+    }
+    return nodeEl;
+  }
+
+  protected render() {
+    const paths = Object.keys(this.trackedNodes);
+    const manual_triggered = this.trace && "trigger" in this.trace.trace;
+    let track_path = manual_triggered ? undefined : [0];
+    const trigger_nodes = ensureArray(this.trace.config.trigger).map(
+      (trigger, i) => {
+        if (this.trace && `trigger/${i}` in this.trace.trace) {
+          track_path = [i];
+        }
+        return this.render_trigger(trigger, i);
+      }
+    );
+    try {
+      return html`
+        <hat-graph class="parent">
+          <div></div>
+          <hat-graph
+            branching
+            id="trigger"
+            .short=${trigger_nodes.length < 2}
+            .track_start=${track_path}
+            .track_end=${track_path}
+          >
+            ${trigger_nodes}
+          </hat-graph>
+          <hat-graph id="condition">
+            ${ensureArray(this.trace.config.condition)?.map((condition, i) =>
+              this.render_condition(condition!, i)
+            )}
+          </hat-graph>
+          ${ensureArray(this.trace.config.action).map((action, i) =>
+            this.render_node(action, `action/${i}`)
+          )}
+        </hat-graph>
+        <div class="actions">
+          <mwc-icon-button
+            .disabled=${paths.length === 0 || paths[0] === this.selected}
+            @click=${this.previousTrackedNode}
+          >
+            <ha-svg-icon .path=${mdiChevronUp}></ha-svg-icon>
+          </mwc-icon-button>
+          <mwc-icon-button
+            .disabled=${paths.length === 0 ||
+            paths[paths.length - 1] === this.selected}
+            @click=${this.nextTrackedNode}
+          >
+            <ha-svg-icon .path=${mdiChevronDown}></ha-svg-icon>
+          </mwc-icon-button>
+        </div>
+      `;
+    } catch (err) {
+      if (__DEV__) {
+        // eslint-disable-next-line no-console
+        console.log("Error creating script graph:", err);
+      }
+      return html`
+        <div class="error">
+          Error rendering graph. Please download trace and share with the
+          developers.
+        </div>
+      `;
+    }
+  }
+
+  protected update(changedProps: PropertyValues<this>) {
+    if (changedProps.has("trace")) {
+      this.trackedNodes = {};
+    }
+    super.update(changedProps);
+  }
+
+  protected updated(changedProps: PropertyValues<this>) {
+    super.updated(changedProps);
+
+    // Select first node if new trace loaded but no selection given.
+    if (changedProps.has("trace")) {
+      const tracked = this.getTrackedNodes();
+      const paths = Object.keys(tracked);
+
+      // If trace changed and we have no or an invalid selection, select first option.
+      if (this.selected === "" || !(this.selected in paths)) {
+        // Find first tracked node with node info
+        for (const path of paths) {
+          if (tracked[path]) {
+            fireEvent(this, "graph-node-selected", tracked[path]);
+            break;
+          }
+        }
+      }
+
+      if (this.trace) {
+        const sortKeys = Object.keys(this.trace.trace);
+        const keys = Object.keys(this.trackedNodes).sort(
+          (a, b) => sortKeys.indexOf(a) - sortKeys.indexOf(b)
+        );
+        const sortedTrackedNodes = keys.reduce((obj, key) => {
+          obj[key] = this.trackedNodes[key];
+          return obj;
+        }, {});
+        this.trackedNodes = sortedTrackedNodes;
+      }
+    }
+  }
+
+  public getTrackedNodes() {
+    return this.trackedNodes;
+  }
+
+  public previousTrackedNode() {
+    const tracked = this.getTrackedNodes();
+    const nodes = Object.keys(tracked);
+
+    for (let i = nodes.indexOf(this.selected) - 1; i >= 0; i--) {
+      if (tracked[nodes[i]]) {
+        fireEvent(this, "graph-node-selected", tracked[nodes[i]]);
+        break;
+      }
+    }
+  }
+
+  public nextTrackedNode() {
+    const tracked = this.getTrackedNodes();
+    const nodes = Object.keys(tracked);
+    for (let i = nodes.indexOf(this.selected) + 1; i < nodes.length; i++) {
+      if (tracked[nodes[i]]) {
+        fireEvent(this, "graph-node-selected", tracked[nodes[i]]);
+        break;
+      }
+    }
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+      }
+      .actions {
+        display: flex;
+        flex-direction: column;
+      }
+      .parent {
+        margin-left: 8px;
+      }
+      .error {
+        padding: 16px;
+        max-width: 300px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hat-script-graph": HatScriptGraph;
+  }
+}
@@ -0,0 +1,600 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  PropertyValues,
+  TemplateResult,
+} from "lit-element";
+import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
+import {
+  AutomationTraceExtended,
+  ChooseActionTraceStep,
+  getDataFromPath,
+  TriggerTraceStep,
+  isTriggerPath,
+} from "../../data/trace";
+import { HomeAssistant } from "../../types";
+import "./ha-timeline";
+import type { HaTimeline } from "./ha-timeline";
+import {
+  mdiAlertCircle,
+  mdiCircle,
+  mdiCircleOutline,
+  mdiProgressClock,
+  mdiProgressWrench,
+  mdiRecordCircleOutline,
+} from "@mdi/js";
+import { LogbookEntry } from "../../data/logbook";
+import {
+  ChooseAction,
+  ChooseActionChoice,
+  getActionType,
+} from "../../data/script";
+import relativeTime from "../../common/datetime/relative_time";
+import { fireEvent } from "../../common/dom/fire_event";
+import { describeAction } from "../../data/script_i18n";
+import { ifDefined } from "lit-html/directives/if-defined";
+
+const LOGBOOK_ENTRIES_BEFORE_FOLD = 2;
+
+/* eslint max-classes-per-file: "off" */
+
+// Report time entry when more than this time has passed
+const SIGNIFICANT_TIME_CHANGE = 1000; // 1 seconds
+
+const isSignificantTimeChange = (a: Date, b: Date) =>
+  Math.abs(b.getTime() - a.getTime()) > SIGNIFICANT_TIME_CHANGE;
+
+class RenderedTimeTracker {
+  private lastReportedTime: Date;
+
+  constructor(
+    private hass: HomeAssistant,
+    private entries: TemplateResult[],
+    trace: AutomationTraceExtended
+  ) {
+    this.lastReportedTime = new Date(trace.timestamp.start);
+  }
+
+  setLastReportedTime(date: Date) {
+    this.lastReportedTime = date;
+  }
+
+  renderTime(from: Date, to: Date): void {
+    this.entries.push(html`
+      <ha-timeline label>
+        ${relativeTime(from, this.hass.localize, {
+          compareTime: to,
+          includeTense: false,
+        })}
+        later
+      </ha-timeline>
+    `);
+    this.lastReportedTime = to;
+  }
+
+  maybeRenderTime(timestamp: Date): boolean {
+    if (!isSignificantTimeChange(timestamp, this.lastReportedTime)) {
+      this.lastReportedTime = timestamp;
+      return false;
+    }
+
+    this.renderTime(this.lastReportedTime, timestamp);
+    return true;
+  }
+}
+
+class LogbookRenderer {
+  private curIndex: number;
+
+  private pendingItems: Array<[Date, LogbookEntry]> = [];
+
+  constructor(
+    private entries: TemplateResult[],
+    private timeTracker: RenderedTimeTracker,
+    private logbookEntries: LogbookEntry[]
+  ) {
+    // Skip the "automation got triggered item"
+    this.curIndex =
+      logbookEntries.length > 0 && logbookEntries[0].domain === "automation"
+        ? 1
+        : 0;
+  }
+
+  get curItem() {
+    return this.logbookEntries[this.curIndex];
+  }
+
+  get hasNext() {
+    return this.curIndex !== this.logbookEntries.length;
+  }
+
+  maybeRenderItem() {
+    const logbookEntry = this.curItem;
+    this.curIndex++;
+    const entryDate = new Date(logbookEntry.when);
+
+    if (this.pendingItems.length === 0) {
+      this.pendingItems.push([entryDate, logbookEntry]);
+      return;
+    }
+
+    const previousEntryDate = this.pendingItems[
+      this.pendingItems.length - 1
+    ][0];
+
+    // If logbook entry is too long after the last one,
+    // add a time passed label
+    if (isSignificantTimeChange(previousEntryDate, entryDate)) {
+      this._renderLogbookEntries();
+      this.timeTracker.renderTime(previousEntryDate, entryDate);
+    }
+
+    this.pendingItems.push([entryDate, logbookEntry]);
+  }
+
+  flush() {
+    if (this.pendingItems.length > 0) {
+      this._renderLogbookEntries();
+    }
+  }
+
+  private _renderLogbookEntries() {
+    this.timeTracker.maybeRenderTime(this.pendingItems[0][0]);
+
+    const parts: TemplateResult[] = [];
+
+    let i;
+
+    for (
+      i = 0;
+      i < Math.min(this.pendingItems.length, LOGBOOK_ENTRIES_BEFORE_FOLD);
+      i++
+    ) {
+      parts.push(this._renderLogbookEntryHelper(this.pendingItems[i][1]));
+    }
+
+    let moreItems: TemplateResult[] | undefined;
+
+    // If we didn't render all items, push rest into `moreItems`
+    if (i < this.pendingItems.length) {
+      moreItems = [];
+      for (; i < this.pendingItems.length; i++) {
+        moreItems.push(this._renderLogbookEntryHelper(this.pendingItems[i][1]));
+      }
+    }
+
+    this.entries.push(html`
+      <ha-timeline .icon=${mdiCircleOutline} .moreItems=${moreItems}>
+        ${parts}
+      </ha-timeline>
+    `);
+
+    // Clear rendered items.
+    this.timeTracker.setLastReportedTime(
+      this.pendingItems[this.pendingItems.length - 1][0]
+    );
+    this.pendingItems = [];
+  }
+
+  private _renderLogbookEntryHelper(entry: LogbookEntry) {
+    return html`${entry.name} (${entry.entity_id})
+      ${entry.message || `turned ${entry.state}`}<br />`;
+  }
+}
+
+class ActionRenderer {
+  private curIndex = 0;
+
+  private keys: string[];
+
+  constructor(
+    private hass: HomeAssistant,
+    private entries: TemplateResult[],
+    private trace: AutomationTraceExtended,
+    private logbookRenderer: LogbookRenderer,
+    private timeTracker: RenderedTimeTracker
+  ) {
+    this.keys = Object.keys(trace.trace);
+  }
+
+  get curItem() {
+    return this._getItem(this.curIndex);
+  }
+
+  get hasNext() {
+    return this.curIndex !== this.keys.length;
+  }
+
+  renderItem() {
+    this.curIndex = this._renderItem(this.curIndex);
+  }
+
+  private _getItem(index: number) {
+    return this.trace.trace[this.keys[index]];
+  }
+
+  private _renderItem(
+    index: number,
+    actionType?: ReturnType<typeof getActionType>
+  ): number {
+    const value = this._getItem(index);
+
+    if (isTriggerPath(value[0].path)) {
+      return this._handleTrigger(index, value[0] as TriggerTraceStep);
+    }
+
+    const timestamp = new Date(value[0].timestamp);
+
+    // Render all logbook items that are in front of this item.
+    while (
+      this.logbookRenderer.hasNext &&
+      new Date(this.logbookRenderer.curItem.when) < timestamp
+    ) {
+      this.logbookRenderer.maybeRenderItem();
+    }
+
+    this.logbookRenderer.flush();
+    this.timeTracker.maybeRenderTime(timestamp);
+
+    const path = value[0].path;
+    let data;
+    try {
+      data = getDataFromPath(this.trace.config, path);
+    } catch (err) {
+      this.entries.push(
+        html`Unable to extract path ${path}. Download trace and report as bug`
+      );
+      return index + 1;
+    }
+
+    const isTopLevel = path.split("/").length === 2;
+
+    if (!isTopLevel && !actionType) {
+      this._renderEntry(path, path.replace(/\//g, " "));
+      return index + 1;
+    }
+
+    if (!actionType) {
+      actionType = getActionType(data);
+    }
+
+    if (actionType === "choose") {
+      return this._handleChoose(index);
+    }
+
+    this._renderEntry(path, describeAction(this.hass, data, actionType));
+    return index + 1;
+  }
+
+  private _handleTrigger(index: number, triggerStep: TriggerTraceStep): number {
+    this._renderEntry(
+      triggerStep.path,
+      `Triggered ${
+        triggerStep.path === "trigger"
+          ? "manually"
+          : `by the ${this.trace.trigger}`
+      } at
+    ${formatDateTimeWithSeconds(
+      new Date(triggerStep.timestamp),
+      this.hass.locale
+    )}`,
+      mdiCircle
+    );
+    return index + 1;
+  }
+
+  private _handleChoose(index: number): number {
+    // startLevel: choose root config
+
+    // +1: 'default
+    // +2: executed sequence
+
+    // +1: 'choose'
+    // +2: current choice
+
+    // +3: 'conditions'
+    // +4: evaluated condition
+
+    // +3: 'sequence'
+    // +4: executed sequence
+
+    const choosePath = this.keys[index];
+    const startLevel = choosePath.split("/").length - 1;
+
+    const chooseTrace = this._getItem(index)[0] as ChooseActionTraceStep;
+    const defaultExecuted = chooseTrace.result?.choice === "default";
+    const chooseConfig = this._getDataFromPath(
+      this.keys[index]
+    ) as ChooseAction;
+    const name = chooseConfig.alias || "Choose";
+
+    if (defaultExecuted) {
+      this._renderEntry(choosePath, `${name}: Default action executed`);
+    } else if (chooseTrace.result) {
+      const choiceConfig = this._getDataFromPath(
+        `${this.keys[index]}/choose/${chooseTrace.result.choice}`
+      ) as ChooseActionChoice | undefined;
+      const choiceName = choiceConfig
+        ? `${
+            choiceConfig.alias || `Choice ${chooseTrace.result.choice}`
+          } executed`
+        : `Error: ${chooseTrace.error}`;
+      this._renderEntry(choosePath, `${name}: ${choiceName}`);
+    } else {
+      this._renderEntry(choosePath, `${name}: No action taken`);
+    }
+
+    let i;
+
+    // Skip over conditions
+    for (i = index + 1; i < this.keys.length; i++) {
+      const parts = this.keys[i].split("/");
+
+      // We're done if no more sequence in current level
+      if (parts.length <= startLevel) {
+        return i;
+      }
+
+      // We're going to skip all conditions
+      if (
+        (defaultExecuted && parts[startLevel + 1] === "default") ||
+        (!defaultExecuted && parts[startLevel + 3] === "sequence")
+      ) {
+        break;
+      }
+    }
+
+    // Render choice
+    while (i < this.keys.length) {
+      const path = this.keys[i];
+      const parts = path.split("/");
+
+      // We're done if no more sequence in current level
+      if (parts.length <= startLevel) {
+        return i;
+      }
+
+      // We know it's an action sequence, so force the type like that
+      // for rendering.
+      i = this._renderItem(i, getActionType(this._getDataFromPath(path)));
+    }
+
+    return i;
+  }
+
+  private _renderEntry(
+    path: string,
+    description: string,
+    icon = mdiRecordCircleOutline
+  ) {
+    this.entries.push(html`
+      <ha-timeline .icon=${icon} data-path=${path}>
+        ${description}
+      </ha-timeline>
+    `);
+  }
+
+  private _getDataFromPath(path: string) {
+    return getDataFromPath(this.trace.config, path);
+  }
+}
+
+@customElement("hat-trace-timeline")
+export class HaAutomationTracer extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public trace?: AutomationTraceExtended;
+
+  @property({ attribute: false }) public logbookEntries?: LogbookEntry[];
+
+  @property({ attribute: false }) public selectedPath?: string;
+
+  @property({ type: Boolean }) public allowPick = false;
+
+  protected render(): TemplateResult {
+    if (!this.trace) {
+      return html``;
+    }
+
+    const entries: TemplateResult[] = [];
+
+    const timeTracker = new RenderedTimeTracker(this.hass, entries, this.trace);
+    const logbookRenderer = new LogbookRenderer(
+      entries,
+      timeTracker,
+      this.logbookEntries || []
+    );
+    const actionRenderer = new ActionRenderer(
+      this.hass,
+      entries,
+      this.trace,
+      logbookRenderer,
+      timeTracker
+    );
+
+    while (actionRenderer.hasNext) {
+      actionRenderer.renderItem();
+    }
+
+    while (logbookRenderer.hasNext) {
+      logbookRenderer.maybeRenderItem();
+    }
+
+    logbookRenderer.flush();
+
+    // Render footer
+    const renderFinishedAt = () =>
+      formatDateTimeWithSeconds(
+        new Date(this.trace!.timestamp.finish!),
+        this.hass.locale
+      );
+    const renderRuntime = () => `(runtime:
+      ${(
+        (new Date(this.trace!.timestamp.finish!).getTime() -
+          new Date(this.trace!.timestamp.start).getTime()) /
+        1000
+      ).toFixed(2)}
+      seconds)`;
+
+    let entry: {
+      description: TemplateResult | string;
+      icon: string;
+      className?: string;
+    };
+
+    if (this.trace.state === "running") {
+      entry = {
+        description: "Still running",
+        icon: mdiProgressClock,
+      };
+    } else if (this.trace.state === "debugged") {
+      entry = {
+        description: "Debugged",
+        icon: mdiProgressWrench,
+      };
+    } else if (this.trace.script_execution === "finished") {
+      entry = {
+        description: `Finished at ${renderFinishedAt()} ${renderRuntime()}`,
+        icon: mdiCircle,
+      };
+    } else if (this.trace.script_execution === "aborted") {
+      entry = {
+        description: `Aborted at ${renderFinishedAt()} ${renderRuntime()}`,
+        icon: mdiAlertCircle,
+      };
+    } else if (this.trace.script_execution === "cancelled") {
+      entry = {
+        description: `Cancelled at ${renderFinishedAt()} ${renderRuntime()}`,
+        icon: mdiAlertCircle,
+      };
+    } else {
+      let reason: string;
+      let isError = false;
+      let extra: TemplateResult | undefined;
+
+      switch (this.trace.script_execution) {
+        case "failed_conditions":
+          reason = "a condition failed";
+          break;
+        case "failed_single":
+          reason = "only a single execution is allowed";
+          break;
+        case "failed_max_runs":
+          reason = "maximum number of parallel runs reached";
+          break;
+        case "error":
+          reason = "an error was encountered";
+          isError = true;
+          extra = html`<br /><br />${this.trace.error!}`;
+          break;
+        default:
+          reason = `of unknown reason "${this.trace.script_execution}"`;
+          isError = true;
+      }
+
+      entry = {
+        description: html`Stopped because ${reason} at ${renderFinishedAt()}
+        ${renderRuntime()}${extra || ""}`,
+        icon: mdiAlertCircle,
+        className: isError ? "error" : undefined,
+      };
+    }
+    // null means it was stopped by a condition
+    if (entry) {
+      entries.push(html`
+        <ha-timeline
+          lastItem
+          .icon=${entry.icon}
+          class=${ifDefined(entry.className)}
+        >
+          ${entry.description}
+        </ha-timeline>
+      `);
+    }
+
+    return html`${entries}`;
+  }
+
+  protected updated(props: PropertyValues) {
+    super.updated(props);
+
+    // Pick first path when we load a new trace.
+    if (
+      this.allowPick &&
+      props.has("trace") &&
+      this.trace &&
+      this.selectedPath &&
+      !(this.selectedPath in this.trace.trace)
+    ) {
+      const element = this.shadowRoot!.querySelector<HaTimeline>(
+        "ha-timeline[data-path]"
+      );
+      if (element) {
+        fireEvent(this, "value-changed", { value: element.dataset.path });
+        this.selectedPath = element.dataset.path;
+      }
+    }
+
+    if (props.has("trace") || props.has("selectedPath")) {
+      this.shadowRoot!.querySelectorAll<HaTimeline>(
+        "ha-timeline[data-path]"
+      ).forEach((el) => {
+        el.toggleAttribute("selected", this.selectedPath === el.dataset.path);
+        if (!this.allowPick || el.tabIndex === 0) {
+          return;
+        }
+        el.tabIndex = 0;
+        const selectEl = () => {
+          this.selectedPath = el.dataset.path;
+          fireEvent(this, "value-changed", { value: el.dataset.path });
+        };
+        el.addEventListener("click", selectEl);
+        el.addEventListener("keydown", (ev: KeyboardEvent) => {
+          if (ev.key === "Enter" || ev.key === " ") {
+            selectEl();
+          }
+        });
+        el.addEventListener("mouseover", () => {
+          el.raised = true;
+        });
+        el.addEventListener("mouseout", () => {
+          el.raised = false;
+        });
+      });
+    }
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      css`
+        ha-timeline[lastItem].condition {
+          --timeline-ball-color: var(--error-color);
+        }
+        ha-timeline[data-path] {
+          cursor: pointer;
+        }
+        ha-timeline[selected] {
+          --timeline-ball-color: var(--primary-color);
+        }
+        ha-timeline:focus {
+          outline: none;
+          --timeline-ball-color: var(--accent-color);
+        }
+        .error {
+          --timeline-ball-color: var(--error-color);
+          color: var(--error-color);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hat-trace-timeline": HaAutomationTracer;
+  }
+}
@@ -1,450 +0,0 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
-import {
-  AutomationTraceExtended,
-  ChooseActionTrace,
-  getDataFromPath,
-} from "../../data/trace";
-import { HomeAssistant } from "../../types";
-import "./ha-timeline";
-import {
-  mdiCheckCircleOutline,
-  mdiCircle,
-  mdiCircleOutline,
-  mdiPauseCircleOutline,
-  mdiRecordCircleOutline,
-  mdiStopCircleOutline,
-} from "@mdi/js";
-import { LogbookEntry } from "../../data/logbook";
-import { getActionType } from "../../data/script";
-import relativeTime from "../../common/datetime/relative_time";
-
-const LOGBOOK_ENTRIES_BEFORE_FOLD = 2;
-
-const pathToName = (path: string) => path.split("/").join(" ");
-
-/* eslint max-classes-per-file: "off" */
-
-// Report time entry when more than this time has passed
-const SIGNIFICANT_TIME_CHANGE = 5000; // 5 seconds
-
-const isSignificantTimeChange = (a: Date, b: Date) =>
-  Math.abs(b.getTime() - a.getTime()) > SIGNIFICANT_TIME_CHANGE;
-
-class RenderedTimeTracker {
-  private lastReportedTime: Date;
-
-  constructor(
-    private hass: HomeAssistant,
-    private entries: TemplateResult[],
-    trace: AutomationTraceExtended
-  ) {
-    this.lastReportedTime = new Date(trace.timestamp.start);
-  }
-
-  setLastReportedTime(date: Date) {
-    this.lastReportedTime = date;
-  }
-
-  renderTime(from: Date, to: Date): void {
-    this.entries.push(html`
-      <ha-timeline label>
-        ${relativeTime(from, this.hass.localize, {
-          compareTime: to,
-          includeTense: false,
-        })}
-        later
-      </ha-timeline>
-    `);
-    this.lastReportedTime = to;
-  }
-
-  maybeRenderTime(timestamp: Date): boolean {
-    if (!isSignificantTimeChange(timestamp, this.lastReportedTime)) {
-      this.lastReportedTime = timestamp;
-      return false;
-    }
-
-    this.renderTime(this.lastReportedTime, timestamp);
-    return true;
-  }
-}
-
-class LogbookRenderer {
-  private curIndex: number;
-
-  private pendingItems: Array<[Date, LogbookEntry]> = [];
-
-  constructor(
-    private entries: TemplateResult[],
-    private timeTracker: RenderedTimeTracker,
-    private logbookEntries: LogbookEntry[]
-  ) {
-    // Skip the "automation got triggered item"
-    this.curIndex =
-      logbookEntries.length > 0 && logbookEntries[0].domain === "automation"
-        ? 1
-        : 0;
-  }
-
-  get curItem() {
-    return this.logbookEntries[this.curIndex];
-  }
-
-  get hasNext() {
-    return this.curIndex !== this.logbookEntries.length;
-  }
-
-  maybeRenderItem() {
-    const logbookEntry = this.curItem;
-    this.curIndex++;
-    const entryDate = new Date(logbookEntry.when);
-
-    if (this.pendingItems.length === 0) {
-      this.pendingItems.push([entryDate, logbookEntry]);
-      return;
-    }
-
-    const previousEntryDate = this.pendingItems[
-      this.pendingItems.length - 1
-    ][0];
-
-    // If logbook entry is too long after the last one,
-    // add a time passed label
-    if (isSignificantTimeChange(previousEntryDate, entryDate)) {
-      this._renderLogbookEntries();
-      this.timeTracker.renderTime(previousEntryDate, entryDate);
-    }
-
-    this.pendingItems.push([entryDate, logbookEntry]);
-  }
-
-  flush() {
-    if (this.pendingItems.length > 0) {
-      this._renderLogbookEntries();
-    }
-  }
-
-  private _renderLogbookEntries() {
-    this.timeTracker.maybeRenderTime(this.pendingItems[0][0]);
-
-    const parts: TemplateResult[] = [];
-
-    let i;
-
-    for (
-      i = 0;
-      i < Math.min(this.pendingItems.length, LOGBOOK_ENTRIES_BEFORE_FOLD);
-      i++
-    ) {
-      parts.push(this._renderLogbookEntryHelper(this.pendingItems[i][1]));
-    }
-
-    let moreItems: TemplateResult[] | undefined;
-
-    // If we didn't render all items, push rest into `moreItems`
-    if (i < this.pendingItems.length) {
-      moreItems = [];
-      for (; i < this.pendingItems.length; i++) {
-        moreItems.push(this._renderLogbookEntryHelper(this.pendingItems[i][1]));
-      }
-    }
-
-    this.entries.push(html`
-      <ha-timeline .icon=${mdiCircleOutline} .moreItems=${moreItems}>
-        ${parts}
-      </ha-timeline>
-    `);
-
-    // Clear rendered items.
-    this.timeTracker.setLastReportedTime(
-      this.pendingItems[this.pendingItems.length - 1][0]
-    );
-    this.pendingItems = [];
-  }
-
-  private _renderLogbookEntryHelper(entry: LogbookEntry) {
-    return html`${entry.name} (${entry.entity_id}) turned ${entry.state}<br />`;
-  }
-}
-
-class ActionRenderer {
-  private curIndex = 0;
-
-  private keys: string[];
-
-  constructor(
-    private entries: TemplateResult[],
-    private trace: AutomationTraceExtended,
-    private timeTracker: RenderedTimeTracker
-  ) {
-    this.keys = Object.keys(trace.action_trace);
-  }
-
-  get curItem() {
-    return this._getItem(this.curIndex);
-  }
-
-  get hasNext() {
-    return this.curIndex !== this.keys.length;
-  }
-
-  renderItem() {
-    this.curIndex = this._renderItem(this.curIndex);
-  }
-
-  private _getItem(index: number) {
-    return this.trace.action_trace[this.keys[index]];
-  }
-
-  private _renderItem(
-    index: number,
-    actionType?: ReturnType<typeof getActionType>
-  ): number {
-    const value = this._getItem(index);
-    const timestamp = new Date(value[0].timestamp);
-
-    this.timeTracker.maybeRenderTime(timestamp);
-
-    const path = value[0].path;
-    let data;
-    try {
-      data = getDataFromPath(this.trace.config, path);
-    } catch (err) {
-      this.entries.push(
-        html`Unable to extract path ${path}. Download trace and report as bug`
-      );
-      return index + 1;
-    }
-
-    const isTopLevel = path.split("/").length === 2;
-
-    if (!isTopLevel && !actionType) {
-      this._renderEntry(path.replace(/\//g, " "));
-      return index + 1;
-    }
-
-    if (!actionType) {
-      actionType = getActionType(data);
-    }
-
-    if (actionType === "choose") {
-      return this._handleChoose(index);
-    }
-
-    this._renderEntry(data.alias || actionType);
-    return index + 1;
-  }
-
-  private _handleChoose(index: number): number {
-    // startLevel: choose root config
-
-    // +1: 'default
-    // +2: executed sequence
-
-    // +1: 'choose'
-    // +2: current choice
-
-    // +3: 'conditions'
-    // +4: evaluated condition
-
-    // +3: 'sequence'
-    // +4: executed sequence
-
-    const startLevel = this.keys[index].split("/").length - 1;
-
-    const chooseTrace = this._getItem(index)[0] as ChooseActionTrace;
-    const defaultExecuted = chooseTrace.result.choice === "default";
-
-    if (defaultExecuted) {
-      this._renderEntry(`Choose: Default action executed`);
-    } else {
-      this._renderEntry(`Choose: Choice ${chooseTrace.result.choice} executed`);
-    }
-
-    let i;
-
-    // Skip over conditions
-    for (i = index + 1; i < this.keys.length; i++) {
-      const parts = this.keys[i].split("/");
-
-      // We're done if no more sequence in current level
-      if (parts.length <= startLevel) {
-        return i;
-      }
-
-      // We're going to skip all conditions
-      if (parts[startLevel + 3] === "sequence") {
-        break;
-      }
-    }
-
-    // Render choice
-    while (i < this.keys.length) {
-      const path = this.keys[i];
-      const parts = path.split("/");
-
-      // We're done if no more sequence in current level
-      if (parts.length <= startLevel) {
-        return i;
-      }
-
-      // We know it's an action sequence, so force the type like that
-      // for rendering.
-      i = this._renderItem(i, getActionType(this._getDataFromPath(path)));
-    }
-
-    return i;
-  }
-
-  private _renderEntry(description: string) {
-    this.entries.push(html`
-      <ha-timeline .icon=${mdiRecordCircleOutline}>
-        ${description}
-      </ha-timeline>
-    `);
-  }
-
-  private _getDataFromPath(path: string) {
-    return getDataFromPath(this.trace.config, path);
-  }
-}
-
-@customElement("hat-trace")
-export class HaAutomationTracer extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) private trace?: AutomationTraceExtended;
-
-  @property({ attribute: false }) private logbookEntries?: LogbookEntry[];
-
-  protected render(): TemplateResult {
-    if (!this.trace) {
-      return html``;
-    }
-    const entries = [
-      html`
-        <ha-timeline .icon=${mdiCircle}>
-          Triggered by the ${this.trace.variables.trigger.description} at
-          ${formatDateTimeWithSeconds(
-            new Date(this.trace.timestamp.start),
-            this.hass.language
-          )}
-        </ha-timeline>
-      `,
-    ];
-
-    if (this.trace.condition_trace) {
-      for (const [path, value] of Object.entries(this.trace.condition_trace)) {
-        entries.push(html`
-          <ha-timeline
-            ?lastItem=${!value[0].result.result}
-            class="condition"
-            .icon=${value[0].result.result
-              ? mdiCheckCircleOutline
-              : mdiStopCircleOutline}
-          >
-            ${getDataFromPath(this.trace!.config, path).alias ||
-            pathToName(path)}
-            ${value[0].result.result ? "passed" : "failed"}
-          </ha-timeline>
-        `);
-      }
-    }
-
-    if (this.trace.action_trace && this.logbookEntries) {
-      const timeTracker = new RenderedTimeTracker(
-        this.hass,
-        entries,
-        this.trace
-      );
-      const logbookRenderer = new LogbookRenderer(
-        entries,
-        timeTracker,
-        this.logbookEntries
-      );
-      const actionRenderer = new ActionRenderer(
-        entries,
-        this.trace,
-        timeTracker
-      );
-
-      while (logbookRenderer.hasNext && actionRenderer.hasNext) {
-        // Find next item time-wise.
-        const logbookItem = logbookRenderer.curItem;
-        const actionTrace = actionRenderer.curItem;
-        const actionTimestamp = new Date(actionTrace[0].timestamp);
-
-        if (new Date(logbookItem.when) > actionTimestamp) {
-          logbookRenderer.flush();
-          actionRenderer.renderItem();
-        } else {
-          logbookRenderer.maybeRenderItem();
-        }
-      }
-
-      while (logbookRenderer.hasNext) {
-        logbookRenderer.maybeRenderItem();
-      }
-
-      logbookRenderer.flush();
-
-      while (actionRenderer.hasNext) {
-        actionRenderer.renderItem();
-      }
-    }
-
-    // null means it was stopped by a condition
-    if (this.trace.last_action !== null) {
-      entries.push(html`
-        <ha-timeline
-          lastItem
-          .icon=${this.trace.timestamp.finish
-            ? mdiCircle
-            : mdiPauseCircleOutline}
-        >
-          ${this.trace.timestamp.finish
-            ? html`Finished at
-              ${formatDateTimeWithSeconds(
-                new Date(this.trace.timestamp.finish),
-                this.hass.language
-              )}
-              (runtime:
-              ${(
-                (new Date(this.trace.timestamp.finish!).getTime() -
-                  new Date(this.trace.timestamp.start).getTime()) /
-                1000
-              ).toFixed(2)}
-              seconds)`
-            : "Still running"}
-        </ha-timeline>
-      `);
-    }
-
-    return html`${entries}`;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      css`
-        ha-timeline[lastItem].condition {
-          --timeline-ball-color: var(--error-color);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hat-trace": HaAutomationTracer;
-  }
-}
@@ -0,0 +1,27 @@
+import { HomeAssistant } from "../types";
+
+export interface AnalyticsPreferences {
+  base?: boolean;
+  diagnostics?: boolean;
+  usage?: boolean;
+  statistics?: boolean;
+}
+
+export interface Analytics {
+  preferences: AnalyticsPreferences;
+  onboarded: boolean;
+}
+
+export const getAnalyticsDetails = (hass: HomeAssistant) =>
+  hass.callWS<Analytics>({
+    type: "analytics",
+  });
+
+export const setAnalyticsPreferences = (
+  hass: HomeAssistant,
+  preferences: AnalyticsPreferences
+) =>
+  hass.callWS<AnalyticsPreferences>({
+    type: "analytics/preferences",
+    preferences,
+  });
@@ -23,9 +23,9 @@ export interface ManualAutomationConfig {
  id?: string;
  alias?: string;
  description?: string;
-  trigger: Trigger[];
-  condition?: Condition[];
-  action: Action[];
+  trigger: Trigger | Trigger[];
+  condition?: Condition | Condition[];
+  action: Action | Action[];
  mode?: typeof MODES[number];
  max?: number;
  max_exceeded?:
@@ -161,7 +161,7 @@ export type Trigger =
 export interface LogicalCondition {
  condition: "and" | "not" | "or";
  alias?: string;
-  conditions: Condition[];
+  conditions: Condition | Condition[];
 }

 export interface StateCondition {
@@ -238,6 +238,9 @@ export const deleteAutomation = (hass: HomeAssistant, id: string) =>

 let inititialAutomationEditorData: Partial<AutomationConfig> | undefined;

+export const getAutomationConfig = (hass: HomeAssistant, id: string) =>
+  hass.callApi<AutomationConfig>("GET", `config/automation/config/${id}`);
+
 export const showAutomationEditor = (
  el: HTMLElement,
  data?: Partial<AutomationConfig>
@@ -0,0 +1,15 @@
+import { Trigger, Condition } from "./automation";
+
+export const describeTrigger = (trigger: Trigger) => {
+  return `${trigger.platform} trigger`;
+};
+
+export const describeCondition = (condition: Condition) => {
+  if (condition.alias) {
+    return condition.alias;
+  }
+  if (condition.condition === "template") {
+    return "Test a template";
+  }
+  return `${condition.condition} condition`;
+};
@@ -0,0 +1,16 @@
+import { HomeAssistant } from "../types";
+
+export type BootstrapIntegrationsTimings = { [key: string]: number };
+
+export const subscribeBootstrapIntegrations = (
+  hass: HomeAssistant,
+  callback: (message: BootstrapIntegrationsTimings) => void
+) => {
+  const unsubProm = hass.connection.subscribeMessage<
+    BootstrapIntegrationsTimings
+  >((message) => callback(message), {
+    type: "subscribe_bootstrap_integrations",
+  });
+
+  return unsubProm;
+};
@@ -54,7 +54,7 @@ export const getRecent = (
  }

  const prom = fetchRecent(hass, entityId, startTime, endTime).then(
-    (stateHistory) => computeHistory(hass, stateHistory, localize, language),
+    (stateHistory) => computeHistory(hass, stateHistory, localize),
    (err) => {
      delete RECENT_CACHE[entityId];
      throw err;
@@ -140,12 +140,7 @@ export const getRecentWithCache = (
      delete stateHistoryCache[cacheKey];
      throw err;
    }
-    const stateHistory = computeHistory(
-      hass,
-      fetchedHistory,
-      localize,
-      language
-    );
+    const stateHistory = computeHistory(hass, fetchedHistory, localize);
    if (appendingToCache) {
      mergeLine(stateHistory.line, cache.data.line);
      mergeTimeline(stateHistory.timeline, cache.data.timeline);
@@ -46,6 +46,7 @@ export interface CloudPreferences {

 export type CloudStatusLoggedIn = CloudStatusBase & {
  email: string;
+  google_registered: boolean;
  google_entities: EntityFilter;
  google_domains: string[];
  alexa_entities: EntityFilter;
@@ -5,11 +5,18 @@ export interface ConfigEntry {
  domain: string;
  title: string;
  source: string;
-  state: string;
+  state:
+    | "loaded"
+    | "setup_error"
+    | "migration_error"
+    | "setup_retry"
+    | "not_loaded"
+    | "failed_unload";
  connection_class: string;
  supports_options: boolean;
  supports_unload: boolean;
-  disabled_by: string | null;
+  disabled_by: "user" | null;
+  reason: string | null;
 }

 export interface ConfigEntryMutableParams {
@@ -1,4 +1,5 @@
 import { HaFormSchema } from "../components/ha-form/ha-form";
+import { ConfigEntry } from "./config_entries";

 export interface DataEntryFlowProgressedEvent {
  type: "data_entry_flow_progressed";
@@ -27,6 +28,7 @@ export interface DataEntryFlowStepForm {
  data_schema: HaFormSchema[];
  errors: Record<string, string>;
  description_placeholders: Record<string, string>;
+  last_step: boolean | null;
 }

 export interface DataEntryFlowStepExternal {
@@ -44,8 +46,7 @@ export interface DataEntryFlowStepCreateEntry {
  flow_id: string;
  handler: string;
  title: string;
-  // Config entry ID
-  result: string;
+  result?: ConfigEntry;
  description: string;
  description_placeholders: Record<string, string>;
 }
@@ -9,13 +9,13 @@ export interface DeviceRegistryEntry {
  config_entries: string[];
  connections: Array<[string, string]>;
  identifiers: Array<[string, string]>;
-  manufacturer: string;
-  model?: string;
-  name?: string;
-  sw_version?: string;
-  via_device_id?: string;
-  area_id?: string;
-  name_by_user?: string;
+  manufacturer: string | null;
+  model: string | null;
+  name: string | null;
+  sw_version: string | null;
+  via_device_id: string | null;
+  area_id: string | null;
+  name_by_user: string | null;
  entry_type: "service" | null;
  disabled_by: string | null;
 }
@@ -5,12 +5,12 @@ import { HomeAssistant } from "../types";

 export interface EntityRegistryEntry {
  entity_id: string;
-  name: string;
-  icon?: string;
+  name: string | null;
+  icon: string | null;
  platform: string;
-  config_entry_id?: string;
-  device_id?: string;
-  area_id?: string;
+  config_entry_id: string | null;
+  device_id: string | null;
+  area_id: string | null;
  disabled_by: string | null;
 }

@@ -104,7 +104,7 @@ export const configSyncOS = async (hass: HomeAssistant) => {
  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
    return await hass.callWS({
      type: "supervisor/api",
-      endpoint: "os/config/sync",
+      endpoint: "/os/config/sync",
      method: "post",
      timeout: null,
    });
@@ -4,6 +4,7 @@ import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { LocalizeFunc } from "../common/translations/localize";
 import { HomeAssistant } from "../types";
+import { FrontendTranslationData } from "./translation";

 const DOMAINS_USE_LAST_UPDATED = ["climate", "humidifier", "water_heater"];
 const LINE_ATTRIBUTES_TO_KEEP = [
@@ -109,7 +110,7 @@ const equalState = (obj1: LineChartState, obj2: LineChartState) =>

 const processTimelineEntity = (
  localize: LocalizeFunc,
-  language: string,
+  language: FrontendTranslationData,
  states: HassEntity[]
 ): TimelineEntity => {
  const data: TimelineState[] = [];
@@ -203,8 +204,7 @@ const processLineChartEntities = (
 export const computeHistory = (
  hass: HomeAssistant,
  stateHistory: HassEntity[][],
-  localize: LocalizeFunc,
-  language: string
+  localize: LocalizeFunc
 ): HistoryResult => {
  const lineChartDevices: { [unit: string]: HassEntity[][] } = {};
  const timelineDevices: TimelineEntity[] = [];
@@ -235,7 +235,7 @@ export const computeHistory = (

    if (!unit) {
      timelineDevices.push(
-        processTimelineEntity(localize, language, stateInfo)
+        processTimelineEntity(localize, hass.locale, stateInfo)
      );
    } else if (unit in lineChartDevices) {
      lineChartDevices[unit].push(stateInfo);
@@ -15,7 +15,13 @@ export interface IntegrationManifest {
  ssdp?: Array<{ manufacturer?: string; modelName?: string; st?: string }>;
  zeroconf?: string[];
  homekit?: { models: string[] };
-  quality_scale?: string;
+  quality_scale?: "gold" | "internal" | "platinum" | "silver";
+  iot_class:
+    | "assumed_state"
+    | "cloud_polling"
+    | "cloud_push"
+    | "local_polling"
+    | "local_push";
 }

 export const integrationIssuesUrl = (
@@ -25,8 +31,11 @@ export const integrationIssuesUrl = (
  manifest.issue_tracker ||
  `https://github.com/home-assistant/home-assistant/issues?q=is%3Aissue+is%3Aopen+label%3A%22integration%3A+${domain}%22`;

-export const domainToName = (localize: LocalizeFunc, domain: string) =>
-  localize(`component.${domain}.title`) || domain;
+export const domainToName = (
+  localize: LocalizeFunc,
+  domain: string,
+  manifest?: IntegrationManifest
+) => localize(`component.${domain}.title`) || manifest?.name || domain;

 export const fetchIntegrationManifests = (hass: HomeAssistant) =>
  hass.callWS<IntegrationManifest[]>({ type: "manifest/list" });
@@ -35,14 +35,17 @@ export const getLogbookDataForContext = async (
  hass: HomeAssistant,
  startDate: string,
  contextId?: string
-) =>
-  getLogbookDataFromServer(
+): Promise<LogbookEntry[]> =>
+  addLogbookMessage(
    hass,
-    startDate,
-    undefined,
-    undefined,
-    undefined,
-    contextId
+    await getLogbookDataFromServer(
+      hass,
+      startDate,
+      undefined,
+      undefined,
+      undefined,
+      contextId
+    )
  );

 export const getLogbookData = async (
@@ -51,15 +54,22 @@ export const getLogbookData = async (
  endDate: string,
  entityId?: string,
  entity_matches_only?: boolean
-) => {
-  const logbookData = await getLogbookDataCache(
+): Promise<LogbookEntry[]> =>
+  addLogbookMessage(
    hass,
-    startDate,
-    endDate,
-    entityId,
-    entity_matches_only
+    await getLogbookDataCache(
+      hass,
+      startDate,
+      endDate,
+      entityId,
+      entity_matches_only
+    )
  );

+export const addLogbookMessage = (
+  hass: HomeAssistant,
+  logbookData: LogbookEntry[]
+): LogbookEntry[] => {
  for (const entry of logbookData) {
    const stateObj = hass!.states[entry.entity_id!];
    if (entry.state && stateObj) {
@@ -71,7 +81,6 @@ export const getLogbookData = async (
      );
    }
  }
-
  return logbookData;
 };

@@ -314,7 +323,7 @@ export const getLogbookMessage = (
    `${LOGBOOK_LOCALIZE_PATH}.changed_to_state`,
    "state",
    stateObj
-      ? computeStateDisplay(hass.localize, stateObj, hass.language, state)
+      ? computeStateDisplay(hass.localize, stateObj, hass.locale, state)
      : state
  );
 };
@@ -19,6 +19,10 @@ export interface LovelacePanelConfig {

 export interface LovelaceConfig {
  title?: string;
+  strategy?: {
+    name: string;
+    options?: Record<string, unknown>;
+  };
  views: LovelaceViewConfig[];
  background?: string;
 }
@@ -77,6 +81,10 @@ export interface LovelaceViewConfig {
  index?: number;
  title?: string;
  type?: string;
+  strategy?: {
+    name: string;
+    options?: Record<string, unknown>;
+  };
  badges?: Array<string | LovelaceBadgeConfig>;
  cards?: LovelaceCardConfig[];
  path?: string;
@@ -94,6 +102,7 @@ export interface LovelaceViewElement extends HTMLElement {
  index?: number;
  cards?: Array<LovelaceCard | HuiErrorCard>;
  badges?: LovelaceBadge[];
+  isStrategy: boolean;
  setConfig(config: LovelaceViewConfig): void;
 }

@@ -109,7 +118,7 @@ export interface LovelaceBadgeConfig {
 export interface LovelaceCardConfig {
  index?: number;
  view_index?: number;
-  layout?: any;
+  view_layout?: any;
  type: string;
  [key: string]: any;
 }
@@ -292,9 +292,11 @@ export const computeMediaControls = (
          ? "hass:pause"
          : "hass:stop",
      action:
-        state === "playing" && !supportsFeature(stateObj, SUPPORT_PAUSE)
-          ? "media_stop"
-          : "media_play_pause",
+        state !== "playing"
+          ? "media_play"
+          : supportsFeature(stateObj, SUPPORT_PAUSE)
+          ? "media_pause"
+          : "media_stop",
    });
  }

@@ -12,10 +12,14 @@ export interface OnboardingIntegrationStepResponse {
  auth_code: string;
 }

+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface OnboardingAnalyticsStepResponse {}
+
 export interface OnboardingResponses {
  user: OnboardingUserStepResponse;
  core_config: OnboardingCoreConfigStepResponse;
  integration: OnboardingIntegrationStepResponse;
+  analytics: OnboardingAnalyticsStepResponse;
 }

 export type ValidOnboardingStep = keyof OnboardingResponses;
@@ -49,6 +53,9 @@ export const onboardCoreConfigStep = (hass: HomeAssistant) =>
    "onboarding/core_config"
  );

+export const onboardAnalyticsStep = (hass: HomeAssistant) =>
+  hass.callApi<OnboardingAnalyticsStepResponse>("POST", "onboarding/analytics");
+
 export const onboardIntegrationStep = (
  hass: HomeAssistant,
  params: { client_id: string; redirect_uri: string }
@@ -22,7 +22,7 @@ export interface ScriptEntity extends HassEntityBase {

 export interface ScriptConfig {
  alias: string;
-  sequence: Action[];
+  sequence: Action | Action[];
  icon?: string;
  mode?: typeof MODES[number];
  max?: number;
@@ -37,7 +37,8 @@ export interface EventAction {

 export interface ServiceAction {
  alias?: string;
-  service: string;
+  service?: string;
+  service_template?: string;
  entity_id?: string;
  target?: HassServiceTarget;
  data?: Record<string, any>;
@@ -76,7 +77,7 @@ export interface WaitAction {

 export interface WaitForTriggerAction {
  alias?: string;
-  wait_for_trigger: Trigger[];
+  wait_for_trigger: Trigger | Trigger[];
  timeout?: number;
  continue_on_timeout?: boolean;
 }
@@ -87,7 +88,8 @@ export interface RepeatAction {
 }

 interface BaseRepeat {
-  sequence: Action[];
+  alias?: string;
+  sequence: Action | Action[];
 }

 export interface CountRepeat extends BaseRepeat {
@@ -102,15 +104,26 @@ export interface UntilRepeat extends BaseRepeat {
  until: Condition[];
 }

+export interface ChooseActionChoice {
+  alias?: string;
+  conditions: string | Condition[];
+  sequence: Action | Action[];
+}
+
 export interface ChooseAction {
-  choose: [
-    {
-      alias?: string;
-      conditions: string | Condition[];
-      sequence: Action[];
-    }
-  ];
-  default?: Action[];
+  alias?: string;
+  choose: ChooseActionChoice[] | null;
+  default?: Action | Action[];
+}
+
+export interface VariablesAction {
+  alias?: string;
+  variables: Record<string, unknown>;
+}
+
+interface UnknownAction {
+  alias?: string;
+  [key: string]: unknown;
 }

 export type Action =
@@ -123,7 +136,26 @@ export type Action =
  | WaitAction
  | WaitForTriggerAction
  | RepeatAction
-  | ChooseAction;
+  | ChooseAction
+  | VariablesAction
+  | UnknownAction;
+
+export interface ActionTypes {
+  delay: DelayAction;
+  wait_template: WaitAction;
+  check_condition: Condition;
+  fire_event: EventAction;
+  device_action: DeviceAction;
+  activate_scene: SceneAction;
+  repeat: RepeatAction;
+  choose: ChooseAction;
+  wait_for_trigger: WaitForTriggerAction;
+  variables: VariablesAction;
+  service: ServiceAction;
+  unknown: UnknownAction;
+}
+
+export type ActionType = keyof ActionTypes;

 export const triggerScript = (
  hass: HomeAssistant,
@@ -164,7 +196,7 @@ export const getScriptEditorInitData = () => {
  return data;
 };

-export const getActionType = (action: Action) => {
+export const getActionType = (action: Action): ActionType => {
  // Check based on config_validation.py#determine_script_action
  if ("delay" in action) {
    return "delay";
@@ -0,0 +1,142 @@
+import secondsToDuration from "../common/datetime/seconds_to_duration";
+import { ensureArray } from "../common/ensure-array";
+import { computeStateName } from "../common/entity/compute_state_name";
+import { isTemplate } from "../common/string/has-template";
+import { HomeAssistant } from "../types";
+import { Condition } from "./automation";
+import { describeCondition, describeTrigger } from "./automation_i18n";
+import {
+  ActionType,
+  getActionType,
+  DelayAction,
+  SceneAction,
+  WaitForTriggerAction,
+  ActionTypes,
+  VariablesAction,
+  EventAction,
+} from "./script";
+
+export const describeAction = <T extends ActionType>(
+  hass: HomeAssistant,
+  action: ActionTypes[T],
+  actionType?: T
+): string => {
+  if (action.alias) {
+    return action.alias;
+  }
+  if (!actionType) {
+    actionType = getActionType(action) as T;
+  }
+
+  if (actionType === "service") {
+    const config = action as ActionTypes["service"];
+
+    let base: string | undefined;
+
+    if (
+      config.service_template ||
+      (config.service && isTemplate(config.service))
+    ) {
+      base = "Call a service based on a template";
+    } else if (config.service) {
+      base = `Call service ${config.service}`;
+    } else {
+      return actionType;
+    }
+    if (config.target) {
+      const targets: string[] = [];
+
+      for (const [key, label] of Object.entries({
+        area_id: "areas",
+        device_id: "devices",
+        entity_id: "entities",
+      })) {
+        if (!(key in config.target)) {
+          continue;
+        }
+        const keyConf: string[] = Array.isArray(config.target[key])
+          ? config.target[key]
+          : [config.target[key]];
+
+        const values: string[] = [];
+
+        let renderValues = true;
+
+        for (const targetThing of keyConf) {
+          if (isTemplate(targetThing)) {
+            targets.push(`templated ${label}`);
+            renderValues = false;
+            break;
+          } else {
+            values.push(targetThing);
+          }
+        }
+
+        if (renderValues) {
+          targets.push(`${label} ${values.join(", ")}`);
+        }
+      }
+      if (targets.length > 0) {
+        base += ` on ${targets.join(", ")}`;
+      }
+    }
+
+    return base;
+  }
+
+  if (actionType === "delay") {
+    const config = action as DelayAction;
+
+    let duration: string;
+
+    if (typeof config.delay === "number") {
+      duration = `for ${secondsToDuration(config.delay)!}`;
+    } else if (typeof config.delay === "string") {
+      duration = isTemplate(config.delay)
+        ? "based on a template"
+        : `for ${config.delay}`;
+    } else {
+      duration = `for ${JSON.stringify(config.delay)}`;
+    }
+
+    return `Delay ${duration}`;
+  }
+
+  if (actionType === "activate_scene") {
+    const config = action as SceneAction;
+    const sceneStateObj = hass.states[config.scene];
+    return `Activate scene ${
+      sceneStateObj ? computeStateName(sceneStateObj) : config.scene
+    }`;
+  }
+
+  if (actionType === "wait_for_trigger") {
+    const config = action as WaitForTriggerAction;
+    return `Wait for ${ensureArray(config.wait_for_trigger)
+      .map((trigger) => describeTrigger(trigger))
+      .join(", ")}`;
+  }
+
+  if (actionType === "variables") {
+    const config = action as VariablesAction;
+    return `Define variables ${Object.keys(config.variables).join(", ")}`;
+  }
+
+  if (actionType === "fire_event") {
+    const config = action as EventAction;
+    if (isTemplate(config.event)) {
+      return "Fire event based on a template";
+    }
+    return `Fire event ${config.event}`;
+  }
+
+  if (actionType === "wait_template") {
+    return "Wait for a template to render true";
+  }
+
+  if (actionType === "check_condition") {
+    return `Test ${describeCondition(action as Condition)}`;
+  }
+
+  return actionType;
+};
@@ -6,3 +6,6 @@ export const callExecuteScript = (hass: HomeAssistant, sequence: Action[]) =>
    type: "execute_script",
    sequence,
  });
+
+export const serviceCallWillDisconnect = (domain: string, service: string) =>
+  domain === "homeassistant" && ["restart", "stop"].includes(service);
@@ -16,9 +16,27 @@ export interface LoggedError {
 export const fetchSystemLog = (hass: HomeAssistant) =>
  hass.callApi<LoggedError[]>("GET", "error/all");

-export const getLoggedErrorIntegration = (item: LoggedError) =>
-  item.name.startsWith("homeassistant.components.")
-    ? item.name.split(".")[2]
-    : item.name.startsWith("custom_components.")
-    ? item.name.split(".")[1]
-    : undefined;
+export const getLoggedErrorIntegration = (item: LoggedError) => {
+  // Try to derive from logger name
+  if (item.name.startsWith("homeassistant.components.")) {
+    return item.name.split(".")[2];
+  }
+  if (item.name.startsWith("custom_components.")) {
+    return item.name.split(".")[1];
+  }
+
+  // Try to derive from logged location
+  if (item.source[0].startsWith("custom_components/")) {
+    return item.source[0].split("/")[1];
+  }
+
+  if (item.source[0].startsWith("homeassistant/components/")) {
+    return item.source[0].split("/")[2];
+  }
+
+  return undefined;
+};
+
+export const isCustomIntegrationError = (item: LoggedError) =>
+  item.name.startsWith("custom_components.") ||
+  item.source[0].startsWith("custom_components/");
@@ -1,65 +1,96 @@
+import { strStartsWith } from "../common/string/starts-with";
 import { HomeAssistant, Context } from "../types";
-import { AutomationConfig } from "./automation";
+import {
+  BlueprintAutomationConfig,
+  ManualAutomationConfig,
+} from "./automation";

-interface TraceVariables extends Record<string, unknown> {
-  trigger: {
-    description: string;
+interface BaseTraceStep {
+  path: string;
+  timestamp: string;
+  error?: string;
+  changed_variables?: Record<string, unknown>;
+}
+
+export interface TriggerTraceStep extends BaseTraceStep {
+  changed_variables: {
+    trigger: {
+      description: string;
+      [key: string]: unknown;
+    };
    [key: string]: unknown;
  };
 }

-interface BaseTrace {
-  path: string;
-  timestamp: string;
-  changed_variables?: Record<string, unknown>;
+export interface ConditionTraceStep extends BaseTraceStep {
+  result?: { result: boolean };
 }

-export interface ConditionTrace extends BaseTrace {
-  result: { result: boolean };
-}
-
-export interface CallServiceActionTrace extends BaseTrace {
-  result: {
+export interface CallServiceActionTraceStep extends BaseTraceStep {
+  result?: {
    limit: number;
    running_script: boolean;
    params: Record<string, unknown>;
  };
+  child_id?: {
+    domain: string;
+    item_id: string;
+    run_id: string;
+  };
 }

-export interface ChooseActionTrace extends BaseTrace {
-  result: { choice: number | "default" };
+export interface ChooseActionTraceStep extends BaseTraceStep {
+  result?: { choice: number | "default" };
 }

-export interface ChooseChoiceActionTrace extends BaseTrace {
-  result: { result: boolean };
+export interface ChooseChoiceActionTraceStep extends BaseTraceStep {
+  result?: { result: boolean };
 }

-export type ActionTrace =
-  | BaseTrace
-  | CallServiceActionTrace
-  | ChooseActionTrace
-  | ChooseChoiceActionTrace;
+export type ActionTraceStep =
+  | BaseTraceStep
+  | ConditionTraceStep
+  | CallServiceActionTraceStep
+  | ChooseActionTraceStep
+  | ChooseChoiceActionTraceStep;

 export interface AutomationTrace {
  domain: string;
  item_id: string;
-  last_action: string | null;
-  last_condition: string | null;
+  last_step: string | null;
  run_id: string;
  state: "running" | "stopped" | "debugged";
  timestamp: {
    start: string;
    finish: string | null;
  };
-  trigger: unknown;
+  script_execution:
+    | // The script was not executed because the automation's condition failed
+    "failed_conditions"
+    // The script was not executed because the run mode is single
+    | "failed_single"
+    // The script was not executed because max parallel runs would be exceeded
+    | "failed_max_runs"
+    // All script steps finished:
+    | "finished"
+    // Script execution stopped by the script itself because a condition fails, wait_for_trigger timeouts etc:
+    | "aborted"
+    // Details about failing condition, timeout etc. is in the last element of the trace
+    // Script execution stops because of an unexpected exception:
+    | "error"
+    // The exception is in the trace itself or in the last element of the trace
+    // Script execution stopped by async_stop called on the script run because home assistant is shutting down, script mode is SCRIPT_MODE_RESTART etc:
+    | "cancelled";
+  // Automation only, should become it's own type when we support script in frontend
+  trigger: string;
 }

 export interface AutomationTraceExtended extends AutomationTrace {
-  condition_trace: Record<string, ConditionTrace[]>;
-  action_trace: Record<string, ActionTrace[]>;
+  trace: Record<string, ActionTraceStep[]>;
  context: Context;
-  variables: TraceVariables;
-  config: AutomationConfig;
+  config: ManualAutomationConfig;
+  blueprint_inputs?: BlueprintAutomationConfig;
+  error?: string;
 }

 interface TraceTypes {
@@ -110,7 +141,7 @@ export const loadTraceContexts = (
  });

 export const getDataFromPath = (
-  config: AutomationConfig,
+  config: ManualAutomationConfig,
  path: string
 ): any => {
  const parts = path.split("/").reverse();
@@ -138,3 +169,11 @@ export const getDataFromPath = (

  return result;
 };
+
+// It is 'trigger' if manually triggered by the user via UI
+export const isTriggerPath = (path: string): boolean =>
+  path === "trigger" || strStartsWith(path, "trigger/");
+
+export const getTriggerPathFromTrace = (
+  steps: Record<string, BaseTraceStep[]>
+): string | undefined => Object.keys(steps).find((path) => isTriggerPath(path));
@@ -1,8 +1,18 @@
 import { HomeAssistant } from "../types";
 import { fetchFrontendUserData, saveFrontendUserData } from "./frontend";

+export enum NumberFormat {
+  language = "language",
+  system = "system",
+  comma_decimal = "comma_decimal",
+  decimal_comma = "decimal_comma",
+  space_comma = "space_comma",
+  none = "none",
+}
+
 export interface FrontendTranslationData {
  language: string;
+  number_format: NumberFormat;
 }

 declare global {
--- a/Show More
+++ b/Show More