Bumped version to 20251105.0

add automation element dialog Device always on top

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
+        uses: github/codeql-action/init@4e94bd11f71e507f7f87df81788dff88d1dacbfb # v4.31.0
         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@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
+        uses: github/codeql-action/autobuild@4e94bd11f71e507f7f87df81788dff88d1dacbfb # v4.31.0
 
       # ℹ️ 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@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
+        uses: github/codeql-action/analyze@4e94bd11f71e507f7f87df81788dff88d1dacbfb # v4.31.0

.gitignore

@@ -5,7 +5,6 @@
 build/
 dist/
 /hass_frontend/
-/logs/dist/
 /translations/
 
 # yarn

build-scripts/bundle.cjs

@@ -18,16 +18,16 @@ module.exports.sourceMapURL = () => {
 module.exports.ignorePackages = () => [];
 
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ isHassioBuild, isLandingPageBuild }) =>
+module.exports.emptyPackages = ({ isHassioBuild }) =>
   [
     require.resolve("@vaadin/vaadin-material-styles/typography.js"),
     require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
     // Icons in supervisor conflict with icons in HA so we don't load.
-    (isHassioBuild || isLandingPageBuild) &&
+    isHassioBuild &&
       require.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon.ts")
       ),
-    (isHassioBuild || isLandingPageBuild) &&
+    isHassioBuild &&
       require.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon-picker.ts")
       ),
@@ -327,20 +327,6 @@ module.exports.config = {
     };
   },
 
-  logs({ isProdBuild, latestBuild, isStatsBuild }) {
-    return {
-      name: "logs" + nameSuffix(latestBuild),
-      entry: {
-        entrypoint: path.resolve(paths.logs_dir, "src/entrypoint.ts"),
-      },
-      outputPath: outputPath(paths.logs_output_root, latestBuild),
-      publicPath: publicPath(latestBuild),
-      isProdBuild,
-      latestBuild,
-      isStatsBuild,
-    };
-  },
-
   landingPage({ isProdBuild, latestBuild }) {
     return {
       name: "landing-page" + nameSuffix(latestBuild),
@@ -351,7 +337,6 @@ module.exports.config = {
       publicPath: publicPath(latestBuild),
       isProdBuild,
       latestBuild,
-      isLandingPageBuild: true,
     };
   },
 };

build-scripts/gulp/clean.js

@@ -39,13 +39,6 @@ gulp.task(
   )
 );
 
