@matter-server/dashboard 1.1.8-alpha.0-20260707-c552b9d → 1.2.0

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

@@ -21,7 +21,7 @@ import "@material/web/iconbutton/icon-button";
 import "@material/web/switch/switch";
 import { consume } from "@lit/context";
 import "@material/web/textfield/outlined-text-field";
-import { mdiAccessPoint, mdiEye, mdiEyeOff, mdiWifi } from "@mdi/js";
+import { mdiAccessPoint, mdiDelete, mdiEye, mdiEyeOff, mdiPencil, mdiPlus, mdiWifi } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { clientContext, tickContext } from "../../../client/client-context.js";
@@ -39,6 +39,14 @@ let SettingsDialog = class extends LitElement {
     this._expandedRow = null;
     this._credLoading = false;
     this._showPassword = false;
+    this._wifiEditId = null;
+    this._wifiAdding = false;
+    this._threadEditId = null;
+    this._threadAdding = false;
+    this._credError = null;
+  }
+  get _supportsCredentialLists() {
+    return (this.client.serverInfo?.schema_version ?? 0) >= 12;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -60,6 +68,18 @@ let SettingsDialog = class extends LitElement {
         });
       });
     }
+    void this._loadCredentials();
+  }
+  async _loadCredentials() {
+    if (!this._supportsCredentialLists) {
+      this._creds = void 0;
+      return;
+    }
+    try {
+      this._creds = await this.client.getAllCredentials();
+    } catch {
+      this._creds = void 0;
+    }
   }
   _close() {
     this.shadowRoot.querySelector("md-dialog").close();
@@ -79,84 +99,455 @@ let SettingsDialog = class extends LitElement {
   }
   _toggleExpand(row) {
     this._expandedRow = this._expandedRow === row ? null : row;
+    this._resetCredForms();
+  }
+  _resetCredForms() {
     this._showPassword = false;
+    this._wifiEditId = null;
+    this._wifiAdding = false;
+    this._threadEditId = null;
+    this._threadAdding = false;
+    this._credError = null;
   }
   _cancelCred() {
     this._expandedRow = null;
-    this._showPassword = false;
+    this._resetCredForms();
   }
   _togglePassword() {
     this._showPassword = !this._showPassword;
   }
-  async _saveWifi() {
+  _editWifi(id) {
+    this._wifiAdding = false;
+    this._wifiEditId = id;
+    this._showPassword = false;
+    this._credError = null;
+  }
+  _addWifi() {
+    this._wifiEditId = null;
+    this._wifiAdding = true;
+    this._showPassword = false;
+    this._credError = null;
+  }
+  _cancelWifiForm() {
+    this._wifiEditId = null;
+    this._wifiAdding = false;
+    this._showPassword = false;
+    this._credError = null;
+  }
+  _editThread(id) {
+    this._threadAdding = false;
+    this._threadEditId = id;
+    this._credError = null;
+  }
+  _addThread() {
+    this._threadEditId = null;
+    this._threadAdding = true;
+    this._credError = null;
+  }
+  _cancelThreadForm() {
+    this._threadEditId = null;
+    this._threadAdding = false;
+    this._credError = null;
+  }
+  /** Mirror the server's id validation. Returns the trimmed id, or null after setting an inline error. */
+  _validateNewCredId(raw, existing) {
+    const trimmed = raw.trim();
+    if (trimmed === "") {
+      this._credError = "Identifier is required";
+      return null;
+    }
+    const lower = trimmed.toLowerCase();
+    if (lower === "default" || lower === "delete") {
+      this._credError = `'${trimmed}' is a reserved identifier`;
+      return null;
+    }
+    if (existing.some((e) => e.id.toLowerCase() === lower)) {
+      this._credError = `An entry with identifier '${trimmed}' already exists`;
+      return null;
+    }
+    return trimmed;
+  }
+  async _saveWifi(id) {
     const ssid = this._wifiSsidField.value.trim();
     if (!ssid) {
-      showAlertDialog({ title: "Validation error", text: "SSID is required" });
+      this._credError = "SSID is required";
       return;
     }
+    let targetId = id;
+    if (targetId === void 0 && this._supportsCredentialLists) {
+      const validated = this._validateNewCredId(this._wifiIdField?.value ?? "", this._creds?.wifi ?? []);
+      if (validated === null) return;
+      targetId = validated;
+    }
     const password = this._wifiPasswordField.value;
-    if (!password) {
-      showAlertDialog({ title: "Validation error", text: "Password is required" });
+    const hasStoredSecret = id !== void 0 && (id === "default" ? this.client.serverInfo.wifi_credentials_set ?? false : true);
+    if (!password && !hasStoredSecret) {
+      this._credError = "Password is required";
       return;
     }
     this._credLoading = true;
+    this._credError = null;
     try {
-      await this.client.setWifiCredentials(ssid, password);
-      this._expandedRow = null;
-      this._showPassword = false;
+      await this.client.setWifiCredentials(ssid, password, { id: targetId });
+      this._cancelWifiForm();
+      await this._loadCredentials();
     } catch (err) {
       showAlertDialog({ title: "Error saving WiFi credentials", text: err.message });
     } finally {
       this._credLoading = false;
     }
   }
-  async _removeWifi() {
+  async _removeWifi(id) {
     this._credLoading = true;
     try {
-      await this.client.removeWifiCredentials();
-      this._expandedRow = null;
-      this._showPassword = false;
+      await this.client.removeWifiCredentials({ id });
+      this._cancelWifiForm();
+      await this._loadCredentials();
     } catch (err) {
       showAlertDialog({ title: "Error removing WiFi credentials", text: err.message });
     } finally {
       this._credLoading = false;
     }
   }
-  async _saveThread() {
+  async _saveThread(id) {
     const dataset = this._threadDatasetField.value.trim();
     if (!dataset) {
-      showAlertDialog({ title: "Validation error", text: "Thread dataset is required" });
+      this._credError = "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)"
-      });
+      this._credError = "Dataset must be a hex string with even length (each byte is two hex characters)";
       return;
     }
+    let targetId = id;
+    if (targetId === void 0 && this._supportsCredentialLists) {
+      const validated = this._validateNewCredId(this._threadIdField?.value ?? "", this._creds?.thread ?? []);
+      if (validated === null) return;
+      targetId = validated;
+    }
     this._credLoading = true;
+    this._credError = null;
     try {
-      await this.client.setThreadOperationalDataset(dataset);
-      this._expandedRow = null;
+      await this.client.setThreadOperationalDataset(dataset, { id: targetId });
+      this._cancelThreadForm();
+      await this._loadCredentials();
     } catch (err) {
       showAlertDialog({ title: "Error saving Thread dataset", text: err.message });
     } finally {
       this._credLoading = false;
     }
   }
-  async _removeThread() {
+  async _removeThread(id) {
     this._credLoading = true;
     try {
-      await this.client.removeThreadDataset();
-      this._expandedRow = null;
-      this._showPassword = false;
+      await this.client.removeThreadDataset({ id });
+      this._cancelThreadForm();
+      await this._loadCredentials();
     } catch (err) {
       showAlertDialog({ title: "Error removing Thread dataset", text: err.message });
     } finally {
       this._credLoading = false;
     }
   }
+  _renderCredError() {
+    return this._credError ? html`<p class="cred-error">${this._credError}</p>` : nothing;
+  }
+  _renderWifiList() {
+    const entries = this._creds?.wifi ?? [];
+    return html`
+            <div class="cred-group">
+                <div class="cred-group-header">
+                    <div class="cred-info">
+                        <ha-svg-icon .path=${mdiWifi}></ha-svg-icon>
+                        <span class="cred-label">WiFi</span>
+                    </div>
+                    <md-text-button
+                        @click=${this._addWifi}
+                        .disabled=${this._credLoading || this._wifiAdding || this._wifiEditId !== null}
+                    >
+                        <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>Add
+                    </md-text-button>
+                </div>
+                ${entries.length === 0 && !this._wifiAdding ? html`<p class="cred-empty">No WiFi credentials configured</p>` : nothing}
+                ${entries.map((entry) => this._renderWifiEntry(entry))}
+                ${this._wifiAdding ? this._renderWifiForm(void 0, "") : nothing}
+            </div>
+        `;
+  }
+  _renderWifiEntry(entry) {
+    const isDefault = entry.id === "default";
+    if (this._wifiEditId === entry.id) {
+      return this._renderWifiForm(entry.id, entry.ssid);
+    }
+    if (isDefault && !(this.client.serverInfo?.wifi_credentials_set ?? false)) {
+      return html`
+                <div class="cred-row">
+                    <div class="cred-info cred-entry">
+                        <span class="cred-unset">Not configured</span>
+                        <span class="cred-badge">Default</span>
+                    </div>
+                    <div class="cred-row-actions">
+                        <md-text-button @click=${() => this._editWifi("default")} .disabled=${this._credLoading}>
+                            <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>Set
+                        </md-text-button>
+                    </div>
+                </div>
+            `;
+    }
+    return html`
+            <div class="cred-row">
+                <div class="cred-info cred-entry">
+                    <span class="cred-value">${entry.ssid || "(no SSID)"}</span>
+                    ${isDefault ? html`<span class="cred-badge">Default</span>` : nothing}
+                </div>
+                <div class="cred-row-actions">
+                    <md-icon-button
+                        title="Edit"
+                        @click=${() => this._editWifi(entry.id)}
+                        .disabled=${this._credLoading}
+                    >
+                        <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
+                    </md-icon-button>
+                    ${isDefault ? html`<md-text-button
+                              @click=${handleAsync(() => this._removeWifi("default"))}
+                              .disabled=${this._credLoading}
+                              >Clear</md-text-button
+                          >` : html`<md-icon-button
+                              title="Delete"
+                              @click=${handleAsync(() => this._removeWifi(entry.id))}
+                              .disabled=${this._credLoading}
+                          >
+                              <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+                          </md-icon-button>`}
+                </div>
+            </div>
+        `;
+  }
+  _renderWifiForm(id, ssid) {
+    const isAdd = id === void 0;
+    return html`
+            <div class="cred-form">
+                ${isAdd ? html`<md-outlined-text-field
+                          id="cred-wifi-id"
+                          label="Identifier"
+                          supporting-text="Unique name (not 'default' or 'delete')"
+                          .disabled=${this._credLoading}
+                      ></md-outlined-text-field>` : nothing}
+                <md-outlined-text-field
+                    id="cred-wifi-ssid"
+                    label="SSID"
+                    .value=${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"}
+                        .placeholder=${isAdd ? "" : "leave blank to keep"}
+                        .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>
+                ${this._renderCredError()}
+                <div class="form-actions">
+                    <md-text-button @click=${this._cancelWifiForm} .disabled=${this._credLoading}
+                        >Cancel</md-text-button
+                    >
+                    <md-filled-button @click=${handleAsync(() => this._saveWifi(id))} .disabled=${this._credLoading}
+                        >Save</md-filled-button
+                    >
+                </div>
+            </div>
+        `;
+  }
+  _renderThreadList() {
+    const entries = this._creds?.thread ?? [];
+    return html`
+            <div class="cred-group cred-group-thread">
+                <div class="cred-group-header">
+                    <div class="cred-info">
+                        <ha-svg-icon .path=${mdiAccessPoint}></ha-svg-icon>
+                        <span class="cred-label">Thread</span>
+                    </div>
+                    <md-text-button
+                        @click=${this._addThread}
+                        .disabled=${this._credLoading || this._threadAdding || this._threadEditId !== null}
+                    >
+                        <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>Add
+                    </md-text-button>
+                </div>
+                ${entries.length === 0 && !this._threadAdding ? html`<p class="cred-empty">No Thread datasets configured</p>` : nothing}
+                ${entries.map((entry) => this._renderThreadEntry(entry))}
+                ${this._threadAdding ? this._renderThreadForm(void 0) : nothing}
+            </div>
+        `;
+  }
+  _renderThreadEntry(entry) {
+    const isDefault = entry.id === "default";
+    if (this._threadEditId === entry.id) {
+      return this._renderThreadForm(entry.id);
+    }
+    if (isDefault && !(this.client.serverInfo?.thread_credentials_set ?? false)) {
+      return html`
+                <div class="cred-row">
+                    <div class="cred-info cred-entry">
+                        <span class="cred-unset">Not configured</span>
+                        <span class="cred-badge">Default</span>
+                    </div>
+                    <div class="cred-row-actions">
+                        <md-text-button @click=${() => this._editThread("default")} .disabled=${this._credLoading}>
+                            <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>Set
+                        </md-text-button>
+                    </div>
+                </div>
+            `;
+    }
+    const label = entry.networkName ?? entry.extPanId ?? "Thread network set";
+    return html`
+            <div class="cred-row">
+                <div class="cred-info cred-entry">
+                    <span class="cred-value">${label}</span>
+                    ${isDefault ? html`<span class="cred-badge">Default</span>` : nothing}
+                </div>
+                <div class="cred-row-actions">
+                    <md-icon-button
+                        title="Edit"
+                        @click=${() => this._editThread(entry.id)}
+                        .disabled=${this._credLoading}
+                    >
+                        <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
+                    </md-icon-button>
+                    ${isDefault ? html`<md-text-button
+                              @click=${handleAsync(() => this._removeThread("default"))}
+                              .disabled=${this._credLoading}
+                              >Clear</md-text-button
+                          >` : html`<md-icon-button
+                              title="Delete"
+                              @click=${handleAsync(() => this._removeThread(entry.id))}
+                              .disabled=${this._credLoading}
+                          >
+                              <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+                          </md-icon-button>`}
+                </div>
+            </div>
+        `;
+  }
+  _renderThreadForm(id) {
+    const isAdd = id === void 0;
+    return html`
+            <div class="cred-form">
+                ${isAdd ? html`<md-outlined-text-field
+                          id="cred-thread-id"
+                          label="Identifier"
+                          supporting-text="Unique name (not 'default' or 'delete')"
+                          .disabled=${this._credLoading}
+                      ></md-outlined-text-field>` : nothing}
+                <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>
+                ${this._renderCredError()}
+                <div class="form-actions">
+                    <md-text-button @click=${this._cancelThreadForm} .disabled=${this._credLoading}
+                        >Cancel</md-text-button
+                    >
+                    <md-filled-button @click=${handleAsync(() => this._saveThread(id))} .disabled=${this._credLoading}
+                        >Save</md-filled-button
+                    >
+                </div>
+            </div>
+        `;
+  }
+  _renderLegacyWifi() {
+    return html`
+            <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>
+                      ${this._renderCredError()}
+                      <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}
+        `;
+  }
+  _renderLegacyThread() {
+    return html`
+            <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>
+                      ${this._renderCredError()}
+                      <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}
+        `;
+  }
   render() {
     return html`
             <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
@@ -195,86 +586,8 @@ let SettingsDialog = class extends LitElement {
                     <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}
+                        ${this._supportsCredentialLists ? this._renderWifiList() : this._renderLegacyWifi()}
+                        ${this._supportsCredentialLists ? this._renderThreadList() : this._renderLegacyThread()}
 
                         <p class="cred-hint">Used when commissioning new devices. Existing devices are not affected.</p>
                     </section>
@@ -354,6 +667,60 @@ SettingsDialog.styles = css`
             margin-top: 8px;
         }
 
+        .cred-group {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+        }
+
+        .cred-group-thread {
+            margin-top: 16px;
+        }
+
+        .cred-group-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .cred-entry {
+            gap: 8px;
+        }
+
+        .cred-row-actions {
+            display: flex;
+            align-items: center;
+            gap: 2px;
+        }
+
+        .cred-row-actions md-icon-button {
+            --md-icon-button-icon-size: 18px;
+        }
+
+        .cred-badge {
+            font-size: 0.7rem;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            padding: 1px 8px;
+            border-radius: 10px;
+            background: var(--md-sys-color-secondary-container);
+            color: var(--md-sys-color-on-secondary-container);
+        }
+
+        .cred-empty {
+            margin: 4px 0 0 28px;
+            font-size: 0.85rem;
+            font-style: italic;
+            color: var(--md-sys-color-on-surface-variant);
+        }
+
+        .cred-error {
+            margin: 0;
+            font-size: 0.8rem;
+            color: var(--md-sys-color-error);
+        }
+
         .cred-info {
             display: flex;
             align-items: center;
@@ -438,15 +805,39 @@ __decorateClass([
 __decorateClass([
   state()
 ], SettingsDialog.prototype, "_showPassword", 2);
+__decorateClass([
+  state()
+], SettingsDialog.prototype, "_creds", 2);
+__decorateClass([
+  state()
+], SettingsDialog.prototype, "_wifiEditId", 2);
+__decorateClass([
+  state()
+], SettingsDialog.prototype, "_wifiAdding", 2);
+__decorateClass([
+  state()
+], SettingsDialog.prototype, "_threadEditId", 2);
+__decorateClass([
+  state()
+], SettingsDialog.prototype, "_threadAdding", 2);
+__decorateClass([
+  state()
+], SettingsDialog.prototype, "_credError", 2);
 __decorateClass([
   query("#cred-wifi-ssid")
 ], SettingsDialog.prototype, "_wifiSsidField", 2);
 __decorateClass([
   query("#cred-wifi-password")
 ], SettingsDialog.prototype, "_wifiPasswordField", 2);
+__decorateClass([
+  query("#cred-wifi-id")
+], SettingsDialog.prototype, "_wifiIdField", 2);
 __decorateClass([
   query("#cred-thread-dataset")
 ], SettingsDialog.prototype, "_threadDatasetField", 2);
+__decorateClass([
+  query("#cred-thread-id")
+], SettingsDialog.prototype, "_threadIdField", 2);
 SettingsDialog = __decorateClass([
   customElement("settings-dialog")
 ], SettingsDialog);