@matter-server/dashboard 0.6.7 → 0.7.0-alpha.0-20260512-b404bea

package/dist/esm/components/dialogs/settings/settings-dialog.js

@@ -13,19 +13,29 @@ var __decorateClass = (decorators, target, key, kind) => {
  * Copyright 2025-2026 Open Home Foundation
  * SPDX-License-Identifier: Apache-2.0
  */
+import "@material/web/button/filled-button";
 import "@material/web/button/text-button";
 import "@material/web/dialog/dialog";
 import "@material/web/divider/divider";
+import "@material/web/iconbutton/icon-button";
 import "@material/web/switch/switch";
-import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import "@material/web/textfield/outlined-text-field";
+import { mdiAccessPoint, mdiEye, mdiEyeOff, mdiWifi } from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { handleAsync } from "../../../util/async-handler.js";
 import { DevModeService } from "../../../util/dev-mode-service.js";
 import { preventDefault } from "../../../util/prevent_default.js";
+import "../../../components/ha-svg-icon.js";
+import { showAlertDialog } from "../../dialog-box/show-dialog-box.js";
 import "./log-level-section.js";
 let SettingsDialog = class extends LitElement {
   constructor() {
     super(...arguments);
     this._devMode = DevModeService.active;
+    this._expandedRow = null;
+    this._credLoading = false;
+    this._showPassword = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -37,6 +47,17 @@ let SettingsDialog = class extends LitElement {
     super.disconnectedCallback();
     this._unsubscribeDev?.();
   }
+  firstUpdated() {
+    const knownSections = /* @__PURE__ */ new Set(["network-credentials"]);
+    if (this.scrollToSection && knownSections.has(this.scrollToSection)) {
+      requestAnimationFrame(() => {
+        this.renderRoot.querySelector(`#${this.scrollToSection}`)?.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+      });
+    }
+  }
   _close() {
     this.shadowRoot.querySelector("md-dialog").close();
   }
@@ -53,6 +74,86 @@ let SettingsDialog = class extends LitElement {
     navigator.clipboard?.writeText(url.toString()).catch(() => {
     });
   }
+  _toggleExpand(row) {
+    this._expandedRow = this._expandedRow === row ? null : row;
+    this._showPassword = false;
+  }
+  _cancelCred() {
+    this._expandedRow = null;
+    this._showPassword = false;
+  }
+  _togglePassword() {
+    this._showPassword = !this._showPassword;
+  }
+  async _saveWifi() {
+    const ssid = this._wifiSsidField.value.trim();
+    if (!ssid) {
+      showAlertDialog({ title: "Validation error", text: "SSID is required" });
+      return;
+    }
+    const password = this._wifiPasswordField.value;
+    if (!password) {
+      showAlertDialog({ title: "Validation error", text: "Password is required" });
+      return;
+    }
+    this._credLoading = true;
+    try {
+      await this.client.setWifiCredentials(ssid, password);
+      this._expandedRow = null;
+      this._showPassword = false;
+    } catch (err) {
+      showAlertDialog({ title: "Error saving WiFi credentials", text: err.message });
+    } finally {
+      this._credLoading = false;
+    }
+  }
+  async _removeWifi() {
+    this._credLoading = true;
+    try {
+      await this.client.removeWifiCredentials();
+      this._expandedRow = null;
+      this._showPassword = false;
+    } catch (err) {
+      showAlertDialog({ title: "Error removing WiFi credentials", text: err.message });
+    } finally {
+      this._credLoading = false;
+    }
+  }
+  async _saveThread() {
+    const dataset = this._threadDatasetField.value.trim();
+    if (!dataset) {
+      showAlertDialog({ title: "Validation error", text: "Thread dataset is required" });
+      return;
+    }
+    if (!/^[0-9a-fA-F]*$/.test(dataset) || dataset.length % 2 !== 0) {
+      showAlertDialog({
+        title: "Invalid Thread dataset",
+        text: "Must be a hex string with even length (each byte is two hex characters)"
+      });
+      return;
+    }
+    this._credLoading = true;
+    try {
+      await this.client.setThreadOperationalDataset(dataset);
+      this._expandedRow = null;
+    } catch (err) {
+      showAlertDialog({ title: "Error saving Thread dataset", text: err.message });
+    } finally {
+      this._credLoading = false;
+    }
+  }
+  async _removeThread() {
+    this._credLoading = true;
+    try {
+      await this.client.removeThreadDataset();
+      this._expandedRow = null;
+      this._showPassword = false;
+    } catch (err) {
+      showAlertDialog({ title: "Error removing Thread dataset", text: err.message });
+    } finally {
+      this._credLoading = false;
+    }
+  }
   render() {
     return html`
             <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
@@ -85,6 +186,95 @@ let SettingsDialog = class extends LitElement {
                         <h3 class="section-title">Server log levels</h3>
                         <log-level-section .client=${this.client}></log-level-section>
                     </section>
+
+                    <md-divider></md-divider>
+
+                    <section id="network-credentials" class="section">
+                        <h3 class="section-title">Network credentials</h3>
+
+                        <div class="cred-row">
+                            <div class="cred-info">
+                                <ha-svg-icon .path=${mdiWifi}></ha-svg-icon>
+                                <span class="cred-label">WiFi</span>
+                                ${this.client.serverInfo.wifi_credentials_set ? html`<span class="cred-value">${this.client.serverInfo.wifi_ssid}</span>` : html`<span class="cred-unset">Not configured</span>`}
+                            </div>
+                            <md-text-button @click=${() => this._toggleExpand("wifi")} .disabled=${this._credLoading}
+                                >Edit</md-text-button
+                            >
+                        </div>
+
+                        ${this._expandedRow === "wifi" ? html` <div class="cred-form">
+                                  <md-outlined-text-field
+                                      id="cred-wifi-ssid"
+                                      label="SSID"
+                                      .value=${this.client.serverInfo.wifi_ssid ?? ""}
+                                      .disabled=${this._credLoading}
+                                  ></md-outlined-text-field>
+                                  <div class="password-row">
+                                      <md-outlined-text-field
+                                          id="cred-wifi-password"
+                                          label="Password"
+                                          .type=${this._showPassword ? "text" : "password"}
+                                          .disabled=${this._credLoading}
+                                      ></md-outlined-text-field>
+                                      <md-icon-button @click=${this._togglePassword}>
+                                          <ha-svg-icon .path=${this._showPassword ? mdiEyeOff : mdiEye}></ha-svg-icon>
+                                      </md-icon-button>
+                                  </div>
+                                  <div class="form-actions">
+                                      <md-text-button @click=${this._cancelCred} .disabled=${this._credLoading}
+                                          >Cancel</md-text-button
+                                      >
+                                      ${this.client.serverInfo.wifi_credentials_set ? html`<md-text-button
+                                                @click=${handleAsync(() => this._removeWifi())}
+                                                .disabled=${this._credLoading}
+                                                >Remove</md-text-button
+                                            >` : nothing}
+                                      <md-filled-button
+                                          @click=${handleAsync(() => this._saveWifi())}
+                                          .disabled=${this._credLoading}
+                                          >Save</md-filled-button
+                                      >
+                                  </div>
+                              </div>` : nothing}
+
+                        <div class="cred-row cred-row-thread">
+                            <div class="cred-info">
+                                <ha-svg-icon .path=${mdiAccessPoint}></ha-svg-icon>
+                                <span class="cred-label">Thread</span>
+                                ${this.client.serverInfo.thread_credentials_set ? html`<span class="cred-value">Thread network set</span>` : html`<span class="cred-unset">Not configured</span>`}
+                            </div>
+                            <md-text-button @click=${() => this._toggleExpand("thread")} .disabled=${this._credLoading}
+                                >Edit</md-text-button
+                            >
+                        </div>
+
+                        ${this._expandedRow === "thread" ? html` <div class="cred-form">
+                                  <md-outlined-text-field
+                                      id="cred-thread-dataset"
+                                      label="Thread dataset"
+                                      supporting-text="Hex string (e.g. 0E080000...)"
+                                      .disabled=${this._credLoading}
+                                  ></md-outlined-text-field>
+                                  <div class="form-actions">
+                                      <md-text-button @click=${this._cancelCred} .disabled=${this._credLoading}
+                                          >Cancel</md-text-button
+                                      >
+                                      ${this.client.serverInfo.thread_credentials_set ? html`<md-text-button
+                                                @click=${handleAsync(() => this._removeThread())}
+                                                .disabled=${this._credLoading}
+                                                >Remove</md-text-button
+                                            >` : nothing}
+                                      <md-filled-button
+                                          @click=${handleAsync(() => this._saveThread())}
+                                          .disabled=${this._credLoading}
+                                          >Save</md-filled-button
+                                      >
+                                  </div>
+                              </div>` : nothing}
+
+                        <p class="cred-hint">Used when commissioning new devices. Existing devices are not affected.</p>
+                    </section>
                 </div>
                 <div slot="actions">
                     <md-text-button @click=${this._close}>Close</md-text-button>
@@ -149,6 +339,80 @@ SettingsDialog.styles = css`
         md-divider {
             margin: 12px 0;
         }
+
+        .cred-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 4px 0;
+        }
+
+        .cred-row-thread {
+            margin-top: 8px;
+        }
+
+        .cred-info {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 0.9rem;
+            color: var(--md-sys-color-on-surface);
+        }
+
+        .cred-label {
+            font-weight: 500;
+            min-width: 52px;
+        }
+
+        .cred-value {
+            color: var(--md-sys-color-on-surface-variant);
+        }
+
+        .cred-unset {
+            color: var(--md-sys-color-on-surface-variant);
+            font-style: italic;
+        }
+
+        .cred-form {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            padding: 8px 0 4px 0;
+        }
+
+        .password-row {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .password-row md-outlined-text-field {
+            flex: 1;
+        }
+
+        .form-actions {
+            display: flex;
+            gap: 4px;
+            justify-content: flex-end;
+        }
+
+        .cred-hint {
+            margin: 10px 0 0 0;
+            font-size: 0.8rem;
+            color: var(--md-sys-color-on-surface-variant);
+        }
+
+        .cred-info ha-svg-icon {
+            width: 18px;
+            height: 18px;
+            color: var(--md-sys-color-on-surface-variant);
+        }
+
+        .password-row ha-svg-icon {
+            width: 18px;
+            height: 18px;
+            color: var(--md-sys-color-on-surface-variant);
+        }
     `;
 __decorateClass([
   property({ attribute: false })
@@ -156,6 +420,27 @@ __decorateClass([
 __decorateClass([
   state()
 ], SettingsDialog.prototype, "_devMode", 2);
+__decorateClass([
+  property({ attribute: false })
+], SettingsDialog.prototype, "scrollToSection", 2);
+__decorateClass([
+  state()
+], SettingsDialog.prototype, "_expandedRow", 2);
+__decorateClass([
+  state()
+], SettingsDialog.prototype, "_credLoading", 2);
+__decorateClass([
+  state()
+], SettingsDialog.prototype, "_showPassword", 2);
+__decorateClass([
+  query("#cred-wifi-ssid")
+], SettingsDialog.prototype, "_wifiSsidField", 2);
+__decorateClass([
+  query("#cred-wifi-password")
+], SettingsDialog.prototype, "_wifiPasswordField", 2);
+__decorateClass([
+  query("#cred-thread-dataset")
+], SettingsDialog.prototype, "_threadDatasetField", 2);
 SettingsDialog = __decorateClass([
   customElement("settings-dialog")
 ], SettingsDialog);

package/dist/esm/components/dialogs/settings/settings-dialog.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/dialogs/settings/settings-dialog.ts"],
-  "mappings": ";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,OAAO;AACP,OAAO;AAEP,OAAO;AACP,OAAO;AAGP,SAAS,KAAK,MAAM,kBAAkB;AACtC,SAAS,eAAe,UAAU,aAAa;AAC/C,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,OAAO;AAGA,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC;AAAA;AAIM,SAAQ,WAAW,eAAe;AAAA;AAAA,EAIlC,oBAAoB;AACzB,UAAM,kBAAkB;AACxB,SAAK,kBAAkB,eAAe,UAAU,YAAU;AACtD,WAAK,WAAW;AAAA,IACpB,CAAC;AAAA,EACL;AAAA,EAES,uBAAuB;AAC5B,UAAM,qBAAqB;AAC3B,SAAK,kBAAkB;AAAA,EAC3B;AAAA,EAEQ,SAAS;AACb,SAAK,WAAY,cAAwB,WAAW,EAAG,MAAM;AAAA,EACjE;AAAA,EAEQ,gBAAgB;AACpB,SAAK,WAAY,YAAY,IAAI;AAAA,EACrC;AAAA,EAEQ,aAAa,OAAc;AAC/B,UAAM,SAAS,MAAM;AACrB,mBAAe,UAAU,OAAO,QAAQ;AAAA,EAC5C;AAAA,EAEQ,eAAe;AACnB,UAAM,MAAM,IAAI,IAAI,OAAO,SAAS,IAAI;AACxC,QAAI,aAAa,IAAI,OAAO,IAAI;AAChC,cAAU,WAAW,UAAU,IAAI,SAAS,CAAC,EAAE,MAAM,MAAM;AAAA,IAE3D,CAAC;AAAA,EACL;AAAA,EAEmB,SAAS;AACxB,WAAO;AAAA,sCACuB,cAAc,YAAY,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4CAetC,KAAK,QAAQ;AAAA,0CACf,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,qDAIN,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qDAQjB,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA,6CAInB,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA,EAIpD;AA2DJ;AA1Ia,eAiFO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA/ElB;AAAA,EADN,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GADrB,eAEF;AAEU;AAAA,EAAhB,MAAM;AAAA,GAJE,eAIQ;AAJR,iBAAN;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB;",
+  "mappings": "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",
   "names": []
 }

package/dist/esm/components/dialogs/settings/show-settings-dialog.d.ts

@@ -4,5 +4,5 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { MatterClient } from "@matter-server/ws-client";
-export declare const showSettingsDialog: (client: MatterClient) => Promise<void>;
+export declare const showSettingsDialog: (client: MatterClient, section?: string) => Promise<void>;
 //# sourceMappingURL=show-settings-dialog.d.ts.map

package/dist/esm/components/dialogs/settings/show-settings-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"show-settings-dialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/dialogs/settings/show-settings-dialog.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,eAAO,MAAM,kBAAkB,WAAkB,YAAY,kBAK5D,CAAC"}
+{"version":3,"file":"show-settings-dialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/dialogs/settings/show-settings-dialog.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,eAAO,MAAM,kBAAkB,WAAkB,YAAY,YAAY,MAAM,kBAM9E,CAAC"}

package/dist/esm/components/dialogs/settings/show-settings-dialog.js

@@ -3,10 +3,11 @@
  * Copyright 2025-2026 Open Home Foundation
  * SPDX-License-Identifier: Apache-2.0
  */
-const showSettingsDialog = async (client) => {
+const showSettingsDialog = async (client, section) => {
   await import("./settings-dialog.js");
   const dialog = document.createElement("settings-dialog");
   dialog.client = client;
+  if (section) dialog.scrollToSection = section;
   document.querySelector("matter-dashboard-app")?.renderRoot.appendChild(dialog);
 };
 export {

package/dist/esm/components/dialogs/settings/show-settings-dialog.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/dialogs/settings/show-settings-dialog.ts"],
-  "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAQO,MAAM,qBAAqB,OAAO,WAAyB;AAC9D,QAAM,OAAO,sBAAsB;AACnC,QAAM,SAAS,SAAS,cAAc,iBAAiB;AACvD,SAAO,SAAS;AAChB,WAAS,cAAc,sBAAsB,GAAG,WAAW,YAAY,MAAM;AACjF;",
+  "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAQO,MAAM,qBAAqB,OAAO,QAAsB,YAAqB;AAChF,QAAM,OAAO,sBAAsB;AACnC,QAAM,SAAS,SAAS,cAAc,iBAAiB;AACvD,SAAO,SAAS;AAChB,MAAI,QAAS,QAAO,kBAAkB;AACtC,WAAS,cAAc,sBAAsB,GAAG,WAAW,YAAY,MAAM;AACjF;",
   "names": []
 }

package/dist/web/js/{attribute-write-dialog-DvCdBC5h.js → attribute-write-dialog-DzMWN_T3.js}

@@ -1,4 +1,4 @@
-import { q as i, n, u as r, d as e, i as i$1, A, O as formatHex, j as b, K as handleAsync, t } from './matter-dashboard-app-Dh-6FL-7.js';
+import { q as i, n, u as r, d as e, i as i$1, A, S as formatHex, j as b, K as handleAsync, t } from './matter-dashboard-app-BZOhBELR.js';
 import { t as toBigIntAwareJson } from './main.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import { p as parseJsonPayload } from './parse-json-payload-DU9TWKdu.js';

package/dist/web/js/{command-invoke-dialog-wg-tTS3n.js → command-invoke-dialog-BhAOXzjX.js}

@@ -1,4 +1,4 @@
-import { q as i, n, u as r, d as e, i as i$1, A, O as formatHex, j as b, K as handleAsync, t } from './matter-dashboard-app-Dh-6FL-7.js';
+import { q as i, n, u as r, d as e, i as i$1, A, S as formatHex, j as b, K as handleAsync, t } from './matter-dashboard-app-BZOhBELR.js';
 import { t as toBigIntAwareJson } from './main.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import { p as parseJsonPayload, i as isPlainObject } from './parse-json-payload-DU9TWKdu.js';

package/dist/web/js/{commission-node-dialog-DrlOw53q.js → commission-node-dialog-DF87YIqR.js}

@@ -1,4 +1,4 @@
-import { u as r, n, t, i, j as b } from './matter-dashboard-app-Dh-6FL-7.js';
+import { u as r, n, t, i, j as b } from './matter-dashboard-app-BZOhBELR.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 
@@ -15,7 +15,11 @@ let ComissionNodeDialog = class extends i {
     return b`
             <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
                 <div slot="headline">Commission node</div>
-                <div slot="content" @node-commissioned=${this._nodeCommissioned}>
+                <div
+                    slot="content"
+                    @node-commissioned=${this._nodeCommissioned}
+                    @request-settings=${this._requestSettings}
+                >
                     ${!this._mode ? b`<md-list>
                               <md-list-item
                                   type="button"
@@ -44,24 +48,32 @@ let ComissionNodeDialog = class extends i {
     if (!this.client.serverInfo.bluetooth_enabled) {
       return;
     }
-    import('./commission-node-wifi-DiaG9EmR.js');
+    import('./commission-node-wifi-PCsot-CX.js');
     this._mode = "wifi";
   }
   _commissionThread() {
     if (!this.client.serverInfo.bluetooth_enabled) {
       return;
     }
-    import('./commission-node-thread-C8FyqV6l.js');
+    import('./commission-node-thread-m2fqED-2.js');
     this._mode = "thread";
   }
   _commissionExisting() {
-    import('./commission-node-existing-BujgZH95.js');
+    import('./commission-node-existing-DLcWvJTL.js');
     this._mode = "existing";
   }
   _nodeCommissioned(ev) {
     window.location.href = `#node/${ev.detail.node_id}`;
     this._close();
   }
+  _requestSettings() {
+    import('./matter-dashboard-app-BZOhBELR.js').then(function (n) { return n.X; }).then(({
+      showSettingsDialog
+    }) => {
+      showSettingsDialog(this.client, "network-credentials");
+    });
+    this._close();
+  }
   _close() {
     this.shadowRoot.querySelector("md-dialog").close();
   }

package/dist/web/js/{commission-node-existing-BujgZH95.js → commission-node-existing-DLcWvJTL.js}

@@ -1,5 +1,5 @@
-import { u as r, P as c, Q as clientContext, n, d as e, t, i, A, K as handleAsync, j as b, J as showAlertDialog } from './matter-dashboard-app-Dh-6FL-7.js';
-import { f as fireEvent } from './fire_event-CfuDUSb7.js';
+import { u as r, T as c, U as clientContext, n, d as e, t, i, A, K as handleAsync, j as b, J as showAlertDialog } from './matter-dashboard-app-BZOhBELR.js';
+import { f as fireEvent } from './fire_event-BnpND_gK.js';
 import './main.js';
 
 var __defProp = Object.defineProperty;

package/dist/web/js/{commission-node-thread-C8FyqV6l.js → commission-node-thread-m2fqED-2.js}

@@ -1,5 +1,5 @@
-import { u as r, P as c, Q as clientContext, n, d as e, t, i, A, K as handleAsync, j as b, J as showAlertDialog } from './matter-dashboard-app-Dh-6FL-7.js';
-import { f as fireEvent } from './fire_event-CfuDUSb7.js';
+import { q as i, T as c, U as clientContext, n, u as r, d as e, i as i$1, A, K as handleAsync, j as b, P as mdiAccessPoint, J as showAlertDialog, t } from './matter-dashboard-app-BZOhBELR.js';
+import { f as fireEvent } from './fire_event-BnpND_gK.js';
 import './main.js';
 
 var __defProp = Object.defineProperty;
@@ -10,7 +10,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let CommissionNodeThread = class extends i {
+let CommissionNodeThread = class extends i$1 {
   constructor() {
     super(...arguments);
     this._loading = false;
@@ -29,7 +29,15 @@ let CommissionNodeThread = class extends i {
                     >Set Thread Dataset</md-outlined-button
                 >${this._loading ? b` <md-circular-progress indeterminate></md-circular-progress> ` : A}`;
     }
-    return b`<md-outlined-text-field label="Pairing code" .disabled="${this._loading}"> </md-outlined-text-field>
+    return b`<div class="cred-chip">
+                <ha-svg-icon .path=${mdiAccessPoint}></ha-svg-icon>
+                <span>Thread network set</span>
+                <span class="sep">·</span>
+                <button class="edit-link" @click=${() => fireEvent(this, "request-settings", {})}>
+                    Edit in Settings
+                </button>
+            </div>
+            <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}"
@@ -79,6 +87,37 @@ let CommissionNodeThread = class extends i {
     }
   }
 };
+CommissionNodeThread.styles = i`
+        .cred-chip {
+            display: flex;
+            width: fit-content;
+            align-items: center;
+            gap: 6px;
+            background: var(--md-sys-color-surface-container);
+            color: var(--md-sys-color-on-surface-variant);
+            border-radius: 16px;
+            padding: 4px 10px 4px 6px;
+            font-size: 0.85em;
+            margin-bottom: 12px;
+        }
+        .cred-chip ha-svg-icon {
+            width: 18px;
+            height: 18px;
+            flex-shrink: 0;
+        }
+        .cred-chip .sep {
+            opacity: 0.5;
+        }
+        .cred-chip .edit-link {
+            cursor: pointer;
+            color: var(--md-sys-color-primary);
+            background: none;
+            border: none;
+            padding: 0;
+            font: inherit;
+            font-size: inherit;
+        }
+    `;
 __decorateClass([c({
   context: clientContext,
   subscribe: true

package/dist/web/js/{commission-node-wifi-DiaG9EmR.js → commission-node-wifi-PCsot-CX.js}

@@ -1,5 +1,5 @@
-import { u as r, P as c, Q as clientContext, n, d as e, t, i, A, K as handleAsync, j as b, J as showAlertDialog } from './matter-dashboard-app-Dh-6FL-7.js';
-import { f as fireEvent } from './fire_event-CfuDUSb7.js';
+import { q as i, T as c, U as clientContext, n, u as r, d as e, i as i$1, A, K as handleAsync, j as b, O as mdiWifi, J as showAlertDialog, t } from './matter-dashboard-app-BZOhBELR.js';
+import { f as fireEvent } from './fire_event-BnpND_gK.js';
 import './main.js';
 
 var __defProp = Object.defineProperty;
@@ -10,7 +10,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let CommissionNodeWifi = class extends i {
+let CommissionNodeWifi = class extends i$1 {
   constructor() {
     super(...arguments);
     this._loading = false;
@@ -31,7 +31,15 @@ let CommissionNodeWifi = class extends i {
                     >Set WiFi Credentials</md-outlined-button
                 >${this._loading ? b`<md-circular-progress indeterminate></md-circular-progress>` : A}`;
     }
-    return b`<md-outlined-text-field label="Pairing code" .disabled="${this._loading}"> </md-outlined-text-field>
+    return b`<div class="cred-chip">
+                <ha-svg-icon .path=${mdiWifi}></ha-svg-icon>
+                <span>WiFi: ${this.client.serverInfo.wifi_ssid ?? "network set"}</span>
+                <span class="sep">·</span>
+                <button class="edit-link" @click=${() => fireEvent(this, "request-settings", {})}>
+                    Edit in Settings
+                </button>
+            </div>
+            <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}"
@@ -89,6 +97,37 @@ let CommissionNodeWifi = class extends i {
     }
   }
 };
+CommissionNodeWifi.styles = i`
+        .cred-chip {
+            display: flex;
+            width: fit-content;
+            align-items: center;
+            gap: 6px;
+            background: var(--md-sys-color-surface-container);
+            color: var(--md-sys-color-on-surface-variant);
+            border-radius: 16px;
+            padding: 4px 10px 4px 6px;
+            font-size: 0.85em;
+            margin-bottom: 12px;
+        }
+        .cred-chip ha-svg-icon {
+            width: 18px;
+            height: 18px;
+            flex-shrink: 0;
+        }
+        .cred-chip .sep {
+            opacity: 0.5;
+        }
+        .cred-chip .edit-link {
+            cursor: pointer;
+            color: var(--md-sys-color-primary);
+            background: none;
+            border: none;
+            padding: 0;
+            font: inherit;
+            font-size: inherit;
+        }
+    `;
 __decorateClass([c({
   context: clientContext,
   subscribe: true

package/dist/web/js/{dialog-box-QK2bjCAa.js → dialog-box-DiqYXM8c.js}

@@ -1,4 +1,4 @@
-import { q as i, n, i as i$1, j as b, t } from './matter-dashboard-app-Dh-6FL-7.js';
+import { q as i, n, i as i$1, j as b, t } from './matter-dashboard-app-BZOhBELR.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 

package/dist/web/js/{fire_event-CfuDUSb7.js → fire_event-BnpND_gK.js}

@@ -1,4 +1,4 @@
-import { m as mixinDelegatesAria, i, _ as __decorate, n, A, h as e, j as b, q as i$1, t } from './matter-dashboard-app-Dh-6FL-7.js';
+import { m as mixinDelegatesAria, i, _ as __decorate, n, A, h as e, j as b, q as i$1, t } from './matter-dashboard-app-BZOhBELR.js';
 
 /**
  * @license

package/dist/web/js/main.js

@@ -341,6 +341,12 @@ class MatterClient {
       dataset
     }, timeout);
   }
+  async removeWifiCredentials(timeout) {
+    await this.sendCommand("remove_wifi_credentials", 0, {}, timeout);
+  }
+  async removeThreadDataset(timeout) {
+    await this.sendCommand("remove_thread_dataset", 0, {}, timeout);
+  }
   async openCommissioningWindow(nodeId, windowTimeout, iteration, option, discriminator, timeout) {
     return await this.sendCommand("open_commissioning_window", 0, {
       node_id: nodeId,
@@ -757,7 +763,7 @@ const ThemeService = new ThemeServiceImpl();
  * SPDX-License-Identifier: Apache-2.0
  */
 async function main() {
-  import('./matter-dashboard-app-Dh-6FL-7.js').then(function (n) { return n.S; });
+  import('./matter-dashboard-app-BZOhBELR.js').then(function (n) { return n.Y; });
   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) {