PR comment

.github/workflows/cast_deployment.yaml

@@ -21,7 +21,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: dev
 
@@ -56,7 +56,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: master
 

.github/workflows/ci.yaml

@@ -24,7 +24,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
@@ -58,7 +58,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
@@ -76,7 +76,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
@@ -100,7 +100,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           # We must fetch at least the immediate parents so that if this is
           # a pull request then we can checkout the head.
@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@e12f0178983d466f2f6028f5cc7a6d786fd97f4b # v4.31.4
+        uses: github/codeql-action/init@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@e12f0178983d466f2f6028f5cc7a6d786fd97f4b # v4.31.4
+        uses: github/codeql-action/autobuild@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@e12f0178983d466f2f6028f5cc7a6d786fd97f4b # v4.31.4
+        uses: github/codeql-action/analyze@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3

.github/workflows/demo_deployment.yaml

@@ -22,7 +22,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: dev
 
@@ -57,7 +57,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: master
 

.github/workflows/design_deployment.yaml

@@ -16,7 +16,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Setup Node
         uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0

.github/workflows/design_preview.yaml

@@ -21,7 +21,7 @@ jobs:
     if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Setup Node
         uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0

.github/workflows/nightly.yaml

@@ -20,7 +20,7 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6

.github/workflows/release.yaml

@@ -23,7 +23,7 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
@@ -91,7 +91,7 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
@@ -120,7 +120,7 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:

.github/workflows/translations.yaml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Upload Translations
         run: |

gallery/src/pages/components/ha-dropdown.markdown

@@ -11,7 +11,7 @@ A compact, accessible dropdown menu for choosing actions or settings. `ha-dropdo
 ### Example usage (composition)
 
 ```html
-<ha-dropdown>
+<ha-dropdown open>
   <ha-button slot="trigger" with-caret>Dropdown</ha-button>
 
   <ha-dropdown-item>

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

