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

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

@@ -24,7 +24,11 @@ export class ComissionNodeDialog extends LitElement {
         return html`
             <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
                         ? html`<md-list>
                               <md-list-item
@@ -82,6 +86,13 @@ export class ComissionNodeDialog extends LitElement {
         this._close();
     }
 
+    private _requestSettings() {
+        import("../settings/show-settings-dialog.js").then(({ showSettingsDialog }) => {
+            showSettingsDialog(this.client, "network-credentials");
+        });
+        this._close();
+    }
+
     private _close() {
         this.shadowRoot!.querySelector<MdDialog>("md-dialog")!.close();
     }
@@ -98,5 +109,6 @@ declare global {
 
     interface HASSDomEvents {
         "node-commissioned": MatterNode;
+        "request-settings": Record<string, never>;
     }
 }

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

@@ -9,15 +9,48 @@ import "@material/web/progress/circular-progress";
 import "@material/web/textfield/outlined-text-field";
 import type { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js";
 import { MatterClient } from "@matter-server/ws-client";
-import { LitElement, html, nothing } from "lit";
+import { mdiAccessPoint } from "@mdi/js";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { clientContext } from "../../../client/client-context.js";
 import { handleAsync } from "../../../util/async-handler.js";
 import { fireEvent } from "../../../util/fire_event.js";
 import { showAlertDialog } from "../../dialog-box/show-dialog-box.js";
+import "../../ha-svg-icon.js";
 
 @customElement("commission-node-thread")
 export class CommissionNodeThread extends LitElement {
+    static override styles = css`
+        .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;
+        }
+    `;
     @consume({ context: clientContext, subscribe: true })
     @property({ attribute: false })
     public client!: MatterClient;
@@ -44,7 +77,15 @@ export class CommissionNodeThread extends LitElement {
                     >Set Thread Dataset</md-outlined-button
                 >${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>
+        return html`<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}"
@@ -87,3 +128,9 @@ export class CommissionNodeThread extends LitElement {
         }
     }
 }
+
+declare global {
+    interface HASSDomEvents {
+        "request-settings": Record<string, never>;
+    }
+}

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

@@ -9,15 +9,48 @@ import "@material/web/progress/circular-progress";
 import "@material/web/textfield/outlined-text-field";
 import type { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js";
 import { MatterClient } from "@matter-server/ws-client";
-import { LitElement, html, nothing } from "lit";
+import { mdiWifi } from "@mdi/js";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { clientContext } from "../../../client/client-context.js";
 import { handleAsync } from "../../../util/async-handler.js";
 import { fireEvent } from "../../../util/fire_event.js";
 import { showAlertDialog } from "../../dialog-box/show-dialog-box.js";
+import "../../ha-svg-icon.js";
 
 @customElement("commission-node-wifi")
 export class CommissionNodeWifi extends LitElement {
+    static override styles = css`
+        .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;
+        }
+    `;
     @consume({ context: clientContext, subscribe: true })
     @property({ attribute: false })
     public client!: MatterClient;
@@ -48,7 +81,15 @@ export class CommissionNodeWifi extends LitElement {
                     >Set WiFi Credentials</md-outlined-button
                 >${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>
+        return html`<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}"
@@ -93,3 +134,9 @@ export class CommissionNodeWifi extends LitElement {
         }
     }
 }
+
+declare global {
+    interface HASSDomEvents {
+        "request-settings": Record<string, never>;
+    }
+}

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

@@ -4,17 +4,25 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import "@material/web/button/filled-button";
 import "@material/web/button/text-button";
 import "@material/web/dialog/dialog";
 import type { MdDialog } from "@material/web/dialog/dialog.js";
 import "@material/web/divider/divider";
+import "@material/web/iconbutton/icon-button";
 import "@material/web/switch/switch";
 import type { MdSwitch } from "@material/web/switch/switch.js";
+import "@material/web/textfield/outlined-text-field";
+import type { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js";
 import { MatterClient } from "@matter-server/ws-client";
-import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+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";
 
 @customElement("settings-dialog")
@@ -26,6 +34,16 @@ export class SettingsDialog extends LitElement {
 
     private _unsubscribeDev?: () => void;
 
+    @property({ attribute: false }) public scrollToSection?: string;
+
+    @state() private _expandedRow: "wifi" | "thread" | null = null;
+    @state() private _credLoading = false;
+    @state() private _showPassword = false;
+
+    @query("#cred-wifi-ssid") private _wifiSsidField!: MdOutlinedTextField;
+    @query("#cred-wifi-password") private _wifiPasswordField!: MdOutlinedTextField;
+    @query("#cred-thread-dataset") private _threadDatasetField!: MdOutlinedTextField;
+
     override connectedCallback() {
         super.connectedCallback();
         this._unsubscribeDev = DevModeService.subscribe(active => {
@@ -38,6 +56,18 @@ export class SettingsDialog extends LitElement {
         this._unsubscribeDev?.();
     }
 
+    override firstUpdated() {
+        const knownSections = new Set(["network-credentials"]);
+        if (this.scrollToSection && knownSections.has(this.scrollToSection)) {
+            requestAnimationFrame(() => {
+                this.renderRoot.querySelector(`#${this.scrollToSection}`)?.scrollIntoView({
+                    behavior: "smooth",
+                    block: "start",
+                });
+            });
+        }
+    }
+
     private _close() {
         this.shadowRoot!.querySelector<MdDialog>("md-dialog")!.close();
     }
@@ -59,6 +89,93 @@ export class SettingsDialog extends LitElement {
         });
     }
 
+    private _toggleExpand(row: "wifi" | "thread") {
+        this._expandedRow = this._expandedRow === row ? null : row;
+        this._showPassword = false;
+    }
+
+    private _cancelCred() {
+        this._expandedRow = null;
+        this._showPassword = false;
+    }
+
+    private _togglePassword() {
+        this._showPassword = !this._showPassword;
+    }
+
+    private 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 as Error).message });
+        } finally {
+            this._credLoading = false;
+        }
+    }
+
+    private 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 as Error).message });
+        } finally {
+            this._credLoading = false;
+        }
+    }
+
+    private 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 as Error).message });
+        } finally {
+            this._credLoading = false;
+        }
+    }
+
+    private 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 as Error).message });
+        } finally {
+            this._credLoading = false;
+        }
+    }
+
     protected override render() {
         return html`
             <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
@@ -91,6 +208,107 @@ export class SettingsDialog 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>
@@ -155,6 +373,80 @@ export class SettingsDialog extends LitElement {
         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);
+        }
     `;
 }
 

package/src/components/dialogs/settings/show-settings-dialog.ts

@@ -6,9 +6,10 @@
 
 import { MatterClient } from "@matter-server/ws-client";
 
-export const showSettingsDialog = async (client: MatterClient) => {
+export const showSettingsDialog = async (client: MatterClient, section?: string) => {
     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);
 };