@matter-server/dashboard 0.5.10 → 0.5.12

package/dist/web/js/{log-level-dialog-Dlvacuei.js → log-level-dialog-B7jqYNxe.js}

@@ -1,4 +1,4 @@
-import { e, N as NavigableKeys, _ as __decorate, a as e$1, n as n$1, o, r, i, c as createAnimationSignal, L as ListController, g as getActiveItem, b as getLastActivatableItem, d as getFirstActivatableItem, A, f as e$2, h as o$1, j as b, E as EASING, k as i$1, t, V as Validator, D, m as mixinDelegatesAria, l as mixinOnReportValidity, p as mixinConstraintValidation, q as mixinFormAssociated, s as mixinElementInternals, u as onReportValidity, v as u, w as redispatchEvent, x as getFormValue, y as createValidator, z as getValidityAnchor, B as i$2, C as fireAndForget, F as handleAsync } from './matter-dashboard-app-CJAvDfru.js';
+import { e, N as NavigableKeys, _ as __decorate, a as e$1, n as n$1, o, r, i, c as createAnimationSignal, L as ListController, g as getActiveItem, b as getLastActivatableItem, d as getFirstActivatableItem, A, f as e$2, h as o$1, j as b, E as EASING, k as i$1, t, V as Validator, D, m as mixinDelegatesAria, l as mixinOnReportValidity, p as mixinConstraintValidation, q as mixinFormAssociated, s as mixinElementInternals, u as onReportValidity, v as u, w as redispatchEvent, x as getFormValue, y as createValidator, z as getValidityAnchor, B as i$2, C as fireAndForget, F as handleAsync } from './matter-dashboard-app-BiNu4m8W.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 
@@ -3146,9 +3146,7 @@ let LogLevelDialog = class extends i {
             <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
                 <div slot="headline">Server Log Settings</div>
                 <div slot="content">
-                    ${this._loading ? b`
-                                  <p class="loading">Loading...</p>
-                              ` : b`
+                    ${this._loading ? b` <p class="loading">Loading...</p> ` : b`
                               <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>

package/dist/web/js/main.js

@@ -752,7 +752,7 @@ const ThemeService = new ThemeServiceImpl();
  * SPDX-License-Identifier: Apache-2.0
  */
 async function main() {
-  import('./matter-dashboard-app-CJAvDfru.js').then(function (n) { return n.I; });
+  import('./matter-dashboard-app-BiNu4m8W.js').then(function (n) { return n.I; });
   let url = "";
   const isProductionServer = window.__MATTERJS_PRODUCTION_MODE__ === true || location.origin.includes(":5580") || location.href.includes("hassio_ingress") || location.href.includes("/api/ingress/");
   if (!isProductionServer) {

package/dist/web/js/{matter-dashboard-app-CJAvDfru.js → matter-dashboard-app-BiNu4m8W.js}

@@ -4026,7 +4026,7 @@ MdListItem = __decorate([t$1('md-list-item')], MdListItem);
  */
 const showLogLevelDialog = async client => {
   var _document$querySelect;
-  await import('./log-level-dialog-Dlvacuei.js');
+  await import('./log-level-dialog-B7jqYNxe.js');
   const dialog = document.createElement("log-level-dialog");
   dialog.client = client;
   (_document$querySelect = document.querySelector("matter-dashboard-app")) === null || _document$querySelect === void 0 || _document$querySelect.renderRoot.appendChild(dialog);
@@ -15728,7 +15728,7 @@ const clusters = {
  * SPDX-License-Identifier: Apache-2.0
  */
 const showDialogBox = async (type, dialogParams) => {
-  await import('./dialog-box-D1T172PR.js');
+  await import('./dialog-box-Bi0vD6U9.js');
   return new Promise(resolve => {
     const dialog = document.createElement("dialog-box");
     dialog.params = dialogParams;
@@ -15902,7 +15902,7 @@ MdTextButton = __decorate([t$1('md-text-button')], MdTextButton);
  */
 const showNodeBindingDialog = async (client, node, endpoint) => {
   var _document$querySelect;
-  await import('./node-binding-dialog-CTsnRoFC.js');
+  await import('./node-binding-dialog-BmjRJ8c2.js');
   const dialog = document.createElement("node-binding-dialog");
   dialog.client = client;
   dialog.node = node;
@@ -16469,9 +16469,7 @@ let NodeDetails = class extends i$4 {
                     <ha-svg-icon slot="start" class="device-icon" .path=${getDeviceIcon(this.node)}></ha-svg-icon>
                     <div slot="headline">
                         <b>${this.node.nodeLabel || "Node Info"}</b>
-                        ${this.node.available ? A : b`
-                                      <span class="status">OFFLINE</span>
-                                  `}
+                        ${this.node.available ? A : b` <span class="status">OFFLINE</span> `}
                     </div>
                 </md-list-item>
                 <md-list-item>
@@ -16583,23 +16581,22 @@ let NodeDetails = class extends i$4 {
     const isUnverifiedSource = nodeUpdate.update_source !== UpdateSource.MAIN_NET_DCL;
     if (!(await showPromptDialog({
       title: "Firmware update available",
-      text: b`Found a firmware update for this node on
-                    <b>${nodeUpdate.update_source}</b>.
+      text: b`Found a firmware update for this node on <b>${nodeUpdate.update_source}</b>.
                     ${isUnverifiedSource ? b`
-                                  <p
-                                      style="
+                              <p
+                                  style="
                                           background: var(--md-sys-color-error, #b3261e);
                                           color: var(--md-sys-color-on-error, #fff);
                                           padding: 8px 12px;
                                           border-radius: 4px;
                                           font-weight: bold;
                                       "
-                                  >
-                                      Warning: This update was found on an unverified source. Updates from test-net or local sources have not been
-                                      certified and may contain untested firmware that could result in non-functional devices. Applying these updates is
-                                      entirely at your own risk.
-                                  </p>
-                              ` : A}
+                              >
+                                  Warning: This update was found on an unverified source. Updates from test-net or local
+                                  sources have not been certified and may contain untested firmware that could result in
+                                  non-functional devices. Applying these updates is entirely at your own risk.
+                              </p>
+                          ` : A}
                     <p>
                         Do you want to update this node to version
                         <b>${nodeUpdate.software_version_string}</b>?
@@ -18999,9 +18996,7 @@ let BasicInformationClusterCommands = class extends BaseClusterCommands {
             <details class="command-panel">
                 <summary>Node Label</summary>
                 <div class="command-content">
-                    ${!this._isNodeAvailable ? b`
-                                  <div class="offline-warning">Node is offline - cannot edit label</div>
-                              ` : A}
+                    ${!this._isNodeAvailable ? b` <div class="offline-warning">Node is offline - cannot edit label</div> ` : A}
                     <div class="command-row">
                         <md-outlined-text-field
                             label="Node Label"
@@ -19425,7 +19420,9 @@ let DashboardFooter = class extends i$4 {
     return b`
             <div class="footer">
                 The OHF Matter Server is a project by the Open Home Foundation.
-                <a href="https://www.openhomefoundation.org/structure/#support-our-work" target="_blank">Support development</a>
+                <a href="https://www.openhomefoundation.org/structure/#support-our-work" target="_blank"
+                    >Support development</a
+                >
             </div>
         `;
   }
@@ -21275,9 +21272,7 @@ let UpdateConnectionsDialog = class extends i$4 {
                           Update network data from its ${this.onlineNeighborIds.length} online
                           neighbor${this.onlineNeighborIds.length !== 1 ? "s" : ""} to refresh connection info.
                       </p>
-                  ` : b`
-                          <p>No online neighbors available to update.</p>
-                      `}
+                  ` : b` <p>No online neighbors available to update.</p> `}
         `;
   }
   _renderUnknownContent() {
@@ -21289,9 +21284,7 @@ let UpdateConnectionsDialog = class extends i$4 {
                           node${this.onlineNeighborIds.length !== 1 ? "s" : ""} that
                           see${this.onlineNeighborIds.length === 1 ? "s" : ""} this device to refresh info.
                       </p>
-                  ` : b`
-                          <p>No online nodes available that see this device.</p>
-                      `}
+                  ` : b` <p>No online nodes available that see this device.</p> `}
         `;
   }
   render() {
@@ -21564,35 +21557,36 @@ let NetworkDetails = class extends i$4 {
       return score(b) - score(a);
     }).map(conn => {
       return b`
-                                      <div
-                                          class="neighbor-item clickable"
-                                          role="button"
-                                          tabindex="0"
-                                          @click=${() => this._handleSelectNode(conn.connectedNodeId)}
-                                          @keydown=${e => this._handleKeyDown(e, conn.connectedNodeId)}
-                                      >
-                                          <ha-svg-icon
-                                              .path=${this._getSignalIconFromColor(conn.signalColor)}
-                                              style="--icon-primary-color: ${conn.signalColor}"
-                                          ></ha-svg-icon>
-                                          <div class="neighbor-info">
-                                              <div class="neighbor-name">
-                                                  ${conn.connectedNode ? b`Node ${conn.connectedNodeId}
-                                                            <span class="node-id-hex"
-                                                                >${this._formatNodeIdHex(conn.connectedNodeId)}</span
-                                                            >: ${getDeviceName(conn.connectedNode)}` : b`External: <span class="mono">${conn.extAddressHex}</span>`}
-                                              </div>
-                                              <div class="neighbor-signal">
-                                                  ${conn.rssi !== null ? b`RSSI: ${conn.rssi} dBm` : A}${conn.rssi !== null && conn.lqi !== null ? ", " : A}${conn.lqi !== null ? b`LQI: ${conn.lqi}` : A}${conn.bidirectionalLqi !== void 0 ? b`<span class="route-info"
-                                                            >, Bidir: ${conn.bidirectionalLqi}</span
-                                                        >` : A}${conn.pathCost !== void 0 ? b`<span class="route-info">, Cost: ${conn.pathCost}</span>` : A}
-                                                  ${!conn.isOutgoing ? b`
-                                                                <span class="direction-hint">(reverse)</span>
-                                                            ` : A}
+                                          <div
+                                              class="neighbor-item clickable"
+                                              role="button"
+                                              tabindex="0"
+                                              @click=${() => this._handleSelectNode(conn.connectedNodeId)}
+                                              @keydown=${e => this._handleKeyDown(e, conn.connectedNodeId)}
+                                          >
+                                              <ha-svg-icon
+                                                  .path=${this._getSignalIconFromColor(conn.signalColor)}
+                                                  style="--icon-primary-color: ${conn.signalColor}"
+                                              ></ha-svg-icon>
+                                              <div class="neighbor-info">
+                                                  <div class="neighbor-name">
+                                                      ${conn.connectedNode ? b`Node ${conn.connectedNodeId}
+                                                                <span class="node-id-hex"
+                                                                    >${this._formatNodeIdHex(conn.connectedNodeId)}</span
+                                                                >: ${getDeviceName(conn.connectedNode)}` : b`External:
+                                                                <span class="mono">${conn.extAddressHex}</span>`}
+                                                  </div>
+                                                  <div class="neighbor-signal">
+                                                      ${conn.rssi !== null ? b`RSSI: ${conn.rssi} dBm` : A}${conn.rssi !== null && conn.lqi !== null ? ", " : A}${conn.lqi !== null ? b`LQI: ${conn.lqi}` : A}${conn.bidirectionalLqi !== void 0 ? b`<span class="route-info"
+                                                                >, Bidir: ${conn.bidirectionalLqi}</span
+                                                            >` : A}${conn.pathCost !== void 0 ? b`<span class="route-info"
+                                                                >, Cost: ${conn.pathCost}</span
+                                                            >` : A}
+                                                      ${!conn.isOutgoing ? b` <span class="direction-hint">(reverse)</span> ` : A}
+                                                  </div>
                                               </div>
                                           </div>
-                                      </div>
-                                  `;
+                                      `;
     })}
                           </div>
                       </div>
@@ -21660,9 +21654,7 @@ let NetworkDetails = class extends i$4 {
   _renderUnknownDeviceInfo(deviceId) {
     const unknown = this.unknownDevices.get(deviceId);
     if (!unknown) {
-      return b`
-                <p>Unknown device data not available</p>
-            `;
+      return b` <p>Unknown device data not available</p> `;
     }
     return b`
             <div class="section">
@@ -21708,34 +21700,34 @@ let NetworkDetails = class extends i$4 {
       const rssi = (neighborEntry === null || neighborEntry === void 0 ? void 0 : neighborEntry.avgRssi) ?? (neighborEntry === null || neighborEntry === void 0 ? void 0 : neighborEntry.lastRssi) ?? null;
       const lqi = neighborEntry === null || neighborEntry === void 0 ? void 0 : neighborEntry.lqi;
       return b`
-                                      <div
-                                          class="neighbor-item clickable"
-                                          role="button"
-                                          tabindex="0"
-                                          @click=${() => this._handleSelectNode(nodeId)}
-                                          @keydown=${e => this._handleKeyDown(e, nodeId)}
-                                      >
-                                          ${neighborEntry ? b`
-                                                    <ha-svg-icon
-                                                        .path=${this._getSignalIcon(neighborEntry)}
-                                                        style="--icon-primary-color: ${signalColor}"
-                                                    ></ha-svg-icon>
-                                                ` : A}
-                                          <div class="neighbor-info">
-                                              <div class="neighbor-name">
-                                                  Node ${nodeId}
-                                                  <span class="node-id-hex">${this._formatNodeIdHex(nodeId)}</span>:
-                                                  ${getDeviceName(node)}
-                                              </div>
+                                          <div
+                                              class="neighbor-item clickable"
+                                              role="button"
+                                              tabindex="0"
+                                              @click=${() => this._handleSelectNode(nodeId)}
+                                              @keydown=${e => this._handleKeyDown(e, nodeId)}
+                                          >
                                               ${neighborEntry ? b`
-                                                        <div class="neighbor-signal">
-                                                            ${rssi !== null ? b`RSSI: ${rssi} dBm, ` : A}
-                                                            ${lqi !== void 0 ? b`LQI: ${lqi}` : A}
-                                                        </div>
+                                                        <ha-svg-icon
+                                                            .path=${this._getSignalIcon(neighborEntry)}
+                                                            style="--icon-primary-color: ${signalColor}"
+                                                        ></ha-svg-icon>
                                                     ` : A}
+                                              <div class="neighbor-info">
+                                                  <div class="neighbor-name">
+                                                      Node ${nodeId}
+                                                      <span class="node-id-hex">${this._formatNodeIdHex(nodeId)}</span>:
+                                                      ${getDeviceName(node)}
+                                                  </div>
+                                                  ${neighborEntry ? b`
+                                                            <div class="neighbor-signal">
+                                                                ${rssi !== null ? b`RSSI: ${rssi} dBm, ` : A}
+                                                                ${lqi !== void 0 ? b`LQI: ${lqi}` : A}
+                                                            </div>
+                                                        ` : A}
+                                              </div>
                                           </div>
-                                      </div>
-                                  `;
+                                      `;
     })}
                           </div>
                       </div>
@@ -21837,9 +21829,7 @@ let NetworkDetails = class extends i$4 {
   _renderWiFiAccessPointInfo(apId) {
     const ap = this.wifiAccessPoints.get(apId);
     if (!ap) {
-      return b`
-                <p>Access point data not available</p>
-            `;
+      return b` <p>Access point data not available</p> `;
     }
     return b`
             <div class="section">
@@ -21871,23 +21861,23 @@ let NetworkDetails = class extends i$4 {
       const wifiDiag = getWiFiDiagnostics(node);
       const signalColor = getSignalColorFromRssi(wifiDiag.rssi);
       return b`
-                                      <div
-                                          class="connected-node-item clickable"
-                                          role="button"
-                                          tabindex="0"
-                                          @click=${() => this._handleSelectNode(nodeId)}
-                                          @keydown=${e => this._handleKeyDown(e, nodeId)}
-                                      >
-                                          <div class="node-name">
-                                              Node ${nodeId}
-                                              <span class="node-id-hex">${this._formatNodeIdHex(nodeId)}</span>:
-                                              ${getDeviceName(node)}
+                                          <div
+                                              class="connected-node-item clickable"
+                                              role="button"
+                                              tabindex="0"
+                                              @click=${() => this._handleSelectNode(nodeId)}
+                                              @keydown=${e => this._handleKeyDown(e, nodeId)}
+                                          >
+                                              <div class="node-name">
+                                                  Node ${nodeId}
+                                                  <span class="node-id-hex">${this._formatNodeIdHex(nodeId)}</span>:
+                                                  ${getDeviceName(node)}
+                                              </div>
+                                              ${wifiDiag.rssi !== null ? b`<div class="node-signal" style="color: ${signalColor}">
+                                                        ${wifiDiag.rssi} dBm
+                                                    </div>` : A}
                                           </div>
-                                          ${wifiDiag.rssi !== null ? b`<div class="node-signal" style="color: ${signalColor}">
-                                                    ${wifiDiag.rssi} dBm
-                                                </div>` : A}
-                                      </div>
-                                  `;
+                                      `;
     })}
                           </div>
                       </div>
@@ -30835,9 +30825,7 @@ let ThreadGraph = class extends BaseNetworkGraph {
                 </div>
             `;
     }
-    return b`
-            <div class="graph-container"></div>
-        `;
+    return b` <div class="graph-container"></div> `;
   }
 };
 ThreadGraph = __decorateClass$6([t$1("thread-graph")], ThreadGraph);
@@ -30993,9 +30981,7 @@ let WiFiGraph = class extends BaseNetworkGraph {
                 </div>
             `;
     }
-    return b`
-            <div class="graph-container"></div>
-        `;
+    return b` <div class="graph-container"></div> `;
   }
 };
 WiFiGraph = __decorateClass$5([t$1("wifi-graph")], WiFiGraph);
@@ -31170,8 +31156,8 @@ let MatterNetworkView = class extends i$4 {
                     </div>
                 </div>
                 ${this._threadAddressSearchStatus === "idle" ? "" : b`<div class="thread-search-status ${this._threadAddressSearchStatus}">
-                              ${this._threadAddressSearchStatus === "found" ? "Node highlighted." : "No matching extended address found."}
-                          </div>`}
+                          ${this._threadAddressSearchStatus === "found" ? "Node highlighted." : "No matching extended address found."}
+                      </div>`}
                 <thread-graph
                     .nodes=${this.nodes}
                     @node-selected=${this._handleNodeSelected}
@@ -31693,7 +31679,7 @@ MatterNodeView = __decorateClass$3([t$1("matter-node-view")], MatterNodeView);
  */
 const showCommissionNodeDialog = async client => {
   var _document$querySelect;
-  await import('./commission-node-dialog-B8btRo-u.js');
+  await import('./commission-node-dialog-C3vakpfo.js');
   const dialog = document.createElement("commission-node-dialog");
   dialog.client = client;
   (_document$querySelect = document.querySelector("matter-dashboard-app")) === null || _document$querySelect === void 0 || _document$querySelect.renderRoot.appendChild(dialog);
@@ -31736,9 +31722,7 @@ let ServerDetails = class extends i$4 {
         <md-list-item>
             <div slot="headline">
                 <b>Open Home Foundation Matter Server ${this.client.isProduction ? "" : `(${this.client.serverBaseAddress})`}</b>
-                ${this.client.connection.connected ? A : b`
-                              <span class="status">OFFLINE</span>
-                          `}
+                ${this.client.connection.connected ? A : b` <span class="status">OFFLINE</span> `}
       </div>
         </md-list-item>
         <md-list-item>
@@ -31878,9 +31862,7 @@ let MatterServerView = class extends i$4 {
                                     <span class="hex-id"
                                         >(${formatNodeAddress(isTestNodeId(node.node_id) || this.client.serverInfo.fabric_index === void 0 ? void 0 : this.client.serverInfo.fabric_index, node.node_id)})</span
                                     >
-                                    ${node.available ? "" : b`
-                                                  <span class="status">OFFLINE</span>
-                                              `}
+                                    ${node.available ? "" : b` <span class="status">OFFLINE</span> `}
                                 </div>
                                 <div slot="supporting-text">
                                     ${node.nodeLabel ? `${node.nodeLabel} | ` : A} ${node.vendorName} |

package/dist/web/js/{node-binding-dialog-CTsnRoFC.js → node-binding-dialog-BmjRJ8c2.js}

@@ -1,4 +1,4 @@
-import { k as i, G as c, H as clientContext, n, a as e, i as i$1, A, j as b, F as handleAsync, t } from './matter-dashboard-app-CJAvDfru.js';
+import { k as i, G as c, H as clientContext, n, a as e, i as i$1, A, j as b, F as handleAsync, t } from './matter-dashboard-app-BiNu4m8W.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@matter-server/dashboard",
-    "version": "0.5.10",
+    "version": "0.5.12",
     "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-20260326-42b6f59b7",
+        "@matter/main": "0.17.0-alpha.0-20260401-1edc54c9a",
         "@rollup/plugin-babel": "^7.0.0",
         "@rollup/plugin-commonjs": "^29.0.2",
         "rollup-plugin-copy": "^3.5.0",
@@ -31,14 +31,14 @@
         "@rollup/plugin-node-resolve": "^16.0.3",
         "@rollup/plugin-terser": "^1.0.0",
         "@rollup/plugin-typescript": "^12.3.0",
-        "rollup": "^4.60.0",
+        "rollup": "^4.60.1",
         "serve": "^14.2.6"
     },
     "dependencies": {
         "@lit/context": "^1.1.6",
         "@material/web": "^2.4.1",
-        "@matter-server/ws-client": "0.5.10",
-        "@matter-server/custom-clusters": "0.5.10",
+        "@matter-server/ws-client": "0.5.12",
+        "@matter-server/custom-clusters": "0.5.12",
         "@mdi/js": "^7.4.47",
         "lit": "^3.3.2",
         "tslib": "^2.8.1",

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

@@ -24,25 +24,19 @@ export class DialogBox extends LitElement {
         return html`
             <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
                 ${params.title ? html`<div slot="headline">${params.title}</div>` : ""}
-                ${
-                    params.text
-                        ? html`<div slot="content">
-                          ${
-                              params.asCodeBlock && typeof params.text === "string"
-                                  ? html`<code>${params.text}</code>`
-                                  : params.text
-                          }
+                ${params.text
+                    ? html`<div slot="content">
+                          ${params.asCodeBlock && typeof params.text === "string"
+                              ? html`<code>${params.text}</code>`
+                              : params.text}
                       </div>`
-                        : ""
-                }
+                    : ""}
                 <div slot="actions">
-                    ${
-                        this.type === "prompt"
-                            ? html`
+                    ${this.type === "prompt"
+                        ? html`
                               <md-text-button @click=${this._cancel}>${params.cancelText ?? "Cancel"}</md-text-button>
                           `
-                            : ""
-                    }
+                        : ""}
                     <md-text-button @click=${this._confirm}>${params.confirmText ?? "OK"}</md-text-button>
                 </div>
             </md-dialog>

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

@@ -25,9 +25,8 @@ export class ComissionNodeDialog extends LitElement {
             <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
                 <div slot="headline">Commission node</div>
                 <div slot="content" @node-commissioned=${this._nodeCommissioned}>
-                    ${
-                        !this._mode
-                            ? html`<md-list>
+                    ${!this._mode
+                        ? html`<md-list>
                               <md-list-item
                                   type="button"
                                   .disabled=${!this.client.serverInfo.bluetooth_enabled}
@@ -44,18 +43,11 @@ export class ComissionNodeDialog extends LitElement {
                                   >Commission existing device</md-list-item
                               >
                           </md-list>`
-                            : this._mode === "wifi"
-                              ? html`
-                                    <commission-node-wifi></commission-node-wifi>
-                                `
-                              : this._mode === "thread"
-                                ? html`
-                                      <commission-node-thread></commission-node-thread>
-                                  `
-                                : html`
-                                      <commission-node-existing></commission-node-existing>
-                                  `
-                    }
+                        : this._mode === "wifi"
+                          ? html` <commission-node-wifi></commission-node-wifi> `
+                          : this._mode === "thread"
+                            ? html` <commission-node-thread></commission-node-thread> `
+                            : html` <commission-node-existing></commission-node-existing> `}
                 </div>
                 <div slot="actions">
                     <md-text-button @click=${this._close}>Cancel</md-text-button>

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

@@ -33,13 +33,7 @@ export class CommissionNodeExisting extends LitElement {
             <br />
             <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
-            }`;
+            >${this._loading ? html` <md-circular-progress indeterminate></md-circular-progress> ` : nothing}`;
     }
 
     private async _commissionNode() {

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

@@ -37,34 +37,26 @@ export class CommissionNodeThread extends LitElement {
                 <br />
                 <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
-                }`;
+                >${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=${handleAsync(() => this._commissionNode())} .disabled="${this._loading}"
                 >Commission</md-outlined-button
-            >${
-                this._loading
-                    ? html`
-                          <md-circular-progress indeterminate></md-circular-progress>
-                      `
-                    : nothing
-            }`;
+            >${this._loading ? html` <md-circular-progress indeterminate></md-circular-progress> ` : nothing}`;
     }
 
     private async _setThreadDataset() {
-        const dataset = this._datasetField.value;
+        const dataset = this._datasetField.value.trim();
         if (!dataset) {
             alert("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)");
+            return;
+        }
         this._loading = true;
         try {
             await this.client.setThreadOperationalDataset(dataset);

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

@@ -40,24 +40,16 @@ export class CommissionNodeWifi extends LitElement {
                 <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 .visible="${this._loading}"></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=${handleAsync(() => this._commissionNode())} .disabled="${this._loading}"
                 >Commission</md-outlined-button
-            >${
-                this._loading
-                    ? html`
-                          <md-circular-progress indeterminate></md-circular-progress>
-                      `
-                    : nothing
-            }`;
+            >${this._loading ? html` <md-circular-progress indeterminate></md-circular-progress> ` : nothing}`;
     }
 
     private async _setWifiCredentials() {