@@ -28,7 +28,7 @@ export class DemoHaDropdown extends LitElement {
           <div class=${mode}>
             <ha-card header="ha-button in ${mode}">
               <div class="card-content">
-                <ha-dropdown>
+                <ha-dropdown open>
                   <ha-button slot="trigger" with-caret>Dropdown</ha-button>
 
                   <ha-dropdown-item>

package.json

@@ -112,7 +112,7 @@
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
     "hls.js": "1.6.14",
-    "home-assistant-js-websocket": "9.6.0",
+    "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.18",
     "js-yaml": "4.1.1",

src/auth/ha-auth-flow.ts

@@ -2,8 +2,8 @@
 import { genClientId } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
 import { keyed } from "lit/directives/keyed";
+import { customElement, property, state } from "lit/decorators";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-alert";
 import "../components/ha-button";
@@ -59,8 +59,7 @@ export class HaAuthFlow extends LitElement {
   willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
 
-    if (!this.hasUpdated && this.clientId === genClientId()) {
-      // Preselect store token when logging in to own instance
+    if (!this.hasUpdated) {
       this._storeToken = this.initStoreToken;
     }
 
@@ -118,9 +117,6 @@ export class HaAuthFlow extends LitElement {
           display: block;
           margin-top: 16px;
         }
-        .action ha-button {
-          width: 100%;
-        }
       </style>
       <form>${this._renderForm()}</form>
     `;

src/common/color/colors.ts

@@ -1,64 +1,16 @@
 import memoizeOne from "memoize-one";
 import { theme2hex } from "./convert-color";
 
-export const COLORS = [
-  "#4269d0",
-  "#f4bd4a",
-  "#ff725c",
-  "#6cc5b0",
-  "#a463f2",
-  "#ff8ab7",
-  "#9c6b4e",
-  "#97bbf5",
-  "#01ab63",
-  "#094bad",
-  "#c99000",
-  "#d84f3e",
-  "#49a28f",
-  "#048732",
-  "#d96895",
-  "#8043ce",
-  "#7599d1",
-  "#7a4c31",
-  "#6989f4",
-  "#ffd444",
-  "#ff957c",
-  "#8fe9d3",
-  "#62cc71",
-  "#ffadda",
-  "#c884ff",
-  "#badeff",
-  "#bf8b6d",
-  "#927acc",
-  "#97ee3f",
-  "#bf3947",
-  "#9f5b00",
-  "#f48758",
-  "#8caed6",
-  "#f2b94f",
-  "#eff26e",
-  "#e43872",
-  "#d9b100",
-  "#9d7a00",
-  "#698cff",
-  "#00d27e",
-  "#d06800",
-  "#009f82",
-  "#c49200",
-  "#cbe8ff",
-  "#fecddf",
-  "#c27eb6",
-  "#8cd2ce",
-  "#c4b8d9",
-  "#f883b0",
-  "#a49100",
-  "#f48800",
-  "#27d0df",
-  "#a04a9b",
-];
+// Total number of colors defined in CSS variables (--color-1 through --color-54)
+export const COLORS_COUNT = 54;
 
-export function getColorByIndex(index: number) {
-  return COLORS[index % COLORS.length];
+export function getColorByIndex(
+  index: number,
+  style: CSSStyleDeclaration
+): string {
+  // Wrap around using modulo to support unlimited indices
+  const colorIndex = (index % COLORS_COUNT) + 1;
+  return style.getPropertyValue(`--color-${colorIndex}`);
 }
 
 export function getGraphColorByIndex(
@@ -68,15 +20,19 @@ export function getGraphColorByIndex(
   // The CSS vars for the colors use range 1..n, so we need to adjust the index from the internal 0..n color index range.
   const themeColor =
     style.getPropertyValue(`--graph-color-${index + 1}`) ||
-    getColorByIndex(index);
+    getColorByIndex(index, style);
   return theme2hex(themeColor);
 }
 
 export const getAllGraphColors = memoizeOne(
   (style: CSSStyleDeclaration) =>
-    COLORS.map((_color, index) => getGraphColorByIndex(index, style)),
+    Array.from({ length: COLORS_COUNT }, (_, index) =>
+      getGraphColorByIndex(index, style)
+    ),
   (newArgs: [CSSStyleDeclaration], lastArgs: [CSSStyleDeclaration]) =>
     // this is not ideal, but we need to memoize the colors
     newArgs[0].getPropertyValue("--graph-color-1") ===
-    lastArgs[0].getPropertyValue("--graph-color-1")
+      lastArgs[0].getPropertyValue("--graph-color-1") &&
+    newArgs[0].getPropertyValue("--color-1") ===
+      lastArgs[0].getPropertyValue("--color-1")
 );

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

@@ -597,15 +597,10 @@ export class HaChartBase extends LitElement {
       aria: { show: true },
       dataZoom: this._getDataZoomConfig(),
       toolbox: {
-        top: Number.MAX_SAFE_INTEGER,
-        left: Number.MAX_SAFE_INTEGER,
+        top: Infinity,
+        left: Infinity,
         feature: {
-          dataZoom: {
-            show: true,
-            yAxisIndex: false,
-            filterMode: "none",
-            showTitle: false,
-          },
+          dataZoom: { show: true, yAxisIndex: false, filterMode: "none" },
         },
         iconStyle: { opacity: 0 },
       },

src/components/ha-assist-chat.ts

@@ -17,7 +17,6 @@ import type { HomeAssistant } from "../types";
 import { AudioRecorder } from "../util/audio-recorder";
 import { documentationUrl } from "../util/documentation-url";
 import "./ha-alert";
-import "./ha-markdown";
 import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
 
@@ -41,11 +40,7 @@ export class HaAssistChat extends LitElement {
 
   @query("#message-input") private _messageInput!: HaTextField;
 
-  @query(".message:last-child")
-  private _lastChatMessage!: LitElement;
-
-  @query(".message:last-child img:last-of-type")
-  private _lastChatMessageImage: HTMLImageElement | undefined;
+  @query("#scroll-container") private _scrollContainer!: HTMLDivElement;
 
   @state() private _conversation: AssistMessage[] = [];
 
@@ -97,7 +92,10 @@ export class HaAssistChat extends LitElement {
   public disconnectedCallback() {
     super.disconnectedCallback();
     this._audioRecorder?.close();
+    this._audioRecorder = undefined;
     this._unloadAudio();
+    this._conversation = [];
+    this._conversationId = null;
   }
 
   protected render(): TemplateResult {
@@ -114,7 +112,7 @@ export class HaAssistChat extends LitElement {
     const supportsSTT = this.pipeline?.stt_engine && !this.disableSpeech;
 
     return html`
-      <div class="messages">
+      <div class="messages" id="scroll-container">
         ${controlHA
           ? nothing
           : html`
@@ -126,18 +124,11 @@ export class HaAssistChat extends LitElement {
             `}
         <div class="spacer"></div>
         ${this._conversation!.map(
+          // New lines matter for messages
+          // prettier-ignore
           (message) => html`
-            <ha-markdown
-              class="message ${classMap({
-                error: !!message.error,
-                [message.who]: true,
-              })}"
-              breaks
-              cache
-              .content=${message.text}
-            >
-            </ha-markdown>
-          `
+                <div class="message ${classMap({ error: !!message.error, [message.who]: true })}">${message.text}</div>
+              `
         )}
       </div>
       <div class="input" slot="primaryAction">
@@ -198,28 +189,12 @@ export class HaAssistChat extends LitElement {
     `;
   }
 
-  private async _scrollMessagesBottom() {
-    const lastChatMessage = this._lastChatMessage;
-    if (!lastChatMessage.hasUpdated) {
-      await lastChatMessage.updateComplete;
-    }
-    if (
-      this._lastChatMessageImage &&
-      !this._lastChatMessageImage.naturalHeight
-    ) {
-      try {
-        await this._lastChatMessageImage.decode();
-      } catch (err: any) {
-        // eslint-disable-next-line no-console
-        console.warn("Failed to decode image:", err);
-      }
-    }
-    const isLastMessageFullyVisible =
-      lastChatMessage.getBoundingClientRect().y <
-      this.getBoundingClientRect().top + 24;
-    if (!isLastMessageFullyVisible) {
-      lastChatMessage.scrollIntoView({ behavior: "smooth", block: "start" });
+  private _scrollMessagesBottom() {
+    const scrollContainer = this._scrollContainer;
+    if (!scrollContainer) {
+      return;
     }
+    scrollContainer.scrollTo(0, scrollContainer.scrollHeight);
   }
 
   private _handleKeyUp(ev: KeyboardEvent) {
@@ -611,31 +586,42 @@ export class HaAssistChat extends LitElement {
       flex: 1;
     }
     .message {
+      white-space: pre-line;
       font-size: var(--ha-font-size-l);
       clear: both;
-      max-width: -webkit-fill-available;
-      overflow-wrap: break-word;
-      scroll-margin-top: 24px;
       margin: 8px 0;
       padding: 8px;
       border-radius: var(--ha-border-radius-xl);
     }
+    .message:last-child {
+      margin-bottom: 0;
+    }
+
     @media all and (max-width: 450px), all and (max-height: 500px) {
       .message {
         font-size: var(--ha-font-size-l);
       }
     }
+
+    .message p {
+      margin: 0;
+    }
+    .message p:not(:last-child) {
+      margin-bottom: 8px;
+    }
+
     .message.user {
       margin-left: 24px;
       margin-inline-start: 24px;
       margin-inline-end: initial;
       align-self: flex-end;
+      text-align: right;
       border-bottom-right-radius: 0px;
-      --markdown-link-color: var(--text-primary-color);
       background-color: var(--chat-background-color-user, var(--primary-color));
       color: var(--text-primary-color);
       direction: var(--direction);
     }
+
     .message.hass {
       margin-right: 24px;
       margin-inline-end: 24px;
@@ -650,21 +636,20 @@ export class HaAssistChat extends LitElement {
       color: var(--primary-text-color);
       direction: var(--direction);
     }
+
+    .message.user a {
+      color: var(--text-primary-color);
+    }
+
+    .message.hass a {
+      color: var(--primary-text-color);
+    }
+
     .message.error {
       background-color: var(--error-color);
       color: var(--text-primary-color);
     }
-    ha-markdown {
-      --markdown-image-border-radius: calc(var(--ha-border-radius-xl) / 2);
-      --markdown-table-border-color: var(--divider-color);
-      --markdown-code-background-color: var(--primary-background-color);
-      --markdown-code-text-color: var(--primary-text-color);
-      &:not(:has(ha-markdown-element)) {
-        min-height: 1lh;
-        min-width: 1lh;
-        flex-shrink: 0;
-      }
-    }
+
     .bouncer {
       width: 48px;
       height: 48px;

src/components/ha-dialog-header.ts

@@ -75,15 +75,11 @@ export class HaDialogHeader extends LitElement {
           font-size: var(--ha-font-size-xl);
           line-height: var(--ha-line-height-condensed);
           font-weight: var(--ha-font-weight-medium);
-          color: var(--ha-dialog-header-title-color, var(--primary-text-color));
         }
         .header-subtitle {
           font-size: var(--ha-font-size-m);
           line-height: var(--ha-line-height-normal);
-          color: var(
-            --ha-dialog-header-subtitle-color,
-            var(--secondary-text-color)
-          );
+          color: var(--secondary-text-color);
         }
         @media all and (min-width: 450px) and (min-height: 500px) {
           .header-bar {

src/components/ha-expansion-panel.ts

@@ -209,7 +209,6 @@ export class HaExpansionPanel extends LitElement {
     ::slotted([slot="header"]) {
       flex: 1;
       overflow-wrap: anywhere;
-      color: var(--primary-text-color);
     }
 
     .container {

src/components/ha-markdown-element.ts

@@ -1,15 +1,11 @@
 import type { PropertyValues } from "lit";
-import { ReactiveElement, render, html } from "lit";
+import { ReactiveElement } from "lit";
 import { customElement, property } from "lit/decorators";
-// eslint-disable-next-line import/extensions
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import hash from "object-hash";
 import { fireEvent } from "../common/dom/fire_event";
 import { renderMarkdown } from "../resources/render-markdown";
 import { CacheManager } from "../util/cache-manager";
 
-const h = (template: ReturnType<typeof unsafeHTML>) => html`${template}`;
-
 const markdownCache = new CacheManager<string>(1000);
 
 const _gitHubMarkdownAlerts = {
@@ -52,26 +48,18 @@ class HaMarkdownElement extends ReactiveElement {
     return this;
   }
 
-  private _renderPromise: ReturnType<typeof this._render> = Promise.resolve();
-
   protected update(changedProps) {
     super.update(changedProps);
     if (this.content !== undefined) {
-      this._renderPromise = this._render();
+      this._render();
     }
   }
 
-  protected async getUpdateComplete(): Promise<boolean> {
-    await super.getUpdateComplete();
-    await this._renderPromise;
-    return true;
-  }
-
   protected willUpdate(_changedProperties: PropertyValues): void {
     if (!this.innerHTML && this.cache) {
       const key = this._computeCacheKey();
       if (markdownCache.has(key)) {
-        render(markdownCache.get(key)!, this.renderRoot);
+        this.innerHTML = markdownCache.get(key)!;
         this._resize();
       }
     }
@@ -87,7 +75,7 @@ class HaMarkdownElement extends ReactiveElement {
   }
 
   private async _render() {
-    const elements = await renderMarkdown(
+    this.innerHTML = await renderMarkdown(
       String(this.content),
       {
         breaks: this.breaks,
@@ -99,11 +87,6 @@ class HaMarkdownElement extends ReactiveElement {
       }
     );
 
-    render(
-      elements.map((e) => h(unsafeHTML(e))),
-      this.renderRoot
-    );
-
     this._resize();
 
     const walker = document.createTreeWalker(

src/components/ha-markdown.ts

@@ -1,12 +1,5 @@
-import {
-  css,
-  html,
-  LitElement,
-  nothing,
-  type ReactiveElement,
-  type CSSResultGroup,
-} from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
+import { customElement, property } from "lit/decorators";
 import "./ha-markdown-element";
 
 @customElement("ha-markdown")
@@ -25,14 +18,6 @@ export class HaMarkdown extends LitElement {
 
   @property({ type: Boolean }) public cache = false;
 
-  @query("ha-markdown-element") private _markdownElement!: ReactiveElement;
-
-  protected async getUpdateComplete() {
-    const result = await super.getUpdateComplete();
-    await this._markdownElement.updateComplete;
-    return result;
-  }
-
   protected render() {
     if (!this.content) {
       return nothing;
@@ -68,46 +53,19 @@ export class HaMarkdown extends LitElement {
       margin: var(--ha-space-1) 0;
     }
     a {
-      color: var(--markdown-link-color, var(--primary-color));
+      color: var(--primary-color);
     }
     img {
-      background-color: rgba(10, 10, 10, 0.15);
-      border-radius: var(--markdown-image-border-radius);
       max-width: 100%;
-      min-height: 2lh;
-      height: auto;
-      width: auto;
-      text-indent: 4px;
-      transition: height 0.2s ease-in-out;
-    }
-    p:first-child > img:first-child {
-      vertical-align: top;
-    }
-    p:first-child > img:last-child {
-      vertical-align: top;
-    }
-    ol,
-    ul {
-      list-style-position: inside;
-      padding-inline-start: 0;
-    }
-    li {
-      &:has(input[type="checkbox"]) {
-        list-style: none;
-        & > input[type="checkbox"] {
-          margin-left: 0;
-        }
-      }
-    }
-    svg {
-      background-color: var(--markdown-svg-background-color, none);
-      color: var(--markdown-svg-color, none);
     }
     code,
     pre {
       background-color: var(--markdown-code-background-color, none);
       border-radius: var(--ha-border-radius-sm);
-      color: var(--markdown-code-text-color, inherit);
+    }
+    svg {
+      background-color: var(--markdown-svg-background-color, none);
+      color: var(--markdown-svg-color, none);
     }
     code {
       font-size: var(--ha-font-size-s);
@@ -139,24 +97,6 @@ export class HaMarkdown extends LitElement {
       border-bottom: none;
       margin: var(--ha-space-4) 0;
     }
-    table {
-      border-collapse: collapse;
-      display: block;
-      overflow-x: auto;
-    }
-    th {
-      text-align: start;
-    }
-    td,
-    th {
-      border: 1px solid var(--markdown-table-border-color, transparent);
-      padding: 0.25em 0.5em;
-    }
-    blockquote {
-      border-left: 4px solid var(--divider-color);
-      margin-inline: 0;
-      padding-inline: 1em;
-    }
   ` as CSSResultGroup;
 }
 

src/components/ha-snowflakes.ts

@@ -1,178 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import type { HomeAssistant } from "../types";
-import { subscribeLabFeatures } from "../data/labs";
-import { SubscribeMixin } from "../mixins/subscribe-mixin";
-
-interface Snowflake {
-  id: number;
-  left: number;
-  size: number;
-  duration: number;
-  delay: number;
-  blur: number;
-}
-
-@customElement("ha-snowflakes")
-export class HaSnowflakes extends SubscribeMixin(LitElement) {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  @state() private _enabled = false;
-
-  @state() private _snowflakes: Snowflake[] = [];
-
-  private _maxSnowflakes = 50;
-
-  public hassSubscribe() {
-    return [
-      subscribeLabFeatures(this.hass!.connection, (features) => {
-        this._enabled =
-          features.find(
-            (f) =>
-              f.domain === "frontend" && f.preview_feature === "winter_mode"
-          )?.enabled ?? false;
-      }),
-    ];
-  }
-
-  private _generateSnowflakes() {
-    if (!this._enabled) {
-      this._snowflakes = [];
-      return;
-    }
-
-    const snowflakes: Snowflake[] = [];
-    for (let i = 0; i < this._maxSnowflakes; i++) {
-      snowflakes.push({
-        id: i,
-        left: Math.random() * 100, // Random position from 0-100%
-        size: Math.random() * 12 + 8, // Random size between 8-20px
-        duration: Math.random() * 8 + 8, // Random duration between 8-16s
-        delay: Math.random() * 8, // Random delay between 0-8s
-        blur: Math.random() * 1, // Random blur between 0-1px
-      });
-    }
-    this._snowflakes = snowflakes;
-  }
-
-  protected willUpdate(changedProps: Map<string, unknown>) {
-    super.willUpdate(changedProps);
-    if (changedProps.has("_enabled")) {
-      this._generateSnowflakes();
-    }
-  }
-
-  protected render() {
-    if (!this._enabled) {
-      return nothing;
-    }
-
-    const isDark = this.hass?.themes.darkMode ?? false;
-
-    return html`
-      <div class="snowflakes ${isDark ? "dark" : "light"}" aria-hidden="true">
-        ${this._snowflakes.map(
-          (flake) => html`
-            <div
-              class="snowflake ${this.narrow && flake.id >= 30
-                ? "hide-narrow"
-                : ""}"
-              style="
-                left: ${flake.left}%;
-                font-size: ${flake.size}px;
-                animation-duration: ${flake.duration}s;
-                animation-delay: ${flake.delay}s;
-                filter: blur(${flake.blur}px);
-              "
-            >
-              ❄
-            </div>
-          `
-        )}
-      </div>
-    `;
-  }
-
-  static readonly styles = css`
-    :host {
-      display: block;
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 9999;
-      overflow: hidden;
-    }
-
-    .snowflakes {
-      position: absolute;
-      top: -10%;
-      left: 0;
-      width: 100%;
-      height: 110%;
-      pointer-events: none;
-    }
-
-    .snowflake {
-      position: absolute;
-      top: -10%;
-      opacity: 0.7;
-      user-select: none;
-      pointer-events: none;
-      animation: fall linear infinite;
-    }
-
-    .light .snowflake {
-      color: #00bcd4;
-      text-shadow:
-        0 0 5px #00bcd4,
-        0 0 10px #00e5ff;
-    }
-
-    .dark .snowflake {
-      color: #fff;
-      text-shadow:
-        0 0 5px rgba(255, 255, 255, 0.8),
-        0 0 10px rgba(255, 255, 255, 0.5);
-    }
-
-    .snowflake.hide-narrow {
-      display: none;
-    }
-
-    @keyframes fall {
-      0% {
-        transform: translateY(-10vh) translateX(0);
-      }
-      25% {
-        transform: translateY(30vh) translateX(10px);
-      }
-      50% {
-        transform: translateY(60vh) translateX(-10px);
-      }
-      75% {
-        transform: translateY(85vh) translateX(10px);
-      }
-      100% {
-        transform: translateY(120vh) translateX(0);
-      }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .snowflake {
-        animation: none;
-        display: none;
-      }
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-snowflakes": HaSnowflakes;
-  }
-}

src/data/analytics.ts

@@ -5,7 +5,6 @@ export interface AnalyticsPreferences {
   diagnostics?: boolean;
   usage?: boolean;
   statistics?: boolean;
-  snapshots?: boolean;
 }
 
 export interface Analytics {

src/data/assist_pipeline.ts

@@ -214,8 +214,6 @@ export interface PipelineRun {
   stage: "ready" | "wake_word" | "stt" | "intent" | "tts" | "done" | "error";
   run: PipelineRunStartEvent["data"];
   error?: PipelineErrorEvent["data"];
-  started: Date;
-  finished?: Date;
   wake_word?: PipelineWakeWordStartEvent["data"] &
     Partial<PipelineWakeWordEndEvent["data"]> & { done: boolean };
   stt?: PipelineSTTStartEvent["data"] &
@@ -237,7 +235,6 @@ export const processEvent = (
       stage: "ready",
       run: event.data,
       events: [event],
-      started: new Date(event.timestamp),
     };
     return run;
   }
@@ -293,14 +290,9 @@ export const processEvent = (
       tts: { ...run.tts!, ...event.data, done: true },
     };
   } else if (event.type === "run-end") {
-    run = { ...run, finished: new Date(event.timestamp), stage: "done" };
+    run = { ...run, stage: "done" };
   } else if (event.type === "error") {
-    run = {
-      ...run,
-      finished: new Date(event.timestamp),
-      stage: "error",
-      error: event.data,
-    };
+    run = { ...run, stage: "error", error: event.data };
   } else {
     run = { ...run };
   }

src/data/backup.ts

@@ -10,7 +10,6 @@ import {
 import { formatTime } from "../common/datetime/format_time";
 import type { LocalizeFunc } from "../common/translations/localize";
 import type { HomeAssistant } from "../types";
-import { documentationUrl } from "../util/documentation-url";
 import { fileDownload } from "../util/file_download";
 import { handleFetchPromise } from "../util/hass-call-api";
 import type { BackupManagerState, ManagerStateEvent } from "./backup_manager";
@@ -415,7 +414,7 @@ ${hass.auth.data.hassUrl}
 ${hass.localize("ui.panel.config.backup.emergency_kit_file.encryption_key")}
 ${encryptionKey}
 
-${hass.localize("ui.panel.config.backup.emergency_kit_file.more_info", { link: documentationUrl(hass, "/more-info/backup-emergency-kit") })}`);
+${hass.localize("ui.panel.config.backup.emergency_kit_file.more_info", { link: "https://www.home-assistant.io/more-info/backup-emergency-kit" })}`);
 
 export const geneateEmergencyKitFileName = (
   hass: HomeAssistant,

src/data/calendar.ts

@@ -137,8 +137,12 @@ const getCalendarDate = (dateObj: any): string | undefined => {
   return undefined;
 };
 
-export const getCalendars = (hass: HomeAssistant): Calendar[] =>
-  Object.keys(hass.states)
+export const getCalendars = (
+  hass: HomeAssistant,
+  element: Element
+): Calendar[] => {
+  const computedStyles = getComputedStyle(element);
+  return Object.keys(hass.states)
     .filter(
       (eid) =>
         computeDomain(eid) === "calendar" &&
@@ -149,8 +153,9 @@ export const getCalendars = (hass: HomeAssistant): Calendar[] =>
     .map((eid, idx) => ({
       ...hass.states[eid],
       name: computeStateName(hass.states[eid]),
-      backgroundColor: getColorByIndex(idx),
+      backgroundColor: getColorByIndex(idx, computedStyles),
     }));
+};
 
 export const createCalendarEvent = (
   hass: HomeAssistant,

src/data/chat_log.ts

@@ -1,228 +0,0 @@
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import type { HomeAssistant } from "../types";
-
-export const enum ChatLogEventType {
-  INITIAL_STATE = "initial_state",
-  CREATED = "created",
-  UPDATED = "updated",
-  DELETED = "deleted",
-  CONTENT_ADDED = "content_added",
-}
-
-export interface ChatLogAttachment {
-  media_content_id: string;
-  mime_type: string;
-  path: string;
-}
-
-export interface ChatLogSystemContent {
-  role: "system";
-  content: string;
-  created: Date;
-}
-
-export interface ChatLogUserContent {
-  role: "user";
-  content: string;
-  created: Date;
-  attachments?: ChatLogAttachment[];
-}
-
-export interface ChatLogAssistantContent {
-  role: "assistant";
-  agent_id: string;
-  created: Date;
-  content?: string;
-  thinking_content?: string;
-  tool_calls?: any[];
-}
-
-export interface ChatLogToolResultContent {
-  role: "tool_result";
-  agent_id: string;
-  tool_call_id: string;
-  tool_name: string;
-  tool_result: any;
-  created: Date;
-}
-
-export type ChatLogContent =
-  | ChatLogSystemContent
-  | ChatLogUserContent
-  | ChatLogAssistantContent
-  | ChatLogToolResultContent;
-
-export interface ChatLog {
-  conversation_id: string;
-  continue_conversation: boolean;
-  content: ChatLogContent[];
-  created: Date;
-}
-
-// Internal wire format types (not exported)
-interface ChatLogSystemContentWire {
-  role: "system";
-  content: string;
-  created: string;
-}
-
-interface ChatLogUserContentWire {
-  role: "user";
-  content: string;
-  created: string;
-  attachments?: ChatLogAttachment[];
-}
-
-interface ChatLogAssistantContentWire {
-  role: "assistant";
-  agent_id: string;
-  created: string;
-  content?: string;
-  thinking_content?: string;
-  tool_calls?: {
-    tool_name: string;
-    tool_args: Record<string, any>;
-    id: string;
-    external: boolean;
-  }[];
-}
-
-interface ChatLogToolResultContentWire {
-  role: "tool_result";
-  agent_id: string;
-  tool_call_id: string;
-  tool_name: string;
-  tool_result: any;
-  created: string;
-}
-
-type ChatLogContentWire =
-  | ChatLogSystemContentWire
-  | ChatLogUserContentWire
-  | ChatLogAssistantContentWire
-  | ChatLogToolResultContentWire;
-
-interface ChatLogWire {
-  conversation_id: string;
-  continue_conversation: boolean;
-  content: ChatLogContentWire[];
-  created: string;
-}
-
-const processContent = (content: ChatLogContentWire): ChatLogContent => ({
-  ...content,
-  created: new Date(content.created),
-});
-
-const processChatLog = (chatLog: ChatLogWire): ChatLog => ({
-  ...chatLog,
-  created: new Date(chatLog.created),
-  content: chatLog.content.map(processContent),
-});
-
-interface ChatLogInitialStateEvent {
-  event_type: ChatLogEventType.INITIAL_STATE;
-  data: ChatLogWire;
-}
-
-interface ChatLogIndexInitialStateEvent {
-  event_type: ChatLogEventType.INITIAL_STATE;
-  data: ChatLogWire[];
-}
-
-interface ChatLogCreatedEvent {
-  conversation_id: string;
-  event_type: ChatLogEventType.CREATED;
-  data: ChatLogWire;
-}
-
-interface ChatLogUpdatedEvent {
-  conversation_id: string;
-  event_type: ChatLogEventType.UPDATED;
-  data: { chat_log: ChatLogWire };
-}
-
-interface ChatLogDeletedEvent {
-  conversation_id: string;
-  event_type: ChatLogEventType.DELETED;
-  data: ChatLogWire;
-}
-
-interface ChatLogContentAddedEvent {
-  conversation_id: string;
-  event_type: ChatLogEventType.CONTENT_ADDED;
-  data: { content: ChatLogContentWire };
-}
-
-type ChatLogSubscriptionEvent =
-  | ChatLogInitialStateEvent
-  | ChatLogUpdatedEvent
-  | ChatLogDeletedEvent
-  | ChatLogContentAddedEvent;
-
-type ChatLogIndexSubscriptionEvent =
-  | ChatLogIndexInitialStateEvent
-  | ChatLogCreatedEvent
-  | ChatLogDeletedEvent;
-
-export const subscribeChatLog = (
-  hass: HomeAssistant,
-  conversationId: string,
-  callback: (chatLog: ChatLog | null) => void
-): Promise<UnsubscribeFunc> => {
-  let chatLog: ChatLog | null = null;
-
-  return hass.connection.subscribeMessage<ChatLogSubscriptionEvent>(
-    (event) => {
-      if (event.event_type === ChatLogEventType.INITIAL_STATE) {
-        chatLog = processChatLog(event.data);
-        callback(chatLog);
-      } else if (event.event_type === ChatLogEventType.CONTENT_ADDED) {
-        if (chatLog) {
-          chatLog = {
-            ...chatLog,
-            content: [...chatLog.content, processContent(event.data.content)],
-          };
-          callback(chatLog);
-        }
-      } else if (event.event_type === ChatLogEventType.UPDATED) {
-        chatLog = processChatLog(event.data.chat_log);
-        callback(chatLog);
-      } else if (event.event_type === ChatLogEventType.DELETED) {
-        chatLog = null;
-        callback(null);
-      }
-    },
-    {
-      type: "conversation/chat_log/subscribe",
-      conversation_id: conversationId,
-    }
-  );
-};
-
-export const subscribeChatLogIndex = (
-  hass: HomeAssistant,
-  callback: (chatLogs: ChatLog[]) => void
-): Promise<UnsubscribeFunc> => {
-  let chatLogs: ChatLog[] = [];
-
-  return hass.connection.subscribeMessage<ChatLogIndexSubscriptionEvent>(
-    (event) => {
-      if (event.event_type === ChatLogEventType.INITIAL_STATE) {
-        chatLogs = event.data.map(processChatLog);
-        callback(chatLogs);
-      } else if (event.event_type === ChatLogEventType.CREATED) {
-        chatLogs = [...chatLogs, processChatLog(event.data)];
-        callback(chatLogs);
-      } else if (event.event_type === ChatLogEventType.DELETED) {
-        chatLogs = chatLogs.filter(
-          (chatLog) => chatLog.conversation_id !== event.conversation_id
-        );
-        callback(chatLogs);
-      }
-    },
-    {
-      type: "conversation/chat_log/subscribe_index",
-    }
-  );
-};

src/data/energy.ts

@@ -775,7 +775,6 @@ export const getEnergyDataCollection = (
           hass.locale,
           hass.config
         );
-        collection.refresh();
         scheduleUpdatePeriod();
       },
       addHours(

src/data/esphome.ts

@@ -1,14 +0,0 @@
-import type { HomeAssistant } from "../types";
-
-export interface ESPHomeEncryptionKey {
-  encryption_key: string;
-}
-
-export const fetchESPHomeEncryptionKey = (
-  hass: HomeAssistant,
-  entry_id: string
-): Promise<ESPHomeEncryptionKey> =>
-  hass.callWS({
-    type: "esphome/get_encryption_key",
-    entry_id,
-  });

src/data/frontend.ts

@@ -3,7 +3,7 @@ import type { Connection } from "home-assistant-js-websocket";
 export interface CoreFrontendUserData {
   showAdvanced?: boolean;
   showEntityIdPicker?: boolean;
-  default_panel?: string;
+  defaultPanel?: string;
 }
 
 export interface SidebarFrontendUserData {
@@ -12,11 +12,7 @@ export interface SidebarFrontendUserData {
 }
 
 export interface CoreFrontendSystemData {
-  default_panel?: string;
-}
-
-export interface HomeFrontendSystemData {
-  favorite_entities?: string[];
+  defaultPanel?: string;
 }
 
 declare global {
@@ -26,7 +22,6 @@ declare global {
   }
   interface FrontendSystemData {
     core: CoreFrontendSystemData;
-    home: HomeFrontendSystemData;
   }
 }
 

src/data/panel.ts

@@ -9,8 +9,8 @@ export const getLegacyDefaultPanelUrlPath = (): string | null => {
 };
 
 export const getDefaultPanelUrlPath = (hass: HomeAssistant): string =>
-  hass.userData?.default_panel ||
-  hass.systemData?.default_panel ||
+  hass.userData?.defaultPanel ||
+  hass.systemData?.defaultPanel ||
   getLegacyDefaultPanelUrlPath() ||
   DEFAULT_PANEL;
 

src/dialogs/more-info/ha-more-info-add-to.ts

@@ -2,15 +2,14 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-alert";
 import "../../components/ha-icon";
-import "../../components/ha-md-list-item";
+import "../../components/ha-list-item";
 import "../../components/ha-spinner";
 import type {
-  ExternalEntityAddToAction,
   ExternalEntityAddToActions,
+  ExternalEntityAddToAction,
 } from "../../external_app/external_messaging";
 import { showToast } from "../../util/toast";
 
-import { fireEvent } from "../../common/dom/fire_event";
 import type { HomeAssistant } from "../../types";
 
 @customElement("ha-more-info-add-to")
@@ -52,7 +51,6 @@ export class HaMoreInfoAddTo extends LitElement {
           app_payload: action.app_payload,
         },
       });
-      fireEvent(this, "add-to-action-selected");
     } catch (err: any) {
       showToast(this, {
         message: this.hass.localize(
@@ -93,18 +91,19 @@ export class HaMoreInfoAddTo extends LitElement {
       <div class="actions-list">
         ${this._externalActions.actions.map(
           (action) => html`
-            <ha-md-list-item
-              type="button"
+            <ha-list-item
+              graphic="icon"
               .disabled=${!action.enabled}
               .action=${action}
+              .twoline=${!!action.details}
               @click=${this._actionSelected}
             >
-              <ha-icon slot="start" .icon=${action.mdi_icon}></ha-icon>
               <span>${action.name}</span>
               ${action.details
-                ? html`<span slot="supporting-text">${action.details}</span>`
+                ? html`<span slot="secondary">${action.details}</span>`
                 : nothing}
-            </ha-md-list-item>
+              <ha-icon slot="graphic" .icon=${action.mdi_icon}></ha-icon>
+            </ha-list-item>
           `
         )}
       </div>
@@ -130,6 +129,15 @@ export class HaMoreInfoAddTo extends LitElement {
       flex-direction: column;
     }
 
+    ha-list-item {
+      cursor: pointer;
+    }
+
+    ha-list-item[disabled] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
     ha-icon {
       display: flex;
       align-items: center;
@@ -141,8 +149,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "ha-more-info-add-to": HaMoreInfoAddTo;
   }
-
-  interface HASSDomEvents {
-    "add-to-action-selected": undefined;
-  }
 }

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -645,7 +645,6 @@ export class MoreInfoDialog extends LitElement {
                                 <ha-more-info-add-to
                                   .hass=${this.hass}
                                   .entityId=${entityId}
-                                  @add-to-action-selected=${this._goBack}
                                 ></ha-more-info-add-to>
                               `
                             : nothing

src/layouts/home-assistant-main.ts

@@ -7,7 +7,6 @@ import { listenMediaQuery } from "../common/dom/media_query";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import "../components/ha-drawer";
-import "../components/ha-snowflakes";
 import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
 import type { HomeAssistant, Route } from "../types";
 import "./partial-panel-resolver";
@@ -51,7 +50,6 @@ export class HomeAssistantMain extends LitElement {
       this.hass.panels && this.hass.userData && this.hass.systemData;
 
     return html`
-      <ha-snowflakes .hass=${this.hass} .narrow=${this.narrow}></ha-snowflakes>
       <ha-drawer
         .type=${sidebarNarrow ? "modal" : ""}
         .open=${sidebarNarrow ? this._drawerOpen : false}

src/layouts/supervisor-error-screen.ts

@@ -5,7 +5,6 @@ import { atLeastVersion } from "../common/config/version";
 import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import "../components/ha-card";
 import { haStyle } from "../resources/styles";
-import { documentationUrl } from "../util/documentation-url";
 import type { HomeAssistant } from "../types";
 import "./hass-subpage";
 
@@ -58,7 +57,7 @@ class SupervisorErrorScreen extends LitElement {
               </li>
               <li>
                 <a
-                  href=${documentationUrl(this.hass, "/help/")}
+                  href="https://www.home-assistant.io/help/"
                   target="_blank"
                   rel="noreferrer"
                 >

src/onboarding/onboarding-welcome-links.ts

@@ -4,7 +4,6 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-card";
-import { documentationUrl } from "../util/documentation-url";
 import type { HomeAssistant } from "../types";
 import { showAppDialog } from "./dialogs/show-app-dialog";
 import { showCommunityDialog } from "./dialogs/show-community-dialog";
@@ -23,10 +22,7 @@ class OnboardingWelcomeLinks extends LitElement {
     return html`<a
         target="_blank"
         rel="noreferrer noopener"
-        href=${documentationUrl(
-          this.hass,
-          "/blog/2016/01/19/perfect-home-automation/"
-        )}
+        href="https://www.home-assistant.io/blog/2016/01/19/perfect-home-automation/"
       >
         <onboarding-welcome-link
           noninteractive

src/panels/calendar/ha-panel-calendar.ts

@@ -87,7 +87,7 @@ class PanelCalendar extends LitElement {
   public willUpdate(changedProps: PropertyValues): void {
     super.willUpdate(changedProps);
     if (!this.hasUpdated) {
-      this._calendars = getCalendars(this.hass);
+      this._calendars = getCalendars(this.hass, this);
     }
   }
 
@@ -243,7 +243,7 @@ class PanelCalendar extends LitElement {
       manifest: await fetchIntegrationManifest(this.hass, "local_calendar"),
       dialogClosedCallback: ({ flowFinished }) => {
         if (flowFinished) {
-          this._calendars = getCalendars(this.hass);
+          this._calendars = getCalendars(this.hass, this);
         }
       },
     });

src/panels/config/automation/ha-automation-sidebar.ts

@@ -188,7 +188,6 @@ export default class HaAutomationSidebar extends LitElement {
         class="handle ${this._resizing ? "resizing" : ""}"
         @mousedown=${this._handleMouseDown}
         @touchstart=${this._handleMouseDown}
-        @dblclick=${this._handleDoubleClick}
         @focus=${this._startKeyboardResizing}
         @blur=${this._stopKeyboardResizing}
         tabindex="0"
@@ -259,17 +258,6 @@ export default class HaAutomationSidebar extends LitElement {
     );
   };
 
-  private _handleDoubleClick = (ev: MouseEvent) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    this._unregisterResizeHandlers();
-    this._tinykeysUnsub?.();
-    this._tinykeysUnsub = undefined;
-    this._resizing = false;
-    document.body.style.removeProperty("cursor");
-    fireEvent(this, "sidebar-reset-size");
-  };
-
   private _startResizing(clientX: number) {
     // register event listeners for drag handling
     document.addEventListener("mousemove", this._handleMouseMove);
@@ -434,6 +422,5 @@ declare global {
       deltaInPx: number;
     };
     "sidebar-resizing-stopped": undefined;
-    "sidebar-reset-size": undefined;
   }
 }

src/panels/config/automation/manual-automation-editor.ts

@@ -317,7 +317,6 @@ export class HaManualAutomationEditor extends LitElement {
             @value-changed=${this._sidebarConfigChanged}
             @sidebar-resized=${this._resizeSidebar}
             @sidebar-resizing-stopped=${this._stopResizeSidebar}
-            @sidebar-reset-size=${this._resetSidebarWidth}
           ></ha-automation-sidebar>
         </div>
       </div>
@@ -701,16 +700,6 @@ export class HaManualAutomationEditor extends LitElement {
     this._prevSidebarWidthPx = undefined;
   }
 
-  private _resetSidebarWidth(ev: Event) {
-    ev.stopPropagation();
-    this._prevSidebarWidthPx = undefined;
-    this._sidebarWidthPx = SIDEBAR_DEFAULT_WIDTH;
-    this.style.setProperty(
-      "--sidebar-dynamic-width",
-      `${this._sidebarWidthPx}px`
-    );
-  }
-
   static get styles(): CSSResultGroup {
     return [
       saveFabStyles,

src/panels/config/blueprint/dialog-import-blueprint.ts

@@ -2,7 +2,6 @@ import { mdiClose, mdiOpenInNew } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { documentationUrl } from "../../../util/documentation-url";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import "../../../components/ha-code-editor";
@@ -141,7 +140,7 @@ class DialogImportBlueprint extends LitElement {
                 <ha-button
                   size="small"
                   appearance="plain"
-                  href=${documentationUrl(this.hass, "/get-blueprints")}
+                  href="https://www.home-assistant.io/get-blueprints"
                   target="_blank"
                   rel="noreferrer noopener"
                 >

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -43,7 +43,6 @@ import {
 } from "../../../data/blueprint";
 import { showScriptEditor } from "../../../data/script";
 import { findRelated } from "../../../data/search";
-import "../../../components/chips/ha-assist-chip";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -61,7 +60,6 @@ type BlueprintMetaDataPath = BlueprintMetaData & {
   error: boolean;
   type: "automation" | "script";
   fullpath: string;
-  usageCount?: number;
 };
 
 const createNewFunctions = {
@@ -130,20 +128,14 @@ class HaBlueprintOverview extends LitElement {
   })
   private _filter = "";
 
-  @state() private _usageCounts: Record<string, number> = {};
-
-  private _usageCountRequest = 0;
-
   private _processedBlueprints = memoizeOne(
     (
       blueprints: Record<string, Blueprints>,
-      localize: LocalizeFunc,
-      usageCounts: Record<string, number>
+      localize: LocalizeFunc
     ): BlueprintMetaDataPath[] => {
       const result: any[] = [];
       Object.entries(blueprints).forEach(([type, typeBlueprints]) =>
         Object.entries(typeBlueprints).forEach(([path, blueprint]) => {
-          const fullpath = `${type}/${path}`;
           if ("error" in blueprint) {
             result.push({
               name: blueprint.error,
@@ -153,8 +145,7 @@ class HaBlueprintOverview extends LitElement {
               ),
               error: true,
               path,
-              fullpath,
-              usageCount: 0,
+              fullpath: `${type}/${path}`,
             });
           } else {
             result.push({
@@ -165,8 +156,7 @@ class HaBlueprintOverview extends LitElement {
               ),
               error: false,
               path,
-              fullpath,
-              usageCount: usageCounts[fullpath] || 0,
+              fullpath: `${type}/${path}`,
             });
           }
         })
@@ -199,34 +189,6 @@ class HaBlueprintOverview extends LitElement {
         filterable: true,
         flex: 2,
       },
-      usage_count: {
-        title: localize(
-          "ui.panel.config.blueprint.overview.headers.usage_count"
-        ),
-        sortable: true,
-        valueColumn: "usageCount",
-        type: "numeric",
-        minWidth: "100px",
-        maxWidth: "120px",
-        template: (blueprint) => {
-          const count = blueprint.usageCount ?? 0;
-          return html`
-            <ha-assist-chip
-              filled
-              .active=${count > 0}
-              label=${String(count)}
-              title=${blueprint.error
-                ? String(count)
-                : this.hass.localize(
-                    `ui.panel.config.blueprint.overview.view_${blueprint.type}`
-                  )}
-              ?disabled=${blueprint.error}
-              data-fullpath=${blueprint.fullpath}
-              @click=${this._handleUsageClick}
-            ></ha-assist-chip>
-          `;
-        },
-      },
       fullpath: {
         title: "fullpath",
         hidden: true,
@@ -304,7 +266,6 @@ class HaBlueprintOverview extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
-    this._loadUsageCounts();
     if (this.route.path === "/import") {
       const url = extractSearchParam("blueprint_url");
       navigate("/config/blueprint/dashboard", { replace: true });
@@ -314,13 +275,6 @@ class HaBlueprintOverview extends LitElement {
     }
   }
 
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (changedProps.has("blueprints")) {
-      this._loadUsageCounts();
-    }
-  }
-
   protected render(): TemplateResult {
     return html`
       <hass-tabs-subpage-data-table
@@ -330,11 +284,7 @@ class HaBlueprintOverview extends LitElement {
         .route=${this.route}
         .tabs=${configSections.automations}
         .columns=${this._columns(this.hass.localize)}
-        .data=${this._processedBlueprints(
-          this.blueprints,
-          this.hass.localize,
-          this._usageCounts
-        )}
+        .data=${this._processedBlueprints(this.blueprints, this.hass.localize)}
         id="fullpath"
         .noDataText=${this.hass.localize(
           "ui.panel.config.blueprint.overview.no_blueprints"
@@ -349,7 +299,7 @@ class HaBlueprintOverview extends LitElement {
         >
           <ha-button
             appearance="plain"
-            href=${documentationUrl(this.hass, "/get-blueprints")}
+            href="https://www.home-assistant.io/get-blueprints"
             target="_blank"
             rel="noreferrer noopener"
             size="small"
@@ -430,51 +380,10 @@ class HaBlueprintOverview extends LitElement {
     fireEvent(this, "reload-blueprints");
   }
 
-  private async _loadUsageCounts() {
-    if (!this.blueprints) {
-      return;
-    }
-
-    const request = ++this._usageCountRequest;
-    const usageCounts: Record<string, number> = {};
-
-    const blueprintList = this._processedBlueprints(
-      this.blueprints,
-      this.hass.localize,
-      {}
-    );
-
-    await Promise.all(
-      blueprintList.map(async (blueprint) => {
-        if (blueprint.error) {
-          usageCounts[blueprint.fullpath] = 0;
-          return;
-        }
-        try {
-          const related = await findRelated(
-            this.hass,
-            `${blueprint.domain}_blueprint`,
-            blueprint.path
-          );
-          const count =
-            (related.automation?.length || 0) + (related.script?.length || 0);
-          usageCounts[blueprint.fullpath] = count;
-        } catch (_err) {
-          usageCounts[blueprint.fullpath] = 0;
-        }
-      })
-    );
-
-    if (request === this._usageCountRequest) {
-      this._usageCounts = usageCounts;
-    }
-  }
-
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const blueprint = this._processedBlueprints(
       this.blueprints,
-      this.hass.localize,
-      this._usageCounts
+      this.hass.localize
     ).find((b) => b.fullpath === ev.detail.id)!;
     if (blueprint.error) {
       showAlertDialog(this, {
@@ -488,25 +397,6 @@ class HaBlueprintOverview extends LitElement {
     this._createNew(blueprint);
   }
 
-  private _handleUsageClick = (ev: Event) => {
-    ev.stopPropagation();
-    ev.preventDefault();
-    const target = ev.currentTarget as HTMLElement | null;
-    const fullpath = target?.dataset.fullpath;
-    if (!fullpath) {
-      return;
-    }
-    const blueprint = this._processedBlueprints(
-      this.blueprints,
-      this.hass.localize,
-      this._usageCounts
-    ).find((item) => item.fullpath === fullpath);
-    if (!blueprint || blueprint.error) {
-      return;
-    }
-    this._showUsed(blueprint);
-  };
-
   private _showUsed = (blueprint: BlueprintMetaDataPath) => {
     navigate(
       `/config/${blueprint.domain}/dashboard?blueprint=${encodeURIComponent(

src/panels/config/core/ha-config-analytics.ts

@@ -1,10 +1,14 @@
+import { mdiOpenInNew } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-analytics";
+import "../../../components/ha-button";
 import "../../../components/ha-card";
+import "../../../components/ha-checkbox";
 import "../../../components/ha-settings-row";
+import "../../../components/ha-svg-icon";
 import type { Analytics } from "../../../data/analytics";
 import {
   getAnalyticsDetails,
@@ -13,8 +17,6 @@ import {
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
-import type { HaSwitch } from "../../../components/ha-switch";
-import "../../../components/ha-alert";
 
 @customElement("ha-config-analytics")
 class ConfigAnalytics extends LitElement {
@@ -32,22 +34,10 @@ class ConfigAnalytics extends LitElement {
         : undefined;
 
     return html`
-      <ha-card
-        outlined
-        .header=${this.hass.localize("ui.panel.config.analytics.header") ||
-        "Home Assistant analytics"}
-      >
+      <ha-card outlined>
         <div class="card-content">
-          ${error ? html`<div class="error">${error}</div>` : nothing}
-          <p>
-            ${this.hass.localize("ui.panel.config.analytics.intro")}
-            <a
-              href=${documentationUrl(this.hass, "/integrations/analytics/")}
-              target="_blank"
-              rel="noreferrer"
-              >${this.hass.localize("ui.panel.config.analytics.learn_more")}</a
-            >.
-          </p>
+          ${error ? html`<div class="error">${error}</div>` : ""}
+          <p>${this.hass.localize("ui.panel.config.analytics.intro")}</p>
           <ha-analytics
             translation_key_panel="config"
             @analytics-preferences-changed=${this._preferencesChanged}
@@ -55,59 +45,26 @@ class ConfigAnalytics extends LitElement {
             .analytics=${this._analyticsDetails}
           ></ha-analytics>
         </div>
-      </ha-card>
-      ${this._analyticsDetails &&
-      "snapshots" in this._analyticsDetails.preferences
-        ? html`<ha-card
-            outlined
-            .header=${this.hass.localize(
-              "ui.panel.config.analytics.preferences.snapshots.header"
+        <div class="card-actions">
+          <ha-button @click=${this._save}>
+            ${this.hass.localize(
+              "ui.panel.config.core.section.core.core_config.save_button"
             )}
-          >
-            <div class="card-content">
-              <p>
-                ${this.hass.localize(
-                  "ui.panel.config.analytics.preferences.snapshots.info"
-                )}
-                <a
-                  href=${documentationUrl(this.hass, "/device-database/")}
-                  target="_blank"
-                  rel="noreferrer"
-                  >${this.hass.localize(
-                    "ui.panel.config.analytics.preferences.snapshots.learn_more"
-                  )}</a
-                >.
-              </p>
-              <ha-alert
-                .title=${this.hass.localize(
-                  "ui.panel.config.analytics.preferences.snapshots.alert.title"
-                )}
-                >${this.hass.localize(
-                  "ui.panel.config.analytics.preferences.snapshots.alert.content"
-                )}</ha-alert
-              >
-              <ha-settings-row>
-                <span slot="heading" data-for="snapshots">
-                  ${this.hass.localize(
-                    `ui.panel.config.analytics.preferences.snapshots.title`
-                  )}
-                </span>
-                <span slot="description" data-for="snapshots">
-                  ${this.hass.localize(
-                    `ui.panel.config.analytics.preferences.snapshots.description`
-                  )}
-                </span>
-                <ha-switch
-                  @change=${this._handleDeviceRowClick}
-                  .checked=${!!this._analyticsDetails?.preferences.snapshots}
-                  .disabled=${this._analyticsDetails === undefined}
-                  name="snapshots"
-                >
-                </ha-switch>
-              </ha-settings-row>
-            </div>
-          </ha-card>`
-        : nothing}
+          </ha-button>
+        </div>
+      </ha-card>
+      <div class="footer">
+        <ha-button
+          size="small"
+          appearance="plain"
+          href=${documentationUrl(this.hass, "/integrations/analytics/")}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
+          ${this.hass.localize("ui.panel.config.analytics.learn_more")}
+        </ha-button>
+      </div>
     `;
   }
 
@@ -139,25 +96,11 @@ class ConfigAnalytics extends LitElement {
     }
   }
 
-  private _handleDeviceRowClick(ev: Event) {
-    const target = ev.target as HaSwitch;
-
-    this._analyticsDetails = {
-      ...this._analyticsDetails!,
-      preferences: {
-        ...this._analyticsDetails!.preferences,
-        snapshots: target.checked,
-      },
-    };
-    this._save();
-  }
-
   private _preferencesChanged(event: CustomEvent): void {
     this._analyticsDetails = {
       ...this._analyticsDetails!,
       preferences: event.detail.preferences,
     };
-    this._save();
   }
 
   static get styles(): CSSResultGroup {
@@ -174,10 +117,21 @@ class ConfigAnalytics extends LitElement {
         p {
           margin-top: 0;
         }
-        ha-card:not(:first-of-type) {
-          margin-top: 24px;
+        .card-actions {
+          display: flex;
+          flex-direction: row-reverse;
+          justify-content: space-between;
+          align-items: center;
         }
-      `,
+        .footer {
+          padding: 32px 0 16px;
+          text-align: center;
+        }
+
+        ha-button[size="small"] ha-svg-icon {
+          --mdc-icon-size: 16px;
+        }
+      `, // row-reverse so we tab first to "save"
     ];
   }
 }

src/panels/config/core/ha-config-section-analytics.ts

@@ -2,7 +2,9 @@ import { mdiDotsVertical, mdiDownload } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-list-item";
 import "../../../components/ha-svg-icon";
 import { getSignedPath } from "../../../data/auth";
 import "../../../layouts/hass-subpage";
@@ -12,8 +14,6 @@ import {
   downloadFileSupported,
   fileDownload,
 } from "../../../util/file_download";
-import "../../../components/ha-dropdown-item";
-import "../../../components/ha-dropdown";
 
 @customElement("ha-config-section-analytics")
 class HaConfigSectionAnalytics extends LitElement {
@@ -33,19 +33,22 @@ class HaConfigSectionAnalytics extends LitElement {
       >
         ${downloadFileSupported(this.hass)
           ? html`
-              <ha-dropdown
-                @wa-select=${this._handleOverflowAction}
+              <ha-button-menu
+                @action=${this._handleOverflowAction}
                 slot="toolbar-icon"
               >
                 <ha-icon-button slot="trigger" .path=${mdiDotsVertical}>
                 </ha-icon-button>
-                <ha-dropdown-item .value=${"download_device_info"}>
-                  <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
+                <ha-list-item graphic="icon">
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiDownload}
+                  ></ha-svg-icon>
                   ${this.hass.localize(
                     "ui.panel.config.analytics.download_device_info"
                   )}
-                </ha-dropdown-item>
-              </ha-dropdown>
+                </ha-list-item>
+              </ha-button-menu>
             `
           : nothing}
         <div class="content">
@@ -55,16 +58,9 @@ class HaConfigSectionAnalytics extends LitElement {
     `;
   }
 
-  private async _handleOverflowAction(
-    ev: CustomEvent<{ item: { value: string } }>
-  ): Promise<void> {
-    if (ev.detail.item.value === "download_device_info") {
-      const signedPath = await getSignedPath(
-        this.hass,
-        "/api/analytics/devices"
-      );
-      fileDownload(signedPath.path);
-    }
+  private async _handleOverflowAction(): Promise<void> {
+    const signedPath = await getSignedPath(this.hass, "/api/analytics/devices");
+    fileDownload(signedPath.path);
   }
 
   static styles = css`

src/panels/config/core/ha-config-section-updates.ts

@@ -1,3 +1,4 @@
+import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical, mdiRefresh } from "@mdi/js";
 import type { HassEntities } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
@@ -5,9 +6,13 @@ import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import "../../../components/ha-alert";
 import "../../../components/ha-bar";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
+import "../../../components/ha-check-list-item";
+import "../../../components/ha-list-item";
 import "../../../components/ha-metric";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import type {
@@ -28,9 +33,6 @@ import "../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../types";
 import "../dashboard/ha-config-updates";
 import { showJoinBetaDialog } from "./updates/show-dialog-join-beta";
-import "../../../components/ha-dropdown";
-import "../../../components/ha-dropdown-item";
-import "@home-assistant/webawesome/dist/components/divider/divider";
 
 @customElement("ha-config-section-updates")
 class HaConfigSectionUpdates extends LitElement {
@@ -71,25 +73,24 @@ class HaConfigSectionUpdates extends LitElement {
             .path=${mdiRefresh}
             @click=${this._checkUpdates}
           ></ha-icon-button>
-          <ha-dropdown @wa-select=${this._handleOverflowAction}>
+          <ha-button-menu multi>
             <ha-icon-button
               slot="trigger"
               .label=${this.hass.localize("ui.common.menu")}
               .path=${mdiDotsVertical}
             ></ha-icon-button>
-
-            <ha-dropdown-item
-              type="checkbox"
-              value="show_skipped"
-              .checked=${this._showSkipped}
+            <ha-check-list-item
+              left
+              @request-selected=${this._toggleSkipped}
+              .selected=${this._showSkipped}
             >
               ${this.hass.localize("ui.panel.config.updates.show_skipped")}
-            </ha-dropdown-item>
+            </ha-check-list-item>
             ${this._supervisorInfo
               ? html`
-                  <wa-divider></wa-divider>
-                  <ha-dropdown-item
-                    value="toggle_beta"
+                  <li divider role="separator"></li>
+                  <ha-list-item
+                    @request-selected=${this._toggleBeta}
                     .disabled=${this._supervisorInfo.channel === "dev"}
                   >
                     ${this._supervisorInfo.channel === "stable"
@@ -97,10 +98,10 @@ class HaConfigSectionUpdates extends LitElement {
                       : this.hass.localize(
                           "ui.panel.config.updates.leave_beta"
                         )}
-                  </ha-dropdown-item>
+                  </ha-list-item>
                 `
               : ""}
-          </ha-dropdown>
+          </ha-button-menu>
         </div>
         <div class="content">
           <ha-card outlined>
@@ -132,19 +133,27 @@ class HaConfigSectionUpdates extends LitElement {
     this._supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
   }
 
-  private async _handleOverflowAction(
-    ev: CustomEvent<{ item: { value: string } }>
+  private _toggleSkipped(ev: CustomEvent<RequestSelectedDetail>): void {
+    if (ev.detail.source !== "property") {
+      return;
+    }
+
+    this._showSkipped = !this._showSkipped;
+  }
+
+  private async _toggleBeta(
+    ev: CustomEvent<RequestSelectedDetail>
   ): Promise<void> {
-    if (ev.detail.item.value === "toggle_beta") {
-      if (this._supervisorInfo!.channel === "stable") {
-        showJoinBetaDialog(this, {
-          join: async () => this._setChannel("beta"),
-        });
-      } else {
-        this._setChannel("stable");
-      }
-    } else if (ev.detail.item.value === "show_skipped") {
-      this._showSkipped = !this._showSkipped;
+    if (!shouldHandleRequestSelectedEvent(ev)) {
+      return;
+    }
+
+    if (this._supervisorInfo!.channel === "stable") {
+      showJoinBetaDialog(this, {
+        join: async () => this._setChannel("beta"),
+      });
+    } else {
+      this._setChannel("stable");
     }
   }
 

src/panels/config/devices/device-detail/ha-device-info-card.ts

@@ -1,9 +1,7 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { computeDeviceNameDisplay } from "../../../../common/entity/compute_device_name";
-import { stringCompare } from "../../../../common/string/compare";
 import { titleCase } from "../../../../common/string/title-case";
 import "../../../../components/ha-card";
 import type { DeviceRegistryEntry } from "../../../../data/device_registry";
@@ -11,61 +9,16 @@ import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import { createSearchParam } from "../../../../common/url/search-params";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
-import "../../../../components/ha-icon";
-import "../../../../components/ha-label";
-import type { LabelRegistryEntry } from "../../../../data/label_registry";
-import { subscribeLabelRegistry } from "../../../../data/label_registry";
-import { computeCssColor } from "../../../../common/color/compute-color";
-import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 
 @customElement("ha-device-info-card")
-export class HaDeviceCard extends SubscribeMixin(LitElement) {
+export class HaDeviceCard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public device!: DeviceRegistryEntry;
 
   @property({ type: Boolean }) public narrow = false;
 
-  @state() private _labelRegistry?: LabelRegistryEntry[];
-
-  private _labelsData = memoizeOne(
-    (
-      labels: LabelRegistryEntry[] | undefined,
-      labelIds: string[],
-      language: string
-    ): {
-      map: Map<string, LabelRegistryEntry>;
-      ids: string[];
-    } => {
-      const map = labels
-        ? new Map(labels.map((label) => [label.label_id, label]))
-        : new Map<string, LabelRegistryEntry>();
-      const ids = [...labelIds].sort((labelA, labelB) =>
-        stringCompare(
-          map.get(labelA)?.name || labelA,
-          map.get(labelB)?.name || labelB,
-          language
-        )
-      );
-      return { map, ids };
-    }
-  );
-
-  public hassSubscribe() {
-    return [
-      subscribeLabelRegistry(this.hass.connection, (labels) => {
-        this._labelRegistry = labels;
-      }),
-    ];
-  }
-
   protected render(): TemplateResult {
-    const { map: labelMap, ids: labels } = this._labelsData(
-      this._labelRegistry,
-      this.device.labels,
-      this.hass.locale.language
-    );
-
     return html`
       <ha-card
         outlined
@@ -105,7 +58,7 @@ export class HaDeviceCard extends SubscribeMixin(LitElement) {
                   <span class="hub"
                     ><a
                       href="/config/devices/device/${this.device.via_device_id}"
-                      >${this._computeDeviceNameDisplay(
+                      >${this._computeDeviceNameDislay(
                         this.device.via_device_id
                       )}</a
                     ></span
@@ -173,34 +126,6 @@ export class HaDeviceCard extends SubscribeMixin(LitElement) {
               </div>
             `
           )}
-          ${labels.length > 0
-            ? html`
-                <div class="extra-info labels">
-                  ${labels.map((labelId) => {
-                    const label = labelMap.get(labelId);
-                    const color =
-                      label?.color && typeof label.color === "string"
-                        ? computeCssColor(label.color)
-                        : undefined;
-                    return html`
-                      <ha-label
-                        style=${color ? `--color: ${color}` : ""}
-                        .description=${label?.description}
-                      >
-                        ${label?.icon
-                          ? html`<ha-icon
-                              slot="icon"
-                              .icon=${label.icon}
-                            ></ha-icon>`
-                          : nothing}
-                        ${label?.name || labelId}
-                      </ha-label>
-                    `;
-                  })}
-                </div>
-              `
-            : nothing}
-
           <slot></slot>
         </div>
         <slot name="actions"></slot>
@@ -214,7 +139,7 @@ export class HaDeviceCard extends SubscribeMixin(LitElement) {
     );
   }
 
-  private _computeDeviceNameDisplay(deviceId: string) {
+  private _computeDeviceNameDislay(deviceId) {
     const device = this.hass.devices[deviceId];
     return device
       ? computeDeviceNameDisplay(device, this.hass)
@@ -237,26 +162,8 @@ export class HaDeviceCard extends SubscribeMixin(LitElement) {
         .device {
           width: 30%;
         }
-        .labels {
-          display: flex;
-          flex-wrap: wrap;
-          gap: var(--ha-space-1);
-          width: 100%;
-          max-width: 100%;
-        }
-        .labels ha-label {
-          min-width: 0;
-          max-width: 100%;
-          flex: 0 1 auto;
-        }
-        ha-label {
-          --ha-label-background-color: var(--color, var(--grey-color));
-          --ha-label-background-opacity: 0.5;
-          --ha-label-text-color: var(--primary-text-color);
-          --ha-label-icon-color: var(--primary-text-color);
-        }
         .extra-info {
-          margin-top: var(--ha-space-2);
+          margin-top: 8px;
           word-wrap: break-word;
         }
         .manuf,

src/panels/config/devices/device-detail/integration-elements/esphome/device-actions.ts

@@ -1,52 +0,0 @@
-import { mdiKey } from "@mdi/js";
-import { getConfigEntries } from "../../../../../../data/config_entries";
-import type { DeviceRegistryEntry } from "../../../../../../data/device_registry";
-import { fetchESPHomeEncryptionKey } from "../../../../../../data/esphome";
-import type { HomeAssistant } from "../../../../../../types";
-import { showESPHomeEncryptionKeyDialog } from "../../../../integrations/integration-panels/esphome/show-dialog-esphome-encryption-key";
-import type { DeviceAction } from "../../../ha-config-device-page";
-
-export const getESPHomeDeviceActions = async (
-  el: HTMLElement,
-  hass: HomeAssistant,
-  device: DeviceRegistryEntry
-): Promise<DeviceAction[]> => {
-  const actions: DeviceAction[] = [];
-
-  const configEntries = await getConfigEntries(hass, {
-    domain: "esphome",
-  });
-
-  const configEntry = configEntries.find((entry) =>
-    device.config_entries.includes(entry.entry_id)
-  );
-
-  if (!configEntry) {
-    return [];
-  }
-
-  const entryId = configEntry.entry_id;
-
-  try {
-    const encryptionKey = await fetchESPHomeEncryptionKey(hass, entryId);
-
-    if (encryptionKey.encryption_key) {
-      actions.push({
-        label: hass.localize(
-          "ui.panel.config.devices.esphome.show_encryption_key"
-        ),
-        icon: mdiKey,
-        action: () =>
-          showESPHomeEncryptionKeyDialog(el, {
-            entry_id: entryId,
-            encryption_key: encryptionKey.encryption_key,
-          }),
-      });
-    }
-  } catch (err) {
-    // eslint-disable-next-line no-console
-    console.error("Failed to fetch ESPHome encryption key:", err);
-  }
-
-  return actions;
-};

src/panels/config/devices/ha-config-device-page.ts

@@ -1162,17 +1162,6 @@ export class HaConfigDevicePage extends LitElement {
       );
       deviceActions.push(...actions);
     }
-    if (domains.includes("esphome")) {
-      const esphome = await import(
-        "./device-detail/integration-elements/esphome/device-actions"
-      );
-      const actions = await esphome.getESPHomeDeviceActions(
-        this,
-        this.hass,
-        device
-      );
-      deviceActions.push(...actions);
-    }
     if (domains.includes("matter")) {
       const matter = await import(
         "./device-detail/integration-elements/matter/device-actions"

src/panels/config/energy/components/ha-energy-validation-result.ts

@@ -2,7 +2,6 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../components/ha-alert";
 import type { EnergyValidationIssue } from "../../../../data/energy";
-import { documentationUrl } from "../../../../util/documentation-url";
 import type { HomeAssistant } from "../../../../types";
 
 @customElement("ha-energy-validation-result")
@@ -30,10 +29,7 @@ class EnergyValidationMessage extends LitElement {
           )}
           ${issue.type === "recorder_untracked"
             ? html`(<a
-                  href=${documentationUrl(
-                    this.hass,
-                    "/integrations/recorder#configure-filter"
-                  )}
+                  href="https://www.home-assistant.io/integrations/recorder#configure-filter"
                   target="_blank"
                   rel="noopener noreferrer"
                   >${this.hass.localize("ui.panel.config.common.learn_more")}</a

src/panels/config/helpers/ha-config-helpers.ts

@@ -5,7 +5,6 @@ import {
   mdiCancel,
   mdiChevronRight,
   mdiCog,
-  mdiDelete,
   mdiDotsVertical,
   mdiMenuDown,
   mdiPencilOff,
@@ -110,11 +109,10 @@ import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
 import { renderConfigEntryError } from "../integrations/ha-config-integration-page";
 import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
-import { isHelperDomain, type HelperDomain } from "./const";
+import { isHelperDomain } from "./const";
 import { showHelperDetailDialog } from "./show-dialog-helper-detail";
 import { slugify } from "../../../common/string/slugify";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { HELPERS_CRUD } from "../../../data/helpers_crud";
 import {
   fetchDiagnosticHandlers,
   getConfigEntryDiagnosticsDownloadUrl,
@@ -453,19 +451,6 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
                     },
                   ]
                 : []),
-              ...(helper.editable && helper.entity
-                ? [
-                    {
-                      divider: true,
-                    },
-                    {
-                      path: mdiDelete,
-                      label: this.hass.localize("ui.common.delete"),
-                      warning: true,
-                      action: () => this._deleteHelper(helper),
-                    },
-                  ]
-                : []),
             ]}
           >
           </ha-icon-overflow-menu>
@@ -1295,62 +1280,6 @@ ${rejected
     }
   }
 
-  private async _deleteHelper(helper: HelperItem) {
-    if (!helper.entity_id) {
-      return;
-    }
-
-    const confirmed = await showConfirmationDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.helpers.picker.delete_confirm_title"
-      ),
-      text: this.hass.localize(
-        "ui.panel.config.helpers.picker.delete_confirm_text",
-        { name: helper.name }
-      ),
-      confirmText: this.hass.localize("ui.common.delete"),
-      dismissText: this.hass.localize("ui.common.cancel"),
-      destructive: true,
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    try {
-      // For old-style helpers (input_boolean, etc.), use HELPERS_CRUD
-      if (isHelperDomain(helper.type)) {
-        const entityReg = this._entityReg.find(
-          (e) => e.entity_id === helper.entity_id
-        );
-        if (
-          !entityReg?.unique_id ||
-          !isComponentLoaded(this.hass, helper.type)
-        ) {
-          throw new Error(
-            this.hass.localize("ui.panel.config.helpers.picker.delete_failed")
-          );
-        }
-        await HELPERS_CRUD[helper.type as HelperDomain].delete(
-          this.hass,
-          entityReg.unique_id
-        );
-        return;
-      }
-
-      // For config entry-based helpers, delete the config entry
-      if (helper.configEntry) {
-        await deleteConfigEntry(this.hass, helper.configEntry.entry_id);
-      }
-    } catch (err: any) {
-      showAlertDialog(this, {
-        text:
-          err.message ||
-          this.hass.localize("ui.panel.config.helpers.picker.delete_failed"),
-      });
-    }
-  }
-
   private _createHelper() {
     showHelperDetailDialog(this, {});
   }

src/panels/config/integrations/ha-config-flow-card.ts

@@ -1,10 +1,4 @@
-import {
-  mdiBookshelf,
-  mdiCog,
-  mdiDelete,
-  mdiDotsVertical,
-  mdiOpenInNew,
-} from "@mdi/js";
+import { mdiBookshelf, mdiCog, mdiDotsVertical, mdiOpenInNew } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -13,11 +7,6 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-button";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-list-item";
-import {
-  deleteApplicationCredential,
-  fetchApplicationCredentialsConfigEntry,
-} from "../../../data/application_credential";
-import { deleteConfigEntry } from "../../../data/config_entries";
 import {
   ATTENTION_SOURCES,
   DISCOVERY_SOURCES,
@@ -26,10 +15,7 @@ import {
 } from "../../../data/config_flow";
 import type { IntegrationManifest } from "../../../data/integration";
 import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../dialogs/generic/show-dialog-box";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import type { DataEntryFlowProgressExtended } from "./ha-config-integrations";
@@ -74,7 +60,7 @@ export class HaConfigFlowCard extends LitElement {
               : "ui.common.add"
           )}
         </ha-button>
-        ${this.flow.context.configuration_url || this.manifest || attention
+        ${this.flow.context.configuration_url || this.manifest
           ? html`<ha-button-menu slot="header-button">
               <ha-icon-button
                 slot="trigger"
@@ -132,22 +118,6 @@ export class HaConfigFlowCard extends LitElement {
                     </ha-list-item>
                   </a>`
                 : ""}
-              ${attention
-                ? html`<ha-list-item
-                    class="warning"
-                    graphic="icon"
-                    @click=${this._handleDelete}
-                  >
-                    <ha-svg-icon
-                      class="warning"
-                      slot="graphic"
-                      .path=${mdiDelete}
-                    ></ha-svg-icon>
-                    ${this.hass.localize(
-                      "ui.panel.config.integrations.config_entry.delete"
-                    )}
-                  </ha-list-item>`
-                : ""}
             </ha-button-menu>`
           : ""}
       </ha-integration-action-card>
@@ -205,109 +175,6 @@ export class HaConfigFlowCard extends LitElement {
     });
   }
 
-  // Return an application credentials id for this config entry to prompt the
-  // user for removal. This is best effort so we don't stop overall removal
-  // if the integration isn't loaded or there is some other error.
-  private async _fetchApplicationCredentials(entryId: string) {
-    try {
-      return (await fetchApplicationCredentialsConfigEntry(this.hass, entryId))
-        .application_credentials_id;
-    } catch (_err: any) {
-      // We won't prompt the user to remove credentials
-      return null;
-    }
-  }
-
-  private async _removeApplicationCredential(applicationCredentialsId: string) {
-    const confirmed = await showConfirmationDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.integrations.config_entry.application_credentials.delete_title"
-      ),
-      text: html`${this.hass.localize(
-          "ui.panel.config.integrations.config_entry.application_credentials.delete_prompt"
-        )},
-        <br />
-        <br />
-        ${this.hass.localize(
-          "ui.panel.config.integrations.config_entry.application_credentials.delete_detail"
-        )}
-        <br />
-        <br />
-        <a
-          href="https://www.home-assistant.io/integrations/application_credentials"
-          target="_blank"
-          rel="noreferrer"
-        >
-          ${this.hass.localize(
-            "ui.panel.config.integrations.config_entry.application_credentials.learn_more"
-          )}
-        </a>`,
-      confirmText: this.hass.localize("ui.common.delete"),
-      dismissText: this.hass.localize("ui.common.cancel"),
-      destructive: true,
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    try {
-      await deleteApplicationCredential(this.hass, applicationCredentialsId);
-    } catch (err: any) {
-      showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.config.integrations.config_entry.application_credentials.delete_error_title"
-        ),
-        text: err.message,
-      });
-    }
-  }
-
-  private async _handleDelete() {
-    const entryId = this.flow.context.entry_id;
-
-    if (!entryId) {
-      // This shouldn't happen for reauth flows, but handle gracefully
-      return;
-    }
-
-    const applicationCredentialsId =
-      await this._fetchApplicationCredentials(entryId);
-
-    const confirmed = await showConfirmationDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.integrations.config_entry.delete_confirm_title",
-        { title: localizeConfigFlowTitle(this.hass.localize, this.flow) }
-      ),
-      text: this.hass.localize(
-        "ui.panel.config.integrations.config_entry.delete_confirm_text"
-      ),
-      confirmText: this.hass!.localize("ui.common.delete"),
-      dismissText: this.hass!.localize("ui.common.cancel"),
-      destructive: true,
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    const result = await deleteConfigEntry(this.hass, entryId);
-
-    if (result.require_restart) {
-      showAlertDialog(this, {
-        text: this.hass.localize(
-          "ui.panel.config.integrations.config_entry.restart_confirm"
-        ),
-      });
-    }
-
-    if (applicationCredentialsId) {
-      this._removeApplicationCredential(applicationCredentialsId);
-    }
-
-    this._handleFlowUpdated();
-  }
-
   static styles = css`
     a {
       text-decoration: none;
@@ -324,9 +191,6 @@ export class HaConfigFlowCard extends LitElement {
       --mdc-theme-primary: var(--error-color);
       --ha-card-border-color: var(--error-color);
     }
-    .warning {
-      --mdc-theme-text-primary-on-background: var(--error-color);
-    }
   `;
 }
 

src/panels/config/integrations/integration-panels/esphome/dialog-esphome-encryption-key.ts

@@ -1,138 +0,0 @@
-import { mdiClose, mdiContentCopy } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../../../common/dom/fire_event";
-import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
-import "../../../../../components/ha-dialog-header";
-import "../../../../../components/ha-icon-button";
-import "../../../../../components/ha-wa-dialog";
-import { haStyleDialog } from "../../../../../resources/styles";
-import type { HomeAssistant } from "../../../../../types";
-import { showToast } from "../../../../../util/toast";
-import type { ESPHomeEncryptionKeyDialogParams } from "./show-dialog-esphome-encryption-key";
-
-@customElement("dialog-esphome-encryption-key")
-class DialogESPHomeEncryptionKey extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _params?: ESPHomeEncryptionKeyDialogParams;
-
-  public async showDialog(
-    params: ESPHomeEncryptionKeyDialogParams
-  ): Promise<void> {
-    this._params = params;
-  }
-
-  public closeDialog(): void {
-    this._params = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render() {
-    if (!this._params) {
-      return nothing;
-    }
-
-    return html`
-      <ha-wa-dialog
-        open
-        @closed=${this.closeDialog}
-        hideActions
-        header-title=${this.hass.localize(
-          "ui.panel.config.devices.esphome.encryption_key_title"
-        )}
-      >
-        <ha-dialog-header slot="heading">
-          <ha-icon-button
-            slot="navigationIcon"
-            dialogAction="cancel"
-            .label=${this.hass.localize("ui.common.close")}
-            .path=${mdiClose}
-          ></ha-icon-button>
-          <span slot="title">
-            ${this.hass.localize(
-              "ui.panel.config.devices.esphome.encryption_key_title"
-            )}
-          </span>
-        </ha-dialog-header>
-
-        <div class="content">
-          <p>
-            ${this.hass.localize(
-              "ui.panel.config.devices.esphome.encryption_key_description"
-            )}
-          </p>
-          <div class="key-row">
-            <div class="key-container">
-              <code>${this._params.encryption_key}</code>
-            </div>
-            <ha-icon-button
-              @click=${this._copyToClipboard}
-              .label=${this.hass.localize("ui.common.copy")}
-              .path=${mdiContentCopy}
-            ></ha-icon-button>
-          </div>
-        </div>
-      </ha-wa-dialog>
-    `;
-  }
-
-  private async _copyToClipboard(): Promise<void> {
-    if (!this._params?.encryption_key) {
-      return;
-    }
-
-    await copyToClipboard(this._params.encryption_key);
-    showToast(this, {
-      message: this.hass.localize("ui.common.copied_clipboard"),
-    });
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyleDialog,
-      css`
-        ha-dialog {
-          --mdc-dialog-max-width: 500px;
-        }
-
-        .content {
-          display: flex;
-          flex-direction: column;
-          gap: var(--ha-space-6);
-        }
-
-        .key-row {
-          display: flex;
-          gap: var(--ha-space-2);
-          align-items: center;
-        }
-
-        .key-container {
-          flex: 1;
-          border-radius: var(--ha-space-2);
-          border: 1px solid var(--divider-color);
-          background-color: var(
-            --code-editor-background-color,
-            var(--secondary-background-color)
-          );
-          padding: var(--ha-space-3);
-          overflow: hidden;
-        }
-
-        p {
-          margin: 0;
-          color: var(--secondary-text-color);
-          line-height: var(--ha-line-height-condensed);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-esphome-encryption-key": DialogESPHomeEncryptionKey;
-  }
-}

src/panels/config/integrations/integration-panels/esphome/show-dialog-esphome-encryption-key.ts

@@ -1,20 +0,0 @@
-import { fireEvent } from "../../../../../common/dom/fire_event";
-
-export interface ESPHomeEncryptionKeyDialogParams {
-  entry_id: string;
-  encryption_key: string;
-}
-
-export const loadESPHomeEncryptionKeyDialog = () =>
-  import("./dialog-esphome-encryption-key");
-
-export const showESPHomeEncryptionKeyDialog = (
-  element: HTMLElement,
-  dialogParams: ESPHomeEncryptionKeyDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-esphome-encryption-key",
-    dialogImport: loadESPHomeEncryptionKeyDialog,
-    dialogParams,
-  });
-};

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -295,7 +295,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
                 color:
                   route.route_status === "Active"
                     ? primaryColor
-                    : style.getPropertyValue("--dark-primary-color"),
+                    : style.getPropertyValue("--disabled-color"),
                 type: ["Child", "Parent"].includes(neighbor.relationship)
                   ? "solid"
                   : "dotted",
@@ -335,7 +335,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
             symbolSize: 5,
             lineStyle: {
               width: 1,
-              color: style.getPropertyValue("--dark-primary-color"),
+              color: style.getPropertyValue("--disabled-color"),
               type: "dotted",
             },
             ignoreForceLayout: true,

src/panels/config/labs/dialog-labs-preview-feature-enable.ts

@@ -204,7 +204,7 @@ export class DialogLabsPreviewFeatureEnable
       --md-list-item-trailing-space: var(--ha-space-6);
       margin: 0;
       padding: 0;
-      border-top: var(--ha-border-width-sm) solid var(--divider-color);
+      border-top: 1px solid var(--divider-color);
     }
 
     div[slot="actions"] > div {

src/panels/config/labs/ha-config-labs.ts

@@ -16,7 +16,6 @@ import type { HomeAssistant } from "../../../types";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { brandsUrl } from "../../../util/brands-url";
 import { showToast } from "../../../util/toast";
-import { documentationUrl } from "../../../util/documentation-url";
 import { haStyle } from "../../../resources/styles";
 import { showLabsPreviewFeatureEnableDialog } from "./show-dialog-labs-preview-feature-enable";
 import {
@@ -101,7 +100,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
           ? html`
               <a
                 slot="toolbar-icon"
-                href=${documentationUrl(this.hass, "/integrations/labs/")}
+                href="https://www.home-assistant.io/integrations/labs/"
                 target="_blank"
                 rel="noopener noreferrer"
                 .title=${this.hass.localize("ui.common.help")}
@@ -125,7 +124,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
                     "ui.panel.config.labs.empty.description"
                   )}
                   <a
-                    href=${documentationUrl(this.hass, "/integrations/labs/")}
+                    href="https://www.home-assistant.io/integrations/labs/"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
@@ -388,7 +387,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       .content {
         max-width: 800px;
         margin: 0 auto;
-        padding: var(--ha-space-4);
+        padding: 16px;
         min-height: calc(100vh - 64px);
         display: flex;
         flex-direction: column;
@@ -399,7 +398,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       }
 
       ha-card {
-        margin-bottom: var(--ha-space-4);
+        margin-bottom: 16px;
         position: relative;
         transition: box-shadow 0.3s ease;
       }
@@ -411,12 +410,12 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       @keyframes highlight-fade {
         0% {
           box-shadow:
-            0 0 0 var(--ha-border-width-md) var(--primary-color),
-            0 0 var(--ha-shadow-blur-lg) rgba(var(--rgb-primary-color), 0.4);
+            0 0 0 2px var(--primary-color),
+            0 0 12px rgba(var(--rgb-primary-color), 0.4);
         }
         100% {
           box-shadow:
-            0 0 0 var(--ha-border-width-md) transparent,
+            0 0 0 2px transparent,
             0 0 0 transparent;
         }
       }
@@ -425,7 +424,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       .intro-card {
         display: flex;
         flex-direction: column;
-        gap: var(--ha-space-4);
+        gap: 16px;
       }
 
       .intro-card h1 {
@@ -433,18 +432,18 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       }
 
       .intro-text {
-        margin: 0 0 var(--ha-space-3);
+        margin: 0 0 12px;
       }
 
       /* Feature cards */
       .card-content {
-        padding: var(--ha-space-4);
+        padding: 16px;
       }
 
       .card-header {
         display: flex;
-        gap: var(--ha-space-3);
-        margin-bottom: var(--ha-space-4);
+        gap: 12px;
+        margin-bottom: 16px;
         align-items: flex-start;
       }
 
@@ -476,7 +475,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       .empty {
         max-width: 500px;
         margin: 0 auto;
-        padding: var(--ha-space-12) var(--ha-space-4);
+        padding: 48px 16px;
         text-align: center;
       }
 
@@ -488,11 +487,11 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       }
 
       .empty h1 {
-        margin: var(--ha-space-6) 0 var(--ha-space-4);
+        margin: 24px 0 16px;
       }
 
       .empty p {
-        margin: 0 0 var(--ha-space-6);
+        margin: 0 0 24px;
         font-size: 16px;
         line-height: 24px;
         color: var(--secondary-text-color);
@@ -501,7 +500,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       .empty a {
         display: inline-flex;
         align-items: center;
-        gap: var(--ha-space-1);
+        gap: 4px;
         color: var(--primary-color);
         text-decoration: none;
         font-weight: 500;
@@ -512,9 +511,9 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       }
 
       .empty a:focus-visible {
-        outline: var(--ha-border-width-md) solid var(--primary-color);
+        outline: 2px solid var(--primary-color);
         outline-offset: 2px;
-        border-radius: var(--ha-border-radius-sm);
+        border-radius: 4px;
       }
 
       .empty a ha-svg-icon {
@@ -529,15 +528,15 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
         justify-content: space-between;
         align-items: center;
         flex-wrap: wrap;
-        gap: var(--ha-space-2);
-        padding: var(--ha-space-2);
-        border-top: var(--ha-border-width-sm) solid var(--divider-color);
+        gap: 8px;
+        padding: 8px;
+        border-top: 1px solid var(--divider-color);
       }
 
       .card-actions > div {
         display: flex;
         flex-wrap: wrap;
-        gap: var(--ha-space-2);
+        gap: 8px;
       }
     `,
   ];

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts

@@ -62,7 +62,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
       return nothing;
     }
     const defaultPanelUrlPath =
-      this.hass.systemData?.default_panel || DEFAULT_PANEL;
+      this.hass.systemData?.defaultPanel || DEFAULT_PANEL;
     const titleInvalid = !this._data.title || !this._data.title.trim();
 
     return html`
@@ -260,7 +260,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
       return;
     }
 
-    const defaultPanel = this.hass.systemData?.default_panel || DEFAULT_PANEL;
+    const defaultPanel = this.hass.systemData?.defaultPanel || DEFAULT_PANEL;
     // Add warning dialog to saying that this will change the default dashboard for all users
     const confirm = await showConfirmationDialog(this, {
       title: this.hass.localize(
@@ -284,7 +284,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
 
     saveFrontendSystemData(this.hass.connection, "core", {
       ...this.hass.systemData,
-      default_panel: urlPath === defaultPanel ? undefined : urlPath,
+      defaultPanel: urlPath === defaultPanel ? undefined : urlPath,
     });
   }
 
@@ -309,20 +309,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
       }
       this.closeDialog();
     } catch (err: any) {
-      let localizedErrorMessage: string | undefined;
-      if (err?.translation_domain && err?.translation_key) {
-        const localize = await this.hass.loadBackendTranslation(
-          "exceptions",
-          err.translation_domain
-        );
-        localizedErrorMessage = localize(
-          `component.${err.translation_domain}.exceptions.${err.translation_key}.message`,
-          err.translation_placeholders
-        );
-      }
-      this._error = {
-        base: localizedErrorMessage || err?.message || "Unknown error",
-      };
+      this._error = { base: err?.message || "Unknown error" };
     } finally {
       this._submitting = false;
     }

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -404,7 +404,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
 
-    const defaultPanel = this.hass.systemData?.default_panel || DEFAULT_PANEL;
+    const defaultPanel = this.hass.systemData?.defaultPanel || DEFAULT_PANEL;
 
     return html`
       <hass-tabs-subpage-data-table

src/panels/config/scene/ha-scene-editor.ts

@@ -1265,10 +1265,6 @@ export class HaSceneEditor extends PreventUnsavedMixin(
           display: block;
           margin-bottom: 24px;
         }
-        ha-alert ha-button[slot="action"] {
-          width: max-content;
-          white-space: nowrap;
-        }
         ha-fab.dirty {
           bottom: 0;
         }

src/panels/config/script/manual-script-editor.ts

@@ -270,7 +270,6 @@ export class HaManualScriptEditor extends LitElement {
             @value-changed=${this._sidebarConfigChanged}
             @sidebar-resized=${this._resizeSidebar}
             @sidebar-resizing-stopped=${this._stopResizeSidebar}
-            @sidebar-reset-size=${this._resetSidebarWidth}
           ></ha-automation-sidebar>
         </div>
       </div>
@@ -619,16 +618,6 @@ export class HaManualScriptEditor extends LitElement {
     this._prevSidebarWidthPx = undefined;
   }
 
-  private _resetSidebarWidth(ev: Event) {
-    ev.stopPropagation();
-    this._prevSidebarWidthPx = undefined;
-    this._sidebarWidthPx = SIDEBAR_DEFAULT_WIDTH;
-    this.style.setProperty(
-      "--sidebar-dynamic-width",
-      `${this._sidebarWidthPx}px`
-    );
-  }
-
   static get styles(): CSSResultGroup {
     return [
       saveFabStyles,

src/panels/config/tags/dialog-tag-detail.ts

@@ -2,7 +2,6 @@ import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { documentationUrl } from "../../../util/documentation-url";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import { createCloseHeading } from "../../../components/ha-dialog";
@@ -15,6 +14,8 @@ import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import type { TagDetailDialogParams } from "./show-dialog-tag-detail";
 
+const TAG_BASE = "https://www.home-assistant.io/tag/";
+
 @customElement("dialog-tag-detail")
 class DialogTagDetail
   extends LitElement
@@ -121,7 +122,7 @@ class DialogTagDetail
                 </div>
                 <div id="qr">
                   <ha-qr-code
-                    .data=${`${documentationUrl(this.hass, "/tag/")}${this._params!.entry!.id}`}
+                    .data=${`${TAG_BASE}${this._params!.entry!.id}`}
                     center-image="/static/icons/favicon-192x192.png"
                     error-correction-level="quartile"
                     scale="5"

src/panels/config/voice-assistants/debug/assist-pipeline-debug.ts

@@ -6,7 +6,6 @@ import {
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { formatDateTimeWithSeconds } from "../../../../common/datetime/format_date_time";
 import type {
   PipelineRunEvent,
@@ -21,8 +20,6 @@ import "../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../../types";
 import "./assist-render-pipeline-events";
-import type { ChatLog } from "../../../../data/chat_log";
-import { subscribeChatLog } from "../../../../data/chat_log";
 
 @customElement("assist-pipeline-debug")
 export class AssistPipelineDebug extends LitElement {
@@ -40,12 +37,8 @@ export class AssistPipelineDebug extends LitElement {
 
   @state() private _events?: PipelineRunEvent[];
 
-  @state() private _chatLog?: ChatLog;
-
   private _unsubRefreshEventsID?: number;
 
-  private _unsubChatLogUpdates?: Promise<UnsubscribeFunc>;
-
   protected render() {
     return html`<hass-subpage
       .narrow=${this.narrow}
@@ -113,7 +106,6 @@ export class AssistPipelineDebug extends LitElement {
           ? html`<assist-render-pipeline-events
               .hass=${this.hass}
               .events=${this._events}
-              .chatLog=${this._chatLog}
             ></assist-render-pipeline-events>`
           : ""}
       </div>
@@ -128,10 +120,6 @@ export class AssistPipelineDebug extends LitElement {
       clearRefresh = true;
     }
     if (changedProperties.has("_runId")) {
-      if (this._unsubChatLogUpdates) {
-        this._unsubChatLogUpdates.then((unsub) => unsub());
-        this._unsubChatLogUpdates = undefined;
-      }
       this._fetchEvents();
       clearRefresh = true;
     }
@@ -147,10 +135,6 @@ export class AssistPipelineDebug extends LitElement {
       clearTimeout(this._unsubRefreshEventsID);
       this._unsubRefreshEventsID = undefined;
     }
-    if (this._unsubChatLogUpdates) {
-      this._unsubChatLogUpdates.then((unsub) => unsub());
-      this._unsubChatLogUpdates = undefined;
-    }
   }
 
   private async _fetchRuns() {
@@ -201,27 +185,8 @@ export class AssistPipelineDebug extends LitElement {
       });
       return;
     }
-    if (!this._events!.length) {
-      return;
-    }
-    if (!this._unsubChatLogUpdates && this._events[0].type === "run-start") {
-      this._unsubChatLogUpdates = subscribeChatLog(
-        this.hass,
-        this._events[0].data.conversation_id,
-        (chatLog) => {
-          if (chatLog) {
-            this._chatLog = chatLog;
-          } else {
-            this._unsubChatLogUpdates?.then((unsub) => unsub());
-            this._unsubChatLogUpdates = undefined;
-          }
-        }
-      );
-      this._unsubChatLogUpdates.catch(() => {
-        this._unsubChatLogUpdates = undefined;
-      });
-    }
     if (
+      this._events?.length &&
       // If the last event is not a finish run event, the run is still ongoing.
       // Refresh events automatically.
       !["run-end", "error"].includes(this._events[this._events.length - 1].type)

src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts

@@ -1,7 +1,6 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { extractSearchParam } from "../../../../common/url/search-params";
 import "../../../../components/ha-assist-pipeline-picker";
 import "../../../../components/ha-button";
@@ -25,8 +24,6 @@ import type { HomeAssistant } from "../../../../types";
 import { AudioRecorder } from "../../../../util/audio-recorder";
 import { fileDownload } from "../../../../util/file_download";
 import "./assist-render-pipeline-run";
-import type { ChatLog } from "../../../../data/chat_log";
-import { subscribeChatLog } from "../../../../data/chat_log";
 
 @customElement("assist-pipeline-run-debug")
 export class AssistPipelineRunDebug extends LitElement {
@@ -49,13 +46,6 @@ export class AssistPipelineRunDebug extends LitElement {
   @state() private _pipelineId?: string =
     extractSearchParam("pipeline") || undefined;
 
-  @state() private _chatLog?: ChatLog;
-
-  private _chatLogSubscription: {
-    conversationId: string;
-    unsub: Promise<UnsubscribeFunc>;
-  } | null = null;
-
   protected render(): TemplateResult {
     return html`
       <hass-subpage
@@ -188,7 +178,6 @@ export class AssistPipelineRunDebug extends LitElement {
                   <assist-render-pipeline-run
                     .hass=${this.hass}
                     .pipelineRun=${run}
-                    .chatLog=${this._chatLog}
                   ></assist-render-pipeline-run>
                 `
           )}
@@ -197,14 +186,6 @@ export class AssistPipelineRunDebug extends LitElement {
     `;
   }
 
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-    if (this._chatLogSubscription) {
-      this._chatLogSubscription.unsub.then((unsub) => unsub());
-      this._chatLogSubscription = null;
-    }
-  }
-
   private get conversationId(): string | null {
     return this._pipelineRuns.length === 0
       ? null
@@ -427,32 +408,6 @@ export class AssistPipelineRunDebug extends LitElement {
             added = true;
           }
           callback(updatedRun);
-
-          const conversationId = this.conversationId;
-          if (
-            !this._chatLog &&
-            conversationId &&
-            (!this._chatLogSubscription ||
-              this._chatLogSubscription.conversationId !== conversationId)
-          ) {
-            if (this._chatLogSubscription) {
-              this._chatLogSubscription.unsub.then((unsub) => unsub());
-            }
-            this._chatLogSubscription = {
-              conversationId,
-              unsub: subscribeChatLog(this.hass, conversationId, (chatLog) => {
-                if (chatLog) {
-                  this._chatLog = chatLog;
-                } else {
-                  this._chatLogSubscription?.unsub.then((unsub) => unsub());
-                  this._chatLogSubscription = null;
-                }
-              }),
-            };
-            this._chatLogSubscription.unsub.catch(() => {
-              this._chatLogSubscription = null;
-            });
-          }
         },
         {
           ...options,

src/panels/config/voice-assistants/debug/assist-render-pipeline-events.ts

@@ -9,7 +9,6 @@ import type {
 import { processEvent } from "../../../../data/assist_pipeline";
 import type { HomeAssistant } from "../../../../types";
 import "./assist-render-pipeline-run";
-import type { ChatLog } from "../../../../data/chat_log";
 
 @customElement("assist-render-pipeline-events")
 export class AssistPipelineEvents extends LitElement {
@@ -17,8 +16,6 @@ export class AssistPipelineEvents extends LitElement {
 
   @property({ attribute: false }) public events!: PipelineRunEvent[];
 
-  @property({ attribute: false }) public chatLog?: ChatLog;
-
   private _processEvents = memoizeOne(
     (events: PipelineRunEvent[]): PipelineRun | undefined => {
       let run: PipelineRun | undefined;
@@ -59,7 +56,6 @@ export class AssistPipelineEvents extends LitElement {
       <assist-render-pipeline-run
         .hass=${this.hass}
         .pipelineRun=${run}
-        .chatLog=${this.chatLog}
       ></assist-render-pipeline-run>
     `;
   }

src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts

@@ -1,5 +1,5 @@
 import type { TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../components/ha-card";
 import "../../../../components/ha-alert";
@@ -12,12 +12,6 @@ import { formatNumber } from "../../../../common/number/format_number";
 import "../../../../components/ha-yaml-editor";
 import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
-import type {
-  ChatLogAssistantContent,
-  ChatLog,
-  ChatLogContent,
-  ChatLogUserContent,
-} from "../../../../data/chat_log";
 
 const RUN_DATA = ["pipeline", "language"];
 const WAKE_WORD_DATA = ["engine"];
@@ -125,7 +119,7 @@ const dataMinusKeysRender = (
     result[key] = data[key];
   }
   return render
-    ? html`<ha-expansion-panel class="yaml-expansion">
+    ? html`<ha-expansion-panel>
         <span slot="header"
           >${hass.localize("ui.panel.config.voice_assistants.debug.raw")}</span
         >
@@ -140,8 +134,6 @@ export class AssistPipelineDebug extends LitElement {
 
   @property({ attribute: false }) public pipelineRun!: PipelineRun;
 
-  @property({ attribute: false }) public chatLog?: ChatLog;
-
   private _audioElement?: HTMLAudioElement;
 
   private get _isPlaying(): boolean {
@@ -155,47 +147,31 @@ export class AssistPipelineDebug extends LitElement {
         ) || "ready"
       : "ready";
 
-    let messages: ChatLogContent[];
+    const messages: { from: string; text: string }[] = [];
 
-    if (this.chatLog) {
-      messages = this.chatLog.content.filter(
-        this.pipelineRun.finished
-          ? (content: ChatLogContent) =>
-              content.role === "system" ||
-              (content.created >= this.pipelineRun.started &&
-                content.created <= this.pipelineRun.finished!)
-          : (content: ChatLogContent) =>
-              content.role === "system" ||
-              content.created >= this.pipelineRun.started
-      );
-    } else {
-      messages = [];
+    const userMessage =
+      (this.pipelineRun.init_options &&
+      "text" in this.pipelineRun.init_options.input
+        ? this.pipelineRun.init_options.input.text
+        : undefined) ||
+      this.pipelineRun?.stt?.stt_output?.text ||
+      this.pipelineRun?.intent?.intent_input;
 
-      // We don't have the chat log everywhere yet, just fallback for now.
-      const userMessage =
-        (this.pipelineRun.init_options &&
-        "text" in this.pipelineRun.init_options.input
-          ? this.pipelineRun.init_options.input.text
-          : undefined) ||
-        this.pipelineRun?.stt?.stt_output?.text ||
-        this.pipelineRun?.intent?.intent_input;
+    if (userMessage) {
+      messages.push({
+        from: "user",
+        text: userMessage,
+      });
+    }
 
-      if (userMessage) {
-        messages.push({
-          role: "user",
-          content: userMessage,
-        } as ChatLogUserContent);
-      }
-
-      if (
-        this.pipelineRun?.intent?.intent_output?.response?.speech?.plain?.speech
-      ) {
-        messages.push({
-          role: "assistant",
-          content:
-            this.pipelineRun.intent.intent_output.response.speech.plain.speech,
-        } as ChatLogAssistantContent);
-      }
+    if (
+      this.pipelineRun?.intent?.intent_output?.response?.speech?.plain?.speech
+    ) {
+      messages.push({
+        from: "hass",
+        text: this.pipelineRun.intent.intent_output.response.speech.plain
+          .speech,
+      });
     }
 
     return html`
@@ -214,58 +190,10 @@ export class AssistPipelineDebug extends LitElement {
           ${messages.length > 0
             ? html`
                 <div class="messages">
-                  ${messages.map((content) =>
-                    content.role === "system" || content.role === "tool_result"
-                      ? html`
-                          <ha-expansion-panel
-                            class="content-expansion ${content.role}"
-                          >
-                            <div slot="header">
-                              ${content.role === "system"
-                                ? "System"
-                                : `Result for ${content.tool_name}`}
-                            </div>
-                            ${content.role === "system"
-                              ? html`<pre>${content.content}</pre>`
-                              : html`
-                                  <ha-yaml-editor
-                                    read-only
-                                    auto-update
-                                    .value=${content}
-                                  ></ha-yaml-editor>
-                                `}
-                          </ha-expansion-panel>
-                        `
-                      : html`
-                          ${content.content
-                            ? html`
-                                <div class=${`message ${content.role}`}>
-                                  ${content.content}
-                                </div>
-                              `
-                            : nothing}
-                          ${content.role === "assistant" &&
-                          content.tool_calls?.length
-                            ? html`
-                                <ha-expansion-panel
-                                  class="content-expansion assistant"
-                                >
-                                  <span slot="header">
-                                    Call
-                                    ${content.tool_calls.length === 1
-                                      ? content.tool_calls[0].tool_name
-                                      : `${content.tool_calls.length} tools`}
-                                  </span>
-
-                                  <ha-yaml-editor
-                                    read-only
-                                    auto-update
-                                    .value=${content.tool_calls}
-                                  ></ha-yaml-editor>
-                                </ha-expansion-panel>
-                              `
-                            : nothing}
-                        `
+                  ${messages.map(
+                    ({ from, text }) => html`
+                      <div class=${`message ${from}`}>${text}</div>
+                    `
                   )}
                 </div>
                 <div style="clear:both"></div>
@@ -514,7 +442,7 @@ export class AssistPipelineDebug extends LitElement {
         : ""}
       ${maybeRenderError(this.pipelineRun, "tts", lastRunStage)}
       <ha-card>
-        <ha-expansion-panel class="yaml-expansion">
+        <ha-expansion-panel>
           <span slot="header"
             >${this.hass.localize(
               "ui.panel.config.voice_assistants.debug.raw"
@@ -591,12 +519,12 @@ export class AssistPipelineDebug extends LitElement {
     .row > div:last-child {
       text-align: right;
     }
-    .yaml-expansion {
+    ha-expansion-panel {
       padding-left: 8px;
       padding-inline-start: 8px;
       padding-inline-end: initial;
     }
-    .card-content .yaml-expansion {
+    .card-content ha-expansion-panel {
       padding-left: 0px;
       padding-inline-start: 0px;
       padding-inline-end: initial;
@@ -612,59 +540,27 @@ export class AssistPipelineDebug extends LitElement {
       margin-top: 8px;
     }
 
-    .content-expansion {
-      margin: 8px 0;
-      border-radius: var(--ha-border-radius-xl);
-      clear: both;
-      padding: 0 8px;
-      --input-fill-color: none;
-      max-width: calc(100% - 24px);
-      --expansion-panel-summary-padding: 0px;
-      --expansion-panel-content-padding: 0px;
-    }
-
-    .content-expansion *[slot="header"] {
-      font-weight: var(--ha-font-weight-normal);
-    }
-
-    .system {
-      background-color: var(--success-color);
-    }
-
     .message {
-      padding: 8px;
-    }
-
-    .message,
-    .content-expansion {
       font-size: var(--ha-font-size-l);
       margin: 8px 0;
+      padding: 8px;
       border-radius: var(--ha-border-radius-xl);
       clear: both;
     }
 
-    .messages pre {
-      white-space: pre-wrap;
-    }
-
-    .user,
-    .tool_result {
+    .message.user {
       margin-left: 24px;
       margin-inline-start: 24px;
       margin-inline-end: initial;
       float: var(--float-end);
+      text-align: right;
       border-bottom-right-radius: 0px;
       background-color: var(--light-primary-color);
       color: var(--text-light-primary-color, var(--primary-text-color));
       direction: var(--direction);
     }
 
-    .message.user,
-    .content-expansion div[slot="header"] {
-      text-align: right;
-    }
-
-    .assistant {
+    .message.hass {
       margin-right: 24px;
       margin-inline-end: 24px;
       margin-inline-start: initial;

src/panels/home/dialogs/dialog-edit-home.ts

@@ -1,151 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/entity/ha-entities-picker";
-import "../../../components/ha-button";
-import "../../../components/ha-dialog-footer";
-import "../../../components/ha-wa-dialog";
-import type { HomeFrontendSystemData } from "../../../data/frontend";
-import type { HassDialog } from "../../../dialogs/make-dialog-manager";
-import { haStyleDialog } from "../../../resources/styles";
-import type { HomeAssistant } from "../../../types";
-import type { EditHomeDialogParams } from "./show-dialog-edit-home";
-
-@customElement("dialog-edit-home")
-export class DialogEditHome
-  extends LitElement
-  implements HassDialog<EditHomeDialogParams>
-{
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _params?: EditHomeDialogParams;
-
-  @state() private _config?: HomeFrontendSystemData;
-
-  @state() private _open = false;
-
-  @state() private _submitting = false;
-
-  public showDialog(params: EditHomeDialogParams): void {
-    this._params = params;
-    this._config = { ...params.config };
-    this._open = true;
-  }
-
-  public closeDialog(): boolean {
-    this._open = false;
-    return true;
-  }
-
-  private _dialogClosed(): void {
-    this._params = undefined;
-    this._config = undefined;
-    this._submitting = false;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render() {
-    if (!this._params) {
-      return nothing;
-    }
-
-    return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        .headerTitle=${this.hass.localize("ui.panel.home.editor.title")}
-        @closed=${this._dialogClosed}
-      >
-        <p class="description">
-          ${this.hass.localize("ui.panel.home.editor.description")}
-        </p>
-
-        <ha-entities-picker
-          autofocus
-          .hass=${this.hass}
-          .value=${this._config?.favorite_entities || []}
-          .label=${this.hass.localize(
-            "ui.panel.lovelace.editor.strategy.home.favorite_entities"
-          )}
-          .placeholder=${this.hass.localize(
-            "ui.panel.lovelace.editor.strategy.home.add_favorite_entity"
-          )}
-          .helper=${this.hass.localize(
-            "ui.panel.home.editor.favorite_entities_helper"
-          )}
-          reorder
-          allow-custom-entity
-          @value-changed=${this._favoriteEntitiesChanged}
-        ></ha-entities-picker>
-
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            appearance="plain"
-            slot="secondaryAction"
-            @click=${this.closeDialog}
-            .disabled=${this._submitting}
-          >
-            ${this.hass.localize("ui.common.cancel")}
-          </ha-button>
-          <ha-button
-            slot="primaryAction"
-            @click=${this._save}
-            .disabled=${this._submitting}
-          >
-            ${this.hass.localize("ui.common.save")}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
-    `;
-  }
-
-  private _favoriteEntitiesChanged(ev: CustomEvent): void {
-    const entities = ev.detail.value as string[];
-    this._config = {
-      ...this._config,
-      favorite_entities: entities.length > 0 ? entities : undefined,
-    };
-  }
-
-  private async _save(): Promise<void> {
-    if (!this._params || !this._config) {
-      return;
-    }
-
-    this._submitting = true;
-
-    try {
-      await this._params.saveConfig(this._config);
-      this.closeDialog();
-    } catch (err: any) {
-      // eslint-disable-next-line no-console
-      console.error("Failed to save home configuration:", err);
-    } finally {
-      this._submitting = false;
-    }
-  }
-
-  static styles = [
-    haStyleDialog,
-    css`
-      ha-wa-dialog {
-        --dialog-content-padding: var(--ha-space-6);
-      }
-
-      .description {
-        margin: 0 0 var(--ha-space-4) 0;
-        color: var(--secondary-text-color);
-      }
-
-      ha-entities-picker {
-        display: block;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-edit-home": DialogEditHome;
-  }
-}

src/panels/home/dialogs/show-dialog-edit-home.ts

@@ -1,20 +0,0 @@
-import { fireEvent } from "../../../common/dom/fire_event";
-import type { HomeFrontendSystemData } from "../../../data/frontend";
-
-export interface EditHomeDialogParams {
-  config: HomeFrontendSystemData;
-  saveConfig: (config: HomeFrontendSystemData) => Promise<void>;
-}
-
-export const loadEditHomeDialog = () => import("./dialog-edit-home");
-
-export const showEditHomeDialog = (
-  element: HTMLElement,
-  params: EditHomeDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-edit-home",
-    dialogImport: loadEditHomeDialog,
-    dialogParams: params,
-  });
-};

src/panels/home/ha-panel-home.ts

@@ -3,18 +3,18 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
-import {
-  fetchFrontendSystemData,
-  saveFrontendSystemData,
-  type HomeFrontendSystemData,
-} from "../../data/frontend";
 import type { LovelaceDashboardStrategyConfig } from "../../data/lovelace/config/types";
 import type { HomeAssistant, PanelInfo, Route } from "../../types";
-import { showToast } from "../../util/toast";
 import "../lovelace/hui-root";
 import { generateLovelaceDashboardStrategy } from "../lovelace/strategies/get-strategy";
 import type { Lovelace } from "../lovelace/types";
-import { showEditHomeDialog } from "./dialogs/show-dialog-edit-home";
+import { showAlertDialog } from "../lovelace/custom-card-helpers";
+
+const HOME_LOVELACE_CONFIG: LovelaceDashboardStrategyConfig = {
+  strategy: {
+    type: "home",
+  },
+};
 
 @customElement("ha-panel-home")
 class PanelHome extends LitElement {
@@ -28,14 +28,12 @@ class PanelHome extends LitElement {
 
   @state() private _lovelace?: Lovelace;
 
-  @state() private _config: FrontendSystemData["home"] = {};
-
   public willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
     // Initial setup
     if (!this.hasUpdated) {
       this.hass.loadFragmentTranslation("lovelace");
-      this._loadConfig();
+      this._setLovelace();
       return;
     }
 
@@ -97,28 +95,9 @@ class PanelHome extends LitElement {
     `;
   }
 
-  private async _loadConfig() {
-    try {
-      const data = await fetchFrontendSystemData(this.hass.connection, "home");
-      this._config = data || {};
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error("Failed to load favorites:", err);
-      this._config = {};
-    }
-    this._setLovelace();
-  }
-
   private async _setLovelace() {
-    const strategyConfig: LovelaceDashboardStrategyConfig = {
-      strategy: {
-        type: "home",
-        favorite_entities: this._config.favorite_entities,
-      },
-    };
-
     const config = await generateLovelaceDashboardStrategy(
-      strategyConfig,
+      HOME_LOVELACE_CONFIG,
       this.hass
     );
 
@@ -142,34 +121,15 @@ class PanelHome extends LitElement {
   }
 
   private _setEditMode = () => {
-    showEditHomeDialog(this, {
-      config: this._config,
-      saveConfig: async (config) => {
-        await this._saveConfig(config);
-      },
+    // For now, we just show an alert that edit mode is not supported.
+    // This will be expanded in the future.
+    showAlertDialog(this, {
+      title: "Edit mode not available",
+      text: "The Home panel does not support edit mode.",
+      confirmText: this.hass.localize("ui.common.ok"),
     });
   };
 
-  private async _saveConfig(config: HomeFrontendSystemData): Promise<void> {
-    try {
-      await saveFrontendSystemData(this.hass.connection, "home", config);
-      this._config = config || {};
-    } catch (err: any) {
-      // eslint-disable-next-line no-console
-      console.error("Failed to save home configuration:", err);
-      showToast(this, {
-        message: this.hass.localize("ui.panel.home.editor.save_failed"),
-        duration: 0,
-        dismissable: true,
-      });
-      return;
-    }
-    showToast(this, {
-      message: this.hass.localize("ui.common.successfully_saved"),
-    });
-    this._setLovelace();
-  }
-
   static readonly styles: CSSResultGroup = css`
     :host {
       display: block;

src/panels/lovelace/cards/hui-calendar-card.ts

@@ -80,9 +80,10 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
       throw new Error("Entities need to be an array");
     }
 
+    const computedStyles = getComputedStyle(this);
     this._calendars = config!.entities.map((entity, idx) => ({
       entity_id: entity,
-      backgroundColor: getColorByIndex(idx),
+      backgroundColor: getColorByIndex(idx, computedStyles),
     }));
 
     if (this._config?.entities !== config.entities) {

src/panels/lovelace/cards/hui-map-card.ts

@@ -394,7 +394,8 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     if (color) {
       return color;
     }
-    color = getColorByIndex(this._colorIndex);
+    const computedStyles = getComputedStyle(this);
+    color = getColorByIndex(this._colorIndex, computedStyles);
     this._colorIndex++;
     this._colorDict[entityId] = color;
     return color;

src/panels/profile/ha-advanced-mode-row.ts

@@ -7,7 +7,6 @@ import "../../components/ha-settings-row";
 import "../../components/ha-switch";
 import type { CoreFrontendUserData } from "../../data/frontend";
 import { saveFrontendUserData } from "../../data/frontend";
-import { documentationUrl } from "../../util/documentation-url";
 import type { HomeAssistant } from "../../types";
 
 @customElement("ha-advanced-mode-row")
@@ -32,10 +31,7 @@ class AdvancedModeRow extends LitElement {
         <span slot="description">
           ${this.hass.localize("ui.panel.profile.advanced_mode.description")}
           <a
-            href=${documentationUrl(
-              this.hass,
-              "/blog/2019/07/17/release-96/#advanced-mode"
-            )}
+            href="https://www.home-assistant.io/blog/2019/07/17/release-96/#advanced-mode"
             target="_blank"
             rel="noreferrer"
             >${this.hass.localize("ui.panel.profile.advanced_mode.link_promo")}

src/panels/profile/ha-pick-dashboard-row.ts

@@ -25,7 +25,7 @@ class HaPickDashboardRow extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const value = this.hass.userData?.default_panel || USE_SYSTEM_VALUE;
+    const value = this.hass.userData?.defaultPanel || USE_SYSTEM_VALUE;
     return html`
       <ha-settings-row .narrow=${this.narrow}>
         <span slot="heading">
@@ -84,12 +84,12 @@ class HaPickDashboardRow extends LitElement {
       return;
     }
     const urlPath = value === USE_SYSTEM_VALUE ? undefined : value;
-    if (urlPath === this.hass.userData?.default_panel) {
+    if (urlPath === this.hass.userData?.defaultPanel) {
       return;
     }
     saveFrontendUserData(this.hass.connection, "core", {
       ...this.hass.userData,
-      default_panel: urlPath,
+      defaultPanel: urlPath,
     });
   }
 }

src/resources/markdown-worker.ts

@@ -15,7 +15,7 @@ const renderMarkdown = async (
     allowSvg?: boolean;
     allowDataUrl?: boolean;
   } = {}
-): Promise<string[]> => {
+): Promise<string> => {
   if (!whiteListNormal) {
     whiteListNormal = {
       ...getDefaultWhiteList(),
@@ -53,43 +53,38 @@ const renderMarkdown = async (
     whiteList.a.push("download");
   }
 
-  marked.setOptions(markedOptions);
-
-  const tokens = marked.lexer(content);
-  return tokens.map((token) =>
-    filterXSS(marked.parser([token]), {
-      whiteList,
-      onTagAttr: (
-        tag: string,
-        name: string,
-        value: string
-      ): string | undefined => {
-        // Override the default `onTagAttr` behavior to only render
-        // our markdown checkboxes.
-        // Returning undefined causes the default measure to be taken
-        // in the xss library.
-        if (tag === "input") {
-          if (
-            (name === "type" && value === "checkbox") ||
-            name === "checked" ||
-            name === "disabled"
-          ) {
-            return undefined;
-          }
-          return "";
-        }
+  return filterXSS(await marked(content, markedOptions), {
+    whiteList,
+    onTagAttr: (
+      tag: string,
+      name: string,
+      value: string
+    ): string | undefined => {
+      // Override the default `onTagAttr` behavior to only render
+      // our markdown checkboxes.
+      // Returning undefined causes the default measure to be taken
+      // in the xss library.
+      if (tag === "input") {
         if (
-          hassOptions.allowDataUrl &&
-          tag === "a" &&
-          name === "href" &&
-          value.startsWith("data:")
+          (name === "type" && value === "checkbox") ||
+          name === "checked" ||
+          name === "disabled"
         ) {
-          return `href="${value}"`;
+          return undefined;
         }
-        return undefined;
-      },
-    })
-  );
+        return "";
+      }
+      if (
+        hassOptions.allowDataUrl &&
+        tag === "a" &&
+        name === "href" &&
+        value.startsWith("data:")
+      ) {
+        return `href="${value}"`;
+      }
+      return undefined;
+    },
+  });
 };
 
 const api = {

src/resources/theme/color/color.globals.ts

@@ -91,6 +91,62 @@ export const colorStyles = css`
     --black-color: #000000;
     --white-color: #ffffff;
 
+    /* colors - used for graphs, calendars, maps, etc */
+    --color-1: #4269d0;
+    --color-2: #f4bd4a;
+    --color-3: #ff725c;
+    --color-4: #6cc5b0;
+    --color-5: #a463f2;
+    --color-6: #ff8ab7;
+    --color-7: #9c6b4e;
+    --color-8: #97bbf5;
+    --color-9: #01ab63;
+    --color-10: #094bad;
+    --color-11: #c99000;
+    --color-12: #d84f3e;
+    --color-13: #49a28f;
+    --color-14: #048732;
+    --color-15: #d96895;
+    --color-16: #8043ce;
+    --color-17: #7599d1;
+    --color-18: #7a4c31;
+    --color-19: #6989f4;
+    --color-20: #ffd444;
+    --color-21: #ff957c;
+    --color-22: #8fe9d3;
+    --color-23: #62cc71;
+    --color-24: #ffadda;
+    --color-25: #c884ff;
+    --color-26: #badeff;
+    --color-27: #bf8b6d;
+    --color-28: #927acc;
+    --color-29: #97ee3f;
+    --color-30: #bf3947;
+    --color-31: #9f5b00;
+    --color-32: #f48758;
+    --color-33: #8caed6;
+    --color-34: #f2b94f;
+    --color-35: #eff26e;
+    --color-36: #e43872;
+    --color-37: #d9b100;
+    --color-38: #9d7a00;
+    --color-39: #698cff;
+    --color-40: #00d27e;
+    --color-41: #d06800;
+    --color-42: #009f82;
+    --color-43: #c49200;
+    --color-44: #cbe8ff;
+    --color-45: #fecddf;
+    --color-46: #c27eb6;
+    --color-47: #8cd2ce;
+    --color-48: #c4b8d9;
+    --color-49: #f883b0;
+    --color-50: #a49100;
+    --color-51: #f48800;
+    --color-52: #27d0df;
+    --color-53: #a04a9b;
+    --color-54: #4269d0;
+
     /* history colors */
     --history-unavailable-color: transparent;
 

src/translations/en.json

@@ -2220,14 +2220,6 @@
       "migrate_to_user_data": "This will change the sidebar on all the devices you are logged in to. To create a sidebar per device, you should use a different user for that device."
     },
     "panel": {
-      "home": {
-        "editor": {
-          "title": "Edit home page",
-          "description": "Configure your home page display preferences.",
-          "favorite_entities_helper": "Display your favorite entities. Home Assistant will still suggest based on commonly used up to 8 slots.",
-          "save_failed": "Failed to save home page configuration"
-        }
-      },
       "my": {
         "not_supported": "This redirect is not supported by your Home Assistant instance. Check the {link} for the supported redirects and the version they where introduced.",
         "component_not_loaded": "This redirect is not supported by your Home Assistant instance. You need the integration {integration} to use this redirect.",
@@ -3265,10 +3257,7 @@
             "create_helper": "Create helper",
             "no_helpers": "Looks like you don't have any helpers yet!",
             "search": "Search {number} {number, plural,\n  one {helper}\n  other {helpers}\n}",
-            "error_information": "Error information",
-            "delete_confirm_title": "Delete helper?",
-            "delete_confirm_text": "Are you sure you want to delete {name}?",
-            "delete_failed": "Failed to delete helper"
+            "error_information": "Error information"
           },
           "dialog": {
             "create": "Create",
@@ -4796,8 +4785,7 @@
             "headers": {
               "name": "Name",
               "type": "Type",
-              "file_name": "File name",
-              "usage_count": "In use"
+              "file_name": "File name"
             },
             "types": {
               "automation": "Automation",
@@ -5412,11 +5400,6 @@
                 "partial_failure": "Some devices failed to delete successfully. Check system logs for more information."
               }
             }
-          },
-          "esphome": {
-            "show_encryption_key": "Show encryption key",
-            "encryption_key_title": "ESPHome Encryption Key",
-            "encryption_key_description": "This is the encryption key for your ESPHome device. Keep it in a safe place, as you may need it when transferring devices between Home Assistant instances."
           }
         },
         "entities": {
@@ -6785,7 +6768,6 @@
         },
         "analytics": {
           "caption": "Analytics",
-          "header": "Home Assistant analytics",
           "description": "Learn how to share data to improve Home Assistant",
           "preferences": {
             "base": {
@@ -6803,21 +6785,10 @@
             "diagnostics": {
               "title": "Diagnostics",
               "description": "Share crash reports when unexpected errors occur."
-            },
-            "snapshots": {
-              "title": "Devices",
-              "description": "Generic information about your devices.",
-              "header": "Device analytics",
-              "info": "Anonymously share data about your devices to help build the Open Home Foundation’s device database. This free, open source resource helps users find useful information about smart home devices. Only device-specific details (like model or manufacturer) are shared — never personally identifying information (like the names you assign).",
-              "learn_more": "Learn more about the device database and how we process your data",
-              "alert": {
-                "title": "Important",
-                "content": "Only enable this option if you understand that your device information will be shared."
-              }
             }
           },
           "need_base_enabled": "You need to enable basic analytics for this option to be available",
-          "learn_more": "Learn how we process your data",
+          "learn_more": "How we process your data",
           "intro": "Share anonymized information from your installation to help make Home Assistant better and help us convince manufacturers to add local control and privacy-focused features.",
           "download_device_info": "Preview device analytics"
         },

test/common/color/colors.test.ts

@@ -2,34 +2,63 @@ import { describe, test, expect } from "vitest";
 import {
   getColorByIndex,
   getGraphColorByIndex,
-  COLORS,
+  COLORS_COUNT,
 } from "../../../src/common/color/colors";
 import { theme2hex } from "../../../src/common/color/convert-color";
 
 describe("getColorByIndex", () => {
-  test("return the correct color for a given index", () => {
-    expect(getColorByIndex(0)).toBe(COLORS[0]);
-    expect(getColorByIndex(10)).toBe(COLORS[10]);
+  test("return the correct color from CSS variable", () => {
+    const style = {
+      getPropertyValue: (prop) => {
+        if (prop === "--color-1") return "#4269d0";
+        if (prop === "--color-11") return "#c99000";
+        return "";
+      },
+    } as CSSStyleDeclaration;
+    expect(getColorByIndex(0, style)).toBe(theme2hex("#4269d0"));
+    expect(getColorByIndex(10, style)).toBe(theme2hex("#c99000"));
   });
 
-  test("wrap around if the index is greater than the length of COLORS", () => {
-    expect(getColorByIndex(COLORS.length)).toBe(COLORS[0]);
-    expect(getColorByIndex(COLORS.length + 4)).toBe(COLORS[4]);
+  test("wrap around if the index is greater than the total count", () => {
+    const style = {
+      getPropertyValue: (prop) => {
+        if (prop === "--color-1") return "#4269d0";
+        if (prop === "--color-5") return "#a463f2";
+        return "";
+      },
+    } as CSSStyleDeclaration;
+    // Index 54 should wrap to color 1
+    expect(getColorByIndex(COLORS_COUNT, style)).toBe(theme2hex("#4269d0"));
+    // Index 58 should wrap to color 5
+    expect(getColorByIndex(COLORS_COUNT + 4, style)).toBe(theme2hex("#a463f2"));
   });
 });
 
 describe("getGraphColorByIndex", () => {
-  test("return the correct theme color if it exists", () => {
+  test("return color from --graph-color variable when it exists", () => {
     const style = {
       getPropertyValue: (prop) => (prop === "--graph-color-1" ? "#123456" : ""),
     } as CSSStyleDeclaration;
     expect(getGraphColorByIndex(0, style)).toBe(theme2hex("#123456"));
   });
 
-  test("return the default color if the theme color does not exist", () => {
+  test("fallback to --color variable when --graph-color does not exist", () => {
     const style = {
-      getPropertyValue: () => "",
-    } as unknown as CSSStyleDeclaration;
-    expect(getGraphColorByIndex(0, style)).toBe(theme2hex(COLORS[0]));
+      getPropertyValue: (prop) => (prop === "--color-5" ? "#abcdef" : ""),
+    } as CSSStyleDeclaration;
+    // Index 4 should try --graph-color-5, then fallback to --color-5
+    expect(getGraphColorByIndex(4, style)).toBe(theme2hex("#abcdef"));
+  });
+
+  test("prefer --graph-color over --color when both exist", () => {
+    const style = {
+      getPropertyValue: (prop) => {
+        if (prop === "--graph-color-1") return "#111111";
+        if (prop === "--color-1") return "#222222";
+        return "";
+      },
+    } as CSSStyleDeclaration;
+    // Should prefer --graph-color-1
+    expect(getGraphColorByIndex(0, style)).toBe(theme2hex("#111111"));
   });
 });

yarn.lock

@@ -9332,7 +9332,7 @@ __metadata:
     gulp-rename: "npm:2.1.0"
     gulp-zopfli-green: "npm:6.0.2"
     hls.js: "npm:1.6.14"
-    home-assistant-js-websocket: "npm:9.6.0"
+    home-assistant-js-websocket: "npm:9.5.0"
     html-minifier-terser: "npm:7.2.0"
     husky: "npm:9.1.7"
     idb-keyval: "npm:6.2.2"
@@ -9393,10 +9393,10 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"home-assistant-js-websocket@npm:9.6.0":
-  version: 9.6.0
-  resolution: "home-assistant-js-websocket@npm:9.6.0"
-  checksum: 10/0eded7864632b5e19e92289ffac0e24308b1e8f425e292ae87ed21450852f7705db521e202614b1d5bbdb7948633143dce2524ed548db0c38486b40ed1ffa474
+"home-assistant-js-websocket@npm:9.5.0":
+  version: 9.5.0
+  resolution: "home-assistant-js-websocket@npm:9.5.0"
+  checksum: 10/42f991b3b85aa61be28984f099a001ac083fb3da54b2777283d0c97976c564a303d8d4ba467e1b8e29cbc33151cd6eef64c1a7d3392d62bbb9cbb27aa7ca9942
   languageName: node
   linkType: hard