-gulp.task(
-  "clean-logs",
-  gulp.parallel("clean-translations", async () =>
-    deleteSync([paths.logs_output_root, paths.build_dir])
-  )
-);
-
 gulp.task(
   "clean-landing-page",
   gulp.parallel("clean-translations", async () =>

build-scripts/gulp/entry-html.js

@@ -245,24 +245,6 @@ gulp.task(
   )
 );
 
-const LOGS_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
-
-gulp.task(
-  "gen-pages-logs-dev",
-  genPagesDevTask(LOGS_PAGE_ENTRIES, paths.logs_dir, paths.logs_output_root)
-);
-
-gulp.task(
-  "gen-pages-logs-prod",
-  genPagesProdTask(
-    LOGS_PAGE_ENTRIES,
-    paths.logs_dir,
-    paths.logs_output_root,
-    paths.logs_output_latest,
-    paths.logs_output_es5
-  )
-);
-
 const LANDING_PAGE_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
 
 gulp.task(

build-scripts/gulp/gather-static.js

@@ -202,16 +202,6 @@ gulp.task("copy-static-gallery", async () => {
   copyMdiIcons(paths.gallery_output_static);
 });
 
-gulp.task("copy-static-logs", async () => {
-  // Copy app static files
-  fs.copySync(polyPath("public/static"), paths.logs_output_static);
-
-  copyFonts(paths.logs_output_static);
-  copyTranslations(paths.logs_output_static);
-  copyLocaleData(paths.logs_output_static);
-  copyMdiIcons(paths.logs_output_static);
-});
-
 gulp.task("copy-static-landing-page", async () => {
   // Copy landing-page static files
   fs.copySync(

build-scripts/gulp/index.mjs

@@ -7,7 +7,6 @@ import "./download-translations.js";
 import "./entry-html.js";
 import "./fetch-nightly-translations.js";
 import "./gallery.js";
-import "./logs.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
 import "./hassio.js";

build-scripts/gulp/logs.js

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

build-scripts/gulp/rspack.js

@@ -15,7 +15,6 @@ import {
   createGalleryConfig,
   createHassioConfig,
   createLandingPageConfig,
-  createLogsConfig,
 } from "../rspack.cjs";
 
 const bothBuilds = (createConfigFunc, params) => [
@@ -205,25 +204,6 @@ gulp.task("rspack-prod-gallery", () =>
   )
 );
 
-gulp.task("rspack-dev-server-logs", () =>
-  runDevServer({
-    compiler: rspack(
-      createLogsConfig({ isProdBuild: false, latestBuild: true })
-    ),
-    contentBase: paths.logs_output_root,
-    port: 5647,
-  })
-);
-
-gulp.task("rspack-prod-logs", () =>
-  prodBuild(
-    bothBuilds(createLogsConfig, {
-      isProdBuild: true,
-      isStatsBuild: env.isStatsBuild(),
-    })
-  )
-);
-
 gulp.task("rspack-watch-landing-page", () => {
   // This command will run forever because we don't close compiler
   rspack(

build-scripts/paths.cjs

@@ -59,11 +59,5 @@ module.exports = {
   hassio_output_es5: path.resolve(__dirname, "../hassio/build/frontend_es5"),
   hassio_publicPath: "/api/hassio/app",
 
-  logs_dir: path.resolve(__dirname, "../logs"),
-  logs_output_root: path.resolve(__dirname, "../logs/dist"),
-  logs_output_static: path.resolve(__dirname, "../logs/dist/static"),
-  logs_output_latest: path.resolve(__dirname, "../logs/dist/frontend_latest"),
-  logs_output_es5: path.resolve(__dirname, "../logs/dist/frontend_es5"),
-
   translations_src: path.resolve(__dirname, "../src/translations"),
 };

build-scripts/rspack.cjs

@@ -41,7 +41,6 @@ const createRspackConfig = ({
   isStatsBuild,
   isTestBuild,
   isHassioBuild,
-  isLandingPageBuild,
   dontHash,
 }) => {
   if (!dontHash) {
@@ -169,9 +168,7 @@ const createRspackConfig = ({
         },
       }),
       new rspack.NormalModuleReplacementPlugin(
-        new RegExp(
-          bundle.emptyPackages({ isHassioBuild, isLandingPageBuild }).join("|")
-        ),
+        new RegExp(bundle.emptyPackages({ isHassioBuild }).join("|")),
         path.resolve(paths.root_dir, "src/util/empty.js")
       ),
       !isProdBuild && new LogStartCompilePlugin(),
@@ -302,11 +299,6 @@ const createHassioConfig = ({
 const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
 
-const createLogsConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
-  createRspackConfig(
-    bundle.config.logs({ isProdBuild, latestBuild, isStatsBuild })
-  );
-
 const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));
 
@@ -316,7 +308,6 @@ module.exports = {
   createCastConfig,
   createHassioConfig,
   createGalleryConfig,
-  createLogsConfig,
   createRspackConfig,
   createLandingPageConfig,
 };

logs/.dockerignore

@@ -1,9 +0,0 @@
-dist/
-src/
-node_modules/
-*.md
-.git/
-.gitignore
-docker-compose.yaml
-backend/ha-logs-proxy
-backend/README.md

logs/Dockerfile

@@ -1,47 +0,0 @@
-ARG BUILD_FROM
-FROM $BUILD_FROM AS base
-
-# Install dependencies
-RUN apk add --no-cache \
-    bash \
-    jq \
-    curl \
-    go
-
-# Install Home Assistant CLI
-ARG BUILD_ARCH
-ARG CLI_VERSION
-RUN curl -Lso /usr/bin/ha \
-    "https://github.com/home-assistant/cli/releases/download/${CLI_VERSION}/ha_${BUILD_ARCH}" \
-    && chmod a+x /usr/bin/ha
-
-# Build Go backend
-WORKDIR /app
-COPY backend/go.mod backend/go.sum* ./
-RUN go mod download || true
-
-COPY backend/*.go ./
-RUN CGO_ENABLED=0 go build -o ha-logs-proxy .
-
-# Final stage
-FROM $BUILD_FROM
-
-# Install runtime dependencies
-RUN apk add --no-cache \
-    bash \
-    jq \
-    curl
-
-# Copy HA CLI from base
-COPY --from=base /usr/bin/ha /usr/bin/ha
-
-# Copy Go backend
-COPY --from=base /app/ha-logs-proxy /usr/bin/ha-logs-proxy
-
-WORKDIR /root
-
-# Expose port for backend (5642 = LOGB)
-EXPOSE 5642
-
-# Default command
-CMD ["/usr/bin/ha-logs-proxy"]

logs/README.md

@@ -1,113 +0,0 @@
-# Home Assistant CLI Docker Container
-
-A simple multi-architecture Docker container with the Home Assistant CLI installed.
-
-## Development Usage
-
-The CLI container is integrated into the `script/develop-logs` workflow. Both flags are required:
-
-```bash
-# Start dev server with CLI container (requires remote_api add-on)
-script/develop-logs -c http://192.168.1.2 -t your_token_here
-```
-
-When started with credentials, the container runs a Go backend that proxies HA CLI logs commands. The backend API is available at `http://localhost:5642`.
-
-**Frontend Features:**
-- Dropdown menu to select log provider (core, supervisor, host, audio, dns, multicast)
-- Follow mode with WebSocket streaming (`ha core logs --follow`)
-- Manual refresh to fetch latest logs
-- Download logs as text file
-- Line wrapping toggle
-- Auto-scroll to bottom when following
-- Error display with retry
-
-**API Endpoints:**
-
-```bash
-# List all endpoints
-curl http://localhost:5642/api/logs
-
-# Get static logs
-curl http://localhost:5642/api/logs/core
-curl http://localhost:5642/api/logs/supervisor
-
-# Health check
-curl http://localhost:5642/health
-
-# WebSocket streaming (requires websocat or browser)
-websocat ws://localhost:5642/api/logs/core/follow
-```
-
-You can also execute HA CLI commands directly:
-
-```bash
-docker exec -it ha-cli-dev ha info
-docker exec -it ha-cli-dev ha supervisor info
-```
-
-Stop everything with Ctrl+C (both the dev server and backend will stop automatically).
-
-### Getting API Token
-
-1. Install the [remote_api add-on](https://github.com/home-assistant/addons/tree/master/remote_api) in Home Assistant
-2. Check the add-on logs for the generated token
-3. Use the token with the `-t` flag
-
-## Build
-
-### Local Build (Single Architecture)
-
-```bash
-docker build \
-  --build-arg BUILD_FROM=alpine:3.22 \
-  --build-arg BUILD_ARCH=amd64 \
-  --build-arg CLI_VERSION=4.42.0 \
-  -t ha-cli:local \
-  .
-```
-
-### Multi-Architecture Build
-
-The `build.yaml` configuration is designed for use with Home Assistant's build system. For local multi-arch builds, use Docker Buildx:
-
-```bash
-docker buildx build \
-  --platform linux/amd64,linux/arm64,linux/arm/v7 \
-  --build-arg BUILD_FROM=alpine:3.22 \
-  --build-arg CLI_VERSION=4.42.0 \
-  -t ha-cli:latest \
-  .
-```
-
-## Usage
-
-### Run CLI Commands
-
-```bash
-docker run --rm ha-cli:local ha help
-docker run --rm ha-cli:local ha supervisor info
-```
-
-### Interactive Shell
-
-```bash
-docker run -it --rm ha-cli:local
-# Then run: ha <command>
-```
-
-### With Docker Compose
-
-```bash
-docker compose run --rm ha-cli ha help
-```
-
-## Update CLI Version
-
-Edit the `CLI_VERSION` in `build.yaml` or pass it as a build argument:
-
-```bash
-docker build --build-arg CLI_VERSION=4.43.0 ...
-```
-
-Check for latest versions at: https://github.com/home-assistant/cli/releases

logs/backend/.gitignore

@@ -1 +0,0 @@
-ha-logs-proxy

logs/backend/README.md

@@ -1,108 +0,0 @@
-# HA Logs Proxy Backend
-
-A Go backend that proxies Home Assistant CLI logs commands through a secure HTTP API.
-
-## Features
-
-- Only allows `logs` commands (security-restricted)
-- GET endpoints for static logs
-- WebSocket endpoints for streaming logs (follow mode)
-- CORS enabled for frontend integration
-- Simple JSON API
-
-## API Endpoints
-
-### GET /api/logs
-
-List all available endpoints.
-
-### GET /api/logs/core
-
-Get Home Assistant core logs.
-
-### GET /api/logs/supervisor
-
-Get Supervisor logs.
-
-### GET /api/logs/host
-
-Get host system logs.
-
-### GET /api/logs/audio
-
-Get audio logs.
-
-### GET /api/logs/dns
-
-Get DNS logs.
-
-### GET /api/logs/multicast
-
-Get multicast logs.
-
-### GET /health
-
-Health check endpoint.
-
-**Response format (all log endpoints):**
-
-```json
-{
-  "output": "log content here...",
-  "error": "error message if any"
-}
-```
-
-### WS /api/logs/*/follow
-
-WebSocket endpoints for streaming logs in real-time.
-
-Available endpoints:
-- `WS /api/logs/core/follow` - Stream core logs
-- `WS /api/logs/supervisor/follow` - Stream supervisor logs
-- `WS /api/logs/host/follow` - Stream host logs
-- `WS /api/logs/audio/follow` - Stream audio logs
-- `WS /api/logs/dns/follow` - Stream DNS logs
-- `WS /api/logs/multicast/follow` - Stream multicast logs
-
-Each WebSocket message contains a single log line as plain text. The connection streams output from `ha {component} logs --follow` command.
-
-## Running Locally
-
-```bash
-cd backend
-go run main.go
-```
-
-The server starts on port 5642 (LOGB) by default. Override with `PORT` environment variable:
-
-```bash
-PORT=3000 go run main.go
-```
-
-## Building
-
-```bash
-go build -o ha-logs-proxy
-./ha-logs-proxy
-```
-
-## Testing
-
-```bash
-# List endpoints
-curl http://localhost:5642/api/logs
-
-# Get core logs
-curl http://localhost:5642/api/logs/core
-
-# Get supervisor logs
-curl http://localhost:5642/api/logs/supervisor
-
-# Health check
-curl http://localhost:5642/health
-```
-
-## Docker Integration
-
-The backend is designed to run in the same container as the HA CLI, sharing access to the `ha` command.

logs/backend/go.mod

@@ -1,5 +0,0 @@
-module github.com/home-assistant/frontend/logs/backend
-
-go 1.24
-
-require github.com/gorilla/websocket v1.5.3

logs/backend/go.sum

@@ -1,2 +0,0 @@
-github.com/gorilla/websocket v1.5.3 h1:saDtZ6Pbx/0u+bgYQ3q96pZgCzfhKXGPqt7kZ72aNNg=
-github.com/gorilla/websocket v1.5.3/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=

logs/backend/main.go

@@ -1,372 +0,0 @@
-package main
-
-import (
-	"bufio"
-	"encoding/json"
-	"log"
-	"net/http"
-	"os"
-	"os/exec"
-
-	"github.com/gorilla/websocket"
-)
-
-type LogsResponse struct {
-	Output string `json:"output"`
-	Error  string `json:"error,omitempty"`
-}
-
-var upgrader = websocket.Upgrader{
-	ReadBufferSize:  1024,
-	WriteBufferSize: 1024,
-	CheckOrigin: func(r *http.Request) bool {
-		return true // Allow all origins (CORS)
-	},
-}
-
-func executeHACommand(args []string) (string, error) {
-	cmd := exec.Command("ha", args...)
-	output, err := cmd.CombinedOutput()
-	return string(output), err
-}
-
-func streamHACommandToWS(conn *websocket.Conn, args []string) error {
-	cmd := exec.Command("ha", args...)
-
-	// Get stdout pipe
-	stdout, err := cmd.StdoutPipe()
-	if err != nil {
-		return err
-	}
-
-	// Start command
-	if err := cmd.Start(); err != nil {
-		return err
-	}
-
-	// Read and send output line by line
-	scanner := bufio.NewScanner(stdout)
-	for scanner.Scan() {
-		line := scanner.Text()
-		if err := conn.WriteMessage(websocket.TextMessage, []byte(line)); err != nil {
-			cmd.Process.Kill()
-			return err
-		}
-	}
-
-	// Wait for command to finish
-	if err := cmd.Wait(); err != nil {
-		return err
-	}
-
-	return scanner.Err()
-}
-
-func handleCoreLogs(w http.ResponseWriter, r *http.Request) {
-	if r.Method != http.MethodGet {
-		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
-		return
-	}
-
-	// Execute ha core logs command
-	output, err := executeHACommand([]string{"core", "logs"})
-
-	response := LogsResponse{
-		Output: output,
-	}
-
-	if err != nil {
-		response.Error = err.Error()
-	}
-
-	w.Header().Set("Content-Type", "application/json")
-	w.Header().Set("Access-Control-Allow-Origin", "*")
-	w.Header().Set("Access-Control-Allow-Methods", "GET")
-
-	if err := json.NewEncoder(w).Encode(response); err != nil {
-		log.Printf("Error encoding response: %v", err)
-	}
-}
-
-func handleSupervisorLogs(w http.ResponseWriter, r *http.Request) {
-	if r.Method != http.MethodGet {
-		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
-		return
-	}
-
-	output, err := executeHACommand([]string{"supervisor", "logs"})
-
-	response := LogsResponse{
-		Output: output,
-	}
-
-	if err != nil {
-		response.Error = err.Error()
-	}
-
-	w.Header().Set("Content-Type", "application/json")
-	w.Header().Set("Access-Control-Allow-Origin", "*")
-	w.Header().Set("Access-Control-Allow-Methods", "GET")
-
-	json.NewEncoder(w).Encode(response)
-}
-
-func handleHostLogs(w http.ResponseWriter, r *http.Request) {
-	if r.Method != http.MethodGet {
-		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
-		return
-	}
-
-	output, err := executeHACommand([]string{"host", "logs"})
-
-	response := LogsResponse{
-		Output: output,
-	}
-
-	if err != nil {
-		response.Error = err.Error()
-	}
-
-	w.Header().Set("Content-Type", "application/json")
-	w.Header().Set("Access-Control-Allow-Origin", "*")
-	w.Header().Set("Access-Control-Allow-Methods", "GET")
-
-	json.NewEncoder(w).Encode(response)
-}
-
-func handleAudioLogs(w http.ResponseWriter, r *http.Request) {
-	if r.Method != http.MethodGet {
-		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
-		return
-	}
-
-	output, err := executeHACommand([]string{"audio", "logs"})
-
-	response := LogsResponse{
-		Output: output,
-	}
-
-	if err != nil {
-		response.Error = err.Error()
-	}
-
-	w.Header().Set("Content-Type", "application/json")
-	w.Header().Set("Access-Control-Allow-Origin", "*")
-	w.Header().Set("Access-Control-Allow-Methods", "GET")
-
-	json.NewEncoder(w).Encode(response)
-}
-
-func handleDNSLogs(w http.ResponseWriter, r *http.Request) {
-	if r.Method != http.MethodGet {
-		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
-		return
-	}
-
-	output, err := executeHACommand([]string{"dns", "logs"})
-
-	response := LogsResponse{
-		Output: output,
-	}
-
-	if err != nil {
-		response.Error = err.Error()
-	}
-
-	w.Header().Set("Content-Type", "application/json")
-	w.Header().Set("Access-Control-Allow-Origin", "*")
-	w.Header().Set("Access-Control-Allow-Methods", "GET")
-
-	json.NewEncoder(w).Encode(response)
-}
-
-func handleMulticastLogs(w http.ResponseWriter, r *http.Request) {
-	if r.Method != http.MethodGet {
-		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
-		return
-	}
-
-	output, err := executeHACommand([]string{"multicast", "logs"})
-
-	response := LogsResponse{
-		Output: output,
-	}
-
-	if err != nil {
-		response.Error = err.Error()
-	}
-
-	w.Header().Set("Content-Type", "application/json")
-	w.Header().Set("Access-Control-Allow-Origin", "*")
-	w.Header().Set("Access-Control-Allow-Methods", "GET")
-
-	json.NewEncoder(w).Encode(response)
-}
-
-func handleCoreLogsFollow(w http.ResponseWriter, r *http.Request) {
-	conn, err := upgrader.Upgrade(w, r, nil)
-	if err != nil {
-		log.Printf("WebSocket upgrade failed: %v", err)
-		return
-	}
-	defer conn.Close()
-
-	log.Println("Client connected to core logs follow")
-
-	if err := streamHACommandToWS(conn, []string{"core", "logs", "--follow"}); err != nil {
-		log.Printf("Error streaming core logs: %v", err)
-	}
-
-	log.Println("Client disconnected from core logs follow")
-}
-
-func handleSupervisorLogsFollow(w http.ResponseWriter, r *http.Request) {
-	conn, err := upgrader.Upgrade(w, r, nil)
-	if err != nil {
-		log.Printf("WebSocket upgrade failed: %v", err)
-		return
-	}
-	defer conn.Close()
-
-	log.Println("Client connected to supervisor logs follow")
-
-	if err := streamHACommandToWS(conn, []string{"supervisor", "logs", "--follow"}); err != nil {
-		log.Printf("Error streaming supervisor logs: %v", err)
-	}
-
-	log.Println("Client disconnected from supervisor logs follow")
-}
-
-func handleHostLogsFollow(w http.ResponseWriter, r *http.Request) {
-	conn, err := upgrader.Upgrade(w, r, nil)
-	if err != nil {
-		log.Printf("WebSocket upgrade failed: %v", err)
-		return
-	}
-	defer conn.Close()
-
-	log.Println("Client connected to host logs follow")
-
-	if err := streamHACommandToWS(conn, []string{"host", "logs", "--follow"}); err != nil {
-		log.Printf("Error streaming host logs: %v", err)
-	}
-
-	log.Println("Client disconnected from host logs follow")
-}
-
-func handleAudioLogsFollow(w http.ResponseWriter, r *http.Request) {
-	conn, err := upgrader.Upgrade(w, r, nil)
-	if err != nil {
-		log.Printf("WebSocket upgrade failed: %v", err)
-		return
-	}
-	defer conn.Close()
-
-	log.Println("Client connected to audio logs follow")
-
-	if err := streamHACommandToWS(conn, []string{"audio", "logs", "--follow"}); err != nil {
-		log.Printf("Error streaming audio logs: %v", err)
-	}
-
-	log.Println("Client disconnected from audio logs follow")
-}
-
-func handleDNSLogsFollow(w http.ResponseWriter, r *http.Request) {
-	conn, err := upgrader.Upgrade(w, r, nil)
-	if err != nil {
-		log.Printf("WebSocket upgrade failed: %v", err)
-		return
-	}
-	defer conn.Close()
-
-	log.Println("Client connected to dns logs follow")
-
-	if err := streamHACommandToWS(conn, []string{"dns", "logs", "--follow"}); err != nil {
-		log.Printf("Error streaming dns logs: %v", err)
-	}
-
-	log.Println("Client disconnected from dns logs follow")
-}
-
-func handleMulticastLogsFollow(w http.ResponseWriter, r *http.Request) {
-	conn, err := upgrader.Upgrade(w, r, nil)
-	if err != nil {
-		log.Printf("WebSocket upgrade failed: %v", err)
-		return
-	}
-	defer conn.Close()
-
-	log.Println("Client connected to multicast logs follow")
-
-	if err := streamHACommandToWS(conn, []string{"multicast", "logs", "--follow"}); err != nil {
-		log.Printf("Error streaming multicast logs: %v", err)
-	}
-
-	log.Println("Client disconnected from multicast logs follow")
-}
-
-func listEndpoints(w http.ResponseWriter, r *http.Request) {
-	if r.Method != http.MethodGet {
-		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
-		return
-	}
-
-	endpoints := map[string]string{
-		"core":       "/api/logs/core",
-		"supervisor": "/api/logs/supervisor",
-		"host":       "/api/logs/host",
-		"audio":      "/api/logs/audio",
-		"dns":        "/api/logs/dns",
-		"multicast":  "/api/logs/multicast",
-		"health":     "/health",
-	}
-
-	w.Header().Set("Content-Type", "application/json")
-	w.Header().Set("Access-Control-Allow-Origin", "*")
-	json.NewEncoder(w).Encode(endpoints)
-}
-
-func main() {
-	port := os.Getenv("PORT")
-	if port == "" {
-		port = "5642"
-	}
-
-	// Register handlers
-	http.HandleFunc("/api/logs", listEndpoints)
-	http.HandleFunc("/api/logs/core", handleCoreLogs)
-	http.HandleFunc("/api/logs/supervisor", handleSupervisorLogs)
-	http.HandleFunc("/api/logs/host", handleHostLogs)
-	http.HandleFunc("/api/logs/audio", handleAudioLogs)
-	http.HandleFunc("/api/logs/dns", handleDNSLogs)
-	http.HandleFunc("/api/logs/multicast", handleMulticastLogs)
-
-	// WebSocket follow endpoints
-	http.HandleFunc("/api/logs/core/follow", handleCoreLogsFollow)
-	http.HandleFunc("/api/logs/supervisor/follow", handleSupervisorLogsFollow)
-	http.HandleFunc("/api/logs/host/follow", handleHostLogsFollow)
-	http.HandleFunc("/api/logs/audio/follow", handleAudioLogsFollow)
-	http.HandleFunc("/api/logs/dns/follow", handleDNSLogsFollow)
-	http.HandleFunc("/api/logs/multicast/follow", handleMulticastLogsFollow)
-
-	http.HandleFunc("/health", func(w http.ResponseWriter, r *http.Request) {
-		w.WriteHeader(http.StatusOK)
-		w.Write([]byte("OK"))
-	})
-
-	log.Printf("Starting HA Logs Proxy on port %s", port)
-	log.Printf("Available endpoints:")
-	log.Printf("  GET /api/logs - List all endpoints")
-	log.Printf("  GET /api/logs/core - Core logs")
-	log.Printf("  GET /api/logs/supervisor - Supervisor logs")
-	log.Printf("  GET /api/logs/host - Host logs")
-	log.Printf("  GET /api/logs/audio - Audio logs")
-	log.Printf("  GET /api/logs/dns - DNS logs")
-	log.Printf("  GET /api/logs/multicast - Multicast logs")
-	log.Printf("  WS  /api/logs/*/follow - Stream logs (WebSocket)")
-	log.Printf("  GET /health - Health check")
-
-	if err := http.ListenAndServe(":"+port, nil); err != nil {
-		log.Fatalf("Server failed to start: %v", err)
-	}
-}

logs/build.yaml

@@ -1,19 +0,0 @@
----
-image: ghcr.io/home-assistant/{arch}-hassio-cli
-build_from:
-  aarch64: ghcr.io/home-assistant/aarch64-base:3.22
-  armhf: ghcr.io/home-assistant/armhf-base:3.22
-  armv7: ghcr.io/home-assistant/armv7-base:3.22
-  amd64: ghcr.io/home-assistant/amd64-base:3.22
-  i386: ghcr.io/home-assistant/i386-base:3.22
-args:
-  CLI_VERSION: 4.42.0
-cosign:
-  enabled: true
-  repository_name: home-assistant/cli
-  repository_owner: home-assistant
-labels:
-  org.opencontainers.image.title: Home Assistant CLI
-  org.opencontainers.image.description: Home Assistant CLI for container environments
-  org.opencontainers.image.source: https://github.com/home-assistant/cli
-  org.opencontainers.image.licenses: Apache-2.0

logs/docker-compose.yaml

@@ -1,16 +0,0 @@
----
-services:
-  ha-cli:
-    build:
-      context: .
-      args:
-        BUILD_FROM: alpine:3.22
-        BUILD_ARCH: amd64
-        CLI_VERSION: 4.42.0
-    image: ha-cli:local
-    ports:
-      - "5642:5642"
-    environment:
-      - PORT=5642
-    stdin_open: true
-    tty: true

logs/src/auto-theme.ts

@@ -1,34 +0,0 @@
-import { darkSemanticColorStyles } from "../../src/resources/theme/color/semantic.globals";
-import { darkColorStyles } from "../../src/resources/theme/color/color.globals";
-
-const mql = matchMedia("(prefers-color-scheme: dark)");
-
-function applyTheme(dark: boolean) {
-  const el = document.documentElement;
-  if (dark) {
-    el.setAttribute("dark", "");
-  } else {
-    el.removeAttribute("dark");
-  }
-}
-
-// Add dark theme styles wrapped in media query
-// This runs after append-ha-style has loaded the base theme
-const styleElement = document.createElement("style");
-styleElement.id = "auto-theme-dark";
-styleElement.textContent = `
-  @media (prefers-color-scheme: dark) {
-    ${darkSemanticColorStyles.cssText}
-    ${darkColorStyles.cssText}
-  }
-`;
-// Append to head to ensure it comes after base styles
-document.head.appendChild(styleElement);
-
-// Apply theme on initial load
-applyTheme(mql.matches);
-
-// Listen for theme changes
-mql.addEventListener("change", (e) => {
-  applyTheme(e.matches);
-});

logs/src/entrypoint.ts

@@ -1,8 +0,0 @@
-import "./logs-app";
-
-// Load base styles first, then apply theme
-import("../../src/resources/append-ha-style").then(() => {
-  import("./auto-theme");
-});
-
-document.body.appendChild(document.createElement("logs-app"));

logs/src/html/index.html.template

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="theme-color" content="#03a9f4" />
-    <meta name="color-scheme" content="dark light" />
-    <title>Home Assistant Logs</title>
-    <% for (const entry of latestEntryJS) { %>
-      <script type="module" src="<%= entry %>"></script>
-    <% } %>
-    <style>
-      html {
-        background-color: var(--primary-background-color, #fafafa);
-        color: var(--primary-text-color, #212121);
-      }
-      @media (prefers-color-scheme: dark) {
-        html {
-          background-color: var(--primary-background-color, #111111);
-          color: var(--primary-text-color, #e1e1e1);
-        }
-      }
-      body {
-        font-family: Roboto, Noto, sans-serif;
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        font-weight: 400;
-        margin: 0;
-        padding: 0;
-      }
-    </style>
-  </head>
-  <body></body>
-</html>

logs/src/logs-app.ts

@@ -1,24 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { customElement } from "lit/decorators";
-import "./logs-viewer";
-
-@customElement("logs-app")
-class LogsApp extends LitElement {
-  render() {
-    return html`<logs-viewer></logs-viewer>`;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      min-height: 100vh;
-      background-color: var(--primary-background-color);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "logs-app": LogsApp;
-  }
-}

logs/src/logs-viewer.ts

@@ -1,538 +0,0 @@
-import {
-  mdiArrowCollapseDown,
-  mdiChevronDown,
-  mdiCircle,
-  mdiDownload,
-  mdiRefresh,
-  mdiWrap,
-  mdiWrapDisabled,
-} from "@mdi/js";
-import type { CSSResultGroup } from "lit";
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-// eslint-disable-next-line import/extensions
-import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
-import "../../src/components/ha-ansi-to-html";
-import type { HaAnsiToHtml } from "../../src/components/ha-ansi-to-html";
-import "../../src/components/ha-button";
-import "../../src/components/ha-button-menu";
-import "../../src/components/ha-card";
-import "../../src/components/ha-icon-button";
-import "../../src/components/ha-list-item";
-import "../../src/components/ha-spinner";
-import "../../src/components/ha-svg-icon";
-
-// Data types
-interface LogProvider {
-  key: string;
-  name: string;
-}
-
-@customElement("logs-viewer")
-export class LogsViewer extends LitElement {
-  @property({ type: Boolean }) public narrow = false;
-
-  @state() private _selectedLogProvider?: string;
-
-  @state() private _logProviders: LogProvider[] = [];
-
-  @state() private _loading = false;
-
-  @state() private _wrapLines = true;
-
-  @state() private _error?: string;
-
-  @state() private _newLogsIndicator?: boolean;
-
-  @query(".error-log") private _logElement?: HTMLElement;
-
-  @query("#scroll-top-marker") private _scrollTopMarkerElement?: HTMLElement;
-
-  @query("#scroll-bottom-marker")
-  private _scrollBottomMarkerElement?: HTMLElement;
-
-  @query("ha-ansi-to-html") private _ansiToHtmlElement?: HaAnsiToHtml;
-
-  @state() private _scrolledToBottomController =
-    new IntersectionController<boolean>(this, {
-      callback(this: IntersectionController<boolean>, entries) {
-        return entries[0].isIntersecting;
-      },
-    });
-
-  @state() private _scrolledToTopController =
-    new IntersectionController<boolean>(this, {});
-
-  private _ws: WebSocket | null = null;
-
-  private _apiUrl = `http://${window.location.hostname}:5642`;
-
-  private async _fetchLogs(): Promise<void> {
-    if (!this._selectedLogProvider) {
-      return;
-    }
-
-    this._loading = true;
-    this._error = undefined;
-
-    // Stop any existing websocket
-    this._stopFollowing();
-
-    // Clear existing logs
-    this._ansiToHtmlElement?.clear();
-
-    try {
-      // First, fetch the latest logs
-      const response = await fetch(
-        `${this._apiUrl}/api/logs/${this._selectedLogProvider}`
-      );
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-
-      const data = await response.json();
-      if (data.error) {
-        throw new Error(data.error);
-      }
-
-      const logText = data.output || "";
-
-      // Parse and display initial logs
-      if (logText.trim()) {
-        this._ansiToHtmlElement?.parseTextToColoredPre(logText);
-
-        // Add divider line
-        this._ansiToHtmlElement?.parseLineToColoredPre(
-          "--- Live logs start here ---"
-        );
-      }
-
-      this._loading = false;
-
-      // Scroll to bottom after loading
-      this._scrollToBottom();
-
-      // Start streaming
-      this._startFollowing();
-    } catch (err) {
-      this._error = `Error loading logs: ${err}`;
-      this._loading = false;
-      // eslint-disable-next-line
-      console.error("Error fetching logs:", err);
-    }
-  }
-
-  private async _fetchLogProviders(): Promise<void> {
-    try {
-      const response = await fetch(`${this._apiUrl}/api/logs`);
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-      const providers = await response.json();
-
-      // Define the order (matching backend registration order)
-      const order = ["core", "supervisor", "host", "audio", "dns", "multicast"];
-
-      // Convert object to array of providers, filter out health endpoint, and sort
-      this._logProviders = Object.entries(providers)
-        .filter(([key]) => key !== "health")
-        .map(([key]) => ({
-          key,
-          name: key.charAt(0).toUpperCase() + key.slice(1),
-        }))
-        .sort((a, b) => order.indexOf(a.key) - order.indexOf(b.key));
-
-      // Set default provider once loaded
-      if (this._logProviders.length > 0 && !this._selectedLogProvider) {
-        this._selectedLogProvider = this._logProviders[0].key;
-        await this._fetchLogs();
-      }
-    } catch (err) {
-      this._error = `Failed to load log providers: ${err}`;
-      // eslint-disable-next-line
-      console.error("Error fetching log providers:", err);
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this._fetchLogProviders();
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._stopFollowing();
-  }
-
-  protected firstUpdated() {
-    this._scrolledToBottomController.observe(this._scrollBottomMarkerElement!);
-    this._scrolledToTopController.observe(this._scrollTopMarkerElement!);
-  }
-
-  protected updated() {
-    if (this._newLogsIndicator && this._scrolledToBottomController.value) {
-      this._newLogsIndicator = false;
-    }
-  }
-
-  private _selectProvider(ev: Event) {
-    const target = ev.currentTarget as any;
-    this._selectedLogProvider = target.provider;
-    this._fetchLogs();
-  }
-
-  private _refresh() {
-    this._fetchLogs();
-  }
-
-  private _toggleLineWrap() {
-    this._wrapLines = !this._wrapLines;
-  }
-
-  private _scrollToBottom(): void {
-    if (this._logElement) {
-      this._newLogsIndicator = false;
-      this._logElement.scrollTo(0, this._logElement.scrollHeight);
-    }
-  }
-
-  private _startFollowing() {
-    if (!this._selectedLogProvider) {
-      return;
-    }
-
-    this._stopFollowing();
-    this._error = undefined;
-
-    const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const wsUrl = `${wsProtocol}//${window.location.hostname}:5642/api/logs/${this._selectedLogProvider}/follow`;
-
-    try {
-      this._ws = new WebSocket(wsUrl);
-
-      this._ws.onopen = () => {
-        // eslint-disable-next-line
-        console.log("WebSocket connected");
-      };
-
-      this._ws.onmessage = (event) => {
-        const scrolledToBottom = this._scrolledToBottomController.value;
-
-        // Add the new line to the display
-        this._ansiToHtmlElement?.parseLineToColoredPre(event.data);
-
-        // Auto-scroll if user is at bottom
-        if (scrolledToBottom && this._logElement) {
-          this._scrollToBottom();
-        } else {
-          this._newLogsIndicator = true;
-        }
-      };
-
-      this._ws.onerror = (error) => {
-        // eslint-disable-next-line
-        console.error("WebSocket error:", error);
-        this._error = "WebSocket connection error";
-      };
-
-      this._ws.onclose = () => {
-        // eslint-disable-next-line
-        console.log("WebSocket disconnected");
-      };
-    } catch (err) {
-      this._error = `Failed to start following logs: ${err}`;
-      // eslint-disable-next-line
-      console.error("Error starting WebSocket:", err);
-    }
-  }
-
-  private _stopFollowing() {
-    if (this._ws) {
-      this._ws.close();
-      this._ws = null;
-    }
-  }
-
-  private _downloadLogs() {
-    if (!this._selectedLogProvider || !this._ansiToHtmlElement) {
-      return;
-    }
-
-    // Get the text content from the logs
-    const logText =
-      this._ansiToHtmlElement.shadowRoot?.querySelector("pre")?.textContent ||
-      "";
-
-    if (!logText.trim()) {
-      return;
-    }
-
-    // Create blob from log text
-    const blob = new Blob([logText], { type: "text/plain" });
-    const url = URL.createObjectURL(blob);
-
-    // Create download link and trigger it
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `${this._selectedLogProvider}-logs-${Date.now()}.txt`;
-    document.body.appendChild(a);
-    a.click();
-
-    // Cleanup
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  }
-
-  render() {
-    const currentProvider = this._logProviders.find(
-      (p) => p.key === this._selectedLogProvider
-    );
-
-    return html`
-      <div class="container">
-        <div class="toolbar">
-          <ha-button-menu>
-            <ha-button slot="trigger" appearance="filled">
-              <ha-svg-icon slot="end" .path=${mdiChevronDown}></ha-svg-icon>
-              ${currentProvider?.name || "Select Provider"}
-            </ha-button>
-            ${this._logProviders.map(
-              (provider) => html`
-                <ha-list-item
-                  ?selected=${provider.key === this._selectedLogProvider}
-                  .provider=${provider.key}
-                  @click=${this._selectProvider}
-                >
-                  ${provider.name}
-                </ha-list-item>
-              `
-            )}
-          </ha-button-menu>
-        </div>
-
-        <div class="content">
-          <div class="error-log-intro">
-            <ha-card outlined>
-              <div class="header">
-                <h1 class="card-header">${currentProvider?.name || "Logs"}</h1>
-                <div class="action-buttons">
-                  <ha-icon-button
-                    .path=${mdiDownload}
-                    @click=${this._downloadLogs}
-                    .label=${"Download logs"}
-                    .disabled=${!this._ansiToHtmlElement}
-                  ></ha-icon-button>
-                  <ha-icon-button
-                    .path=${this._wrapLines ? mdiWrapDisabled : mdiWrap}
-                    @click=${this._toggleLineWrap}
-                    .label=${this._wrapLines ? "Full width" : "Wrap lines"}
-                  ></ha-icon-button>
-                  <ha-icon-button
-                    .path=${mdiRefresh}
-                    @click=${this._refresh}
-                    .label=${"Refresh"}
-                    .disabled=${!this._selectedLogProvider}
-                  ></ha-icon-button>
-                </div>
-              </div>
-              <div class="card-content error-log">
-                <div id="scroll-top-marker"></div>
-                ${this._loading
-                  ? html`<div>Loading logs...</div>`
-                  : this._error
-                    ? html`<div class="error">${this._error}</div>`
-                    : nothing}
-                <ha-ansi-to-html
-                  ?wrap-disabled=${!this._wrapLines}
-                ></ha-ansi-to-html>
-                <div id="scroll-bottom-marker"></div>
-              </div>
-              <ha-button
-                class="new-logs-indicator ${classMap({
-                  visible:
-                    (this._newLogsIndicator &&
-                      !this._scrolledToBottomController.value) ||
-                    false,
-                })}"
-                size="small"
-                appearance="filled"
-                @click=${this._scrollToBottom}
-              >
-                <ha-svg-icon
-                  .path=${mdiArrowCollapseDown}
-                  slot="start"
-                ></ha-svg-icon>
-                Scroll down
-                <ha-svg-icon
-                  .path=${mdiArrowCollapseDown}
-                  slot="end"
-                ></ha-svg-icon>
-              </ha-button>
-              ${this._ws && !this._error
-                ? html`<div class="live-indicator">
-                    <ha-svg-icon .path=${mdiCircle}></ha-svg-icon>
-                    Live
-                  </div>`
-                : nothing}
-            </ha-card>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  static styles: CSSResultGroup = css`
-    :host {
-      display: block;
-      direction: var(--direction);
-    }
-
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-    }
-
-    .toolbar {
-      padding: var(--ha-space-2) var(--ha-space-4);
-      display: flex;
-      justify-content: flex-end;
-      gap: var(--ha-space-2);
-    }
-
-    .content {
-      direction: ltr;
-    }
-
-    .error-log-intro {
-      text-align: center;
-      margin: 0 var(--ha-space-4);
-    }
-
-    ha-card {
-      padding-top: var(--ha-space-2);
-      position: relative;
-    }
-
-    .header {
-      display: flex;
-      justify-content: space-between;
-      padding: 0 var(--ha-space-4);
-    }
-
-    .action-buttons {
-      display: flex;
-      align-items: center;
-      height: 100%;
-    }
-
-    .card-header {
-      color: var(--ha-card-header-color, var(--primary-text-color));
-      font-family: var(--ha-card-header-font-family, inherit);
-      font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
-      letter-spacing: -0.012em;
-      line-height: var(--ha-line-height-expanded);
-      display: block;
-      margin-block-start: 0px;
-      font-weight: var(--ha-font-weight-normal);
-      white-space: nowrap;
-      max-width: calc(100% - 150px);
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .error-log {
-      position: relative;
-      font-family: var(--ha-font-family-code);
-      clear: both;
-      text-align: start;
-      padding-top: var(--ha-space-4);
-      padding-bottom: var(--ha-space-4);
-      overflow-y: scroll;
-      min-height: var(--error-log-card-height, calc(100vh - 244px));
-      max-height: var(--error-log-card-height, calc(100vh - 244px));
-      border-top: 1px solid var(--divider-color);
-      direction: ltr;
-    }
-
-    .error-log > div {
-      padding: 0 var(--ha-space-4);
-      overflow: auto;
-    }
-
-    .error {
-      color: var(--error-color);
-      padding: var(--ha-space-4);
-    }
-
-    .new-logs-indicator {
-      overflow: hidden;
-      position: absolute;
-      bottom: var(--ha-space-1);
-      left: var(--ha-space-1);
-      height: 0;
-      transition: height 0.4s ease-out;
-    }
-
-    .new-logs-indicator.visible {
-      height: 32px;
-    }
-
-    @keyframes breathe {
-      from {
-        opacity: 0.8;
-      }
-      to {
-        opacity: 0;
-      }
-    }
-
-    .live-indicator {
-      position: absolute;
-      bottom: 0;
-      inset-inline-end: var(--ha-space-4);
-      border-top-right-radius: var(--ha-space-2);
-      border-top-left-radius: var(--ha-space-2);
-      background-color: var(--primary-color);
-      color: var(--text-primary-color);
-      padding: var(--ha-space-1) var(--ha-space-2);
-      opacity: 0.8;
-    }
-
-    .live-indicator ha-svg-icon {
-      animation: breathe 1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
-      height: 14px;
-      width: 14px;
-    }
-
-    @media all and (max-width: 870px) {
-      .error-log {
-        min-height: var(--error-log-card-height, calc(100vh - 190px));
-        max-height: var(--error-log-card-height, calc(100vh - 190px));
-      }
-
-      ha-button-menu {
-        max-width: 50%;
-      }
-
-      ha-button {
-        max-width: 100%;
-      }
-
-      ha-button::part(label) {
-        overflow: hidden;
-        white-space: nowrap;
-      }
-    }
-
-    ha-list-item[selected] {
-      color: var(--primary-color);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "logs-viewer": LogsViewer;
-  }
-}

package.json

@@ -52,7 +52,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0-beta.6.ha.7",
+    "@home-assistant/webawesome": "3.0.0-beta.6.ha.6",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",
@@ -81,7 +81,7 @@
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@material/web": "2.4.1",
+    "@material/web": "2.4.0",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@replit/codemirror-indentation-markers": "6.5.3",
@@ -89,8 +89,8 @@
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.9.4",
-    "@vaadin/vaadin-themable-mixin": "24.9.4",
+    "@vaadin/combo-box": "24.9.2",
+    "@vaadin/vaadin-themable-mixin": "24.9.2",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -111,7 +111,7 @@
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.14",
+    "hls.js": "1.6.13",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.18",
@@ -152,13 +152,13 @@
     "@babel/helper-define-polyfill-provider": "0.6.5",
     "@babel/plugin-transform-runtime": "7.28.5",
     "@babel/preset-env": "7.28.5",
-    "@bundle-stats/plugin-webpack-filter": "4.21.6",
+    "@bundle-stats/plugin-webpack-filter": "4.21.5",
     "@lokalise/node-api": "15.3.1",
-    "@octokit/auth-oauth-device": "8.0.3",
-    "@octokit/plugin-retry": "8.0.3",
-    "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.3.7",
-    "@rspack/core": "1.6.0",
+    "@octokit/auth-oauth-device": "8.0.2",
+    "@octokit/plugin-retry": "8.0.2",
+    "@octokit/rest": "22.0.0",
+    "@rsdoctor/rspack-plugin": "1.3.4",
+    "@rspack/core": "1.5.8",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.22",
@@ -178,12 +178,12 @@
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.0.6",
+    "@vitest/coverage-v8": "4.0.3",
     "babel-loader": "10.0.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.1",
-    "eslint": "9.39.1",
+    "eslint": "9.38.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.10",
@@ -201,7 +201,7 @@
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "27.1.0",
+    "jsdom": "27.0.1",
     "jszip": "3.10.1",
     "lint-staged": "16.2.6",
     "lit-analyzer": "2.0.3",
@@ -213,13 +213,13 @@
     "rspack-manifest-plugin": "5.1.0",
     "serve": "14.2.5",
     "sinon": "21.0.0",
-    "tar": "7.5.2",
+    "tar": "7.5.1",
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.46.3",
+    "typescript-eslint": "8.46.2",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "4.0.6",
+    "vitest": "4.0.3",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"
@@ -231,7 +231,7 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.1",
     "@fullcalendar/daygrid": "6.1.19",
-    "globals": "16.5.0",
+    "globals": "16.4.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },

pyproject.toml

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

script/develop-logs

@@ -1,96 +0,0 @@
-#!/bin/sh
-# Run the logs frontend development server
-
-# Stop on errors
-set -e
-
-cd "$(dirname "$0")/.."
-
-# Parse command line arguments
-SUPERVISOR_ENDPOINT=""
-SUPERVISOR_API_TOKEN=""
-
-while getopts "c:t:h" opt; do
-  case $opt in
-    c)
-      SUPERVISOR_ENDPOINT="$OPTARG"
-      ;;
-    t)
-      SUPERVISOR_API_TOKEN="$OPTARG"
-      ;;
-    h)
-      echo "Usage: $0 -c SUPERVISOR_ENDPOINT -t SUPERVISOR_API_TOKEN"
-      echo ""
-      echo "Options:"
-      echo "  -c  SUPERVISOR_ENDPOINT (e.g., http://192.168.1.2) [required]"
-      echo "  -t  SUPERVISOR_API_TOKEN (from remote_api add-on) [required]"
-      echo "  -h  Show this help message"
-      echo ""
-      echo "Example:"
-      echo "  $0 -c http://192.168.1.2 -t your_token_here"
-      exit 0
-      ;;
-    \?)
-      echo "Invalid option: -$OPTARG" >&2
-      echo "Use -h for help"
-      exit 1
-      ;;
-  esac
-done
-
-# Validate that both -c and -t are provided
-if [ -z "$SUPERVISOR_ENDPOINT" ] || [ -z "$SUPERVISOR_API_TOKEN" ]; then
-  echo "Error: Both -c and -t are required" >&2
-  echo "Use -h for help"
-  exit 1
-fi
-
-# Cleanup function
-cleanup() {
-  echo ""
-  echo "Shutting down..."
-  echo "Stopping HA CLI container..."
-  docker stop ha-cli-dev 2>/dev/null || true
-  exit 0
-}
-
-# Set up trap to cleanup on exit
-trap cleanup INT TERM EXIT
-
-# Run HA CLI container
-echo "Starting HA CLI container..."
-
-# Build the container if needed
-if ! docker images | grep -q "ha-cli:local"; then
-  echo "Building HA CLI container..."
-  (cd logs && docker compose build)
-fi
-
-# Clean up any existing container
-docker stop ha-cli-dev 2>/dev/null || true
-
-# Run the container in background (not detached, so it shares stdout)
-docker run \
-  --name ha-cli-dev \
-  --rm \
-  -p 5642:5642 \
-  -e SUPERVISOR_ENDPOINT="$SUPERVISOR_ENDPOINT" \
-  -e SUPERVISOR_API_TOKEN="$SUPERVISOR_API_TOKEN" \
-  -e PORT=5642 \
-  ha-cli:local &
-
-# Store the docker process ID
-DOCKER_PID=$!
-
-# Wait a moment for container to start
-sleep 2
-echo ""
-echo "HA Logs Backend API: http://localhost:5642"
-echo "  GET  /api/logs - List endpoints"
-echo "  GET  /api/logs/core - Core logs"
-echo "  GET  /api/logs/supervisor - Supervisor logs"
-echo "  GET  /health - Health check"
-echo ""
-
-# Run gulp (this will block until Ctrl+C)
-./node_modules/.bin/gulp develop-logs

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

@@ -35,6 +35,7 @@ export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
 const LEGEND_OVERFLOW_LIMIT = 10;
 const LEGEND_OVERFLOW_LIMIT_MOBILE = 6;
 const DOUBLE_TAP_TIME = 300;
+const RESIZE_ANIMATION_DURATION = 250;
 
 export type CustomLegendOption = ECOption["legend"] & {
   type: "custom";
@@ -90,8 +91,6 @@ export class HaChartBase extends LitElement {
 
   private _shouldResizeChart = false;
 
-  private _resizeAnimationDuration?: number;
-
   // @ts-ignore
   private _resizeController = new ResizeController(this, {
     callback: () => {
@@ -215,7 +214,6 @@ export class HaChartBase extends LitElement {
       ) {
         // custom legend changes may require a resize to layout properly
         this._shouldResizeChart = true;
-        this._resizeAnimationDuration = 250;
       }
     } else if (this._isTouchDevice && changedProps.has("_isZoomed")) {
       chartOptions.dataZoom = this._getDataZoomConfig();
@@ -979,14 +977,11 @@ export class HaChartBase extends LitElement {
   private _handleChartRenderFinished = () => {
     if (this._shouldResizeChart) {
       this.chart?.resize({
-        animation:
-          this._reducedMotion ||
-          typeof this._resizeAnimationDuration !== "number"
-            ? undefined
-            : { duration: this._resizeAnimationDuration },
+        animation: this._reducedMotion
+          ? undefined
+          : { duration: RESIZE_ANIMATION_DURATION },
       });
       this._shouldResizeChart = false;
-      this._resizeAnimationDuration = undefined;
     }
   };
 

src/components/ha-area-picker.ts

@@ -87,8 +87,6 @@ export class HaAreaPicker extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
-  @property({ attribute: "add-button-label" }) public addButtonLabel?: string;
-
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
   public async open() {
@@ -377,7 +375,6 @@ export class HaAreaPicker extends LitElement {
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}
         .valueRenderer=${valueRenderer}
-        .addButtonLabel=${this.addButtonLabel}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

src/components/ha-generic-picker.ts

@@ -10,6 +10,7 @@ import type { HomeAssistant } from "../types";
 import "./ha-bottom-sheet";
 import "./ha-button";
 import "./ha-combo-box-item";
+import "./ha-icon-button";
 import "./ha-input-helper-text";
 import "./ha-picker-combo-box";
 import type {

src/components/target-picker/ha-target-picker-item-row.ts

@@ -545,7 +545,7 @@ export class HaTargetPickerItemRow extends LitElement {
         name: entityName || deviceName || item,
         context,
         stateObject,
-        notFound: !stateObject && item !== "all",
+        notFound: !stateObject,
       };
     }
 

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

@@ -1,152 +0,0 @@
-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-list-item";
-import "../../components/ha-spinner";
-import type {
-  ExternalEntityAddToActions,
-  ExternalEntityAddToAction,
-} from "../../external_app/external_messaging";
-import { showToast } from "../../util/toast";
-
-import type { HomeAssistant } from "../../types";
-
-@customElement("ha-more-info-add-to")
-export class HaMoreInfoAddTo extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public entityId!: string;
-
-  @state() private _externalActions?: ExternalEntityAddToActions = {
-    actions: [],
-  };
-
-  @state() private _loading = true;
-
-  private async _loadExternalActions() {
-    if (this.hass.auth.external?.config.hasEntityAddTo) {
-      this._externalActions =
-        await this.hass.auth.external?.sendMessage<"entity/add_to/get_actions">(
-          {
-            type: "entity/add_to/get_actions",
-            payload: { entity_id: this.entityId },
-          }
-        );
-    }
-  }
-
-  private async _actionSelected(ev: CustomEvent) {
-    const action = (ev.currentTarget as any)
-      .action as ExternalEntityAddToAction;
-    if (!action.enabled) {
-      return;
-    }
-
-    try {
-      await this.hass.auth.external!.fireMessage({
-        type: "entity/add_to",
-        payload: {
-          entity_id: this.entityId,
-          app_payload: action.app_payload,
-        },
-      });
-    } catch (err: any) {
-      showToast(this, {
-        message: this.hass.localize(
-          "ui.dialogs.more_info_control.add_to.action_failed",
-          {
-            error: err.message || err,
-          }
-        ),
-      });
-    }
-  }
-
-  protected async firstUpdated() {
-    await this._loadExternalActions();
-    this._loading = false;
-  }
-
-  protected render() {
-    if (this._loading) {
-      return html`
-        <div class="loading">
-          <ha-spinner></ha-spinner>
-        </div>
-      `;
-    }
-
-    if (!this._externalActions?.actions.length) {
-      return html`
-        <ha-alert alert-type="info">
-          ${this.hass.localize(
-            "ui.dialogs.more_info_control.add_to.no_actions"
-          )}
-        </ha-alert>
-      `;
-    }
-
-    return html`
-      <div class="actions-list">
-        ${this._externalActions.actions.map(
-          (action) => html`
-            <ha-list-item
-              graphic="icon"
-              .disabled=${!action.enabled}
-              .action=${action}
-              .twoline=${!!action.details}
-              @click=${this._actionSelected}
-            >
-              <span>${action.name}</span>
-              ${action.details
-                ? html`<span slot="secondary">${action.details}</span>`
-                : nothing}
-              <ha-icon slot="graphic" .icon=${action.mdi_icon}></ha-icon>
-            </ha-list-item>
-          `
-        )}
-      </div>
-    `;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-6)
-        var(--ha-space-6);
-    }
-
-    .loading {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: var(--ha-space-8);
-    }
-
-    .actions-list {
-      display: flex;
-      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;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-more-info-add-to": HaMoreInfoAddTo;
-  }
-}

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

@@ -8,7 +8,6 @@ import {
   mdiPencil,
   mdiPencilOff,
   mdiPencilOutline,
-  mdiPlusBoxMultipleOutline,
   mdiTransitConnectionVariant,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
@@ -61,7 +60,6 @@ import {
   computeShowLogBookComponent,
 } from "./const";
 import "./controls/more-info-default";
-import "./ha-more-info-add-to";
 import "./ha-more-info-history-and-logbook";
 import "./ha-more-info-info";
 import "./ha-more-info-settings";
@@ -75,7 +73,7 @@ export interface MoreInfoDialogParams {
   data?: Record<string, any>;
 }
 
-type View = "info" | "history" | "settings" | "related" | "add_to";
+type View = "info" | "history" | "settings" | "related";
 
 interface ChildView {
   viewTag: string;
@@ -196,10 +194,6 @@ export class MoreInfoDialog extends LitElement {
     );
   }
 
-  private _shouldShowAddEntityTo(): boolean {
-    return !!this.hass.auth.external?.config.hasEntityAddTo;
-  }
-
   private _getDeviceId(): string | null {
     const entity = this.hass.entities[this._entityId!] as
       | EntityRegistryEntry
@@ -301,11 +295,6 @@ export class MoreInfoDialog extends LitElement {
     this._setView("related");
   }
 
-  private _goToAddEntityTo(ev) {
-    if (!shouldHandleRequestSelectedEvent(ev)) return;
-    this._setView("add_to");
-  }
-
   private _breadcrumbClick(ev: Event) {
     ev.stopPropagation();
     this._setView("related");
@@ -532,22 +521,6 @@ export class MoreInfoDialog extends LitElement {
                             .path=${mdiInformationOutline}
                           ></ha-svg-icon>
                         </ha-list-item>
-                        ${this._shouldShowAddEntityTo()
-                          ? html`
-                              <ha-list-item
-                                graphic="icon"
-                                @request-selected=${this._goToAddEntityTo}
-                              >
-                                ${this.hass.localize(
-                                  "ui.dialogs.more_info_control.add_entity_to"
-                                )}
-                                <ha-svg-icon
-                                  slot="graphic"
-                                  .path=${mdiPlusBoxMultipleOutline}
-                                ></ha-svg-icon>
-                              </ha-list-item>
-                            `
-                          : nothing}
                       </ha-button-menu>
                     `
                   : nothing}
@@ -640,14 +613,7 @@ export class MoreInfoDialog extends LitElement {
                                   : "entity"}
                               ></ha-related-items>
                             `
-                          : this._currView === "add_to"
-                            ? html`
-                                <ha-more-info-add-to
-                                  .hass=${this.hass}
-                                  .entityId=${entityId}
-                                ></ha-more-info-add-to>
-                              `
-                            : nothing
+                          : nothing
               )}
             </div>
           `

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

@@ -152,18 +152,10 @@ export class MoreInfoHistory extends LitElement {
     }
   }
 
-  private _setUpdateTimer() {
+  private _setRedrawTimer() {
+    // redraw the graph every minute to update the time axis
     clearInterval(this._interval);
-    this._interval = window.setInterval(() => {
-      // If using statistics, refresh the data
-      if (this._statistics) {
-        this._fetchStatistics();
-      }
-      // If using history, redraw the graph to update the time axis
-      if (this._stateHistory) {
-        this._redrawGraph();
-      }
-    }, 1000 * 60);
+    this._interval = window.setInterval(() => this._redrawGraph(), 1000 * 60);
   }
 
   private async _getStatisticsMetaData(statisticIds: string[] | undefined) {
@@ -178,30 +170,6 @@ export class MoreInfoHistory extends LitElement {
     return statisticsMetaData;
   }
 
-  private async _fetchStatistics(): Promise<boolean> {
-    // Fire off the metadata and fetch at the same time
-    // to avoid waiting in sequence so the UI responds
-    // faster.
-    const _metadata = this._getStatisticsMetaData([this.entityId]);
-    const _statistics = fetchStatistics(
-      this.hass!,
-      subHours(new Date(), 24),
-      undefined,
-      [this.entityId],
-      "5minute",
-      undefined,
-      statTypes
-    );
-    const [metadata, statistics] = await Promise.all([_metadata, _statistics]);
-    if (metadata && Object.keys(metadata).length) {
-      this._metadata = metadata;
-      this._statistics = statistics;
-      this._statNames = { [this.entityId]: "" };
-      return true;
-    }
-    return false;
-  }
-
   private async _getStateHistory(): Promise<void> {
     if (
       isComponentLoaded(this.hass, "recorder") &&
@@ -212,10 +180,27 @@ export class MoreInfoHistory extends LitElement {
       // has not opted into statistics so there is no need to check as it
       // requires another round-trip to the server.
       if (stateObj && stateObj.attributes.state_class) {
-        const hasStatistics = await this._fetchStatistics();
-        if (hasStatistics) {
-          // Using statistics, set up refresh timer
-          this._setUpdateTimer();
+        // Fire off the metadata and fetch at the same time
+        // to avoid waiting in sequence so the UI responds
+        // faster.
+        const _metadata = this._getStatisticsMetaData([this.entityId]);
+        const _statistics = fetchStatistics(
+          this.hass!,
+          subHours(new Date(), 24),
+          undefined,
+          [this.entityId],
+          "5minute",
+          undefined,
+          statTypes
+        );
+        const [metadata, statistics] = await Promise.all([
+          _metadata,
+          _statistics,
+        ]);
+        if (metadata && Object.keys(metadata).length) {
+          this._metadata = metadata;
+          this._statistics = statistics;
+          this._statNames = { [this.entityId]: "" };
           return;
         }
       }
@@ -253,7 +238,7 @@ export class MoreInfoHistory extends LitElement {
       this._error = err;
       return undefined;
     });
-    this._setUpdateTimer();
+    this._setRedrawTimer();
   }
 
   static styles = [

src/external_app/external_messaging.ts

@@ -36,13 +36,6 @@ interface EMOutgoingMessageConfigGet extends EMMessage {
   type: "config/get";
 }
 
-interface EMOutgoingMessageEntityAddToGetActions extends EMMessage {
-  type: "entity/add_to/get_actions";
-  payload: {
-    entity_id: string;
-  };
-}
-
 interface EMOutgoingMessageBarCodeScan extends EMMessage {
   type: "bar_code/scan";
   payload: {
@@ -82,10 +75,6 @@ interface EMOutgoingMessageWithAnswer {
     request: EMOutgoingMessageConfigGet;
     response: ExternalConfig;
   };
-  "entity/add_to/get_actions": {
-    request: EMOutgoingMessageEntityAddToGetActions;
-    response: ExternalEntityAddToActions;
-  };
 }
 
 interface EMOutgoingMessageExoplayerPlayHLS extends EMMessage {
@@ -168,14 +157,6 @@ interface EMOutgoingMessageThreadStoreInPlatformKeychain extends EMMessage {
   };
 }
 
-interface EMOutgoingMessageAddEntityTo extends EMMessage {
-  type: "entity/add_to";
-  payload: {
-    entity_id: string;
-    app_payload: string; // Opaque string received from get_actions
-  };
-}
-
 type EMOutgoingMessageWithoutAnswer =
   | EMMessageResultError
   | EMMessageResultSuccess
@@ -196,8 +177,7 @@ type EMOutgoingMessageWithoutAnswer =
   | EMOutgoingMessageThemeUpdate
   | EMOutgoingMessageThreadStoreInPlatformKeychain
   | EMOutgoingMessageImprovScan
-  | EMOutgoingMessageImprovConfigureDevice
-  | EMOutgoingMessageAddEntityTo;
+  | EMOutgoingMessageImprovConfigureDevice;
 
 export interface EMIncomingMessageRestart {
   id: number;
@@ -313,31 +293,18 @@ type EMIncomingMessage =
 type EMIncomingMessageHandler = (msg: EMIncomingMessageCommands) => boolean;
 
 export interface ExternalConfig {
-  hasSettingsScreen?: boolean;
-  hasSidebar?: boolean;
-  canWriteTag?: boolean;
-  hasExoPlayer?: boolean;
-  canCommissionMatter?: boolean;
-  canImportThreadCredentials?: boolean;
-  canTransferThreadCredentialsToKeychain?: boolean;
-  hasAssist?: boolean;
-  hasBarCodeScanner?: number;
-  canSetupImprov?: boolean;
-  downloadFileSupported?: boolean;
-  appVersion?: string;
-  hasEntityAddTo?: boolean; // Supports "Add to" from more-info dialog, with action coming from external app
-}
-
-export interface ExternalEntityAddToAction {
-  enabled: boolean;
-  name: string; // Translated name of the action to be displayed in the UI
-  details?: string; // Optional translated details of the action to be displayed in the UI
-  mdi_icon: string; // MDI icon name to be displayed in the UI (e.g., "mdi:car")
-  app_payload: string; // Opaque string to be sent back when the action is selected
-}
-
-export interface ExternalEntityAddToActions {
-  actions: ExternalEntityAddToAction[];
+  hasSettingsScreen: boolean;
+  hasSidebar: boolean;
+  canWriteTag: boolean;
+  hasExoPlayer: boolean;
+  canCommissionMatter: boolean;
+  canImportThreadCredentials: boolean;
+  canTransferThreadCredentialsToKeychain: boolean;
+  hasAssist: boolean;
+  hasBarCodeScanner: number;
+  canSetupImprov: boolean;
+  downloadFileSupported: boolean;
+  appVersion: string;
 }
 
 export class ExternalMessaging {

src/mixins/conditional-listener-mixin.ts

@@ -1,104 +0,0 @@
-import type { ReactiveElement } from "lit";
-import { listenMediaQuery } from "../common/dom/media_query";
-import type { HomeAssistant } from "../types";
-import type { Condition } from "../panels/lovelace/common/validate-condition";
-import { checkConditionsMet } from "../panels/lovelace/common/validate-condition";
-
-type Constructor<T> = abstract new (...args: any[]) => T;
-
-/**
- * Extract media queries from conditions recursively
- */
-export function extractMediaQueries(conditions: Condition[]): string[] {
-  return conditions.reduce<string[]>((array, c) => {
-    if ("conditions" in c && c.conditions) {
-      array.push(...extractMediaQueries(c.conditions));
-    }
-    if (c.condition === "screen" && c.media_query) {
-      array.push(c.media_query);
-    }
-    return array;
-  }, []);
-}
-
-/**
- * Helper to setup media query listeners for conditional visibility
- */
-export function setupMediaQueryListeners(
-  conditions: Condition[],
-  hass: HomeAssistant,
-  addListener: (unsub: () => void) => void,
-  onUpdate: (conditionsMet: boolean) => void
-): void {
-  const mediaQueries = extractMediaQueries(conditions);
-
-  if (mediaQueries.length === 0) return;
-
-  // Optimization for single media query
-  const hasOnlyMediaQuery =
-    conditions.length === 1 &&
-    conditions[0].condition === "screen" &&
-    !!conditions[0].media_query;
-
-  mediaQueries.forEach((mediaQuery) => {
-    const unsub = listenMediaQuery(mediaQuery, (matches) => {
-      if (hasOnlyMediaQuery) {
-        onUpdate(matches);
-      } else {
-        const conditionsMet = checkConditionsMet(conditions, hass);
-        onUpdate(conditionsMet);
-      }
-    });
-    addListener(unsub);
-  });
-}
-
-/**
- * Mixin to handle conditional listeners for visibility control
- *
- * Provides lifecycle management for listeners (media queries, time-based, state changes, etc.)
- * that control conditional visibility of components.
- *
- * Usage:
- * 1. Extend your component with ConditionalListenerMixin(ReactiveElement)
- * 2. Override setupConditionalListeners() to setup your listeners
- * 3. Use addConditionalListener() to register unsubscribe functions
- * 4. Call clearConditionalListeners() and setupConditionalListeners() when config changes
- *
- * The mixin automatically:
- * - Sets up listeners when component connects to DOM
- * - Cleans up listeners when component disconnects from DOM
- */
-export const ConditionalListenerMixin = <
-  T extends Constructor<ReactiveElement>,
->(
-  superClass: T
-) => {
-  abstract class ConditionalListenerClass extends superClass {
-    private __listeners: (() => void)[] = [];
-
-    public connectedCallback() {
-      super.connectedCallback();
-      this.setupConditionalListeners();
-    }
-
-    public disconnectedCallback() {
-      super.disconnectedCallback();
-      this.clearConditionalListeners();
-    }
-
-    protected clearConditionalListeners(): void {
-      this.__listeners.forEach((unsub) => unsub());
-      this.__listeners = [];
-    }
-
-    protected addConditionalListener(unsubscribe: () => void): void {
-      this.__listeners.push(unsubscribe);
-    }
-
-    protected setupConditionalListeners(): void {
-      // Override in subclass
-    }
-  }
-  return ConditionalListenerClass;
-};

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -332,15 +332,6 @@ class DialogCalendarEventEditor extends LitElement {
 
   private _allDayToggleChanged(ev) {
     this._allDay = ev.target.checked;
-    // When switching to all-day mode, normalize dates to midnight so time portions don't interfere with date comparisons
-    if (this._allDay && this._dtstart && this._dtend) {
-      this._dtstart = new Date(
-        formatDate(this._dtstart, this._timeZone!) + "T00:00:00"
-      );
-      this._dtend = new Date(
-        formatDate(this._dtend, this._timeZone!) + "T00:00:00"
-      );
-    }
   }
 
   private _startDateChanged(ev: CustomEvent) {

src/panels/config/areas/dialog-floor-registry-detail.ts

@@ -8,24 +8,24 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/chips/ha-chip-set";
 import "../../../components/chips/ha-input-chip";
 import "../../../components/ha-alert";
-import "../../../components/ha-aliases-editor";
-import "../../../components/ha-area-picker";
 import "../../../components/ha-button";
+import "../../../components/ha-aliases-editor";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-icon-picker";
 import "../../../components/ha-picture-upload";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-textfield";
-import { updateAreaRegistryEntry } from "../../../data/area_registry";
+import "../../../components/ha-area-picker";
 import type {
   FloorRegistryEntry,
   FloorRegistryEntryMutableParams,
 } from "../../../data/floor_registry";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import { showAreaRegistryDetailDialog } from "./show-dialog-area-registry-detail";
 import type { FloorRegistryDetailDialogParams } from "./show-dialog-floor-registry-detail";
+import { showAreaRegistryDetailDialog } from "./show-dialog-area-registry-detail";
+import { updateAreaRegistryEntry } from "../../../data/area_registry";
 
 class DialogFloorDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -168,6 +168,11 @@ class DialogFloorDetail extends LitElement {
               )}
             </h3>
 
+            <p class="description">
+              ${this.hass.localize(
+                "ui.panel.config.floors.editor.areas_description"
+              )}
+            </p>
             ${areas.length
               ? html`<ha-chip-set>
                   ${repeat(
@@ -192,17 +197,13 @@ class DialogFloorDetail extends LitElement {
                       </ha-input-chip>`
                   )}
                 </ha-chip-set>`
-              : html`<p class="description">
-                  ${this.hass.localize(
-                    "ui.panel.config.floors.editor.areas_description"
-                  )}
-                </p>`}
+              : nothing}
             <ha-area-picker
               no-add
               .hass=${this.hass}
               @value-changed=${this._addArea}
               .excludeAreas=${areas.map((a) => a.area_id)}
-              .addButtonLabel=${this.hass.localize(
+              .label=${this.hass.localize(
                 "ui.panel.config.floors.editor.add_area"
               )}
             ></ha-area-picker>

src/panels/config/automation/add-automation-element-dialog.ts

@@ -1054,7 +1054,6 @@ class DialogAddAutomationElement
   private _onSearchFocus(ev) {
     this._removeKeyboardShortcuts = tinykeys(ev.target, {
       ArrowDown: this._focusSearchList,
-      Enter: this._pickSingleItem,
     });
   }
 
@@ -1071,39 +1070,6 @@ class DialogAddAutomationElement
     this._itemsListFirstElement.focus();
   };
 
-  private _pickSingleItem = (ev: KeyboardEvent) => {
-    if (!this._filter) {
-      return;
-    }
-
-    ev.preventDefault();
-    const automationElementType = this._params!.type;
-
-    const items = [
-      ...this._getFilteredItems(
-        automationElementType,
-        this._filter,
-        this.hass.localize,
-        this.hass.services,
-        this._manifests
-      ),
-      ...(automationElementType !== "trigger"
-        ? this._getFilteredBuildingBlocks(
-            automationElementType,
-            this._filter,
-            this.hass.localize
-          )
-        : []),
-    ];
-
-    if (items.length !== 1) {
-      return;
-    }
-
-    this._params!.add(items[0].key);
-    this.closeDialog();
-  };
-
   static get styles(): CSSResultGroup {
     return [
       css`

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

@@ -20,8 +20,7 @@ import "../../../../components/ha-md-divider";
 import "../../../../components/ha-md-menu-item";
 import { ACTION_BUILDING_BLOCKS } from "../../../../data/action";
 import type { ActionSidebarConfig } from "../../../../data/automation";
-import { domainToName } from "../../../../data/integration";
-import type { RepeatAction, ServiceAction } from "../../../../data/script";
+import type { RepeatAction } from "../../../../data/script";
 import type { HomeAssistant } from "../../../../types";
 import { isMac } from "../../../../util/is_mac";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
@@ -84,23 +83,11 @@ export default class HaAutomationSidebarAction extends LitElement {
       "ui.panel.config.automation.editor.actions.action"
     );
 
-    let title =
+    const title =
       this.hass.localize(
         `ui.panel.config.automation.editor.actions.type.${type}.label` as LocalizeKeys
       ) || type;
 
-    if (type === "service" && (actionConfig as ServiceAction).action) {
-      const [domain, service] = (actionConfig as ServiceAction).action!.split(
-        ".",
-        2
-      );
-      title = `${domainToName(this.hass.localize, domain)}: ${
-        this.hass.localize(`component.${domain}.services.${service}.name`) ||
-        this.hass.services[domain][service]?.name ||
-        title
-      }`;
-    }
-
     const description = isBuildingBlock
       ? this.hass.localize(
           `ui.panel.config.automation.editor.actions.type.${type}.description.picker` as LocalizeKeys

src/panels/config/dashboard/ha-config-updates.ts

@@ -20,7 +20,6 @@ import { subscribeEntityRegistry } from "../../../data/entity_registry";
 import type { UpdateEntity } from "../../../data/update";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../types";
-import "../../../components/ha-progress-ring";
 
 @customElement("ha-config-updates")
 class HaConfigUpdates extends SubscribeMixin(LitElement) {
@@ -57,29 +56,6 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
       this._entities?.find((entity) => entity.entity_id === entityId)
   );
 
-  private _renderUpdateProgress(entity: UpdateEntity) {
-    if (entity.attributes.update_percentage != null) {
-      return html`<ha-progress-ring
-        size="small"
-        .value=${entity.attributes.update_percentage}
-        .label=${this.hass.localize(
-          "ui.panel.config.updates.update_in_progress"
-        )}
-      ></ha-progress-ring>`;
-    }
-
-    if (entity.attributes.in_progress) {
-      return html`<ha-spinner
-        size="small"
-        .ariaLabel=${this.hass.localize(
-          "ui.panel.config.updates.update_in_progress"
-        )}
-      ></ha-spinner>`;
-    }
-
-    return html`<ha-icon-next></ha-icon-next>`;
-  }
-
   protected render() {
     if (!this.updateEntities?.length) {
       return nothing;
@@ -130,9 +106,13 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
                   )}
                 ></state-badge>
                 ${this.narrow && entity.attributes.in_progress
-                  ? html`<div class="absolute">
-                      ${this._renderUpdateProgress(entity)}
-                    </div>`
+                  ? html`<ha-spinner
+                      class="absolute"
+                      size="small"
+                      .ariaLabel=${this.hass.localize(
+                        "ui.panel.config.updates.update_in_progress"
+                      )}
+                    ></ha-spinner>`
                   : nothing}
               </div>
               <span slot="headline"
@@ -148,9 +128,16 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
                   : nothing}
               </span>
               ${!this.narrow
-                ? html`<div slot="end">
-                    ${this._renderUpdateProgress(entity)}
-                  </div>`
+                ? entity.attributes.in_progress
+                  ? html`<div slot="end">
+                      <ha-spinner
+                        size="small"
+                        .ariaLabel=${this.hass.localize(
+                          "ui.panel.config.updates.update_in_progress"
+                        )}
+                      ></ha-spinner>
+                    </div>`
+                  : html`<ha-icon-next slot="end"></ha-icon-next>`
                 : nothing}
             </ha-md-list-item>
           `;
@@ -206,13 +193,13 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
         div[slot="start"] {
           position: relative;
         }
-        div.absolute {
+        ha-spinner.absolute {
           position: absolute;
           left: 6px;
           top: 6px;
         }
         state-badge.updating {
-          opacity: 0.2;
+          opacity: 0.5;
         }
       `,
     ];

src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts

@@ -9,7 +9,6 @@ import "../../../../components/ha-dialog";
 import "../../../../components/ha-button";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-radio";
-import "../../../../components/ha-markdown";
 import type { HaRadio } from "../../../../components/ha-radio";
 import type {
   FlowFromGridSourceEnergyPreference,
@@ -20,7 +19,11 @@ import {
   emptyFlowToGridSourceEnergyPreference,
   energyStatisticHelpUrl,
 } from "../../../../data/energy";
-import { isExternalStatistic } from "../../../../data/recorder";
+import {
+  getDisplayUnit,
+  getStatisticMetadata,
+  isExternalStatistic,
+} from "../../../../data/recorder";
 import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
@@ -44,6 +47,8 @@ export class DialogEnergyGridFlowSettings
 
   @state() private _costs?: "no-costs" | "number" | "entity" | "statistic";
 
+  @state() private _pickedDisplayUnit?: string | null;
+
   @state() private _energy_units?: string[];
 
   @state() private _error?: string;
@@ -76,6 +81,11 @@ export class DialogEnergyGridFlowSettings
           : "stat_energy_to"
       ];
 
+    this._pickedDisplayUnit = getDisplayUnit(
+      this.hass,
+      initialSourceId,
+      params.metadata
+    );
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
@@ -93,6 +103,7 @@ export class DialogEnergyGridFlowSettings
   public closeDialog() {
     this._params = undefined;
     this._source = undefined;
+    this._pickedDisplayUnit = undefined;
     this._error = undefined;
     this._excludeList = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -106,6 +117,10 @@ export class DialogEnergyGridFlowSettings
 
     const pickableUnit = this._energy_units?.join(", ") || "";
 
+    const unitPriceSensor = this._pickedDisplayUnit
+      ? `${this.hass.config.currency}/${this._pickedDisplayUnit}`
+      : undefined;
+
     const unitPriceFixed = `${this.hass.config.currency}/kWh`;
 
     const externalSource =
@@ -231,15 +246,9 @@ export class DialogEnergyGridFlowSettings
               .hass=${this.hass}
               include-domains='["sensor", "input_number"]'
               .value=${this._source.entity_energy_price}
-              .label=${this.hass.localize(
+              .label=${`${this.hass.localize(
                 `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.cost_entity_input`
-              )}
-              .helper=${html`<ha-markdown
-                .content=${this.hass.localize(
-                  "ui.panel.config.energy.grid.flow_dialog.cost_entity_helper",
-                  { currency: this.hass.config.currency }
-                )}
-              ></ha-markdown>`}
+              )} ${unitPriceSensor ? ` (${unitPriceSensor})` : ""}`}
               @value-changed=${this._priceEntityChanged}
             ></ha-entity-picker>`
           : ""}
@@ -332,6 +341,16 @@ export class DialogEnergyGridFlowSettings
   }
 
   private async _statisticChanged(ev: CustomEvent<{ value: string }>) {
+    if (ev.detail.value) {
+      const metadata = await getStatisticMetadata(this.hass, [ev.detail.value]);
+      this._pickedDisplayUnit = getDisplayUnit(
+        this.hass,
+        ev.detail.value,
+        metadata[0]
+      );
+    } else {
+      this._pickedDisplayUnit = undefined;
+    }
     this._source = {
       ...this._source!,
       [this._params!.direction === "from"

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

@@ -107,8 +107,6 @@ class HaConfigInfo extends LitElement {
     const customUiList: { name: string; url: string; version: string }[] =
       (window as any).CUSTOM_UI_LIST || [];
 
-    const isDark = this.hass.themes?.darkMode || false;
-
     return html`
       <hass-subpage
         .hass=${this.hass}
@@ -188,7 +186,7 @@ class HaConfigInfo extends LitElement {
                 : nothing}
             </ul>
           </ha-card>
-          <ha-card outlined class="ohf ${isDark ? "dark" : ""}">
+          <ha-card outlined class="ohf">
             <div>
               ${this.hass.localize("ui.panel.config.info.proud_part_of")}
             </div>
@@ -348,10 +346,6 @@ class HaConfigInfo extends LitElement {
           max-width: 250px;
         }
 
-        .ohf.dark img {
-          color-scheme: dark;
-        }
-
         .versions {
           display: flex;
           flex-direction: column;

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

@@ -148,9 +148,7 @@ export class AssistPipelineDebug extends LitElement {
       ).pipeline_runs.reverse();
     } catch (e: any) {
       showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.config.voice_assistants.debug.error.fetch_runs"
-        ),
+        title: "Failed to fetch pipeline runs",
         text: e.message,
       });
       return;
@@ -178,9 +176,7 @@ export class AssistPipelineDebug extends LitElement {
       ).events;
     } catch (e: any) {
       showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.config.voice_assistants.debug.error.fetch_events"
-        ),
+        title: "Failed to fetch events",
         text: e.message,
       });
       return;

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

@@ -30,26 +30,16 @@ export class AssistPipelineEvents extends LitElement {
     const run = this._processEvents(this.events);
     if (!run) {
       if (this.events.length) {
-        return html`<ha-alert alert-type="error"
-            >${this.hass.localize(
-              "ui.panel.config.voice_assistants.debug.error.showing_run"
-            )}</ha-alert
-          >
+        return html`<ha-alert alert-type="error">Error showing run</ha-alert>
           <ha-card>
             <ha-expansion-panel>
-              <span slot="header"
-                >${this.hass.localize(
-                  "ui.panel.config.voice_assistants.debug.raw"
-                )}</span
-              >
+              <span slot="header">Raw</span>
               <pre>${JSON.stringify(this.events, null, 2)}</pre>
             </ha-expansion-panel>
           </ha-card>`;
       }
       return html`<ha-alert alert-type="warning"
-        >${this.hass.localize(
-          "ui.panel.config.voice_assistants.debug.no_events"
-        )}</ha-alert
+        >There were no events in this run.</ha-alert
       >`;
     }
     return html`

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

@@ -11,16 +11,31 @@ import type { HomeAssistant } from "../../../../types";
 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";
 
-const RUN_DATA = ["pipeline", "language"];
-const WAKE_WORD_DATA = ["engine"];
+const RUN_DATA = {
+  pipeline: "Pipeline",
+  language: "Language",
+};
+const WAKE_WORD_DATA = {
+  engine: "Engine",
+};
 
-const STT_DATA = ["engine"];
+const STT_DATA = {
+  engine: "Engine",
+};
 
-const INTENT_DATA = ["engine", "language", "intent_input"];
+const INTENT_DATA = {
+  engine: "Engine",
+  language: "Language",
+  intent_input: "Input",
+};
 
-const TTS_DATA = ["engine", "language", "voice", "tts_input"];
+const TTS_DATA = {
+  engine: "Engine",
+  language: "Language",
+  voice: "Voice",
+  tts_input: "Input",
+};
 
 const STAGES: Record<PipelineRun["stage"], number> = {
   ready: 0,
@@ -87,32 +102,24 @@ const renderProgress = (
   return html`${durationString}s ✅`;
 };
 
-const renderData = (
-  hass: HomeAssistant,
-  data: Record<string, any>,
-  keys: string[]
-) =>
-  keys.map((key) => {
-    const label = hass.localize(
-      `ui.panel.config.voice_assistants.debug.stages.${key}` as LocalizeKeys
-    );
-    return html`
+const renderData = (data: Record<string, any>, keys: Record<string, string>) =>
+  Object.entries(keys).map(
+    ([key, label]) => html`
       <div class="row">
         <div>${label}</div>
         <div>${data[key]}</div>
       </div>
-    `;
-  });
+    `
+  );
 
 const dataMinusKeysRender = (
-  hass: HomeAssistant,
   data: Record<string, any>,
-  keys: string[]
+  keys: Record<string, string>
 ) => {
   const result = {};
   let render = false;
   for (const key in data) {
-    if (keys.includes(key) || key === "done") {
+    if (key in keys || key === "done") {
       continue;
     }
     render = true;
@@ -120,9 +127,7 @@ const dataMinusKeysRender = (
   }
   return render
     ? html`<ha-expansion-panel>
-        <span slot="header"
-          >${hass.localize("ui.panel.config.voice_assistants.debug.raw")}</span
-        >
+        <span slot="header">Raw</span>
         <ha-yaml-editor readOnly autoUpdate .value=${result}></ha-yaml-editor>
       </ha-expansion-panel>`
     : "";
@@ -134,12 +139,6 @@ export class AssistPipelineDebug extends LitElement {
 
   @property({ attribute: false }) public pipelineRun!: PipelineRun;
 
-  private _audioElement?: HTMLAudioElement;
-
-  private get _isPlaying(): boolean {
-    return this._audioElement != null && !this._audioElement.paused;
-  }
-
   protected render(): TemplateResult {
     const lastRunStage: string = this.pipelineRun
       ? ["tts", "intent", "stt", "wake_word"].find(
@@ -178,15 +177,11 @@ export class AssistPipelineDebug extends LitElement {
       <ha-card>
         <div class="card-content">
           <div class="row heading">
-            <div>
-              ${this.hass.localize(
-                "ui.panel.config.voice_assistants.debug.run"
-              )}
-            </div>
+            <div>Run</div>
             <div>${this.pipelineRun.stage}</div>
           </div>
 
-          ${renderData(this.hass, this.pipelineRun.run, RUN_DATA)}
+          ${renderData(this.pipelineRun.run, RUN_DATA)}
           ${messages.length > 0
             ? html`
                 <div class="messages">
@@ -208,39 +203,23 @@ export class AssistPipelineDebug extends LitElement {
             <ha-card>
               <div class="card-content">
                 <div class="row heading">
-                  <span
-                    >${this.hass.localize(
-                      "ui.panel.config.voice_assistants.debug.stages.wake_word"
-                    )}</span
-                  >
+                  <span>Wake word</span>
                   ${renderProgress(this.hass, this.pipelineRun, "wake_word")}
                 </div>
                 ${this.pipelineRun.wake_word
                   ? html`
                       <div class="card-content">
-                        ${renderData(
-                          this.hass,
-                          this.pipelineRun.wake_word,
-                          WAKE_WORD_DATA
-                        )}
+                        ${renderData(this.pipelineRun.wake_word, STT_DATA)}
                         ${this.pipelineRun.wake_word.wake_word_output
                           ? html`<div class="row">
-                                <div>
-                                  ${this.hass.localize(
-                                    "ui.panel.config.voice_assistants.debug.stages.model"
-                                  )}
-                                </div>
+                                <div>Model</div>
                                 <div>
                                   ${this.pipelineRun.wake_word.wake_word_output
                                     .ww_id}
                                 </div>
                               </div>
                               <div class="row">
-                                <div>
-                                  ${this.hass.localize(
-                                    "ui.panel.config.voice_assistants.debug.stages.timestamp"
-                                  )}
-                                </div>
+                                <div>Timestamp</div>
                                 <div>
                                   ${this.pipelineRun.wake_word.wake_word_output
                                     .timestamp}
@@ -248,7 +227,6 @@ export class AssistPipelineDebug extends LitElement {
                               </div>`
                           : ""}
                         ${dataMinusKeysRender(
-                          this.hass,
                           this.pipelineRun.wake_word,
                           WAKE_WORD_DATA
                         )}
@@ -265,11 +243,7 @@ export class AssistPipelineDebug extends LitElement {
             <ha-card>
               <div class="card-content">
                 <div class="row heading">
-                  <span
-                    >${this.hass.localize(
-                      "ui.panel.config.voice_assistants.debug.stages.speech_to_text"
-                    )}</span
-                  >
+                  <span>Speech-to-text</span>
                   ${renderProgress(
                     this.hass,
                     this.pipelineRun,
@@ -280,30 +254,18 @@ export class AssistPipelineDebug extends LitElement {
                 ${this.pipelineRun.stt
                   ? html`
                       <div class="card-content">
-                        ${renderData(this.hass, this.pipelineRun.stt, STT_DATA)}
+                        ${renderData(this.pipelineRun.stt, STT_DATA)}
                         <div class="row">
-                          <div>
-                            ${this.hass.localize(
-                              "ui.panel.config.voice_assistants.debug.stages.language"
-                            )}
-                          </div>
+                          <div>Language</div>
                           <div>${this.pipelineRun.stt.metadata.language}</div>
                         </div>
                         ${this.pipelineRun.stt.stt_output
                           ? html`<div class="row">
-                              <div>
-                                ${this.hass.localize(
-                                  "ui.panel.config.voice_assistants.debug.stages.output"
-                                )}
-                              </div>
+                              <div>Output</div>
                               <div>${this.pipelineRun.stt.stt_output.text}</div>
                             </div>`
                           : ""}
-                        ${dataMinusKeysRender(
-                          this.hass,
-                          this.pipelineRun.stt,
-                          STT_DATA
-                        )}
+                        ${dataMinusKeysRender(this.pipelineRun.stt, STT_DATA)}
                       </div>
                     `
                   : ""}
@@ -317,28 +279,16 @@ export class AssistPipelineDebug extends LitElement {
             <ha-card>
               <div class="card-content">
                 <div class="row heading">
-                  <span
-                    >${this.hass.localize(
-                      "ui.panel.config.voice_assistants.debug.stages.natural_language_processing"
-                    )}</span
-                  >
+                  <span>Natural Language Processing</span>
                   ${renderProgress(this.hass, this.pipelineRun, "intent")}
                 </div>
                 ${this.pipelineRun.intent
                   ? html`
                       <div class="card-content">
-                        ${renderData(
-                          this.hass,
-                          this.pipelineRun.intent,
-                          INTENT_DATA
-                        )}
+                        ${renderData(this.pipelineRun.intent, INTENT_DATA)}
                         ${this.pipelineRun.intent.intent_output
                           ? html`<div class="row">
-                                <div>
-                                  ${this.hass.localize(
-                                    "ui.panel.config.voice_assistants.debug.stages.response_type"
-                                  )}
-                                </div>
+                                <div>Response type</div>
                                 <div>
                                   ${this.pipelineRun.intent.intent_output
                                     .response.response_type}
@@ -347,11 +297,7 @@ export class AssistPipelineDebug extends LitElement {
                               ${this.pipelineRun.intent.intent_output.response
                                 .response_type === "error"
                                 ? html`<div class="row">
-                                    <div>
-                                      ${this.hass.localize(
-                                        "ui.panel.config.voice_assistants.debug.error.code"
-                                      )}
-                                    </div>
+                                    <div>Error code</div>
                                     <div>
                                       ${this.pipelineRun.intent.intent_output
                                         .response.data.code}
@@ -360,27 +306,18 @@ export class AssistPipelineDebug extends LitElement {
                                 : ""}`
                           : ""}
                         <div class="row">
-                          <div>
-                            ${this.hass.localize(
-                              "ui.panel.config.voice_assistants.debug.stages.prefer_local"
-                            )}
-                          </div>
+                          <div>Prefer handling locally</div>
                           <div>
                             ${this.pipelineRun.intent.prefer_local_intents}
                           </div>
                         </div>
                         <div class="row">
-                          <div>
-                            ${this.hass.localize(
-                              "ui.panel.config.voice_assistants.debug.stages.processed_locally"
-                            )}
-                          </div>
+                          <div>Processed locally</div>
                           <div>
                             ${this.pipelineRun.intent.processed_locally}
                           </div>
                         </div>
                         ${dataMinusKeysRender(
-                          this.hass,
                           this.pipelineRun.intent,
                           INTENT_DATA
                         )}
@@ -397,22 +334,14 @@ export class AssistPipelineDebug extends LitElement {
             <ha-card>
               <div class="card-content">
                 <div class="row heading">
-                  <span
-                    >${this.hass.localize(
-                      "ui.panel.config.voice_assistants.debug.stages.text_to_speech"
-                    )}</span
-                  >
+                  <span>Text-to-speech</span>
                   ${renderProgress(this.hass, this.pipelineRun, "tts")}
                 </div>
                 ${this.pipelineRun.tts
                   ? html`
                       <div class="card-content">
-                        ${renderData(this.hass, this.pipelineRun.tts, TTS_DATA)}
-                        ${dataMinusKeysRender(
-                          this.hass,
-                          this.pipelineRun.tts,
-                          TTS_DATA
-                        )}
+                        ${renderData(this.pipelineRun.tts, TTS_DATA)}
+                        ${dataMinusKeysRender(this.pipelineRun.tts, TTS_DATA)}
                       </div>
                     `
                   : ""}
@@ -420,19 +349,8 @@ export class AssistPipelineDebug extends LitElement {
               ${this.pipelineRun?.tts?.tts_output
                 ? html`
                     <div class="card-actions">
-                      <ha-button
-                        .variant=${this._isPlaying ? "danger" : "brand"}
-                        @click=${this._isPlaying
-                          ? this._stopTTS
-                          : this._playTTS}
-                      >
-                        ${this._isPlaying
-                          ? this.hass.localize(
-                              "ui.panel.config.voice_assistants.debug.stop_audio"
-                            )
-                          : this.hass.localize(
-                              "ui.panel.config.voice_assistants.debug.play_audio"
-                            )}
+                      <ha-button @click=${this._playTTS}>
+                        Play Audio
                       </ha-button>
                     </div>
                   `
@@ -443,11 +361,7 @@ export class AssistPipelineDebug extends LitElement {
       ${maybeRenderError(this.pipelineRun, "tts", lastRunStage)}
       <ha-card>
         <ha-expansion-panel>
-          <span slot="header"
-            >${this.hass.localize(
-              "ui.panel.config.voice_assistants.debug.raw"
-            )}</span
-          >
+          <span slot="header">Raw</span>
           <ha-yaml-editor
             read-only
             auto-update
@@ -459,48 +373,14 @@ export class AssistPipelineDebug extends LitElement {
   }
 
   private _playTTS(): void {
-    // Stop any existing audio first
-    this._stopTTS();
-
     const url = this.pipelineRun!.tts!.tts_output!.url;
-    this._audioElement = new Audio(url);
-
-    this._audioElement.addEventListener("error", () => {
-      showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.config.voice_assistants.debug.error.title"
-        ),
-        text: this.hass.localize(
-          "ui.panel.config.voice_assistants.debug.error.playing_audio"
-        ),
-      });
+    const audio = new Audio(url);
+    audio.addEventListener("error", () => {
+      showAlertDialog(this, { title: "Error", text: "Error playing audio" });
     });
-
-    this._audioElement.addEventListener("play", () => {
-      this.requestUpdate();
+    audio.addEventListener("canplaythrough", () => {
+      audio.play();
     });
-
-    this._audioElement.addEventListener("ended", () => {
-      this.requestUpdate();
-    });
-
-    this._audioElement.addEventListener("canplaythrough", () => {
-      this._audioElement!.play();
-    });
-  }
-
-  private _stopTTS(): void {
-    if (this._audioElement) {
-      this._audioElement.pause();
-      this._audioElement.currentTime = 0;
-      this._audioElement = undefined;
-      this.requestUpdate();
-    }
-  }
-
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this._stopTTS();
   }
 
   static styles = css`

src/panels/logbook/ha-logbook.ts

@@ -52,8 +52,6 @@ export class HaLogbook extends LitElement {
 
   @property({ attribute: false }) public deviceIds?: string[];
 
-  @property({ attribute: false }) public stateFilter?: string[];
-
   @property({ type: Boolean }) public narrow = false;
 
   @property({ type: Boolean, reflect: true }) public virtualize = false;
@@ -167,7 +165,7 @@ export class HaLogbook extends LitElement {
   protected willUpdate(changedProps: PropertyValues): void {
     let changed = changedProps.has("time");
 
-    for (const key of ["entityIds", "deviceIds", "stateFilter"]) {
+    for (const key of ["entityIds", "deviceIds"]) {
       if (!changedProps.has(key)) {
         continue;
       }
@@ -354,19 +352,9 @@ export class HaLogbook extends LitElement {
       "recent" in this.time
         ? findStartOfRecentTime(new Date(), this.time.recent)
         : undefined;
-
-    let eventsFiltered: LogbookEntry[] | undefined;
-    if (this.stateFilter && this.stateFilter.length > 0) {
-      eventsFiltered = streamMessage.events.filter(
-        (e) => e.state && this.stateFilter?.includes(e.state)
-      );
-    } else {
-      eventsFiltered = [...streamMessage.events];
-    }
-
     // Put newest ones on top. Reverse works in-place so
     // make a copy first.
-    const newEntries = eventsFiltered.reverse();
+    const newEntries = [...streamMessage.events].reverse();
     if (!this._logbookEntries || !this._logbookEntries.length) {
       this._logbookEntries = newEntries;
       return;

src/panels/lovelace/badges/hui-badge.ts

@@ -2,14 +2,14 @@ import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
+import type { MediaQueriesListener } from "../../../common/dom/media_query";
 import "../../../components/ha-svg-icon";
 import type { LovelaceBadgeConfig } from "../../../data/lovelace/config/badge";
 import type { HomeAssistant } from "../../../types";
 import {
-  ConditionalListenerMixin,
-  setupMediaQueryListeners,
-} from "../../../mixins/conditional-listener-mixin";
-import { checkConditionsMet } from "../common/validate-condition";
+  attachConditionMediaQueriesListeners,
+  checkConditionsMet,
+} from "../common/validate-condition";
 import { createBadgeElement } from "../create-element/create-badge-element";
 import { createErrorBadgeConfig } from "../create-element/create-element-base";
 import type { LovelaceBadge } from "../types";
@@ -22,7 +22,7 @@ declare global {
 }
 
 @customElement("hui-badge")
-export class HuiBadge extends ConditionalListenerMixin(ReactiveElement) {
+export class HuiBadge extends ReactiveElement {
   @property({ type: Boolean }) public preview = false;
 
   @property({ attribute: false }) public config?: LovelaceBadgeConfig;
@@ -40,16 +40,20 @@ export class HuiBadge extends ConditionalListenerMixin(ReactiveElement) {
 
   private _element?: LovelaceBadge;
 
+  private _listeners: MediaQueriesListener[] = [];
+
   protected createRenderRoot() {
     return this;
   }
 
   public disconnectedCallback() {
     super.disconnectedCallback();
+    this._clearMediaQueries();
   }
 
   public connectedCallback() {
     super.connectedCallback();
+    this._listenMediaQueries();
     this._updateVisibility();
   }
 
@@ -133,17 +137,26 @@ export class HuiBadge extends ConditionalListenerMixin(ReactiveElement) {
     }
   }
 
-  protected setupConditionalListeners() {
-    if (!this.config?.visibility || !this.hass) {
+  private _clearMediaQueries() {
+    this._listeners.forEach((unsub) => unsub());
+    this._listeners = [];
+  }
+
+  private _listenMediaQueries() {
+    this._clearMediaQueries();
+    if (!this.config?.visibility) {
       return;
     }
+    const conditions = this.config.visibility;
+    const hasOnlyMediaQuery =
+      conditions.length === 1 &&
+      conditions[0].condition === "screen" &&
+      !!conditions[0].media_query;
 
-    setupMediaQueryListeners(
+    this._listeners = attachConditionMediaQueriesListeners(
       this.config.visibility,
-      this.hass,
-      (unsub) => this.addConditionalListener(unsub),
-      (conditionsMet) => {
-        this._updateVisibility(conditionsMet);
+      (matches) => {
+        this._updateVisibility(hasOnlyMediaQuery && matches);
       }
     );
   }

src/panels/lovelace/cards/energy/hui-energy-compare-card.ts

@@ -80,44 +80,41 @@ export class HuiEnergyCompareCard
 
     return html`
       <ha-alert dismissable @alert-dismissed-clicked=${this._stopCompare}>
-        ${this.hass.localize(
-          "ui.panel.lovelace.cards.energy.energy_compare.info",
-          {
-            start: html`<b
-              >${formatDate(
-                this._start!,
-                this.hass.locale,
-                this.hass.config
-              )}${dayDifference > 0
-                ? ` -
+        ${this.hass.localize("ui.panel.energy.compare.info", {
+          start: html`<b
+            >${formatDate(
+              this._start!,
+              this.hass.locale,
+              this.hass.config
+            )}${dayDifference > 0
+              ? ` -
           ${formatDate(
             this._end || endOfDay(new Date()),
             this.hass.locale,
             this.hass.config
           )}`
-                : ""}</b
-            >`,
-            end: html`<b
-                >${formatDate(
-                  this._startCompare,
-                  this.hass.locale,
-                  this.hass.config
-                )}${dayDifference > 0
-                  ? ` -
+              : ""}</b
+          >`,
+          end: html`<b
+              >${formatDate(
+                this._startCompare,
+                this.hass.locale,
+                this.hass.config
+              )}${dayDifference > 0
+                ? ` -
           ${formatDate(this._endCompare, this.hass.locale, this.hass.config)}`
-                  : ""}</b
-              >
-              <button class="link" @click=${this._changeCompareMode}>
-                (${this._compareMode === CompareMode.PREVIOUS
-                  ? this.hass.localize(
-                      "ui.panel.lovelace.cards.energy.energy_compare.compare_previous_year"
-                    )
-                  : this.hass.localize(
-                      "ui.panel.lovelace.cards.energy.energy_compare.compare_previous_period"
-                    )})
-              </button>`,
-          }
-        )}
+                : ""}</b
+            >
+            <button class="link" @click=${this._changeCompareMode}>
+              (${this._compareMode === CompareMode.PREVIOUS
+                ? this.hass.localize(
+                    "ui.panel.energy.compare.compare_previous_year"
+                  )
+                : this.hass.localize(
+                    "ui.panel.energy.compare.compare_previous_period"
+                  )})
+            </button>`,
+        })}
       </ha-alert>
     `;
   }

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

@@ -61,6 +61,8 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
 
   @state() private _calendars: Calendar[] = [];
 
+  @state() private _eventDisplay = "list-item";
+
   @state() private _narrow = false;
 
   @state() private _error?: string = undefined;
@@ -142,6 +144,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
           .hass=${this.hass}
           .views=${views}
           .initialView=${this._config.initial_view!}
+          .eventDisplay=${this._eventDisplay}
           .error=${this._error}
           @view-changed=${this._handleViewChanged}
         ></ha-full-calendar>
@@ -171,6 +174,8 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
   }
 
   private _handleViewChanged(ev: HASSDomEvent<CalendarViewChanged>): void {
+    this._eventDisplay =
+      ev.detail.view === "dayGridMonth" ? "list-item" : "auto";
     this._startDate = ev.detail.start;
     this._endDate = ev.detail.end;
     this._fetchCalendarEvents();

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

@@ -2,16 +2,16 @@ import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
+import type { MediaQueriesListener } from "../../../common/dom/media_query";
 import "../../../components/ha-svg-icon";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import type { HomeAssistant } from "../../../types";
-import {
-  ConditionalListenerMixin,
-  setupMediaQueryListeners,
-} from "../../../mixins/conditional-listener-mixin";
 import { migrateLayoutToGridOptions } from "../common/compute-card-grid-size";
 import { computeCardSize } from "../common/compute-card-size";
-import { checkConditionsMet } from "../common/validate-condition";
+import {
+  attachConditionMediaQueriesListeners,
+  checkConditionsMet,
+} from "../common/validate-condition";
 import { tryCreateCardElement } from "../create-element/create-card-element";
 import { createErrorCardElement } from "../create-element/create-element-base";
 import type { LovelaceCard, LovelaceGridOptions } from "../types";
@@ -24,7 +24,7 @@ declare global {
 }
 
 @customElement("hui-card")
-export class HuiCard extends ConditionalListenerMixin(ReactiveElement) {
+export class HuiCard extends ReactiveElement {
   @property({ type: Boolean }) public preview = false;
 
   @property({ attribute: false }) public config?: LovelaceCardConfig;
@@ -44,16 +44,20 @@ export class HuiCard extends ConditionalListenerMixin(ReactiveElement) {
 
   private _element?: LovelaceCard;
 
+  private _listeners: MediaQueriesListener[] = [];
+
   protected createRenderRoot() {
     return this;
   }
 
   public disconnectedCallback() {
     super.disconnectedCallback();
+    this._clearMediaQueries();
   }
 
   public connectedCallback() {
     super.connectedCallback();
+    this._listenMediaQueries();
     this._updateVisibility();
   }
 
@@ -247,17 +251,26 @@ export class HuiCard extends ConditionalListenerMixin(ReactiveElement) {
     }
   }
 
-  protected setupConditionalListeners() {
-    if (!this.config?.visibility || !this.hass) {
+  private _clearMediaQueries() {
+    this._listeners.forEach((unsub) => unsub());
+    this._listeners = [];
+  }
+
+  private _listenMediaQueries() {
+    this._clearMediaQueries();
+    if (!this.config?.visibility) {
       return;
     }
+    const conditions = this.config.visibility;
+    const hasOnlyMediaQuery =
+      conditions.length === 1 &&
+      conditions[0].condition === "screen" &&
+      !!conditions[0].media_query;
 
-    setupMediaQueryListeners(
+    this._listeners = attachConditionMediaQueriesListeners(
       this.config.visibility,
-      this.hass,
-      (unsub) => this.addConditionalListener(unsub),
-      (conditionsMet) => {
-        this._updateVisibility(conditionsMet);
+      (matches) => {
+        this._updateVisibility(hasOnlyMediaQuery && matches);
       }
     );
   }

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

@@ -1,6 +1,5 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
@@ -98,10 +97,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
       : `${sandbox_user_params} ${IFRAME_SANDBOX}`;
 
     return html`
-      <ha-card
-        class=${classMap({ "hide-background": this._config.hide_background })}
-        .header=${this._config.title}
-      >
+      <ha-card .header=${this._config.title}>
         <div
           id="root"
           style=${styleMap({
@@ -137,12 +133,6 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
       flex-direction: column;
     }
 
-    ha-card.hide-background {
-      background: transparent;
-      box-shadow: none;
-      border: none;
-    }
-
     #root {
       width: 100%;
       height: 100%;

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

@@ -64,8 +64,6 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
 
   @state() private _targetPickerValue: HassServiceTarget = {};
 
-  @state() private _stateFilter?: string[];
-
   public getCardSize(): number {
     return 9 + (this._config?.title ? 1 : 0);
   }
@@ -131,8 +129,6 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
     };
 
     this._targetPickerValue = target;
-
-    this._stateFilter = ensureArray(config.state_filter);
   }
 
   private _getEntityIds(): string[] | undefined {
@@ -213,7 +209,6 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
             .hass=${this.hass}
             .time=${this._time}
             .entityIds=${this._getEntityIds()}
-            .stateFilter=${this._stateFilter}
             narrow
             relative-time
             virtualize

src/panels/lovelace/cards/types.ts

@@ -323,7 +323,6 @@ export interface IframeCardConfig extends LovelaceCardConfig {
   title?: string;
   allow?: string;
   url: string;
-  hide_background?: boolean;
 }
 
 export interface LightCardConfig extends LovelaceCardConfig {
@@ -346,7 +345,6 @@ export interface LogbookCardConfig extends LovelaceCardConfig {
   title?: string;
   hours_to_show?: number;
   theme?: string;
-  state_filter?: string[];
 }
 
 export interface MapEntityConfig extends EntityConfig {

src/panels/lovelace/common/handle-action.ts

@@ -67,7 +67,7 @@ export const handleAction = async (
         await hass.loadBackendTranslation("title");
         const localize = await hass.loadBackendTranslation("services");
         serviceName = `${domainToName(localize, domain)}: ${
-          localize(`component.${domain}.services.${service}.name`) ||
+          localize(`component.${domain}.services.${serviceName}.name`) ||
           serviceDomains[domain][service].name ||
           service
         }`;

src/panels/lovelace/common/validate-condition.ts

@@ -1,4 +1,6 @@
 import { ensureArray } from "../../../common/array/ensure-array";
+import type { MediaQueriesListener } from "../../../common/dom/media_query";
+import { listenMediaQuery } from "../../../common/dom/media_query";
 
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import { UNKNOWN } from "../../../data/entity";
@@ -360,3 +362,31 @@ export function addEntityToCondition(
   }
   return condition;
 }
+
+export function extractMediaQueries(conditions: Condition[]): string[] {
+  return conditions.reduce<string[]>((array, c) => {
+    if ("conditions" in c && c.conditions) {
+      array.push(...extractMediaQueries(c.conditions));
+    }
+    if (c.condition === "screen" && c.media_query) {
+      array.push(c.media_query);
+    }
+    return array;
+  }, []);
+}
+
+export function attachConditionMediaQueriesListeners(
+  conditions: Condition[],
+  onChange: (visibility: boolean) => void
+): MediaQueriesListener[] {
+  const mediaQueries = extractMediaQueries(conditions);
+
+  const listeners = mediaQueries.map((query) => {
+    const listener = listenMediaQuery(query, (matches) => {
+      onChange(matches);
+    });
+    return listener;
+  });
+
+  return listeners;
+}

src/panels/lovelace/components/hui-conditional-base.ts

@@ -1,16 +1,16 @@
 import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import type { MediaQueriesListener } from "../../../common/dom/media_query";
+import { deepEqual } from "../../../common/util/deep-equal";
 import type { HomeAssistant } from "../../../types";
-import {
-  ConditionalListenerMixin,
-  setupMediaQueryListeners,
-} from "../../../mixins/conditional-listener-mixin";
 import type { HuiCard } from "../cards/hui-card";
 import type { ConditionalCardConfig } from "../cards/types";
 import type { Condition } from "../common/validate-condition";
 import {
+  attachConditionMediaQueriesListeners,
   checkConditionsMet,
+  extractMediaQueries,
   validateConditionalConfig,
 } from "../common/validate-condition";
 import type { ConditionalRowConfig, LovelaceRow } from "../entity-rows/types";
@@ -22,9 +22,7 @@ declare global {
 }
 
 @customElement("hui-conditional-base")
-export class HuiConditionalBase extends ConditionalListenerMixin(
-  ReactiveElement
-) {
+export class HuiConditionalBase extends ReactiveElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ type: Boolean }) public preview = false;
@@ -33,6 +31,10 @@ export class HuiConditionalBase extends ConditionalListenerMixin(
 
   protected _element?: HuiCard | LovelaceRow;
 
+  private _listeners: MediaQueriesListener[] = [];
+
+  private _mediaQueries: string[] = [];
+
   protected createRenderRoot() {
     return this;
   }
@@ -61,14 +63,21 @@ export class HuiConditionalBase extends ConditionalListenerMixin(
 
   public disconnectedCallback() {
     super.disconnectedCallback();
+    this._clearMediaQueries();
   }
 
   public connectedCallback() {
     super.connectedCallback();
+    this._listenMediaQueries();
     this._updateVisibility();
   }
 
-  protected setupConditionalListeners() {
+  private _clearMediaQueries() {
+    this._listeners.forEach((unsub) => unsub());
+    this._listeners = [];
+  }
+
+  private _listenMediaQueries() {
     if (!this._config || !this.hass) {
       return;
     }
@@ -76,13 +85,27 @@ export class HuiConditionalBase extends ConditionalListenerMixin(
     const supportedConditions = this._config.conditions.filter(
       (c) => "condition" in c
     ) as Condition[];
+    const mediaQueries = extractMediaQueries(supportedConditions);
 
-    setupMediaQueryListeners(
+    if (deepEqual(mediaQueries, this._mediaQueries)) return;
+
+    this._clearMediaQueries();
+
+    const conditions = this._config.conditions;
+    const hasOnlyMediaQuery =
+      conditions.length === 1 &&
+      "condition" in conditions[0] &&
+      conditions[0].condition === "screen" &&
+      !!conditions[0].media_query;
+
+    this._listeners = attachConditionMediaQueriesListeners(
       supportedConditions,
-      this.hass,
-      (unsub) => this.addConditionalListener(unsub),
-      (conditionsMet) => {
-        this.setVisibility(conditionsMet);
+      (matches) => {
+        if (hasOnlyMediaQuery) {
+          this.setVisibility(matches);
+          return;
+        }
+        this._updateVisibility();
       }
     );
   }
@@ -96,8 +119,7 @@ export class HuiConditionalBase extends ConditionalListenerMixin(
       changed.has("hass") ||
       changed.has("preview")
     ) {
-      this.clearConditionalListeners();
-      this.setupConditionalListeners();
+      this._listenMediaQueries();
       this._updateVisibility();
     }
   }

src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts

@@ -16,7 +16,6 @@ const cardConfigStruct = assign(
     url: optional(string()),
     aspect_ratio: optional(string()),
     allow_open_top_navigation: optional(boolean()),
-    hide_background: optional(boolean()),
   })
 );
 
@@ -30,7 +29,6 @@ const SCHEMA = [
       { name: "aspect_ratio", selector: { text: {} } },
     ],
   },
-  { name: "hide_background", selector: { boolean: {} } },
 ] as const;
 
 @customElement("hui-iframe-card-editor")
@@ -58,7 +56,6 @@ export class HuiIframeCardEditor
         .data=${this._config}
         .schema=${SCHEMA}
         .computeLabel=${this._computeLabelCallback}
-        .computeHelper=${this._computeHelperCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
     `;
@@ -68,29 +65,8 @@ export class HuiIframeCardEditor
     fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
-    switch (schema.name) {
-      case "hide_background":
-        return this.hass!.localize(
-          "ui.panel.lovelace.editor.card.iframe.hide_background"
-        );
-      default:
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.generic.${schema.name}`
-        );
-    }
-  };
-
-  private _computeHelperCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
-    switch (schema.name) {
-      case "hide_background":
-        return this.hass!.localize(
-          "ui.panel.lovelace.editor.card.iframe.hide_background_helper"
-        );
-      default:
-        return "";
-    }
-  };
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) =>
+    this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
 }
 
 declare global {

src/panels/lovelace/editor/config-elements/hui-logbook-card-editor.ts

@@ -1,7 +1,6 @@
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import {
   array,
   assert,
@@ -19,7 +18,6 @@ import "../../../../components/ha-target-picker";
 import type { HaEntityPickerEntityFilterFunc } from "../../../../data/entity";
 import { filterLogbookCompatibleEntities } from "../../../../data/logbook";
 import { targetStruct } from "../../../../data/script";
-import { resolveEntityIDs } from "../../../../data/selector";
 import { getSensorNumericDeviceClasses } from "../../../../data/sensor";
 import type { HomeAssistant } from "../../../../types";
 import { DEFAULT_HOURS_TO_SHOW } from "../../cards/hui-logbook-card";
@@ -35,7 +33,6 @@ const cardConfigStruct = assign(
     hours_to_show: optional(number()),
     theme: optional(string()),
     target: optional(targetStruct),
-    state_filter: optional(array(string())),
   })
 );
 
@@ -53,13 +50,6 @@ const SCHEMA = [
       },
     ],
   },
-  {
-    name: "state_filter",
-    context: {
-      filter_entity: "context_entities",
-    },
-    selector: { state: { multiple: true } },
-  },
 ] as const;
 
 @customElement("hui-logbook-card-editor")
@@ -116,13 +106,7 @@ export class HuiLogbookCardEditor
     return html`
       <ha-form
         .hass=${this.hass}
-        .data=${this._data(
-          this._config,
-          this._targetPicker,
-          this.hass.entities,
-          this.hass.devices,
-          this.hass.areas
-        )}
+        .data=${this._config}
         .schema=${SCHEMA}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
@@ -137,25 +121,6 @@ export class HuiLogbookCardEditor
     `;
   }
 
-  private _data = memoizeOne(
-    (
-      config: LogbookCardConfig,
-      target: HassServiceTarget,
-      entities: HomeAssistant["entities"],
-      devices: HomeAssistant["devices"],
-      areas: HomeAssistant["areas"]
-    ) => ({
-      ...config,
-      context_entities: resolveEntityIDs(
-        this.hass!,
-        target,
-        entities,
-        devices,
-        areas
-      ),
-    })
-  );
-
   private _filterFunc: HaEntityPickerEntityFilterFunc = (entity) =>
     filterLogbookCompatibleEntities(entity, this._sensorNumericDeviceClasses);
 
@@ -165,9 +130,7 @@ export class HuiLogbookCardEditor
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    const newConfig = { ...ev.detail.value };
-    delete newConfig.context_entities;
-    fireEvent(this, "config-changed", { config: newConfig });
+    fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
   private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
@@ -178,10 +141,6 @@ export class HuiLogbookCardEditor
         )} (${this.hass!.localize(
           "ui.panel.lovelace.editor.card.config.optional"
         )})`;
-      case "state_filter":
-        return this.hass!.localize(
-          "ui.panel.lovelace.editor.card.logbook.state_filter"
-        );
       default:
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.generic.${schema.name}`

src/panels/lovelace/heading-badges/hui-heading-badge.ts

@@ -2,13 +2,13 @@ import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
+import type { MediaQueriesListener } from "../../../common/dom/media_query";
 import "../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../types";
 import {
-  ConditionalListenerMixin,
-  setupMediaQueryListeners,
-} from "../../../mixins/conditional-listener-mixin";
-import { checkConditionsMet } from "../common/validate-condition";
+  attachConditionMediaQueriesListeners,
+  checkConditionsMet,
+} from "../common/validate-condition";
 import { createHeadingBadgeElement } from "../create-element/create-heading-badge-element";
 import type { LovelaceHeadingBadge } from "../types";
 import type { LovelaceHeadingBadgeConfig } from "./types";
@@ -21,7 +21,7 @@ declare global {
 }
 
 @customElement("hui-heading-badge")
-export class HuiHeadingBadge extends ConditionalListenerMixin(ReactiveElement) {
+export class HuiHeadingBadge extends ReactiveElement {
   @property({ type: Boolean }) public preview = false;
 
   @property({ attribute: false }) public config?: LovelaceHeadingBadgeConfig;
@@ -39,16 +39,20 @@ export class HuiHeadingBadge extends ConditionalListenerMixin(ReactiveElement) {
 
   private _element?: LovelaceHeadingBadge;
 
+  private _listeners: MediaQueriesListener[] = [];
+
   protected createRenderRoot() {
     return this;
   }
 
   public disconnectedCallback() {
     super.disconnectedCallback();
+    this._clearMediaQueries();
   }
 
   public connectedCallback() {
     super.connectedCallback();
+    this._listenMediaQueries();
     this._updateVisibility();
   }
 
@@ -133,17 +137,26 @@ export class HuiHeadingBadge extends ConditionalListenerMixin(ReactiveElement) {
     }
   }
 
-  protected setupConditionalListeners() {
-    if (!this.config?.visibility || !this.hass) {
+  private _clearMediaQueries() {
+    this._listeners.forEach((unsub) => unsub());
+    this._listeners = [];
+  }
+
+  private _listenMediaQueries() {
+    this._clearMediaQueries();
+    if (!this.config?.visibility) {
       return;
     }
+    const conditions = this.config.visibility;
+    const hasOnlyMediaQuery =
+      conditions.length === 1 &&
+      conditions[0].condition === "screen" &&
+      !!conditions[0].media_query;
 
-    setupMediaQueryListeners(
+    this._listeners = attachConditionMediaQueriesListeners(
       this.config.visibility,
-      this.hass,
-      (unsub) => this.addConditionalListener(unsub),
-      (conditionsMet) => {
-        this._updateVisibility(conditionsMet);
+      (matches) => {
+        this._updateVisibility(hasOnlyMediaQuery && matches);
       }
     );
   }

src/panels/lovelace/sections/hui-section.ts

@@ -4,6 +4,7 @@ import { ReactiveElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { storage } from "../../../common/decorators/storage";
 import { fireEvent } from "../../../common/dom/fire_event";
+import type { MediaQueriesListener } from "../../../common/dom/media_query";
 import "../../../components/ha-svg-icon";
 import type { LovelaceSectionElement } from "../../../data/lovelace";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
@@ -13,13 +14,12 @@ import type {
 } from "../../../data/lovelace/config/section";
 import { isStrategySection } from "../../../data/lovelace/config/section";
 import type { HomeAssistant } from "../../../types";
-import {
-  ConditionalListenerMixin,
-  setupMediaQueryListeners,
-} from "../../../mixins/conditional-listener-mixin";
 import "../cards/hui-card";
 import type { HuiCard } from "../cards/hui-card";
-import { checkConditionsMet } from "../common/validate-condition";
+import {
+  attachConditionMediaQueriesListeners,
+  checkConditionsMet,
+} from "../common/validate-condition";
 import { createSectionElement } from "../create-element/create-section-element";
 import { showCreateCardDialog } from "../editor/card-editor/show-create-card-dialog";
 import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
@@ -37,7 +37,7 @@ declare global {
 }
 
 @customElement("hui-section")
-export class HuiSection extends ConditionalListenerMixin(ReactiveElement) {
+export class HuiSection extends ReactiveElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public config!: LovelaceSectionRawConfig;
@@ -59,6 +59,8 @@ export class HuiSection extends ConditionalListenerMixin(ReactiveElement) {
 
   private _layoutElement?: LovelaceSectionElement;
 
+  private _listeners: MediaQueriesListener[] = [];
+
   private _config: LovelaceSectionConfig | undefined;
 
   @storage({
@@ -112,10 +114,14 @@ export class HuiSection extends ConditionalListenerMixin(ReactiveElement) {
 
   public disconnectedCallback() {
     super.disconnectedCallback();
+    this._clearMediaQueries();
   }
 
   public connectedCallback() {
     super.connectedCallback();
+    if (this.hasUpdated) {
+      this._listenMediaQueries();
+    }
     this._updateElement();
   }
 
@@ -152,17 +158,26 @@ export class HuiSection extends ConditionalListenerMixin(ReactiveElement) {
     }
   }
 
-  protected setupConditionalListeners() {
-    if (!this._config?.visibility || !this.hass) {
+  private _clearMediaQueries() {
+    this._listeners.forEach((unsub) => unsub());
+    this._listeners = [];
+  }
+
+  private _listenMediaQueries() {
+    this._clearMediaQueries();
+    if (!this._config?.visibility) {
       return;
     }
+    const conditions = this._config.visibility;
+    const hasOnlyMediaQuery =
+      conditions.length === 1 &&
+      conditions[0].condition === "screen" &&
+      conditions[0].media_query != null;
 
-    setupMediaQueryListeners(
+    this._listeners = attachConditionMediaQueriesListeners(
       this._config.visibility,
-      this.hass,
-      (unsub) => this.addConditionalListener(unsub),
-      (conditionsMet) => {
-        this._updateElement(conditionsMet);
+      (matches) => {
+        this._updateElement(hasOnlyMediaQuery && matches);
       }
     );
   }
@@ -184,6 +199,9 @@ export class HuiSection extends ConditionalListenerMixin(ReactiveElement) {
       type: sectionConfig.type || DEFAULT_SECTION_LAYOUT,
     };
     this._config = sectionConfig;
+    if (this.isConnected) {
+      this._listenMediaQueries();
+    }
 
     // Create a new layout element if necessary.
     let addLayoutElement = false;

src/translations/en.json

@@ -1434,7 +1434,6 @@
         "back_to_info": "Back to info",
         "info": "Information",
         "related": "Related",
-        "add_entity_to": "Add to",
         "history": "History",
         "aggregate": "5-minute aggregated",
         "logbook": "Activity",
@@ -1451,10 +1450,6 @@
           "last_action": "Last action",
           "last_triggered": "Last triggered"
         },
-        "add_to": {
-          "no_actions": "No actions available",
-          "action_failed": "Failed to perform the action {error}"
-        },
         "sun": {
           "azimuth": "Azimuth",
           "elevation": "Elevation",
@@ -3076,7 +3071,6 @@
             "remove_co2_signal": "Remove Electricity Maps integration",
             "add_co2_signal": "Add Electricity Maps integration",
             "flow_dialog": {
-              "cost_entity_helper": "Any sensor with a unit of `{currency}/(valid energy unit)` (e.g. `{currency}/Wh` or `{currency}/kWh`) may be used and will be automatically converted.",
               "from": {
                 "header": "Configure grid consumption",
                 "paragraph": "Grid consumption is the energy that flows from the energy grid to your home.",
@@ -3637,36 +3631,6 @@
             "older_run": "Older run",
             "newer_run": "Newer run",
             "start_debug_run": "Start debug run",
-            "error": {
-              "code": "Error code",
-              "fetch_events": "Failed to fetch events",
-              "fetch_runs": "Failed to fetch pipeline runs",
-              "playing_audio": "Error playing audio",
-              "showing_run": "Error showing run",
-              "title": "Error"
-            },
-            "no_events": "There were no events in this run.",
-            "play_audio": "Play audio",
-            "raw": "Raw",
-            "run": "Run",
-            "stages": {
-              "engine": "Engine",
-              "input": "Input",
-              "language": "Language",
-              "model": "Model",
-              "natural_language_processing": "Natural language processing",
-              "output": "Output",
-              "pipeline": "Pipeline",
-              "prefer_local": "Prefer handling locally",
-              "processed_locally": "Processed locally",
-              "response_type": "Response type",
-              "speech_to_text": "Speech-to-text",
-              "text_to_speech": "Text-to-speech",
-              "timestamp": "Timestamp",
-              "voice": "Voice",
-              "wake_word": "Wake word"
-            },
-            "stop_audio": "Stop audio",
             "pipeline": {
               "header": "Assist pipeline",
               "run_text_pipeline": "Run text pipeline",
@@ -7142,11 +7106,6 @@
               "card_indicates_energy_used": "This card indicates how much of the electricity consumed by your home was generated using non-fossil fuels like solar, wind, and nuclear. The higher, the better!",
               "low_carbon_energy_consumed": "Low-carbon electricity consumed",
               "low_carbon_energy_not_calculated": "Consumed low-carbon electricity couldn't be calculated"
-            },
-            "energy_compare": {
-              "info": "You are comparing the period {start} with the period {end}",
-              "compare_previous_year": "Compare previous year",
-              "compare_previous_period": "Compare previous period"
             }
           },
           "heading": {
@@ -7710,8 +7669,7 @@
             },
             "logbook": {
               "name": "Activity",
-              "description": "The Activity card shows a list of events for entities.",
-              "state_filter": "State filter"
+              "description": "The Activity card shows a list of events for entities."
             },
             "history-graph": {
               "name": "History graph",
@@ -7789,9 +7747,7 @@
             },
             "iframe": {
               "name": "Webpage",
-              "description": "The Webpage card allows you to embed your favorite webpage right into Home Assistant.",
-              "hide_background": "Hide background",
-              "hide_background_helper": "Useful for pages which allow a transparent background."
+              "description": "The Webpage card allows you to embed your favorite webpage right into Home Assistant."
             },
             "light": {
               "name": "Light",
@@ -9397,6 +9353,11 @@
       "energy": {
         "download_data": "[%key:ui::panel::history::download_data%]",
         "configure": "[%key:ui::dialogs::quick-bar::commands::navigation::energy%]",
+        "compare": {
+          "info": "You are comparing the period {start} with the period {end}",
+          "compare_previous_year": "Compare previous year",
+          "compare_previous_period": "Compare previous period"
+        },
         "setup": {
           "next": "Next",
           "back": "Back",