@matter-server/dashboard 0.2.7-alpha.0-20260118-45c7af0 → 0.2.7-alpha.0-20260119-49e7237

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

@@ -13,6 +13,7 @@ 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 }[] = [
@@ -41,7 +42,7 @@ export class LogLevelDialog extends LitElement {
 
     override connectedCallback() {
         super.connectedCallback();
-        void this._loadLogLevels();
+        fireAndForget(this._loadLogLevels());
     }
 
     private async _loadLogLevels() {
@@ -133,7 +134,10 @@ export class LogLevelDialog extends LitElement {
                 </div>
                 <div slot="actions">
                     <md-text-button @click=${this._close}>Cancel</md-text-button>
-                    <md-text-button @click=${this._apply} ?disabled=${this._loading || this._applying}>
+                    <md-text-button
+                        @click=${handleAsync(() => this._apply())}
+                        ?disabled=${this._loading || this._applying}
+                    >
                         ${this._applying ? "Applying..." : "Apply"}
                     </md-text-button>
                 </div>

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/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;
 };

package/src/util/format_hex.ts

@@ -5,7 +5,7 @@
  */
 
 /**
- * Format a number as a hex string with 0x prefix.
+ * Format a number or bigint as a hex string with 0x prefix.
  * Ensures even number of digits with a minimum of 4 digits.
  *
  * Examples:
@@ -14,7 +14,7 @@
  *   65535 -> "0xFFFF"
  *   65536 -> "0x010000"
  */
-export function formatHex(value: number): string {
+export function formatHex(value: number | bigint): string {
     let hex = value.toString(16).toUpperCase();
 
     // Ensure minimum 4 digits
@@ -28,3 +28,18 @@ export function formatHex(value: number): string {
 
     return `0x${hex}`;
 }
+
+/**
+ * Format a node address in Matter format: @fabricIndex:nodeIdHex
+ * For test nodes (where fabric index is unknown), uses "?" as the fabric index.
+ *
+ * Examples:
+ *   (1, 2) -> "@1:2"
+ *   (1, 255) -> "@1:ff"
+ *   (2, 65535) -> "@2:ffff"
+ *   (undefined, 2) -> "@?:2"
+ */
+export function formatNodeAddress(fabricIndex: number | undefined, nodeId: number | bigint): string {
+    const fabricPart = fabricIndex !== undefined ? fabricIndex : "?";
+    return `@${fabricPart}:${nodeId.toString(16)}`;
+}