@matter-server/dashboard 0.5.15 → 0.6.0

package/dist/web/js/{node-binding-dialog-rikORH9_.js → node-binding-dialog-MMx9rkCF.js}

@@ -1,4 +1,4 @@
-import { k as i, G as c, H as clientContext, n, a as e, i as i$1, I as showPromptDialog, J as showAlertDialog, A, j as b, F as handleAsync, t } from './matter-dashboard-app-b1R3Pout.js';
+import { k as i, H as c, I as clientContext, n, a as e, i as i$1, J as showPromptDialog, F as showAlertDialog, A, j as b, G as handleAsync, t } from './matter-dashboard-app-BtHTmAPq.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 
@@ -377,7 +377,10 @@ let NodeBindingDialog = class extends i$1 {
     const rawNodeId = (_this$_targetNodeId$v = this._targetNodeId.value) === null || _this$_targetNodeId$v === void 0 ? void 0 : _this$_targetNodeId$v.trim();
     if (rawNodeId) {
       if (!/^\d+$/.test(rawNodeId)) {
-        alert("Please enter a valid target node ID");
+        showAlertDialog({
+          title: "Validation error",
+          text: "Please enter a valid target node ID"
+        });
         return;
       }
       targetNodeId = BigInt(rawNodeId);
@@ -385,16 +388,25 @@ let NodeBindingDialog = class extends i$1 {
     const targetEndpoint = this._targetEndpoint.value ? parseInt(this._targetEndpoint.value, 10) : void 0;
     const targetCluster = this._targetCluster.value ? parseInt(this._targetCluster.value, 10) : void 0;
     if (targetNodeId === void 0 || targetNodeId <= 0n) {
-      alert("Please enter a valid target node ID");
+      showAlertDialog({
+        title: "Validation error",
+        text: "Please enter a valid target node ID"
+      });
       return;
     }
     if (targetEndpoint === void 0 || targetEndpoint <= 0 || targetEndpoint > 65534) {
-      alert("Please enter a valid target endpoint");
+      showAlertDialog({
+        title: "Validation error",
+        text: "Please enter a valid target endpoint"
+      });
       return;
     }
     if (targetCluster !== void 0) {
       if (targetCluster < 0 || targetCluster > 32767) {
-        alert("Please enter a valid target cluster");
+        showAlertDialog({
+          title: "Validation error",
+          text: "Please enter a valid target cluster"
+        });
         return;
       }
     }
@@ -413,13 +425,17 @@ let NodeBindingDialog = class extends i$1 {
     };
     const aclResult = await this.add_target_acl(targetNodeId, acl_entry);
     if (aclResult.outcome === "all_failed") {
-      alert(`Failed to add ACL entry:
-${aclResult.message}`);
+      showAlertDialog({
+        title: "Failed to add ACL entry",
+        text: aclResult.message
+      });
       return;
     }
     if (aclResult.outcome === "partial") {
-      alert(`ACL entry partially failed:
-${aclResult.message}`);
+      showAlertDialog({
+        title: "ACL entry partially failed",
+        text: aclResult.message
+      });
     }
     const endpoint = this.endpoint;
     const bindingEntry = {
@@ -437,12 +453,16 @@ ${aclResult.message}`);
       this._targetCluster.value = "";
       this.requestUpdate();
     } else if (bindingResult.outcome === "partial") {
-      alert(`Binding partially failed:
-${bindingResult.message}`);
+      showAlertDialog({
+        title: "Binding partially failed",
+        text: bindingResult.message
+      });
       this.requestUpdate();
     } else {
-      alert(`Failed to add binding:
-${bindingResult.message}`);
+      showAlertDialog({
+        title: "Failed to add binding",
+        text: bindingResult.message
+      });
     }
   }
   _close() {
@@ -478,10 +498,10 @@ ${bindingResult.message}`);
                 </div>
                 <div slot="content">
                     <div>
-                        <md-list style="padding-bottom:18px;">
+                        <md-list style="padding-bottom:16px;">
                             ${Object.values(bindings).map((entry, index) => b`
                   <md-list-item class="binding-item">
-                    <div style="display:flex;gap:10px;">
+                    <div style="display:flex;gap:8px;">
                         <div>node:${entry["node"]}</div>
                         <div>endpoint:${entry["endpoint"]}</div>
                         ${entry["cluster"] ? b` <div>cluster:${entry["cluster"]}</div> ` : A}
@@ -529,13 +549,13 @@ ${bindingResult.message}`);
                             </div>
                         </div>
                         <div style="margin:8px;">
-                            <Text style="font-size: 10px;font-style: italic;font-weight: bold;">
+                            <span style="font-size: 0.75rem;font-style: italic;font-weight: bold;">
                                 Note: The Cluster ID field is optional according to the Matter specification. If you
                                 leave it blank, the binding applies to all eligible clusters on the target endpoint.
                                 However, some devices may require a specific cluster to be set in order for the binding
                                 to function correctly. If you experience unexpected behavior, try specifying the cluster
                                 explicitly.
-                            </Text>
+                            </span>
                         </div>
                     </div>
                 </div>
@@ -568,7 +588,7 @@ NodeBindingDialog.styles = i`
 
         .target-item {
             display: inline-block;
-            padding: 20px 10px 10px 10px;
+            padding: 16px 8px 8px 8px;
             border-radius: 4px;
             vertical-align: middle;
             min-width: 80px;
@@ -578,11 +598,11 @@ NodeBindingDialog.styles = i`
 
         .group-label {
             position: absolute;
-            left: 15px;
+            left: 16px;
             top: -12px;
             background: var(--md-sys-color-primary);
             color: var(--md-sys-color-on-primary);
-            padding: 3px 15px;
+            padding: 4px 16px;
             border-radius: 4px;
         }
     `;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@matter-server/dashboard",
-    "version": "0.5.15",
+    "version": "0.6.0",
     "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.29.2",
-        "@matter/main": "0.17.0-alpha.0-20260410-36535f904",
+        "@matter/main": "0.17.0-alpha.0-20260415-d9b8bc8d3",
         "@rollup/plugin-babel": "^7.0.0",
         "@rollup/plugin-commonjs": "^29.0.2",
         "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.5.15",
-        "@matter-server/custom-clusters": "0.5.15",
+        "@matter-server/ws-client": "0.6.0",
+        "@matter-server/custom-clusters": "0.6.0",
         "@mdi/js": "^7.4.47",
         "lit": "^3.3.2",
         "tslib": "^2.8.1",

package/src/components/dialog-box/dialog-box.ts

@@ -7,7 +7,7 @@
 import "@material/web/button/text-button";
 import "@material/web/dialog/dialog";
 import type { MdDialog } from "@material/web/dialog/dialog.js";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { preventDefault } from "../../util/prevent_default.js";
 import type { PromptDialogBoxParams } from "./show-dialog-box.js";
@@ -59,6 +59,21 @@ export class DialogBox extends LitElement {
     private _handleClosed() {
         this.parentElement!.removeChild(this);
     }
+
+    static override styles = css`
+        code {
+            display: block;
+            white-space: pre-wrap;
+            word-break: break-all;
+            overflow-y: auto;
+            max-height: 60vh;
+            font-size: 0.8rem;
+            line-height: 1.4;
+            padding: 8px;
+            background-color: var(--md-sys-color-surface-container-highest);
+            border-radius: 4px;
+        }
+    `;
 }
 
 declare global {

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

@@ -250,7 +250,7 @@ export class NodeBindingDialog extends LitElement {
         const rawNodeId = this._targetNodeId.value?.trim();
         if (rawNodeId) {
             if (!/^\d+$/.test(rawNodeId)) {
-                alert("Please enter a valid target node ID");
+                showAlertDialog({ title: "Validation error", text: "Please enter a valid target node ID" });
                 return;
             }
             targetNodeId = BigInt(rawNodeId);
@@ -259,12 +259,12 @@ export class NodeBindingDialog extends LitElement {
         const targetCluster = this._targetCluster.value ? parseInt(this._targetCluster.value, 10) : undefined;
 
         if (targetNodeId === undefined || targetNodeId <= 0n) {
-            alert("Please enter a valid target node ID");
+            showAlertDialog({ title: "Validation error", text: "Please enter a valid target node ID" });
             return;
         }
 
         if (targetEndpoint === undefined || targetEndpoint <= 0 || targetEndpoint > 0xfffe) {
-            alert("Please enter a valid target endpoint");
+            showAlertDialog({ title: "Validation error", text: "Please enter a valid target endpoint" });
             return;
         }
 
@@ -272,7 +272,7 @@ export class NodeBindingDialog extends LitElement {
         if (targetCluster !== undefined) {
             // We ignore vendor specific clusters for now
             if (targetCluster < 0 || targetCluster > 0x7fff) {
-                alert("Please enter a valid target cluster");
+                showAlertDialog({ title: "Validation error", text: "Please enter a valid target cluster" });
                 return;
             }
         }
@@ -294,11 +294,11 @@ export class NodeBindingDialog extends LitElement {
 
         const aclResult = await this.add_target_acl(targetNodeId, acl_entry);
         if (aclResult.outcome === "all_failed") {
-            alert(`Failed to add ACL entry:\n${aclResult.message}`);
+            showAlertDialog({ title: "Failed to add ACL entry", text: aclResult.message });
             return;
         }
         if (aclResult.outcome === "partial") {
-            alert(`ACL entry partially failed:\n${aclResult.message}`);
+            showAlertDialog({ title: "ACL entry partially failed", text: aclResult.message });
             // Continue with binding attempt since some ACL entries succeeded
         }
 
@@ -320,10 +320,10 @@ export class NodeBindingDialog extends LitElement {
             this._targetCluster.value = "";
             this.requestUpdate();
         } else if (bindingResult.outcome === "partial") {
-            alert(`Binding partially failed:\n${bindingResult.message}`);
+            showAlertDialog({ title: "Binding partially failed", text: bindingResult.message });
             this.requestUpdate(); // Update UI to show what succeeded
         } else {
-            alert(`Failed to add binding:\n${bindingResult.message}`);
+            showAlertDialog({ title: "Failed to add binding", text: bindingResult.message });
         }
     }
 
@@ -367,11 +367,11 @@ export class NodeBindingDialog extends LitElement {
                 </div>
                 <div slot="content">
                     <div>
-                        <md-list style="padding-bottom:18px;">
+                        <md-list style="padding-bottom:16px;">
                             ${Object.values(bindings).map(
                                 (entry, index) => html`
                   <md-list-item class="binding-item">
-                    <div style="display:flex;gap:10px;">
+                    <div style="display:flex;gap:8px;">
                         <div>node:${entry["node"]}</div>
                         <div>endpoint:${entry["endpoint"]}</div>
                         ${entry["cluster"] ? html` <div>cluster:${entry["cluster"]}</div> ` : nothing}
@@ -420,13 +420,13 @@ export class NodeBindingDialog extends LitElement {
                             </div>
                         </div>
                         <div style="margin:8px;">
-                            <Text style="font-size: 10px;font-style: italic;font-weight: bold;">
+                            <span style="font-size: 0.75rem;font-style: italic;font-weight: bold;">
                                 Note: The Cluster ID field is optional according to the Matter specification. If you
                                 leave it blank, the binding applies to all eligible clusters on the target endpoint.
                                 However, some devices may require a specific cluster to be set in order for the binding
                                 to function correctly. If you experience unexpected behavior, try specifying the cluster
                                 explicitly.
-                            </Text>
+                            </span>
                         </div>
                     </div>
                 </div>
@@ -459,7 +459,7 @@ export class NodeBindingDialog extends LitElement {
 
         .target-item {
             display: inline-block;
-            padding: 20px 10px 10px 10px;
+            padding: 16px 8px 8px 8px;
             border-radius: 4px;
             vertical-align: middle;
             min-width: 80px;
@@ -469,11 +469,11 @@ export class NodeBindingDialog extends LitElement {
 
         .group-label {
             position: absolute;
-            left: 15px;
+            left: 16px;
             top: -12px;
             background: var(--md-sys-color-primary);
             color: var(--md-sys-color-on-primary);
-            padding: 3px 15px;
+            padding: 4px 16px;
             border-radius: 4px;
         }
     `;

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

@@ -14,6 +14,7 @@ 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";
+import { showAlertDialog } from "../../dialog-box/show-dialog-box.js";
 
 @customElement("commission-node-existing")
 export class CommissionNodeExisting extends LitElement {
@@ -42,7 +43,7 @@ export class CommissionNodeExisting extends LitElement {
             const node = await this.client.commissionWithCode(this._pairingCodeField.value, true);
             fireEvent(this, "node-commissioned", node);
         } catch (err) {
-            alert(`Error commissioning node: ${(err as Error).message}`);
+            showAlertDialog({ title: "Error commissioning node", text: (err as Error).message });
         } finally {
             this._loading = false;
         }

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

@@ -14,6 +14,7 @@ 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";
+import { showAlertDialog } from "../../dialog-box/show-dialog-box.js";
 
 @customElement("commission-node-thread")
 export class CommissionNodeThread extends LitElement {
@@ -31,7 +32,11 @@ export class CommissionNodeThread extends LitElement {
 
     protected override render() {
         if (!this.client.serverInfo.thread_credentials_set) {
-            return html`<md-outlined-text-field label="Thread dataset" .disabled="${this._loading}">
+            return html`<md-outlined-text-field
+                    label="Thread dataset"
+                    .disabled="${this._loading}"
+                    supporting-text="Hex string (e.g. 0E080000...)"
+                >
                 </md-outlined-text-field>
                 <br />
                 <br />
@@ -50,18 +55,21 @@ export class CommissionNodeThread extends LitElement {
     private async _setThreadDataset() {
         const dataset = this._datasetField.value.trim();
         if (!dataset) {
-            alert("Dataset is required");
+            showAlertDialog({ title: "Validation error", text: "Dataset is required" });
             return;
         }
         if (!/^[0-9a-fA-F]*$/.test(dataset) || dataset.length % 2 !== 0) {
-            alert("Invalid Thread dataset: must be a hex string with even length (each byte is two hex characters)");
+            showAlertDialog({
+                title: "Invalid Thread dataset",
+                text: "Must be a hex string with even length (each byte is two hex characters)",
+            });
             return;
         }
         this._loading = true;
         try {
             await this.client.setThreadOperationalDataset(dataset);
         } catch (err) {
-            alert(`Error setting Thread dataset: ${(err as Error).message}`);
+            showAlertDialog({ title: "Error setting Thread dataset", text: (err as Error).message });
         } finally {
             this._loading = false;
         }
@@ -73,7 +81,7 @@ export class CommissionNodeThread extends LitElement {
             const node = await this.client.commissionWithCode(this._pairingCodeField.value, false);
             fireEvent(this, "node-commissioned", node);
         } catch (err) {
-            alert(`Error commissioning node: ${(err as Error).message}`);
+            showAlertDialog({ title: "Error commissioning node", text: (err as Error).message });
         } finally {
             this._loading = false;
         }

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

@@ -14,6 +14,7 @@ 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";
+import { showAlertDialog } from "../../dialog-box/show-dialog-box.js";
 
 @customElement("commission-node-wifi")
 export class CommissionNodeWifi extends LitElement {
@@ -33,16 +34,19 @@ export class CommissionNodeWifi extends LitElement {
 
     protected override render() {
         if (!this.client.serverInfo.wifi_credentials_set) {
-            return html`<md-outlined-text-field label="SSID" .disabled="${this._loading}"> </md-outlined-text-field>
+            return html`<md-outlined-text-field
+                    label="SSID"
+                    .disabled="${this._loading}"
+                    supporting-text="Network name"
+                >
+                </md-outlined-text-field>
                 <md-outlined-text-field label="Password" type="password" .disabled="${this._loading}">
                 </md-outlined-text-field>
                 <br />
                 <br />
                 <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>`
-                    : nothing}`;
+                >${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 />
@@ -55,19 +59,19 @@ export class CommissionNodeWifi extends LitElement {
     private async _setWifiCredentials() {
         const ssid = this._ssidField.value;
         if (!ssid) {
-            alert("SSID is required");
+            showAlertDialog({ title: "Validation error", text: "SSID is required" });
             return;
         }
         const password = this._passwordField.value;
         if (!password) {
-            alert("Password is required");
+            showAlertDialog({ title: "Validation error", text: "Password is required" });
             return;
         }
         this._loading = true;
         try {
             await this.client.setWifiCredentials(ssid, password);
         } catch (err) {
-            alert(`Error setting WiFi credentials: \n${(err as Error).message}`);
+            showAlertDialog({ title: "Error setting WiFi credentials", text: (err as Error).message });
         } finally {
             this._loading = false;
         }
@@ -76,14 +80,14 @@ export class CommissionNodeWifi extends LitElement {
     private async _commissionNode() {
         try {
             if (!this._pairingCodeField.value) {
-                alert("Pairing code is required");
+                showAlertDialog({ title: "Validation error", text: "Pairing code is required" });
                 return;
             }
             this._loading = true;
             const node = await this.client.commissionWithCode(this._pairingCodeField.value, false);
             fireEvent(this, "node-commissioned", node);
         } catch (err) {
-            alert(`Error commissioning node: \n${(err as Error).message}`);
+            showAlertDialog({ title: "Error commissioning node", text: (err as Error).message });
         } finally {
             this._loading = false;
         }

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

@@ -15,6 +15,7 @@ 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";
+import { showAlertDialog } from "../../dialog-box/show-dialog-box.js";
 
 const LOG_LEVELS: { value: LogLevelString; label: string }[] = [
     { value: "critical", label: "Critical" },
@@ -73,7 +74,7 @@ export class LogLevelDialog extends LitElement {
             this._close();
         } catch (err) {
             console.error("Failed to apply log levels:", err);
-            alert("Failed to apply log levels");
+            showAlertDialog({ title: "Error", text: "Failed to apply log levels" });
         } finally {
             this._applying = false;
         }

package/src/components/ha-svg-icon.ts

@@ -21,7 +21,6 @@ export class HaSvgIcon extends LitElement {
       viewBox=${this.viewBox ?? "0 0 24 24"}
       preserveAspectRatio="xMidYMid meet"
       focusable="false"
-      role="img"
       aria-hidden="true"
     >
       <g>

package/src/entrypoint/main.ts

@@ -31,7 +31,7 @@ async function main() {
                 suggestedUrl ?? "ws://localhost:5580/ws",
             );
             if (!storageUrl) {
-                alert("Unable to connect without URL");
+                document.body.textContent = "Unable to connect: no WebSocket URL provided.";
                 return;
             }
             if (suggestedUrl) {