@matter-server/dashboard 0.3.6 → 0.3.7

package/dist/web/js/{matter-dashboard-app-Dq3JvQBw.js → matter-dashboard-app-Dpr9EPlS.js}

@@ -4020,7 +4020,7 @@ MdListItem = __decorate([t$1('md-list-item')], MdListItem);
  */
 const showLogLevelDialog = async client => {
   var _document$querySelect;
-  await import('./log-level-dialog-BheZgiD2.js');
+  await import('./log-level-dialog-ChcYXgfz.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);
@@ -15680,7 +15680,7 @@ const clusters = {
  * SPDX-License-Identifier: Apache-2.0
  */
 const showDialogBox = async (type, dialogParams) => {
-  await import('./dialog-box-RdFIn1hd.js');
+  await import('./dialog-box-DVtkVga3.js');
   return new Promise(resolve => {
     const dialog = document.createElement("dialog-box");
     dialog.params = dialogParams;
@@ -15847,6 +15847,39 @@ let MdTextButton = class MdTextButton extends TextButton {};
 MdTextButton.styles = [styles$g, styles$6];
 MdTextButton = __decorate([t$1('md-text-button')], MdTextButton);
 
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const showNodeBindingDialog = async (client, node, endpoint) => {
+  var _document$querySelect;
+  await import('./node-binding-dialog-BI9spkUK.js');
+  const dialog = document.createElement("node-binding-dialog");
+  dialog.client = client;
+  dialog.node = node;
+  dialog.endpoint = endpoint;
+  (_document$querySelect = document.querySelector("matter-dashboard-app")) === null || _document$querySelect === void 0 || _document$querySelect.renderRoot.appendChild(dialog);
+};
+
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+function handleAsync(fn, onError) {
+  return () => {
+    fn().catch(error => {
+      console.error("Async operation failed:", error);
+    });
+  };
+}
+function fireAndForget(promise, onError) {
+  promise.catch(error => {
+    console.error("Async operation failed:", error);
+  });
+}
+
 /**
  * @license
  * Copyright 2025-2026 Open Home Foundation
@@ -16132,39 +16165,6 @@ function createWiFiRouterIconDataUrl(isSelected = false) {
   return createIconDataUrl(mdiWifi, color);
 }
 
-/**
- * @license
- * Copyright 2025-2026 Open Home Foundation
- * SPDX-License-Identifier: Apache-2.0
- */
-const showNodeBindingDialog = async (client, node, endpoint) => {
-  var _document$querySelect;
-  await import('./node-binding-dialog-CtmtVf1D.js');
-  const dialog = document.createElement("node-binding-dialog");
-  dialog.client = client;
-  dialog.node = node;
-  dialog.endpoint = endpoint;
-  (_document$querySelect = document.querySelector("matter-dashboard-app")) === null || _document$querySelect === void 0 || _document$querySelect.renderRoot.appendChild(dialog);
-};
-
-/**
- * @license
- * Copyright 2025-2026 Open Home Foundation
- * SPDX-License-Identifier: Apache-2.0
- */
-function handleAsync(fn, onError) {
-  return () => {
-    fn().catch(error => {
-      console.error("Async operation failed:", error);
-    });
-  };
-}
-function fireAndForget(promise, onError) {
-  promise.catch(error => {
-    console.error("Async operation failed:", error);
-  });
-}
-
 /**
  * @license
  * Copyright 2018 Google LLC
@@ -16403,7 +16403,9 @@ 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>
@@ -18910,7 +18912,9 @@ 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"
@@ -19334,9 +19338,7 @@ 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>
         `;
   }
@@ -21156,7 +21158,9 @@ 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() {
@@ -21168,7 +21172,9 @@ 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() {
@@ -21451,7 +21457,9 @@ let NetworkDetails = class extends i$4 {
                                                   ${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}
+                                                  ${!conn.isOutgoing ? b`
+                                                                <span class="direction-hint">(reverse)</span>
+                                                            ` : A}
                                               </div>
                                           </div>
                                       </div>
@@ -21523,7 +21531,9 @@ 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">
@@ -21683,7 +21693,9 @@ 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">
@@ -30639,7 +30651,9 @@ 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);
@@ -30783,7 +30797,9 @@ 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);
@@ -31345,7 +31361,7 @@ MatterNodeView = __decorateClass$3([t$1("matter-node-view")], MatterNodeView);
  */
 const showCommissionNodeDialog = async client => {
   var _document$querySelect;
-  await import('./commission-node-dialog-DOtOjWT7.js');
+  await import('./commission-node-dialog-h9QTg0uL.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);
@@ -31388,7 +31404,9 @@ 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>
@@ -31528,7 +31546,9 @@ 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-CtmtVf1D.js → node-binding-dialog-BI9spkUK.js}

@@ -1,121 +1,7 @@
-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-Dq3JvQBw.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-Dpr9EPlS.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 
-var _staticBlock$1;
-/**
- * @license
- * Copyright 2025-2026 Open Home Foundation
- * SPDX-License-Identifier: Apache-2.0
- */
-class BindingEntryDataTransformer {
-  static transform(input) {
-    if (!input || typeof input !== "object") {
-      throw new Error("Invalid input: expected an object");
-    }
-    const result = {};
-    const keyMapping = BindingEntryDataTransformer.KEY_MAPPING;
-    for (const key in input) {
-      if (key in keyMapping) {
-        const mappedKey = keyMapping[key];
-        if (mappedKey) {
-          const value = input[key];
-          if (value === void 0) {
-            continue;
-          }
-          if (mappedKey === "fabricIndex") {
-            result[mappedKey] = value === void 0 ? void 0 : Number(value);
-          } else if (mappedKey === "node" || mappedKey === "endpoint") {
-            result[mappedKey] = Number(value);
-          } else {
-            result[mappedKey] = value;
-          }
-        }
-      }
-    }
-    return result;
-  }
-  static #_ = _staticBlock$1 = () => this.KEY_MAPPING = {
-    "1": "node",
-    "3": "endpoint",
-    "4": "cluster",
-    "254": "fabricIndex"
-  };
-}
-_staticBlock$1();
-
-var _staticBlock, _staticBlock2;
-/**
- * @license
- * Copyright 2025-2026 Open Home Foundation
- * SPDX-License-Identifier: Apache-2.0
- */
-class AccessControlTargetTransformer {
-  static transform(input) {
-    if (!input || typeof input !== "object") {
-      throw new Error("Invalid input: expected an object");
-    }
-    const result = {};
-    const keyMapping = AccessControlTargetTransformer.KEY_MAPPING;
-    for (const key in input) {
-      if (key in keyMapping) {
-        const mappedKey = keyMapping[key];
-        if (mappedKey) {
-          const value = input[key];
-          if (value === void 0) continue;
-          result[mappedKey] = value;
-        }
-      }
-    }
-    return result;
-  }
-  static #_ = _staticBlock = () => this.KEY_MAPPING = {
-    "0": "cluster",
-    "1": "endpoint",
-    "2": "deviceType"
-  };
-}
-_staticBlock();
-class AccessControlEntryDataTransformer {
-  static transform(input) {
-    if (!input || typeof input !== "object") {
-      throw new Error("Invalid input: expected an object");
-    }
-    const result = {};
-    const keyMapping = AccessControlEntryDataTransformer.KEY_MAPPING;
-    for (const key in input) {
-      if (key in keyMapping) {
-        const mappedKey = keyMapping[key];
-        if (mappedKey) {
-          const value = input[key];
-          if (value === void 0) continue;
-          if (mappedKey === "subjects") {
-            result[mappedKey] = Array.isArray(value) ? value : void 0;
-          } else if (mappedKey === "targets") {
-            if (Array.isArray(value)) {
-              const _targets = Object.values(value).map(val => AccessControlTargetTransformer.transform(val));
-              result[mappedKey] = _targets;
-            } else {
-              result[mappedKey] = void 0;
-            }
-          } else {
-            result[mappedKey] = value;
-          }
-        }
-      }
-    }
-    return result;
-  }
-  static #_ = _staticBlock2 = () => this.KEY_MAPPING = {
-    "1": "privilege",
-    "2": "authMode",
-    "3": "subjects",
-    "4": "targets",
-    "254": "fabricIndex"
-  };
-}
-_staticBlock2();
-
 /**
  * @license
  * Copyright 2025-2026 Open Home Foundation
@@ -214,6 +100,120 @@ function formatBatchMessage(outcome, successCount, failureCount, errorCounts) {
   return `Partial failure: ${successCount} ${entryWord(successCount)} succeeded, ${failureCount} failed (${errorParts}). Please verify.`;
 }
 
+var _staticBlock$1, _staticBlock2;
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+class AccessControlTargetTransformer {
+  static transform(input) {
+    if (!input || typeof input !== "object") {
+      throw new Error("Invalid input: expected an object");
+    }
+    const result = {};
+    const keyMapping = AccessControlTargetTransformer.KEY_MAPPING;
+    for (const key in input) {
+      if (key in keyMapping) {
+        const mappedKey = keyMapping[key];
+        if (mappedKey) {
+          const value = input[key];
+          if (value === void 0) continue;
+          result[mappedKey] = value;
+        }
+      }
+    }
+    return result;
+  }
+  static #_ = _staticBlock$1 = () => this.KEY_MAPPING = {
+    "0": "cluster",
+    "1": "endpoint",
+    "2": "deviceType"
+  };
+}
+_staticBlock$1();
+class AccessControlEntryDataTransformer {
+  static transform(input) {
+    if (!input || typeof input !== "object") {
+      throw new Error("Invalid input: expected an object");
+    }
+    const result = {};
+    const keyMapping = AccessControlEntryDataTransformer.KEY_MAPPING;
+    for (const key in input) {
+      if (key in keyMapping) {
+        const mappedKey = keyMapping[key];
+        if (mappedKey) {
+          const value = input[key];
+          if (value === void 0) continue;
+          if (mappedKey === "subjects") {
+            result[mappedKey] = Array.isArray(value) ? value : void 0;
+          } else if (mappedKey === "targets") {
+            if (Array.isArray(value)) {
+              const _targets = Object.values(value).map(val => AccessControlTargetTransformer.transform(val));
+              result[mappedKey] = _targets;
+            } else {
+              result[mappedKey] = void 0;
+            }
+          } else {
+            result[mappedKey] = value;
+          }
+        }
+      }
+    }
+    return result;
+  }
+  static #_ = _staticBlock2 = () => this.KEY_MAPPING = {
+    "1": "privilege",
+    "2": "authMode",
+    "3": "subjects",
+    "4": "targets",
+    "254": "fabricIndex"
+  };
+}
+_staticBlock2();
+
+var _staticBlock;
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+class BindingEntryDataTransformer {
+  static transform(input) {
+    if (!input || typeof input !== "object") {
+      throw new Error("Invalid input: expected an object");
+    }
+    const result = {};
+    const keyMapping = BindingEntryDataTransformer.KEY_MAPPING;
+    for (const key in input) {
+      if (key in keyMapping) {
+        const mappedKey = keyMapping[key];
+        if (mappedKey) {
+          const value = input[key];
+          if (value === void 0) {
+            continue;
+          }
+          if (mappedKey === "fabricIndex") {
+            result[mappedKey] = value === void 0 ? void 0 : Number(value);
+          } else if (mappedKey === "node" || mappedKey === "endpoint") {
+            result[mappedKey] = Number(value);
+          } else {
+            result[mappedKey] = value;
+          }
+        }
+      }
+    }
+    return result;
+  }
+  static #_ = _staticBlock = () => this.KEY_MAPPING = {
+    "1": "node",
+    "3": "endpoint",
+    "4": "cluster",
+    "254": "fabricIndex"
+  };
+}
+_staticBlock();
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@matter-server/dashboard",
-    "version": "0.3.6",
+    "version": "0.3.7",
     "description": "Dashboard for OHF Matter Server",
     "bugs": {
         "url": "https://github.com/matter-js/matterjs-server/issues"
@@ -37,8 +37,8 @@
     "dependencies": {
         "@lit/context": "^1.1.6",
         "@material/web": "^2.4.1",
-        "@matter-server/ws-client": "0.3.6",
-        "@matter-server/custom-clusters": "0.3.6",
+        "@matter-server/ws-client": "0.3.7",
+        "@matter-server/custom-clusters": "0.3.7",
         "@mdi/js": "^7.4.47",
         "lit": "^3.3.2",
         "tslib": "^2.8.1",

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

@@ -24,19 +24,25 @@ 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/binding/node-binding-dialog.ts

@@ -6,29 +6,26 @@
 
 import "@material/web/button/text-button";
 import "@material/web/dialog/dialog";
-import type { MdDialog } from "@material/web/dialog/dialog.js";
+import { consume } from "@lit/context";
 import "@material/web/list/list";
 import "@material/web/list/list-item";
 import "@material/web/textfield/outlined-text-field";
-import type { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js";
+import type { MdDialog } from "@material/web/dialog/dialog.js";
 import "../../../components/ha-svg-icon";
-
+import type { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js";
 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 { clientContext } from "../../../client/client-context.js";
 import { handleAsync } from "../../../util/async-handler.js";
+import { analyzeBatchResults, type MatterBatchResult } from "../../../util/matter-status.js";
 import { preventDefault } from "../../../util/prevent_default.js";
-import { BindingEntryDataTransformer, BindingEntryStruct, InputType } from "./model.js";
-
 import {
     AccessControlEntryDataTransformer,
     AccessControlEntryStruct,
     AccessControlTargetStruct,
 } from "../acl/model.js";
-
-import { consume } from "@lit/context";
-import { clientContext } from "../../../client/client-context.js";
-import { analyzeBatchResults, type MatterBatchResult } from "../../../util/matter-status.js";
+import { BindingEntryDataTransformer, BindingEntryStruct, InputType } from "./model.js";
 
 @customElement("node-binding-dialog")
 export class NodeBindingDialog extends LitElement {

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

@@ -25,8 +25,9 @@ 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}
@@ -43,11 +44,18 @@ 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,7 +33,13 @@ 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,14 +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() {