Add a frontend skill for URL query params

Declare Babel plugins the build loads by name (#55110 )
Co-authored-by: Claude Opus 5.5 <[email protected]>
2026-10-20 21:01:30 +00:00 · 2026-10-20 15:31:53 +01:00 · 2026-10-20 14:18:09 +01:00 · 2026-10-20 14:17:40 +01:00 · 2026-10-20 14:16:11 +01:00 · 2026-10-20 12:06:22 +00:00
29 changed files with 578 additions and 81 deletions
@@ -0,0 +1,88 @@
+---
+name: ha-frontend-query-params
+description: Home Assistant frontend URL query param patterns. Use when keeping page state such as filters, search, sorting or grouping in the URL, adding or reading typed query params, using QueryParamsController or the data table's sync-url and column urlName, building in-app links with a query string, or adding params to My Home Assistant redirects.
+---
+
+# HA Frontend Query Params
+
+Use this skill when implementing or reviewing state kept in the URL's query string, or links that set it. Cross-load `ha-frontend-lit` for the controller and lifecycle work, `ha-frontend-testing` for running tests, and `ha-frontend-review` when reviewing.
+
+## Typed Params
+
+`src/common/url/query-params.ts` turns a typed config into values and back:
+
+- `QueryParamConfig` lists keys by type: `string`, `list` (one comma-separated param, `?label=a,b`), `date` (ISO string) and `boolean` (`{ key, trueValue }`, true only when the param equals `trueValue`).
+- `QueryParamValues<typeof config>` is the matching partial values type.
+- `decodeQueryParams(source, config)` reads a `SearchParamsSource` (a `URLSearchParams`, a plain record or a query string). Empty values are skipped.
+- `createQueryString(values, config)` writes the values, leaving out empty strings, empty lists and false booleans.
+- `updateQueryString(current, values, config)` replaces only the config's params in an existing query string and keeps every other param exactly as written.
+- `hasQueryParams(source, config)` tells whether a URL has any of the config's params, which is how a page knows whether a link asked for anything.
+- `serviceTargetFromQueryParams` and `queryParamsFromServiceTarget` map `HassServiceTarget` keys to list params.
+
+Give each feature its own `*-query-params.ts` in `src/common/url/` holding its config (`as const satisfies QueryParamConfig`), its values type, and the helpers that turn params into page state and back. Follow the existing ones: `data-table-query-params.ts`, `marketplace-query-params.ts`, `history-logbook-query-params.ts` and `todo-query-params.ts`. Helpers in `src/data/` that build outside links use a local config the same way, as `src/data/integration.ts` and `src/data/system_log_report.ts` do. In new code, prefer these over hand-built `URLSearchParams`, string concatenation or `extractSearchParam` reads from `src/common/url/search-params.ts`.
+
+## QueryParamsController
+
+`src/common/controllers/query-params-controller.ts` keeps part of a page's state in the URL. Construct it with the host, the feature's config and options:
+
+- `enabled()`: whether the host syncs right now. It can change, as on the Marketplace dashboard, which turns it off on the Discover tab.
+- `navigated()`: called when the page's URL changes while the host is connected (`location-changed` or `popstate`), and when the host reconnects after its first update. Read the URL with `searchParams()`, apply it, then `write()` the state back.
+
+Methods:
+
+- `searchParams()` returns the current params, or `undefined` when the controller is disabled or the URL is on another path.
+- `write(values, debounced?)` updates only the config's params with `replaceCurrentUrl`, so it replaces the current history entry. Pass `debounced` for values that change while typing; the write lands 300 ms after the last one and any later write replaces it.
+- `flush()` writes a pending debounced write now. The data table calls it when the search box loses focus. Call it before anything that adds its own history entry, such as a dialog.
+
+The controller binds to `currentPath()` when the host connects and does nothing while the URL is on another path. Navigating away drops a pending write. When a page is reached through a router `defaultPage` (such as `/marketplace` landing on `/marketplace/browse`), check that a link to the bare path still syncs, since the redirect may land after the host connects.
+
+Read the URL yourself on the first render, after the initial state is set (in `willUpdate` before `hasUpdated`, or `firstUpdated`), and leave later navigations to `navigated()`. `ha-marketplace-dashboard.ts` and `lorawan-devices.ts` show both. When moving a page to the controller, remove its own `location-changed` and `popstate` listeners and any search kept in history state, since the controller replaces them.
+
+When a router reuses one element for different items, such as one app's tab after another's, key it on the item so the controller binds again to the new path.
+
+## URL Rules
+
+- Writes replace the current history entry, so Back leaves the page instead of undoing each change. Push a new entry only for a deliberate navigation, such as picking another log provider.
+- Debounce search writes. Write sort, group and filter changes straight away.
+- Leave empty and default values out of the URL, such as an empty search or ascending direction.
+- A param in the URL wins over stored preferences. A link with none of the page's params keeps what the user picked before; `hasQueryParams` makes that check.
+- A link with any of the page's params replaces the search and every filter, since a filter left over from before would hide part of what the link shows. Store what the link applied as the user's choice.
+- The URL is the whole state. Don't add filters while applying a link; a link that needs one, such as showing disabled devices, says so in its params (`status=disabled`).
+- A link to a page that is already open must apply the new URL. Handle `navigated()`, not only the first render. The router often keeps a page alive, so this is the common case, not an edge case.
+- Use one comma-separated param for several values (`?status=new,installed`), which `list` params do.
+- Use the names other pages already use for the same thing: `search`, `sort`, `direction` and `group` for the table, and `floor`, `area`, `device`, `label`, `config_entry`, `sub_entry` and `assistants` for the shared filters.
+- Keep existing param names so existing links and My Home Assistant links keep working. When renaming, read the old name as well for about six months, with a code comment naming the release it can be removed in, and write only the new name. Keep the old name in the config, use it only as a fallback when reading, and leave it out of the values you write, so the next write removes it from the URL.
+- Pages opt in. Some use params for other things, such as `?domain=` starting the add integration flow on the integrations dashboard, so check what a page already reads before syncing it.
+- Collapsed groups, column order and hidden columns stay in storage (`@storage`), not the URL.
+- Link to a page by its main path, not an alias, so a link to an open page lands on the same path and applies.
+
+## Data Tables
+
+`hass-tabs-subpage-data-table` with the `sync-url` attribute keeps `search`, `sort`, `direction` and `group` in the URL through `dataTableQueryParamsFromState` and `dataTableQueryStateFromUrl`. A linked search replaces the current one, and sorting or grouping a link leaves out keeps what was picked before. The table fires `search-changed`, `sorting-changed` and `grouping-changed` when a link changes them, so the page can keep its stored values in step.
+
+- Give sortable and groupable columns a short public `urlName` (for example `type`, not `translated_category`). Sorting falls back to the column id without one; grouping is only written for columns that have one, so internal ids don't end up in links.
+- When a column definition is shared between pages, set its `urlName` where the shared column is defined, so every page uses the same name.
+- The page owns its filters. Give it a filter config in its `*-query-params.ts`, a helper that turns filter values into params, and one that turns a link back into the search and filter values. The link helper returns `undefined` when the URL has none of the filter params and none of the table's (`dataTableQueryParamConfig`), so stored choices stay. Use a second controller on the page for them, as `ha-marketplace-dashboard.ts` and `lorawan-devices.ts` do. `browseUrl` and `browseLinkFromUrl` in `src/panels/marketplace/dashboards/dashboard-repositories.ts` show the pair.
+- A memoized filter that also reads async state (anything loaded after the page connects) must take that state as a memoize argument, or a linked filter shows stale results until something else changes.
+- A filter component that looks up related items asynchronously should drop a lookup whose value has since changed, or two links landing within one lookup apply the older one.
+
+## Coverage Check
+
+Before calling a page done:
+
+1. List every filter, sortable column, groupable column, the search box and any view toggle (such as a tab, raw view or provider). Confirm each one is written to the URL and read back from a link, both on first render and on a page that is already open.
+2. Search the codebase for in-app links and `navigate()` calls into the page with a query string, and move them to the current param names and the page's main path. `lorawan-connections.ts` and `lorawan-overview.ts` link into `lorawan-devices.ts` this way.
+
+## My Home Assistant Links
+
+When a page gains params, add them to its redirect in `getMyRedirects()` in `src/panels/my/ha-panel-my.ts`:
+
+- List them under `params` as `"string?"`, matching what the page reads. For a data table page that includes `search`, `sort`, `direction` and `group` as well as its filters. Keep the list in a const next to the others, such as `marketplaceTableParams`, which several redirects share.
+- Point the redirect at the page's main path, the one the page's controller binds to.
+- Don't add legacy param names.
+- Add the same params to the redirect's entry in `redirect.json` in `home-assistant/my.home-assistant.io`, in a separate pull request that links the frontend pull request. Merge it only once the frontend pull request is in `dev`.
+- In the frontend pull request, link the My Home Assistant pull request under "Additional information": `- Link to My Home Assistant pull request: home-assistant/my.home-assistant.io#<n>`.
+
+## Tests
+
+Follow `test/common/url/query-params.test.ts`, `test/common/url/data-table-query-params.test.ts` and `test/common/controllers/query-params-controller.test.ts`. For a feature's params file, cover the encode and decode round trip, defaults being left out, and legacy names still being read. Test the helpers, not the page rendering, and only where the logic could break without anyone noticing.
@@ -46,6 +46,7 @@ Detailed guidance lives in `.agents/skills/<name>/SKILL.md`. Load every matching
 - `ha-frontend-lit`: reactive fields, DOM queries, lifecycle behavior, and render-derived state.
 - `ha-frontend-styling`: theme variables, spacing tokens, responsive layout, RTL, and view transitions.
 - `ha-frontend-testing`: lint, typecheck, Vitest, Playwright e2e dev servers, and benchmarks.
+- `ha-frontend-query-params`: typed URL query params, `QueryParamsController`, data table URL sync, in-app links, and My Home Assistant redirect params.
 - `ha-frontend-user-facing-text`: localization, terminology, sentence case, and Home Assistant text style.
 - `ha-frontend-review`: PR template use, existing review feedback, review checklist, recurring issues, and UI/UX evidence including gallery specifications.
 - `ha-frontend-ux-readiness`: UI/UX routing that complements frontend review for new user experiences.
@@ -2,10 +2,14 @@

 import fs from "fs-extra";
 import gulp from "gulp";
+import { createHash } from "node:crypto";
+import { createRequire } from "node:module";
 import path from "path";
 import paths from "../paths.cjs";
 import { ensureMapAssets, mapAssetsDir } from "./map-assets.js";

+const require = createRequire(import.meta.url);
+
 const npmPath = (...parts) =>
  path.resolve(paths.root_dir, "node_modules", ...parts);
 const polyPath = (...parts) => path.resolve(paths.root_dir, ...parts);
@@ -83,9 +87,24 @@ async function copyMapPanel(staticDir) {

 function copyZXingWasm(staticDir) {
  const staticPath = genStaticPath(staticDir);
-  copyFileDir(
-    npmPath("zxing-wasm/dist/reader/zxing_reader.wasm"),
-    staticPath("js")
+  // Resolve through barcode-detector, the wasm must match the zxing-wasm JS it bundles
+  const zxingWasm = createRequire(require.resolve("barcode-detector")).resolve(
+    "zxing-wasm/reader/zxing_reader.wasm"
+  );
+  const {
+    ZXING_WASM_SHA256,
+    ZXING_WASM_VERSION,
+  } = require("barcode-detector/pure");
+  const wasm = fs.readFileSync(zxingWasm);
+  if (createHash("sha256").update(wasm).digest("hex") !== ZXING_WASM_SHA256) {
+    throw new Error(
+      `${zxingWasm} does not match the zxing-wasm ${ZXING_WASM_VERSION} bundled in barcode-detector`
+    );
+  }
+  // Versioned file name, see locateFile in ha-qr-scanner
+  fs.outputFileSync(
+    staticPath("js", `zxing_reader-${ZXING_WASM_VERSION}.wasm`),
+    wasm
  );
 }

@@ -40,6 +40,21 @@ const TOOLCHAIN_PACKAGES = [
  "caniuse-lite",
 ];

+// Not direct dependencies: read the copy the package that loads them uses.
+const TOOLCHAIN_PACKAGE_PARENTS = {
+  terser: "terser-webpack-plugin",
+  "caniuse-lite": "browserslist",
+};
+
+const toolchainVersion = (pkg) => {
+  const parent = TOOLCHAIN_PACKAGE_PARENTS[pkg];
+  const lookup = parent && [
+    path.dirname(require.resolve(`${parent}/package.json`)),
+  ];
+  return require(require.resolve(`${pkg}/package.json`, { paths: lookup }))
+    .version;
+};
+
 // Our own build logic — the config, loaders and babel plugins. Their contents
 // (not their paths) go into the cache version, so a change invalidates the
 // cache the same way `buildDependencies` would, but without tying validity to
@@ -63,9 +78,7 @@ const PATCHES_DIR = path.join(paths.root_dir, "patches");
 // stays valid when reused on a different machine or checkout path.
 const cacheVersion = () => {
  const parts = [
-    ...TOOLCHAIN_PACKAGES.map(
-      (pkg) => `${pkg}@${require(`${pkg}/package.json`).version}`
-    ),
+    ...TOOLCHAIN_PACKAGES.map((pkg) => `${pkg}@${toolchainVersion(pkg)}`),
    ...CONFIG_FILES.map(
      (file) => `${path.basename(file)}:${fs.readFileSync(file, "utf8")}`
    ),
@@ -133,14 +133,15 @@
    "workbox-routing": "7.4.1",
    "workbox-strategies": "7.4.1",
    "xss": "1.0.15",
-    "zrender": "6.1.0",
-    "zxing-wasm": "3.1.5"
+    "zrender": "6.1.0"
  },
  "devDependencies": {
    "@ampproject/remapping": "2.3.0",
    "@babel/core": "8.0.7",
    "@babel/helper-compilation-targets": "8.0.7",
    "@babel/helper-define-polyfill-provider": "1.0.0",
+    "@babel/plugin-transform-class-properties": "8.0.1",
+    "@babel/plugin-transform-private-methods": "8.0.1",
    "@babel/plugin-transform-runtime": "8.0.6",
    "@babel/preset-env": "8.0.7",
    "@bundle-stats/plugin-webpack-filter": "4.22.3",
@@ -462,9 +462,6 @@ importers:
      zrender:
        specifier: 6.1.0
        version: 6.1.0
-      zxing-wasm:
-        specifier: 3.1.5
-        version: 3.1.5
    devDependencies:
      '@ampproject/remapping':
        specifier: 2.3.0
@@ -478,6 +475,12 @@ importers:
      '@babel/helper-define-polyfill-provider':
        specifier: 1.0.0
        version: 1.0.0(@babel/[email protected])
+      '@babel/plugin-transform-class-properties':
+        specifier: 8.0.1
+        version: 8.0.1(@babel/[email protected])
+      '@babel/plugin-transform-private-methods':
+        specifier: 8.0.1
+        version: 8.0.1(@babel/[email protected])
      '@babel/plugin-transform-runtime':
        specifier: 8.0.6
        version: 8.0.6(@babel/[email protected])
@@ -7836,9 +7839,6 @@ packages:
  [email protected]:
    resolution: {integrity: sha512-3lC9BJk4fR5ZJxcGjb0hVnDFOW7KpLXHIebiBmVd4FDRQZVeObztoTKxRUPxlWwSgxrMRONK0u50hBD1aTYEKg==}

-  [email protected]:
-    resolution: {integrity: sha512-jmxXvTCR/qZxMz2XwR6V+nL2BlDTD1aux7ZWSH9BV77TG9u4k0VyHba/NCCHBHJ60Wg6VV0QL/SMlJczKhJI4w==}
-
 snapshots:

  '@ampproject/[email protected]':
@@ -15838,8 +15838,3 @@ snapshots:
    dependencies:
      '@types/emscripten': 1.41.6
      type-fest: 5.10.0
-
-  [email protected]:
-    dependencies:
-      '@types/emscripten': 1.41.6
-      type-fest: 5.10.0
@@ -98,6 +98,11 @@
      "groupName": "date-fns",
      "matchPackageNames": ["date-fns", "date-fns-tz"]
    },
+    {
+      "description": "Group ECharts with zrender, which we import directly and must match the version echarts depends on",
+      "groupName": "echarts",
+      "matchPackageNames": ["echarts", "zrender"]
+    },
    {
      "description": "Group formatjs monorepo package",
      "groupName": "formatjs",
@@ -14,7 +14,6 @@ export type LocalizeKeys =
  | `ui.card.weather.attributes.${string}`
  | `ui.card.weather.cardinal_direction.${string}`
  | `ui.card.lawn_mower.actions.${string}`
-  | `ui.common.${string}`
  | `ui.components.calendar.event.rrule.${string}`
  | `ui.components.selectors.file.${string}`
  | `ui.dialogs.entity_registry.editor.${string}`
@@ -5,6 +5,7 @@ import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { consume } from "../../common/decorators/consume";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { STATES_OFF } from "../../common/const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { apiContext, formattersContext } from "../../data/context";
@@ -13,6 +14,7 @@ import { forwardHaptic } from "../../data/haptics";
 import "../ha-icon-button";
 import "../ha-switch";
 import { getToggleAction } from "../../common/entity/get_toggle_action";
+import type { LocalizeFunc } from "../../common/translations/localize";

 const isOn = (stateObj?: HassEntity) =>
  stateObj !== undefined &&
@@ -37,6 +39,10 @@ export class HaEntityToggle extends LitElement {
  @consume({ context: formattersContext, subscribe: true })
  private _formatters?: ContextType<typeof formattersContext>;

+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
  @property({ attribute: false }) public stateObj?: HassEntity;

  @property() public label?: string;
@@ -49,6 +55,14 @@ export class HaEntityToggle extends LitElement {
    }

    const name = this._formatters?.formatEntityName(this.stateObj) ?? "";
+    const turnOnLabel = this._localize(
+      "ui.components.entity.entity-toggle.turn_on",
+      { name }
+    );
+    const turnOffLabel = this._localize(
+      "ui.components.entity.entity-toggle.turn_off",
+      { name }
+    );

    if (
      this.stateObj.attributes.assumed_state ||
@@ -56,7 +70,7 @@ export class HaEntityToggle extends LitElement {
    ) {
      return html`
        <ha-icon-button
-          .label=${`Turn ${name} off`}
+          .label=${turnOffLabel}
          .path=${mdiFlashOff}
          .disabled=${this.stateObj.state === UNAVAILABLE}
          @click=${this._turnOff}
@@ -65,7 +79,7 @@ export class HaEntityToggle extends LitElement {
          }
        ></ha-icon-button>
        <ha-icon-button
-          .label=${`Turn ${name} on`}
+          .label=${turnOnLabel}
          .path=${mdiFlash}
          .disabled=${this.stateObj.state === UNAVAILABLE}
          @click=${this._turnOn}
@@ -75,7 +89,10 @@ export class HaEntityToggle extends LitElement {
    }

    return html`<ha-switch
-      aria-label=${`Toggle ${name} ${this._isOn ? "off" : "on"}`}
+      .accessibleLabel=${this._localize(
+        "ui.components.entity.entity-toggle.toggle",
+        { name }
+      )}
      .checked=${this._isOn}
      .disabled=${this.stateObj.state === UNAVAILABLE}
      @change=${this._toggleChanged}
@@ -1,3 +1,4 @@
+import { mdiUnfoldMoreHorizontal } from "@mdi/js";
 import {
  css,
  html,
@@ -13,6 +14,10 @@ import {
  state as litState,
 } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import "./ha-button";
+import "./ha-svg-icon";
+
+const LINE_TIMESTAMP = /^\d{4}-\d{2}-\d{2}[ T]\d{2}:\d{2}:\d{2}/;

 interface State {
  bold: boolean;
@@ -30,12 +35,27 @@ export class HaAnsiToHtml extends LitElement {
  @property({ type: Boolean, attribute: "wrap-disabled" }) public wrapDisabled =
    false;

+  // Lines to show before and after each line that matches the filter.
+  @property({ type: Number, attribute: "context-lines" }) public contextLines =
+    0;
+
+  // Text for the button that shows a run of hidden lines between matches.
+  @property({ attribute: false }) public expandLabel?: (
+    count: number
+  ) => string;
+
  @query("pre") private _pre?: HTMLPreElement;

  @queryAll("div") private _divs!: NodeListOf<HTMLDivElement>;

  @litState() private _filter = "";

+  // Hidden lines the user chose to show while a filter is set.
+  private _expandedLines = new WeakSet<HTMLDivElement>();
+
+  // The hidden lines each expand row shows when clicked.
+  private _expandGaps = new WeakMap<HTMLElement, HTMLDivElement[]>();
+
  protected render(): TemplateResult {
    return html`<pre class=${classMap({ wrap: !this.wrapDisabled })}></pre>`;
  }
@@ -57,6 +77,15 @@ export class HaAnsiToHtml extends LitElement {
      white-space: pre-wrap;
      overflow-wrap: break-word;
    }
+    .context {
+      color: var(--secondary-text-color);
+    }
+    .expand {
+      display: block;
+      margin: var(--ha-space-1) 0;
+      font-family: var(--ha-font-family-body);
+      white-space: normal;
+    }
    .bold {
      font-weight: var(--ha-font-weight-bold);
    }
@@ -119,8 +148,7 @@ export class HaAnsiToHtml extends LitElement {
    }

    ::highlight(search-results) {
-      background-color: var(--primary-color);
-      color: var(--text-primary-color);
+      background-color: var(--ha-color-fill-primary-normal-resting);
    }
  `;

@@ -322,12 +350,16 @@ export class HaAnsiToHtml extends LitElement {
   * @returns true if there are lines to display
   */
  filterLines(filter: string): boolean {
+    if (filter !== this._filter) {
+      this._expandedLines = new WeakSet();
+    }
    this._filter = filter;
    const lines = this._divs;
    let numberOfFoundLines = 0;
    if (!filter) {
      lines.forEach((line) => {
        line.style.display = "";
+        line.classList.remove("context");
      });
      numberOfFoundLines = lines.length;
      if (CSS.highlights) {
@@ -335,9 +367,59 @@ export class HaAnsiToHtml extends LitElement {
      }
    } else {
      const highlightRanges: Range[] = [];
-      lines.forEach((line) => {
-        if (!line.textContent?.toLowerCase().includes(filter.toLowerCase())) {
+
+      const lineList = Array.from(lines);
+
+      const matches = lineList.map(
+        (line) =>
+          line.textContent?.toLowerCase().includes(filter.toLowerCase()) ??
+          false
+      );
+
+      // A line without a timestamp continues the entry above it, such as a
+      // build's output, so a matching entry shows all of its lines.
+      let entryStart = -1;
+
+      const entryOf = lineList.map((line, lineIndex) => {
+        if (LINE_TIMESTAMP.test(line.textContent ?? "")) {
+          entryStart = lineIndex;
+        }
+
+        return entryStart === -1 ? lineIndex : entryStart;
+      });
+
+      const matchedEntries = new Set(
+        entryOf.filter((_entry, lineIndex) => matches[lineIndex])
+      );
+
+      const inMatch = entryOf.map(
+        (entry, lineIndex) =>
+          matches[lineIndex] ||
+          (this.contextLines > 0 && matchedEntries.has(entry))
+      );
+
+      // Like a diff, also show the lines around each match.
+      const visible = inMatch.map(
+        (_match, lineIndex) =>
+          this._expandedLines.has(lineList[lineIndex]) ||
+          inMatch
+            .slice(
+              Math.max(0, lineIndex - this.contextLines),
+              lineIndex + this.contextLines + 1
+            )
+            .some(Boolean)
+      );
+
+      lineList.forEach((line, lineIndex) => {
+        line.classList.toggle(
+          "context",
+          visible[lineIndex] && !inMatch[lineIndex]
+        );
+
+        if (!visible[lineIndex]) {
          line.style.display = "none";
+        } else if (!matches[lineIndex]) {
+          line.style.display = "";
        } else {
          line.style.display = "";
          numberOfFoundLines++;
@@ -367,18 +449,104 @@ export class HaAnsiToHtml extends LitElement {
      if (CSS.highlights) {
        CSS.highlights.set("search-results", new Highlight(...highlightRanges));
      }
+
+      if (this.contextLines && numberOfFoundLines) {
+        this._updateExpandButtons(lineList, visible);
+
+        return true;
+      }
    }

+    this._updateExpandButtons([], []);
+
    return !!numberOfFoundLines;
  }

+  // Filtering runs again for every new log line, so rows for unchanged gaps
+  // are kept rather than recreated, which would drop keyboard focus.
+  private _updateExpandButtons(lines: HTMLDivElement[], visible: boolean[]) {
+    const rows = new Map<Element | null, HTMLSpanElement>();
+    this._pre?.querySelectorAll(".expand").forEach((row) => {
+      if (row instanceof HTMLSpanElement) {
+        rows.set(row.nextElementSibling, row);
+      }
+    });
+
+    let hidden: HTMLDivElement[] = [];
+
+    lines.forEach((line, lineIndex) => {
+      if (!visible[lineIndex]) {
+        hidden.push(line);
+      }
+
+      if (
+        hidden.length &&
+        (visible[lineIndex] || lineIndex === lines.length - 1)
+      ) {
+        const label = this.expandLabel?.(hidden.length) ?? `${hidden.length}`;
+        let row = rows.get(hidden[0]);
+
+        if (row) {
+          rows.delete(hidden[0]);
+          const text = row.querySelector("ha-button")?.lastChild;
+
+          if (text instanceof Text && text.data !== label) {
+            text.data = label;
+          }
+        } else {
+          row = this._createExpandRow(label);
+          hidden[0].before(row);
+        }
+
+        this._expandGaps.set(row, hidden);
+        hidden = [];
+      }
+    });
+
+    rows.forEach((row) => row.remove());
+  }
+
+  private _createExpandRow(label: string): HTMLSpanElement {
+    const row = document.createElement("span");
+    row.className = "expand";
+    const button = document.createElement("ha-button");
+    button.setAttribute("appearance", "filled");
+    button.setAttribute("variant", "neutral");
+    button.setAttribute("size", "s");
+    const icon = document.createElement("ha-svg-icon");
+    icon.slot = "start";
+    icon.path = mdiUnfoldMoreHorizontal;
+    button.append(icon, label);
+    button.addEventListener("click", () => {
+      const gap = this._expandGaps.get(row) ?? [];
+      const hadFocus = row.matches(":focus-within");
+      gap.forEach((hiddenLine) => this._expandedLines.add(hiddenLine));
+      this.filterLines(this._filter);
+
+      // The row is gone once its lines show, so keep focus on the first of them.
+      if (hadFocus && gap[0]) {
+        gap[0].tabIndex = -1;
+        gap[0].focus({ preventScroll: true });
+      }
+    });
+    row.append(button);
+
+    return row;
+  }
+
  public trimLines(maxLines: number) {
-    const pre = this._pre;
-    if (!pre) {
+    const lines = this._divs;
+
+    if (lines.length <= maxLines) {
      return;
    }
-    while (pre.childElementCount > maxLines && pre.firstElementChild) {
-      pre.firstElementChild.remove();
+
+    Array.from(lines)
+      .slice(0, lines.length - maxLines)
+      .forEach((line) => line.remove());
+
+    if (this._filter) {
+      this.filterLines(this._filter);
    }
  }

@@ -44,7 +44,7 @@ export class HaIconButton extends LitElement {
      <ha-button
        appearance="plain"
        variant="neutral"
-        .ariaLabel=${this.label ?? null}
+        .accessibleLabel=${this.label ?? ""}
        .title=${this.hideTitle ? "" : (this.label ?? "")}
        aria-haspopup=${ifDefined(this.ariaHasPopup)}
        .disabled=${this.disabled}
@@ -7,7 +7,7 @@ import { customElement, property, query, state } from "lit/decorators";
 // and "qr-scanner" defaults to a suboptimal implementation if it is not available.
 // The following import makes a better implementation available that is based on a
 // WebAssembly port of ZXing:
-import { prepareZXingModule } from "barcode-detector";
+import { prepareZXingModule, ZXING_WASM_VERSION } from "barcode-detector";
 import type QrScanner from "qr-scanner";
 import { consume } from "../common/decorators/consume";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
@@ -29,7 +29,8 @@ prepareZXingModule({
  overrides: {
    locateFile: (path: string, prefix: string) => {
      if (path.endsWith(".wasm")) {
-        return "/static/js/zxing_reader.wasm";
+        // Versioned, /static is cached for a month and the glue only works with its own wasm
+        return `/static/js/zxing_reader-${ZXING_WASM_VERSION}.wasm`;
      }
      return prefix + path;
    },
@@ -126,6 +126,10 @@ export class HaInput extends WaInputMixin(LitElement) {
  @property({ type: Boolean, attribute: "inset-label" })
  public insetLabel = false;

+  /** Accessible name for the input when it has no visible label. */
+  @property({ attribute: "accessible-label" })
+  public accessibleLabel?: string;
+
  /** Sets the native input id (and label `for`) on the inner `wa-input`. */
  @property({ attribute: "input-id" })
  public inputId?: string;
@@ -276,6 +280,7 @@ export class HaInput extends WaInputMixin(LitElement) {
        .name=${this.name}
        .disabled=${this.disabled}
        .inputId=${this.inputId || "input"}
+        .accessibleLabel=${this.accessibleLabel ?? ""}
        class=${classMap({
          input: true,
          invalid: this.invalid || this._invalid,
@@ -23,6 +23,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { getShadowRootHost } from "../../common/dom/get-shadow-root-host";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import { slugify } from "../../common/string/slugify";
+import { stripDiacritics } from "../../common/string/strip-diacritics";
 import { debounce } from "../../common/util/debounce";
 import { UNAVAILABLE } from "../../data/entity/entity";
 import type {
@@ -94,6 +95,13 @@ export interface MediaPlayerItemId {

 type MediaClass = MediaPlayerItem["media_class"];

+/** Folders with at least this many items get a filter field when their source cannot search. */
+const FILTER_MIN_CHILDREN = 10;
+
+/** Case and accent insensitive, so "stefan" finds "Ștefan" and "DIGI" finds "Digi". */
+const normalizeForFilter = (value: string): string =>
+  stripDiacritics(value).toLowerCase().trim();
+
 const MANUAL_ITEM_BASE: Omit<MediaPlayerItem, "title"> = {
  can_expand: true,
  can_play: false,
@@ -144,6 +152,8 @@ export class HaMediaPlayerBrowse extends LitElement {

  @state() private _searchQuery = "";

+  @state() private _filterQuery = "";
+
  @state() private _searchResults?: MediaPlayerItem[];

  @state() private _searching = false;
@@ -233,6 +243,7 @@ export class HaMediaPlayerBrowse extends LitElement {
    this._searchQuery = "";
    this._searchResults = undefined;
    this._mediaClassFilter = [];
+    this._filterQuery = "";
    const currentId = navigateIds[navigateIds.length - 1];
    const parentId =
      navigateIds.length > 1 ? navigateIds[navigateIds.length - 2] : undefined;
@@ -447,13 +458,24 @@ export class HaMediaPlayerBrowse extends LitElement {
      });
    }

-    // Search is available on non-root pages that opt in via can_search, aside
-    // from the manual-entry and TTS pseudo-sources.
-    const showSearch =
+    // Search and filter are available on non-root pages, aside from the
+    // manual-entry and TTS pseudo-sources.
+    const allowsSearchOrFilter =
      this.navigateIds.length > 1 &&
      !isManualMediaSourceContentId(currentItem.media_content_id) &&
-      !isTTSMediaSource(currentItem.media_content_id) &&
-      currentItem.can_search;
+      !isTTSMediaSource(currentItem.media_content_id);
+    const showSearch = allowsSearchOrFilter && currentItem.can_search;
+    const showFilter =
+      allowsSearchOrFilter &&
+      !currentItem.can_search &&
+      children.length >= FILTER_MIN_CHILDREN;
+    const filterQuery = showFilter ? normalizeForFilter(this._filterQuery) : "";
+    const isFiltering = filterQuery !== "";
+    if (isFiltering) {
+      children = children.filter((child) =>
+        normalizeForFilter(child.title).includes(filterQuery)
+      );
+    }
    // The backend reports which media classes are worth filtering by for this
    // item; without them we still allow searching, just without the filter.
    const mediaClassFilterOptions =
@@ -478,7 +500,7 @@ export class HaMediaPlayerBrowse extends LitElement {

    return html`
              ${
-                canPickCurrent || showSearch
+                canPickCurrent || showSearch || showFilter
                  ? html`
                      <div
                        class="header ${classMap({
@@ -494,7 +516,9 @@ export class HaMediaPlayerBrowse extends LitElement {
                                currentItem,
                                mediaClassFilterOptions
                              )
-                            : nothing
+                            : showFilter
+                              ? this._renderFilterRow(currentItem)
+                              : nothing
                        }
                        ${
                          canPickCurrent
@@ -617,7 +641,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                          @tts-picked=${this._ttsPicked}
                        ></ha-browse-media-tts>
                      `
-                    : !children.length && !notShown
+                    : !children.length && (!notShown || isFiltering)
                      ? html`
                          <div class="container no-items">
                            ${
@@ -625,25 +649,29 @@ export class HaMediaPlayerBrowse extends LitElement {
                                ? this.hass.localize(
                                    "ui.components.media-browser.search.no_results"
                                  )
-                                : currentItem.media_content_id ===
-                                    "media-source://media_source/local/."
-                                  ? html`
-                                      <div class="highlight-add-button">
-                                        <span>
-                                          <ha-svg-icon
-                                            .path=${mdiArrowUpRight}
-                                          ></ha-svg-icon>
-                                        </span>
-                                        <span>
-                                          ${this.hass.localize(
-                                            "ui.components.media-browser.file_management.highlight_button"
-                                          )}
-                                        </span>
-                                      </div>
-                                    `
-                                  : this.hass.localize(
-                                      "ui.components.media-browser.no_items"
+                                : isFiltering
+                                  ? this.hass.localize(
+                                      "ui.components.media-browser.filter.no_matches"
                                    )
+                                  : currentItem.media_content_id ===
+                                      "media-source://media_source/local/."
+                                    ? html`
+                                        <div class="highlight-add-button">
+                                          <span>
+                                            <ha-svg-icon
+                                              .path=${mdiArrowUpRight}
+                                            ></ha-svg-icon>
+                                          </span>
+                                          <span>
+                                            ${this.hass.localize(
+                                              "ui.components.media-browser.file_management.highlight_button"
+                                            )}
+                                          </span>
+                                        </div>
+                                      `
+                                    : this.hass.localize(
+                                        "ui.components.media-browser.no_items"
+                                      )
                            }
                          </div>
                        `
@@ -773,6 +801,23 @@ export class HaMediaPlayerBrowse extends LitElement {
    `;
  }

+  private _renderFilterRow(currentItem: MediaPlayerItem): TemplateResult {
+    return html`
+      <div class="search-row">
+        <ha-input-search
+          class="search-input"
+          appearance="outlined"
+          .value=${this._filterQuery}
+          .placeholder=${this.hass.localize(
+            "ui.components.media-browser.filter.filter_placeholder",
+            { name: currentItem.title }
+          )}
+          @input=${this._handleFilterInput}
+        ></ha-input-search>
+      </div>
+    `;
+  }
+
  private _renderMediaClassFilter(
    mediaClassFilterOptions: MediaClass[]
  ): TemplateResult {
@@ -846,6 +891,12 @@ export class HaMediaPlayerBrowse extends LitElement {
    }
  }

+  private _handleFilterInput(ev: InputEvent): void {
+    this._filterQuery = (ev.target as HaInputSearch).value ?? "";
+    this._virtualizer?.scrollTo(0, 0);
+    this._content?.scrollTo(0, 0);
+  }
+
  private _handleSearchKeydown(ev: KeyboardEvent): void {
    if (ev.key === "Enter") {
      ev.preventDefault();
@@ -424,7 +424,7 @@ class MoreInfoMediaPlayer extends LitElement {
                  min="0"
                  max=${duration}
                  step="1"
-                  aria-label=${this._localize(
+                  .accessibleLabel=${this._localize(
                    "ui.card.media_player.track_position"
                  )}
                  @change=${this._handleMediaSeekChanged}
@@ -25,6 +25,7 @@ import {
  apiContext,
  configContext,
  connectionContext,
+  devicesContext,
  formattersContext,
  internationalizationContext,
 } from "../../../data/context";
@@ -53,6 +54,8 @@ import type { HaMoreInfoUpdateBackup } from "../components/update/ha-more-info-u
 // Dialogs that reflect their open state to the `open` attribute.
 const DIALOG_ELEMENTS = new Set(["ha-adaptive-dialog", "ha-dialog"]);

+const NON_APP_HASSIO_DEVICES = new Set(["core", "supervisor", "OS", "host"]);
+
@customElement("more-info-update")
 class MoreInfoUpdate extends LitElement {
  @property({ attribute: false }) public stateObj?: UpdateEntity;
@@ -75,6 +78,9 @@ class MoreInfoUpdate extends LitElement {
  @consumeEntityRegistryEntry({ entityIdPath: ["stateObj", "entity_id"] })
  private _entityEntry?: EntityRegistryDisplayEntry;

+  @consume({ context: devicesContext, subscribe: true })
+  private _devices!: ContextType<typeof devicesContext>;
+
  @consume({ context: connectionContext, subscribe: true })
  private _connection!: ContextType<typeof connectionContext>;

@@ -432,7 +438,9 @@ class MoreInfoUpdate extends LitElement {
      // The dialog was closed, or is closing, while the update was installing.
      const toastHost = document.querySelector("home-assistant");

-      if (toastHost) {
+      if (toastHost instanceof HTMLElement) {
+        const filter = this._appSlug();
+
        showToast(toastHost, {
          message: this._localize(
            "ui.dialogs.more_info_control.update.install_failed",
@@ -444,8 +452,7 @@ class MoreInfoUpdate extends LitElement {
                text: this._localize(
                  "ui.dialogs.more_info_control.update.supervisor_logs"
                ),
-                action: () =>
-                  this._showSupervisorLogs(toastHost as HTMLElement),
+                action: () => this._showSupervisorLogs(toastHost, filter),
              }
            : undefined,
        });
@@ -460,17 +467,37 @@ class MoreInfoUpdate extends LitElement {
    );
  }

+  // Supervisor names the app by its slug in log lines; other hassio devices aren't apps.
+  private _appSlug(): string | undefined {
+    const deviceId = this._entityEntry?.device_id;
+
+    if (!deviceId) {
+      return undefined;
+    }
+
+    const id = this._devices[deviceId]?.identifiers.find(
+      ([domain]) => domain === "hassio"
+    )?.[1];
+
+    if (!id || NON_APP_HASSIO_DEVICES.has(id) || id.startsWith("mount_")) {
+      return undefined;
+    }
+
+    return id;
+  }
+
  private _handleShowSupervisorLogs(): void {
-    this._showSupervisorLogs(this);
+    this._showSupervisorLogs(this, this._appSlug());
  }

  // The toast outlives this element, so it opens the dialog from its own host.
-  private _showSupervisorLogs(host: HTMLElement): void {
+  private _showSupervisorLogs(host: HTMLElement, filter?: string): void {
    showLogsDialog(host, {
      provider: "supervisor",
      title: this._localize(
        "ui.dialogs.more_info_control.update.supervisor_logs"
      ),
+      filter,
    });
  }

@@ -232,7 +232,7 @@ export class HAFullCalendar extends LitElement {
                              ? html`<ha-button
                                  size="s"
                                  class="fab-header"
-                                  aria-label=${this.hass.localize(
+                                  .accessibleLabel=${this.hass.localize(
                                    "ui.components.calendar.event.add"
                                  )}
                                  @click=${this._createEvent}
@@ -289,7 +289,7 @@ export class HAFullCalendar extends LitElement {
                                ? html`<ha-button
                                    size="s"
                                    class="fab-header"
-                                    aria-label=${this.hass.localize(
+                                    .accessibleLabel=${this.hass.localize(
                                      "ui.components.calendar.event.add"
                                    )}
                                    @click=${this._createEvent}
@@ -441,7 +441,7 @@ class SupervisorAppConfig extends DirtyStateProviderMixin<
      text: this.hass.localize(
        "ui.panel.config.apps.configuration.confirm.reset_options.text"
      ),
-      confirmText: this.hass.localize("ui.common.reset_options"),
+      confirmText: this.hass.localize("ui.common.reset"),
      dismissText: this.hass.localize("ui.common.cancel"),
      destructive: true,
    });
@@ -1574,6 +1574,7 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
    showLogsDialog(this, {
      provider: "supervisor",
      title: this.i18n.localize("ui.panel.config.logs.supervisor_logs"),
+      filter: this.addon.slug,
    });
  }

@@ -238,7 +238,7 @@ class DialogImportBlueprint extends DirtyStateProviderMixin<BlueprintImportState
                    @click=${this._import}
                    .disabled=${this._importing}
                    .loading=${this._importing}
-                    .ariaLabel=${this.hass.localize(
+                    .accessibleLabel=${this.hass.localize(
                      `ui.panel.config.blueprint.add.${this._importing ? "importing" : "import_btn"}`
                    )}
                  >
@@ -253,7 +253,7 @@ class DialogImportBlueprint extends DirtyStateProviderMixin<BlueprintImportState
                    @click=${this._save}
                    .disabled=${this._saving || !!this._result.validation_errors}
                    .loading=${this._saving}
-                    .ariaLabel=${this.hass.localize(
+                    .accessibleLabel=${this.hass.localize(
                      `ui.panel.config.blueprint.add.${this._saving ? "saving" : this._result.exists ? "save_btn_override" : "save_btn"}`
                    )}
                  >
@@ -197,7 +197,7 @@ export class DialogEnergyCustomise
        <ha-switch
          .checked=${applicable && !this._hidden!.has(card.key)}
          .disabled=${!applicable}
-          .ariaLabel=${label}
+          .accessibleLabel=${label}
          data-card-key=${card.key}
          @change=${this._toggleCard}
        ></ha-switch>
@@ -3,11 +3,14 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { consume } from "../../../common/decorators/consume";
+import "../../../components/ha-alert";
 import "../../../components/ha-dialog";
 import "../../../components/input/ha-input-search";
-import { internationalizationContext } from "../../../data/context";
+import { apiContext, internationalizationContext } from "../../../data/context";
+import { fetchHassioLogsLegacy } from "../../../data/hassio/supervisor";
 import { DialogMixin } from "../../../dialogs/dialog-mixin";
 import { haStyleDialog } from "../../../resources/styles";
+import type { HomeAssistantApi } from "../../../types";
 import "./error-log-card";
 import type { LogsDialogParams } from "./show-dialog-logs";

@@ -17,12 +20,24 @@ class LogsDialog extends DialogMixin<LogsDialogParams>(LitElement) {
  @consume({ context: internationalizationContext, subscribe: true })
  private _i18n!: ContextType<typeof internationalizationContext>;

+  @consume({ context: apiContext, subscribe: true })
+  private _api!: HomeAssistantApi;
+
  @state() private _filter = "";

+  // Set when the filter the dialog opened with matched none of the loaded lines.
+  @state() private _unmatchedFilter?: string;
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._filter = this.params?.filter ?? "";
+  }
+
  protected firstUpdated(changedProps: PropertyValues<this>) {
    super.firstUpdated(changedProps);
    // The log card's strings live in the config fragment, which isn't loaded on dashboards.
    this._i18n.loadFragmentTranslation("config");
+    this._checkInitialFilter();
  }

  protected render() {
@@ -38,10 +53,21 @@ class LogsDialog extends DialogMixin<LogsDialogParams>(LitElement) {
          .placeholder=${this._i18n.localize("ui.panel.config.logs.search")}
          @input=${this._filterChanged}
        ></ha-input-search>
+        ${
+          this._unmatchedFilter
+            ? html`<ha-alert alert-type="info">
+                ${this._i18n.localize(
+                  "ui.panel.config.logs.no_matches_showing_all",
+                  { term: this._unmatchedFilter }
+                )}
+              </ha-alert>`
+            : nothing
+        }
        <error-log-card
          .header=${this.params.title}
          .provider=${this.params.provider}
          .filter=${this._filter}
+          class=${this._unmatchedFilter ? "with-alert" : ""}
        ></error-log-card>
      </ha-dialog>
    `;
@@ -49,18 +75,51 @@ class LogsDialog extends DialogMixin<LogsDialogParams>(LitElement) {

  private _filterChanged(ev: InputEvent) {
    this._filter = (ev.target as HTMLInputElement).value;
+    this._unmatchedFilter = undefined;
+  }
+
+  // Lines for a failed update don't always name the app, so fall back to all
+  // lines. The card's stream never completes, so check a snapshot instead: the
+  // Supervisor's default of 100 lines, the same as the card loads.
+  private async _checkInitialFilter() {
+    const filter = this.params?.filter;
+
+    if (!filter || !this.params) {
+      return;
+    }
+
+    let logs: string;
+
+    try {
+      logs = await fetchHassioLogsLegacy(this._api, this.params.provider);
+    } catch {
+      return;
+    }
+
+    if (
+      this._filter === filter &&
+      !logs.toLowerCase().includes(filter.toLowerCase())
+    ) {
+      this._unmatchedFilter = filter;
+      this._filter = "";
+    }
  }

  static get styles(): CSSResultGroup {
    return [
      haStyleDialog,
      css`
-        ha-input-search {
+        ha-input-search,
+        ha-alert {
          display: block;
          margin-bottom: var(--ha-space-2);
        }
        error-log-card {
-          --error-log-card-height: calc(100vh - 340px);
+          --error-log-card-margin: 0;
+          --error-log-card-height: max(80px, calc(100vh - 320px));
+        }
+        error-log-card.with-alert {
+          --error-log-card-height: max(80px, calc(100vh - 368px));
        }
      `,
    ];
@@ -68,11 +68,16 @@ import {
  getHassioLogDownloadUrl,
 } from "../../../data/hassio/supervisor";
 import type { HomeAssistantApi, HomeAssistantConfig } from "../../../types";
+import { haStyleScrollbar } from "../../../resources/styles";
 import { fileDownload } from "../../../util/file_download";
 import { showDownloadLogsDialog } from "./show-dialog-download-logs";

 const NUMBER_OF_LINES = 100;

+// Lines shown around each search match, as a failure's cause is often logged
+// on the lines next to its summary.
+const SEARCH_CONTEXT_LINES = 3;
+
@customElement("error-log-card")
 class ErrorLogCard extends LitElement {
  @property({ attribute: false }) public localizeFunc?: LocalizeFunc<any>;
@@ -295,7 +300,7 @@ class ErrorLogCard extends LitElement {
              }
            </div>
          </div>
-          <div class="card-content error-log">
+          <div class="card-content error-log ha-scrollbar">
            <div id="scroll-top-marker"></div>
            ${
              this._loadingPrevState === "loading"
@@ -334,6 +339,8 @@ class ErrorLogCard extends LitElement {
            }
            <ha-ansi-to-html
              ?wrap-disabled=${!this._wrapLines}
+              .contextLines=${SEARCH_CONTEXT_LINES}
+              .expandLabel=${this._expandLabel}
            ></ha-ansi-to-html>
            <div id="scroll-bottom-marker"></div>
          </div>
@@ -410,8 +417,19 @@ class ErrorLogCard extends LitElement {
      this._newLogsIndicator = false;
    }

-    if (changedProps.has("filter")) {
+    if (
+      changedProps.has("filter") ||
+      (changedProps.has("_loadingState") &&
+        this._loadingState === "loaded" &&
+        this.filter)
+    ) {
      this._debounceSearch();
+    } else if (
+      (changedProps.has("_localize") || changedProps.has("localizeFunc")) &&
+      this.filter
+    ) {
+      // The hidden lines buttons are built outside Lit, so relabel them.
+      this._ansiToHtmlElement?.filterLines(this.filter);
    }

    if (
@@ -641,6 +659,12 @@ class ErrorLogCard extends LitElement {
    }
  }, 150);

+  private _expandLabel = (count: number) =>
+    (this.localizeFunc || this._localize)(
+      "ui.panel.config.logs.show_hidden_lines",
+      { count }
+    );
+
  private _debounceScrollToBottom = debounce(() => {
    this._logElement!.scrollTop = this._logElement!.scrollHeight;
  }, 300);
@@ -793,12 +817,14 @@ class ErrorLogCard extends LitElement {
  }

  static styles: CSSResultGroup = css`
+    ${haStyleScrollbar}
+
    :host {
      direction: var(--direction);
    }
    .error-log-intro {
      text-align: center;
-      margin: 16px;
+      margin: var(--error-log-card-margin, 16px);
    }

    ha-card {
@@ -3,6 +3,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 export interface LogsDialogParams {
  provider: string;
  title: string;
+  filter?: string;
 }

 export const showLogsDialog = (
@@ -34,7 +34,7 @@ class HuiEntitiesToggle extends LitElement {

    return html`
      <ha-switch
-        aria-label=${this.hass!.localize(
+        .accessibleLabel=${this.hass!.localize(
          "ui.panel.lovelace.card.entities.toggle"
        )}
        .checked=${this._toggleEntities!.some((entityId) => {
@@ -71,6 +71,8 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
      `;
    }

+    const name = this.hass.formatEntityName(stateObj, this._config.name);
+
    return html`
      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
        ${
@@ -79,6 +81,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
                <div class="flex">
                  <ha-slider
                    labeled
+                    .accessibleLabel=${name}
                    .disabled=${stateObj.state === UNAVAILABLE}
                    .step=${Number(stateObj.attributes.step)}
                    .min=${Number(stateObj.attributes.min)}
@@ -94,6 +97,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
            : html`
                <div class="flex box">
                  <ha-input
+                    .accessibleLabel=${name}
                    .disabled=${stateObj.state === UNAVAILABLE}
                    pattern="[0-9]+([\\.][0-9]+)?"
                    .step=${Number(stateObj.attributes.step)}
@@ -73,6 +73,8 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
      `;
    }

+    const name = this.hass.formatEntityName(stateObj, this._config.name);
+
    return html`
      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
        ${
@@ -81,6 +83,7 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
                <div class="flex">
                  <ha-slider
                    labeled
+                    .accessibleLabel=${name}
                    .disabled=${stateObj.state === UNAVAILABLE}
                    .step=${Number(stateObj.attributes.step)}
                    .min=${Number(stateObj.attributes.min)}
@@ -101,6 +104,7 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
            : html`
                <div class="flex box">
                  <ha-input
+                    .accessibleLabel=${name}
                    auto-validate
                    .disabled=${stateObj.state === UNAVAILABLE}
                    pattern="[0-9]+([\\.][0-9]+)?"
@@ -277,7 +277,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
                          step="1"
                          .withTooltip=${false}
                          size="s"
-                          aria-label=${this.hass.localize(
+                          .accessibleLabel=${this.hass.localize(
                            "ui.card.media_player.track_position"
                          )}
                          ?disabled=${!supportsFeature(
@@ -300,7 +300,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
                              step="1"
                              .withTooltip=${false}
                              size="s"
-                              aria-label=${this.hass.localize(
+                              .accessibleLabel=${this.hass.localize(
                                "ui.card.media_player.track_position"
                              )}
                              ?disabled=${!supportsFeature(
@@ -500,6 +500,7 @@
      "submit": "Submit",
      "rename": "Rename",
      "reset": "Reset",
+      "retry": "Retry",
      "search": "[%key:ui::components::data-table::search%]",
      "ok": "OK",
      "yes": "Yes",
@@ -856,6 +857,11 @@
        "entity-state-content-picker": {
          "add": "Add",
          "custom_attribute": "Custom attribute"
+        },
+        "entity-toggle": {
+          "toggle": "Toggle {name}",
+          "turn_on": "Turn {name} on",
+          "turn_off": "Turn {name} off"
        }
      },
      "target-picker": {
@@ -1314,6 +1320,10 @@
          "search_placeholder": "Search {name}",
          "no_results": "No results found"
        },
+        "filter": {
+          "filter_placeholder": "Filter {name}",
+          "no_matches": "No items match your filter"
+        },
        "filter_media_type": "Filter by media type",
        "no_items": "No items",
        "not_shown": "{count} {count, plural,\n  one {item}\n  other {items}\n} incompatible with the currently selected player {count, plural,\n  one {is}\n  other {are}\n} hidden",
@@ -4895,6 +4905,8 @@
          "search": "Search logs",
          "failed_get_logs": "Failed to get {provider} logs, {error}",
          "no_issues_search": "No issues found for search term ''{term}''",
+          "no_matches_showing_all": "Nothing in the recent logs mentions ''{term}'', so all lines are shown.",
+          "show_hidden_lines": "Show {count} hidden {count, plural,\n one {line}\n other {lines}\n}",
          "load_logs": "Load logs",
          "nr_of_lines": "Number of lines",
          "loading_log": "Loading log…",
Author	SHA1	Message	Date
Aidan Timson	01e0ed3323	Add a frontend skill for URL query params	2026-10-20 15:31:53 +01:00
Bram KragtenandClaude Opus 5.5	2944efe1b7	Declare Babel plugins the build loads by name (#55110 ) Co-authored-by: Claude Opus 5.5 <[email protected]>	2026-10-20 14:18:09 +01:00
Bram KragtenandClaude Opus 5.5	9ec5e94c29	Remove the ui.common wildcard from LocalizeKeys (#55109 ) Co-authored-by: Claude Opus 5.5 <[email protected]>	2026-10-20 14:17:40 +01:00
Bram KragtenandClaude Opus 5.5	bcb123850d	Fix the QR scanner on browsers without a native BarcodeDetector (#55111 ) Co-authored-by: Claude Opus 5.5 <[email protected]>	2026-10-20 14:16:11 +01:00
WendelinandClaude Opus 5.5	af4959b57a	Use WA accessible-label for controls without a visible label (#55104 ) Co-authored-by: Claude Opus 5.5 <[email protected]> Co-authored-by: Claude <[email protected]>	2026-10-20 12:06:22 +00:00
CarcaBotandCarcaBot	00ef6bf8b3	Filter long media browser folders locally when the source cannot search (#54969 ) * Filter long media browser folders locally when the source cannot search Media sources that do not implement search, such as a TV's channel list, offered no way to narrow a long folder: the Sony Bravia integration lists over two hundred channels and the only option was to scroll. Folders with ten or more items from such a source now get a filter field that narrows the already loaded items by title, ignoring case and accents, with its own empty state when nothing matches. Sources that can search keep the existing search row unchanged. * Reset scroll on filter input, count accepted children, rename guard Typing a filter while scrolled down left lit-virtualizer rendering its old range against the shorter list, which threw in grid view and landed on the last matches instead of the first. Scroll both the virtualizer and the content to the top on every filter input. Count children after the accept filter so a picker does not show the filter on a folder that displays fewer than FILTER_MIN_CHILDREN items. Rename isBrowsable to allowsSearchOrFilter and fix the comments. --------- Co-authored-by: CarcaBot <[email protected]>	2026-10-20 11:32:02 +00:00
Aidan Timson	b94a4f947c	Show context around log search matches and open app update logs filtered to the app (#55097 ) * Show context and expandable hidden lines in log search * Open Supervisor logs filtered to the app after a failed update * Keep hidden line buttons and focus as new log lines arrive * Relabel log buttons and check a snapshot for dialog no-match * Mute context line text instead of fading coloured output * Keep the logs dialog's log area visible on short screens	2026-10-20 14:21:54 +03:00