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

package/dist/web/js/{node-binding-dialog-DbsGaTS6.js → node-binding-dialog-B3lVN-FU.js}

@@ -1,4 +1,4 @@
-import { q as i, P as c, Q as clientContext, n, d as e, i as i$1, R as showPromptDialog, J as showAlertDialog, A, j as b, K as handleAsync, t } from './matter-dashboard-app-Dh-6FL-7.js';
+import { q as i, T as c, U as clientContext, n, d as e, i as i$1, W as showPromptDialog, J as showAlertDialog, A, j as b, K as handleAsync, t } from './matter-dashboard-app-BZOhBELR.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 

package/dist/web/js/{settings-dialog-BZwpJ82T.js → settings-dialog-D75IAPKe.js}

@@ -1,4 +1,4 @@
-import { e, m as mixinDelegatesAria, a as mixinConstraintValidation, b as mixinFormAssociated, c as mixinElementInternals, i, _ as __decorate, n as n$1, d as e$1, f as isActivationClick, g as dispatchActivationClick, A, h as e$2, j as b, r as redispatchEvent, k as getFormValue, l as getFormState, o as createValidator, C as CheckboxValidator, p as getValidityAnchor, q as i$1, t, N as NavigableKeys, s as o, u as r, v as createAnimationSignal, L as ListController, w as getActiveItem, x as getLastActivatableItem, y as getFirstActivatableItem, z as o$1, E as EASING, V as Validator, D, B as mixinOnReportValidity, F as onReportValidity, G as u, H as i$2, I as fireAndForget, J as showAlertDialog, K as handleAsync, M as DevModeService } from './matter-dashboard-app-Dh-6FL-7.js';
+import { e, m as mixinDelegatesAria, a as mixinConstraintValidation, b as mixinFormAssociated, c as mixinElementInternals, i, _ as __decorate, n as n$1, d as e$1, f as isActivationClick, g as dispatchActivationClick, A, h as e$2, j as b, r as redispatchEvent, k as getFormValue, l as getFormState, o as createValidator, C as CheckboxValidator, p as getValidityAnchor, q as i$1, t, N as NavigableKeys, s as o, u as r, v as createAnimationSignal, L as ListController, w as getActiveItem, x as getLastActivatableItem, y as getFirstActivatableItem, z as o$1, E as EASING, V as Validator, D, B as mixinOnReportValidity, F as onReportValidity, G as u, H as i$2, I as fireAndForget, J as showAlertDialog, K as handleAsync, M as DevModeService, O as mdiWifi, P as mdiAccessPoint, Q as mdiEyeOff, R as mdiEye } from './matter-dashboard-app-BZOhBELR.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 
@@ -3617,6 +3617,9 @@ let SettingsDialog = class extends i {
   constructor() {
     super(...arguments);
     this._devMode = DevModeService.active;
+    this._expandedRow = null;
+    this._credLoading = false;
+    this._showPassword = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -3629,6 +3632,18 @@ let SettingsDialog = class extends i {
     super.disconnectedCallback();
     (_this$_unsubscribeDev = this._unsubscribeDev) === null || _this$_unsubscribeDev === void 0 || _this$_unsubscribeDev.call(this);
   }
+  firstUpdated() {
+    const knownSections = /* @__PURE__ */new Set(["network-credentials"]);
+    if (this.scrollToSection && knownSections.has(this.scrollToSection)) {
+      requestAnimationFrame(() => {
+        var _this$renderRoot$quer;
+        (_this$renderRoot$quer = this.renderRoot.querySelector(`#${this.scrollToSection}`)) === null || _this$renderRoot$quer === void 0 || _this$renderRoot$quer.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+      });
+    }
+  }
   _close() {
     this.shadowRoot.querySelector("md-dialog").close();
   }
@@ -3645,6 +3660,107 @@ let SettingsDialog = class extends i {
     url.searchParams.set("dev", "on");
     (_navigator$clipboard = navigator.clipboard) === null || _navigator$clipboard === void 0 || _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 b`
             <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
@@ -3677,6 +3793,95 @@ let SettingsDialog = class extends i {
                         <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 ? b`<span class="cred-value">${this.client.serverInfo.wifi_ssid}</span>` : b`<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" ? b` <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 ? b`<md-text-button
+                                                @click=${handleAsync(() => this._removeWifi())}
+                                                .disabled=${this._credLoading}
+                                                >Remove</md-text-button
+                                            >` : A}
+                                      <md-filled-button
+                                          @click=${handleAsync(() => this._saveWifi())}
+                                          .disabled=${this._credLoading}
+                                          >Save</md-filled-button
+                                      >
+                                  </div>
+                              </div>` : A}
+
+                        <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 ? b`<span class="cred-value">Thread network set</span>` : b`<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" ? b` <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 ? b`<md-text-button
+                                                @click=${handleAsync(() => this._removeThread())}
+                                                .disabled=${this._credLoading}
+                                                >Remove</md-text-button
+                                            >` : A}
+                                      <md-filled-button
+                                          @click=${handleAsync(() => this._saveThread())}
+                                          .disabled=${this._credLoading}
+                                          >Save</md-filled-button
+                                      >
+                                  </div>
+                              </div>` : A}
+
+                        <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>
@@ -3741,11 +3946,94 @@ SettingsDialog.styles = i$1`
         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([n$1({
   attribute: false
 })], SettingsDialog.prototype, "client", 2);
 __decorateClass([r()], SettingsDialog.prototype, "_devMode", 2);
+__decorateClass([n$1({
+  attribute: false
+})], SettingsDialog.prototype, "scrollToSection", 2);
+__decorateClass([r()], SettingsDialog.prototype, "_expandedRow", 2);
+__decorateClass([r()], SettingsDialog.prototype, "_credLoading", 2);
+__decorateClass([r()], SettingsDialog.prototype, "_showPassword", 2);
+__decorateClass([e$1("#cred-wifi-ssid")], SettingsDialog.prototype, "_wifiSsidField", 2);
+__decorateClass([e$1("#cred-wifi-password")], SettingsDialog.prototype, "_wifiPasswordField", 2);
+__decorateClass([e$1("#cred-thread-dataset")], SettingsDialog.prototype, "_threadDatasetField", 2);
 SettingsDialog = __decorateClass([t("settings-dialog")], SettingsDialog);
 
 export { SettingsDialog };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@matter-server/dashboard",
-    "version": "0.6.7",
+    "version": "0.7.0-alpha.0-20260512-b404bea",
     "description": "Dashboard for OHF Matter Server",
     "homepage": "https://github.com/matter-js/matterjs-server",
     "bugs": {
@@ -33,8 +33,8 @@
     "dependencies": {
         "@lit/context": "^1.1.6",
         "@material/web": "^2.4.1",
-        "@matter-server/custom-clusters": "0.6.7",
-        "@matter-server/ws-client": "0.6.7",
+        "@matter-server/custom-clusters": "0.7.0-alpha.0-20260512-b404bea",
+        "@matter-server/ws-client": "0.7.0-alpha.0-20260512-b404bea",
         "@mdi/js": "^7.4.47",
         "lit": "^3.3.2",
         "tslib": "^2.8.1",
@@ -42,7 +42,7 @@
     },
     "devDependencies": {
         "@babel/preset-env": "^7.29.5",
-        "@matter/main": "0.17.0-alpha.0-20260504-e005cc190",
+        "@matter/main": "0.17.0-alpha.0-20260512-576f5796c",
         "@rollup/plugin-babel": "^7.0.0",
         "@rollup/plugin-commonjs": "^29.0.2",
         "@rollup/plugin-json": "^6.1.0",