@matter-server/dashboard 0.2.7-alpha.0-20260118-993a1c7 → 0.2.7-alpha.0-20260119-49e7237

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@matter-server/dashboard",
-    "version": "0.2.7-alpha.0-20260118-993a1c7",
+    "version": "0.2.7-alpha.0-20260119-49e7237",
     "description": "Dashboard for OHF Matter Server",
     "bugs": {
         "url": "https://github.com/matter-js/matterjs-server/issues"
@@ -23,7 +23,7 @@
     },
     "devDependencies": {
         "@babel/preset-env": "^7.28.5",
-        "@matter/main": "0.16.5",
+        "@matter/main": "0.16.6-alpha.0-20260118-ceec17415",
         "@rollup/plugin-babel": "^6.1.0",
         "@rollup/plugin-commonjs": "^29.0.0",
         "rollup-plugin-copy": "^3.5.0",
@@ -37,8 +37,8 @@
     "dependencies": {
         "@lit/context": "^1.1.6",
         "@material/web": "^2.4.1",
-        "@matter-server/ws-client": "0.2.7-alpha.0-20260118-993a1c7",
-        "@matter-server/custom-clusters": "0.2.7-alpha.0-20260118-993a1c7",
+        "@matter-server/ws-client": "0.2.7-alpha.0-20260119-49e7237",
+        "@matter-server/custom-clusters": "0.2.7-alpha.0-20260119-49e7237",
         "@mdi/js": "^7.4.47",
         "lit": "^3.3.1",
         "tslib": "^2.8.1"

package/src/components/dialogs/binding/node-binding-dialog.ts

@@ -16,6 +16,7 @@ import "../../../components/ha-svg-icon";
 import { AccessControlEntry, BindingTarget, MatterClient, MatterNode } from "@matter-server/ws-client";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
+import { handleAsync } from "../../../util/async-handler.js";
 import { preventDefault } from "../../../util/prevent_default.js";
 import { BindingEntryDataTransformer, BindingEntryStruct, InputType } from "./model.js";
 
@@ -314,7 +315,7 @@ export class NodeBindingDialog extends LitElement {
                     </div>
                     <div slot="end">
                       <md-text-button
-                        @click=${() => this.deleteBindingHandler(index)}
+                        @click=${handleAsync(() => this.deleteBindingHandler(index))}
                       >delete</md-text-button
                     </div>
                   </md-list-item>
@@ -368,7 +369,7 @@ export class NodeBindingDialog extends LitElement {
                     </div>
                 </div>
                 <div slot="actions">
-                    <md-text-button @click=${this.addBindingHandler}>Add</md-text-button>
+                    <md-text-button @click=${handleAsync(() => this.addBindingHandler())}>Add</md-text-button>
                     <md-text-button @click=${this._close}>Cancel</md-text-button>
                 </div>
             </md-dialog>

package/src/components/dialogs/commission-node-dialog/commission-node-existing.ts

@@ -12,6 +12,7 @@ import { MatterClient } from "@matter-server/ws-client";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { clientContext } from "../../../client/client-context.js";
+import { handleAsync } from "../../../util/async-handler.js";
 import { fireEvent } from "../../../util/fire_event.js";
 
 @customElement("commission-node-existing")
@@ -30,7 +31,7 @@ export class CommissionNodeExisting extends LitElement {
         return html`<md-outlined-text-field label="Share code" .disabled="${this._loading}"> </md-outlined-text-field>
             <br />
             <br />
-            <md-outlined-button @click=${this._commissionNode} .disabled="${this._loading}"
+            <md-outlined-button @click=${handleAsync(() => this._commissionNode())} .disabled="${this._loading}"
                 >Commission</md-outlined-button
             >${this._loading ? html`<md-circular-progress indeterminate></md-circular-progress>` : nothing}`;
     }

package/src/components/dialogs/commission-node-dialog/commission-node-thread.ts

@@ -12,6 +12,7 @@ import { MatterClient } from "@matter-server/ws-client";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { clientContext } from "../../../client/client-context.js";
+import { handleAsync } from "../../../util/async-handler.js";
 import { fireEvent } from "../../../util/fire_event.js";
 
 @customElement("commission-node-thread")
@@ -34,14 +35,14 @@ export class CommissionNodeThread extends LitElement {
                 </md-outlined-text-field>
                 <br />
                 <br />
-                <md-outlined-button @click=${this._setThreadDataset} .disabled="${this._loading}"
+                <md-outlined-button @click=${handleAsync(() => this._setThreadDataset())} .disabled="${this._loading}"
                     >Set Thread Dataset</md-outlined-button
                 >${this._loading ? html`<md-circular-progress indeterminate></md-circular-progress>` : nothing}`;
         }
         return html`<md-outlined-text-field label="Pairing code" .disabled="${this._loading}"> </md-outlined-text-field>
             <br />
             <br />
-            <md-outlined-button @click=${this._commissionNode} .disabled="${this._loading}"
+            <md-outlined-button @click=${handleAsync(() => this._commissionNode())} .disabled="${this._loading}"
                 >Commission</md-outlined-button
             >${this._loading ? html`<md-circular-progress indeterminate></md-circular-progress>` : nothing}`;
     }

package/src/components/dialogs/commission-node-dialog/commission-node-wifi.ts

@@ -12,6 +12,7 @@ import { MatterClient } from "@matter-server/ws-client";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { clientContext } from "../../../client/client-context.js";
+import { handleAsync } from "../../../util/async-handler.js";
 import { fireEvent } from "../../../util/fire_event.js";
 
 @customElement("commission-node-wifi")
@@ -37,7 +38,7 @@ export class CommissionNodeWifi extends LitElement {
                 </md-outlined-text-field>
                 <br />
                 <br />
-                <md-outlined-button @click=${this._setWifiCredentials} .disabled="${this._loading}"
+                <md-outlined-button @click=${handleAsync(() => this._setWifiCredentials())} .disabled="${this._loading}"
                     >Set WiFi Credentials</md-outlined-button
                 >${this._loading
                     ? html`<md-circular-progress indeterminate .visible="${this._loading}"></md-circular-progress>`
@@ -46,12 +47,12 @@ export class CommissionNodeWifi extends LitElement {
         return html`<md-outlined-text-field label="Pairing code" .disabled="${this._loading}"> </md-outlined-text-field>
             <br />
             <br />
-            <md-outlined-button @click=${this._commissionNode} .disabled="${this._loading}"
+            <md-outlined-button @click=${handleAsync(() => this._commissionNode())} .disabled="${this._loading}"
                 >Commission</md-outlined-button
             >${this._loading ? html`<md-circular-progress indeterminate></md-circular-progress>` : nothing}`;
     }
 
-    private _setWifiCredentials() {
+    private async _setWifiCredentials() {
         const ssid = this._ssidField.value;
         if (!ssid) {
             alert("SSID is required");
@@ -64,7 +65,7 @@ export class CommissionNodeWifi extends LitElement {
         }
         this._loading = true;
         try {
-            this.client.setWifiCredentials(ssid, password);
+            await this.client.setWifiCredentials(ssid, password);
         } catch (err) {
             alert(`Error setting WiFi credentials: \n${(err as Error).message}`);
         } finally {

package/src/components/dialogs/settings/log-level-dialog.ts

@@ -0,0 +1,183 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import "@material/web/button/text-button";
+import "@material/web/dialog/dialog";
+import type { MdDialog } from "@material/web/dialog/dialog.js";
+import "@material/web/select/outlined-select";
+import type { MdOutlinedSelect } from "@material/web/select/outlined-select.js";
+import "@material/web/select/select-option";
+import { LogLevelString, MatterClient } from "@matter-server/ws-client";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { fireAndForget, handleAsync } from "../../../util/async-handler.js";
+import { preventDefault } from "../../../util/prevent_default.js";
+
+const LOG_LEVELS: { value: LogLevelString; label: string }[] = [
+    { value: "critical", label: "Critical" },
+    { value: "error", label: "Error" },
+    { value: "warning", label: "Warning" },
+    { value: "info", label: "Info" },
+    { value: "debug", label: "Debug" },
+];
+
+@customElement("log-level-dialog")
+export class LogLevelDialog extends LitElement {
+    @property({ attribute: false })
+    public client!: MatterClient;
+
+    @state() private _consoleLevel: LogLevelString = "info";
+    @state() private _fileLevel: LogLevelString | null = null;
+    @state() private _loading = true;
+    @state() private _applying = false;
+
+    @query("md-outlined-select[name='console']")
+    private _consoleSelect!: MdOutlinedSelect;
+
+    @query("md-outlined-select[name='file']")
+    private _fileSelect?: MdOutlinedSelect;
+
+    override connectedCallback() {
+        super.connectedCallback();
+        fireAndForget(this._loadLogLevels());
+    }
+
+    private async _loadLogLevels() {
+        try {
+            const result = await this.client.getLogLevel();
+            this._consoleLevel = result.console_loglevel;
+            this._fileLevel = result.file_loglevel;
+        } catch (err) {
+            console.error("Failed to load log levels:", err);
+        } finally {
+            this._loading = false;
+        }
+    }
+
+    private async _apply() {
+        this._applying = true;
+        try {
+            const consoleLevel = this._consoleSelect.value as LogLevelString;
+            const fileLevel = this._fileSelect?.value as LogLevelString | undefined;
+
+            const result = await this.client.setLogLevel(
+                consoleLevel,
+                this._fileLevel !== null ? fileLevel : undefined,
+            );
+
+            this._consoleLevel = result.console_loglevel;
+            this._fileLevel = result.file_loglevel;
+            this._close();
+        } catch (err) {
+            console.error("Failed to apply log levels:", err);
+            alert("Failed to apply log levels");
+        } finally {
+            this._applying = false;
+        }
+    }
+
+    private _close() {
+        this.shadowRoot!.querySelector<MdDialog>("md-dialog")!.close();
+    }
+
+    private _handleClosed() {
+        this.parentNode!.removeChild(this);
+    }
+
+    protected override render() {
+        return html`
+            <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
+                <div slot="headline">Server Log Settings</div>
+                <div slot="content">
+                    ${this._loading
+                        ? html`<p class="loading">Loading...</p>`
+                        : html`
+                              <p class="hint">Changes are temporary and will be reset on the next server restart.</p>
+                              <div class="form-field">
+                                  <label>Console Log Level</label>
+                                  <md-outlined-select name="console" .value=${this._consoleLevel}>
+                                      ${LOG_LEVELS.map(
+                                          level => html`
+                                              <md-select-option
+                                                  value=${level.value}
+                                                  ?selected=${level.value === this._consoleLevel}
+                                              >
+                                                  <div slot="headline">${level.label}</div>
+                                              </md-select-option>
+                                          `,
+                                      )}
+                                  </md-outlined-select>
+                              </div>
+                              ${this._fileLevel !== null
+                                  ? html`
+                                        <div class="form-field">
+                                            <label>File Log Level</label>
+                                            <md-outlined-select name="file" .value=${this._fileLevel}>
+                                                ${LOG_LEVELS.map(
+                                                    level => html`
+                                                        <md-select-option
+                                                            value=${level.value}
+                                                            ?selected=${level.value === this._fileLevel}
+                                                        >
+                                                            <div slot="headline">${level.label}</div>
+                                                        </md-select-option>
+                                                    `,
+                                                )}
+                                            </md-outlined-select>
+                                        </div>
+                                    `
+                                  : nothing}
+                          `}
+                </div>
+                <div slot="actions">
+                    <md-text-button @click=${this._close}>Cancel</md-text-button>
+                    <md-text-button
+                        @click=${handleAsync(() => this._apply())}
+                        ?disabled=${this._loading || this._applying}
+                    >
+                        ${this._applying ? "Applying..." : "Apply"}
+                    </md-text-button>
+                </div>
+            </md-dialog>
+        `;
+    }
+
+    static override styles = css`
+        .loading {
+            text-align: center;
+            padding: 24px;
+            color: var(--md-sys-color-on-surface-variant);
+        }
+
+        .hint {
+            font-size: 0.875rem;
+            color: var(--md-sys-color-on-surface-variant);
+            margin: 0 0 16px 0;
+            font-style: italic;
+        }
+
+        .form-field {
+            margin-bottom: 16px;
+        }
+
+        .form-field label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 500;
+            color: var(--md-sys-color-on-surface);
+        }
+
+        md-outlined-select {
+            width: 100%;
+        }
+    `;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "log-level-dialog": LogLevelDialog;
+    }
+}

package/src/components/dialogs/settings/show-log-level-dialog.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { MatterClient } from "@matter-server/ws-client";
+
+export const showLogLevelDialog = async (client: MatterClient) => {
+    await import("./log-level-dialog.js");
+    const dialog = document.createElement("log-level-dialog");
+    dialog.client = client;
+    document.querySelector("matter-dashboard-app")?.renderRoot.appendChild(dialog);
+};

package/src/pages/cluster-commands/clusters/level-control-commands.ts

@@ -7,6 +7,7 @@
 import "@material/web/button/filled-button";
 import { html } from "lit";
 import { customElement, state } from "lit/decorators.js";
+import { handleAsync } from "../../../util/async-handler.js";
 import { BaseClusterCommands } from "../base-cluster-commands.js";
 import { registerClusterCommands } from "../registry.js";
 
@@ -60,8 +61,10 @@ class LevelControlClusterCommands extends BaseClusterCommands {
                             />
                             Execute if Off
                         </label>
-                        <md-outlined-button @click=${this._handleMoveToLevel}>MoveToLevel</md-outlined-button>
-                        <md-outlined-button @click=${this._handleMoveToLevelWithOnOff}
+                        <md-outlined-button @click=${handleAsync(() => this._handleMoveToLevel())}
+                            >MoveToLevel</md-outlined-button
+                        >
+                        <md-outlined-button @click=${handleAsync(() => this._handleMoveToLevelWithOnOff())}
                             >MoveToLevelWithOnOff</md-outlined-button
                         >
                     </div>

package/src/pages/cluster-commands/clusters/on-off-commands.ts

@@ -8,6 +8,7 @@ import "@material/web/button/filled-button";
 import "@material/web/button/outlined-button";
 import { html } from "lit";
 import { customElement } from "lit/decorators.js";
+import { handleAsync } from "../../../util/async-handler.js";
 import { BaseClusterCommands } from "../base-cluster-commands.js";
 import { registerClusterCommands } from "../registry.js";
 
@@ -25,9 +26,11 @@ class OnOffClusterCommands extends BaseClusterCommands {
                 <summary>OnOff Commands</summary>
                 <div class="command-content">
                     <div class="command-row">
-                        <md-outlined-button @click=${this._handleOn}>On</md-outlined-button>
-                        <md-outlined-button @click=${this._handleOff}>Off</md-outlined-button>
-                        <md-outlined-button @click=${this._handleToggle}>Toggle</md-outlined-button>
+                        <md-outlined-button @click=${handleAsync(() => this._handleOn())}>On</md-outlined-button>
+                        <md-outlined-button @click=${handleAsync(() => this._handleOff())}>Off</md-outlined-button>
+                        <md-outlined-button @click=${handleAsync(() => this._handleToggle())}
+                            >Toggle</md-outlined-button
+                        >
                     </div>
                 </div>
             </details>

package/src/pages/components/header.ts

@@ -10,9 +10,10 @@ import "@material/web/iconbutton/icon-button";
 import "@material/web/list/list";
 import "@material/web/list/list-item";
 import { MatterClient } from "@matter-server/ws-client";
-import { mdiArrowLeft, mdiBrightnessAuto, mdiLogout, mdiWeatherNight, mdiWeatherSunny } from "@mdi/js";
+import { mdiArrowLeft, mdiBrightnessAuto, mdiCog, mdiLogout, mdiWeatherNight, mdiWeatherSunny } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { showLogLevelDialog } from "../../components/dialogs/settings/show-log-level-dialog.js";
 import "../../components/ha-svg-icon";
 import { EffectiveTheme, ThemePreference, ThemeService } from "../../util/theme-service.js";
 
@@ -51,6 +52,12 @@ export class DashboardHeader extends LitElement {
         ThemeService.cycleTheme();
     }
 
+    private _openSettings() {
+        if (this.client) {
+            showLogLevelDialog(this.client);
+        }
+    }
+
     private _getThemeIcon(): string {
         switch (this._themePreference) {
             case "light":
@@ -95,6 +102,14 @@ export class DashboardHeader extends LitElement {
                             </md-icon-button>
                         `;
                     })}
+                    <!-- settings button (only when connected) -->
+                    ${this.client
+                        ? html`
+                              <md-icon-button @click=${this._openSettings} title="Server Settings">
+                                  <ha-svg-icon .path=${mdiCog}></ha-svg-icon>
+                              </md-icon-button>
+                          `
+                        : nothing}
                     <!-- theme toggle button -->
                     <md-icon-button @click=${this._cycleTheme} .title=${this._getThemeTooltip()}>
                         <ha-svg-icon .path=${this._getThemeIcon()}></ha-svg-icon>

package/src/pages/components/node-details.ts

@@ -21,6 +21,7 @@ import { DeviceType } from "../../client/models/descriptions.js";
 import { showAlertDialog, showPromptDialog } from "../../components/dialog-box/show-dialog-box.js";
 import { showNodeBindingDialog } from "../../components/dialogs/binding/show-node-binding-dialog.js";
 import "../../components/ha-svg-icon";
+import { handleAsync } from "../../util/async-handler.js";
 import { getEndpointDeviceTypes } from "../matter-endpoint-view.js";
 import { bindingContext } from "./context.js";
 
@@ -104,7 +105,7 @@ export class NodeDetails extends LitElement {
                           </div>`}
                 </md-list-item>
                 <md-list-item class="btn">
-                    <md-outlined-button @click=${this._reinterview}
+                    <md-outlined-button @click=${handleAsync(() => this._reinterview())}
                         >Interview<ha-svg-icon slot="icon" .path=${mdiChatProcessing}></ha-svg-icon
                     ></md-outlined-button>
                     ${this._updateInitiated
@@ -118,22 +119,22 @@ export class NodeDetails extends LitElement {
                                     this.node.updateStateProgress,
                                 )}<ha-svg-icon slot="icon" .path=${mdiUpdate}></ha-svg-icon
                             ></md-outlined-button>`
-                          : html`<md-outlined-button @click=${this._searchUpdate}
+                          : html`<md-outlined-button @click=${handleAsync(() => this._searchUpdate())}
                                 >Update<ha-svg-icon slot="icon" .path=${mdiUpdate}></ha-svg-icon
                             ></md-outlined-button>`}
                     ${bindings
                         ? html`
-                              <md-outlined-button @click=${this._binding}>
+                              <md-outlined-button @click=${handleAsync(() => this._binding())}>
                                   Binding
                                   <ha-svg-icon slot="icon" .path=${mdiLink}></ha-svg-icon>
                               </md-outlined-button>
                           `
                         : nothing}
 
-                    <md-outlined-button @click=${this._openCommissioningWindow}
+                    <md-outlined-button @click=${handleAsync(() => this._openCommissioningWindow())}
                         >Share<ha-svg-icon slot="icon" .path=${mdiShareVariant}></ha-svg-icon
                     ></md-outlined-button>
-                    <md-outlined-button @click=${this._remove}
+                    <md-outlined-button @click=${handleAsync(() => this._remove())}
                         >Remove<ha-svg-icon slot="icon" .path=${mdiTrashCan}></ha-svg-icon
                     ></md-outlined-button>
                 </md-list-item>

package/src/pages/components/server-details.ts

@@ -18,6 +18,7 @@ import { customElement } from "lit/decorators.js";
 import { showAlertDialog, showPromptDialog } from "../../components/dialog-box/show-dialog-box.js";
 import { showCommissionNodeDialog } from "../../components/dialogs/commission-node-dialog/show-commission-node-dialog.js";
 import "../../components/ha-svg-icon";
+import { handleAsync } from "../../util/async-handler.js";
 
 @customElement("server-details")
 export class ServerDetails extends LitElement {
@@ -54,7 +55,7 @@ export class ServerDetails extends LitElement {
         <md-list-item class="btn">
           <span>
           <md-outlined-button @click=${this._commissionNode}>Commission node<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon></md-outlined-button>
-          <md-outlined-button @click=${this._uploadDiagnosticsDumpFile}>Import node<ha-svg-icon slot="icon" .path=${mdiFile}></ha-svg-icon></md-outlined-button>
+          <md-outlined-button @click=${handleAsync(() => this._uploadDiagnosticsDumpFile())}>Import node<ha-svg-icon slot="icon" .path=${mdiFile}></ha-svg-icon></md-outlined-button>
           </md-list-item>
       </md-list>
       <!-- hidden file element for the upload diagnostics -->
@@ -83,8 +84,7 @@ export class ServerDetails extends LitElement {
         ) {
             return;
         }
-        // @ts-expect-error why?
-        const fileElem = this.renderRoot.getElementById("fileElem") as HTMLInputElement;
+        const fileElem = this.shadowRoot!.getElementById("fileElem") as HTMLInputElement;
         fileElem.click();
     }
 

package/src/pages/matter-server-view.ts

@@ -8,11 +8,12 @@ import "@material/web/divider/divider";
 import "@material/web/iconbutton/icon-button";
 import "@material/web/list/list";
 import "@material/web/list/list-item";
-import { MatterClient, MatterNode } from "@matter-server/ws-client";
+import { isTestNodeId, MatterClient, MatterNode } from "@matter-server/ws-client";
 import { mdiChevronRight } from "@mdi/js";
-import { LitElement, css, html, nothing } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import "../components/ha-svg-icon";
+import { formatNodeAddress } from "../util/format_hex.js";
 import "./components/footer";
 import "./components/header";
 import "./components/server-details";
@@ -65,6 +66,15 @@ class MatterServerView extends LitElement {
                             <md-list-item type="link" href=${`#node/${node.node_id}`}>
                                 <div slot="headline">
                                     Node ${node.node_id}
+                                    <span class="hex-id"
+                                        >(${formatNodeAddress(
+                                            isTestNodeId(node.node_id) ||
+                                                this.client.serverInfo.fabric_index === undefined
+                                                ? undefined
+                                                : this.client.serverInfo.fabric_index,
+                                            node.node_id,
+                                        )})</span
+                                    >
                                     ${node.available ? "" : html`<span class="status">OFFLINE</span>`}
                                 </div>
                                 <div slot="supporting-text">
@@ -113,5 +123,10 @@ class MatterServerView extends LitElement {
             font-weight: bold;
             font-size: 0.8em;
         }
+
+        .hex-id {
+            color: var(--text-color, rgba(0, 0, 0, 0.6));
+            font-size: 0.85em;
+        }
     `;
 }

package/src/util/async-handler.ts

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Wraps an async function to be used as an event handler.
+ * Catches any errors and logs them, optionally calling an error callback.
+ *
+ * Usage in Lit templates:
+ * ```
+ * <button @click=${handleAsync(() => this._save())}>Save</button>
+ * ```
+ *
+ * With custom error handling:
+ * ```
+ * <button @click=${handleAsync(() => this._save(), (e) => this._showError(e))}>Save</button>
+ * ```
+ *
+ * @param fn - Async function to execute
+ * @param onError - Optional error callback
+ * @returns Event handler function
+ */
+export function handleAsync<T>(fn: () => Promise<T>, onError?: (error: Error) => void): () => void {
+    return () => {
+        fn().catch((error: Error) => {
+            console.error("Async operation failed:", error);
+            onError?.(error);
+        });
+    };
+}
+
+/**
+ * Wraps an async function that takes an event parameter.
+ *
+ * Usage:
+ * ```
+ * <input @change=${handleAsyncEvent((e) => this._handleChange(e))}>
+ * ```
+ */
+export function handleAsyncEvent<E extends Event, T>(
+    fn: (event: E) => Promise<T>,
+    onError?: (error: Error) => void,
+): (event: E) => void {
+    return (event: E) => {
+        fn(event).catch((error: Error) => {
+            console.error("Async operation failed:", error);
+            onError?.(error);
+        });
+    };
+}
+
+/**
+ * Fire-and-forget helper for calling async methods from sync contexts.
+ * Use this when you need to call an async method but can't await it.
+ *
+ * Usage in lifecycle methods:
+ * ```
+ * connectedCallback() {
+ *     super.connectedCallback();
+ *     fireAndForget(this._loadData());
+ * }
+ * ```
+ *
+ * @param promise - Promise to execute
+ * @param onError - Optional error callback
+ */
+export function fireAndForget<T>(promise: Promise<T>, onError?: (error: Error) => void): void {
+    promise.catch((error: Error) => {
+        console.error("Async operation failed:", error);
+        onError?.(error);
+    });
+}

package/src/util/fire_event.ts

@@ -70,14 +70,12 @@ export const fireEvent = <HassEvent extends ValidHassDomEvent>(
     },
 ) => {
     options = options || {};
-    // @ts-expect-error why?
-    detail = detail === null || detail === undefined ? {} : detail;
     const event = new Event(type, {
         bubbles: options.bubbles === undefined ? true : options.bubbles,
         cancelable: Boolean(options.cancelable),
         composed: options.composed === undefined ? true : options.composed,
     });
-    (event as any).detail = detail;
+    (event as any).detail = detail ?? {};
     node.dispatchEvent(event);
     return event;
 };