@matter-server/dashboard 0.7.2-alpha.0-20260601-e778038 → 0.8.0

package/dist/web/js/node-label-dialog-B31BzWy6.js

@@ -0,0 +1,80 @@
+import { r, n, g as t, b as i, M as MAX_NODE_LABEL_LENGTH, d as b, w as writeNodeLabel, s as showAlertDialog } from './matter-dashboard-app-D7-YX94X.js';
+import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
+import './main.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let NodeLabelDialog = class extends i {
+  constructor() {
+    super(...arguments);
+    this._nodeLabel = "";
+    this._saving = false;
+  }
+  firstUpdated() {
+    this._nodeLabel = this.node.nodeLabel;
+  }
+  render() {
+    return b`
+            <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
+                <div slot="headline">Edit Node Label</div>
+                <div slot="content">
+                    <md-outlined-text-field
+                        label="Node Label"
+                        .value=${this._nodeLabel}
+                        @input=${this._handleInput}
+                        maxlength=${MAX_NODE_LABEL_LENGTH}
+                        ?disabled=${this._saving}
+                        supporting-text="Max ${MAX_NODE_LABEL_LENGTH} characters"
+                        style="width: 100%; margin-top: 8px;"
+                    ></md-outlined-text-field>
+                </div>
+                <div slot="actions">
+                    <md-text-button @click=${this._close} ?disabled=${this._saving}>Cancel</md-text-button>
+                    <md-text-button @click=${this._save} ?disabled=${this._saving}>Save</md-text-button>
+                </div>
+            </md-dialog>
+        `;
+  }
+  _handleInput(e) {
+    const input = e.target;
+    this._nodeLabel = input.value;
+  }
+  _close() {
+    this.shadowRoot.querySelector("md-dialog").close();
+  }
+  _handleClosed() {
+    this.parentNode.removeChild(this);
+  }
+  async _save() {
+    this._saving = true;
+    try {
+      await writeNodeLabel(this.client, this.node, this._nodeLabel);
+      this._close();
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      showAlertDialog({
+        title: "Failed to set node label",
+        text: errorMessage
+      });
+    } finally {
+      this._saving = false;
+    }
+  }
+};
+__decorateClass([n({
+  attribute: false
+})], NodeLabelDialog.prototype, "client", 2);
+__decorateClass([n({
+  attribute: false
+})], NodeLabelDialog.prototype, "node", 2);
+__decorateClass([r()], NodeLabelDialog.prototype, "_nodeLabel", 2);
+__decorateClass([r()], NodeLabelDialog.prototype, "_saving", 2);
+NodeLabelDialog = __decorateClass([t("node-label-dialog")], NodeLabelDialog);
+
+export { NodeLabelDialog };

package/dist/web/js/{settings-dialog-CBVhNIXT.js → settings-dialog-Di2Qnh3-.js}

@@ -1,4 +1,4 @@
-import { i, c, a as clientContext, w as tickContext, r, e, j as i$1, f as fireAndForget, s as showAlertDialog, b, A, h as handleAsync, v as t, q as n, D as DevModeService, o as mdiWifi, k as mdiAccessPoint, n as mdiEyeOff, l as mdiEye } from './matter-dashboard-app-DIak2OyX.js';
+import { i, c, a as clientContext, t as tickContext, r, e, b as i$1, f as fireAndForget, s as showAlertDialog, d as b, A, h as handleAsync, g as t, n, D as DevModeService, m as mdiWifi, j as mdiAccessPoint, k as mdiEyeOff, l as mdiEye } from './matter-dashboard-app-D7-YX94X.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 
@@ -19,6 +19,9 @@ const LOG_LEVELS = [{
 }, {
   value: "warning",
   label: "Warning"
+}, {
+  value: "notice",
+  label: "Notice"
 }, {
   value: "info",
   label: "Info"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@matter-server/dashboard",
-    "version": "0.7.2-alpha.0-20260601-e778038",
+    "version": "0.8.0",
     "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.7.2-alpha.0-20260601-e778038",
-        "@matter-server/ws-client": "0.7.2-alpha.0-20260601-e778038",
+        "@matter-server/custom-clusters": "0.8.0",
+        "@matter-server/ws-client": "0.8.0",
         "@mdi/js": "^7.4.47",
         "lit": "^3.3.3",
         "tslib": "^2.8.1",
@@ -42,14 +42,14 @@
     },
     "devDependencies": {
         "@babel/preset-env": "^7.29.7",
-        "@matter/main": "0.17.0",
-        "@rollup/plugin-babel": "^7.0.0",
-        "@rollup/plugin-commonjs": "^29.0.2",
+        "@matter/main": "0.17.1-alpha.0-20260602-24f28a953",
+        "@rollup/plugin-babel": "^7.1.0",
+        "@rollup/plugin-commonjs": "^29.0.3",
         "@rollup/plugin-json": "^6.1.0",
         "@rollup/plugin-node-resolve": "^16.0.3",
         "@rollup/plugin-terser": "^1.0.0",
         "@rollup/plugin-typescript": "^12.3.0",
-        "rollup": "^4.60.4",
+        "rollup": "^4.61.0",
         "rollup-plugin-copy": "^3.5.0",
         "serve": "^14.2.6"
     }

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

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright 2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import "@material/web/button/text-button";
+import "@material/web/dialog/dialog";
+import "@material/web/textfield/outlined-text-field";
+import type { MdDialog } from "@material/web/dialog/dialog.js";
+import type { MatterClient, MatterNode } from "@matter-server/ws-client";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { MAX_NODE_LABEL_LENGTH, writeNodeLabel } from "../../../util/node-label.js";
+import { preventDefault } from "../../../util/prevent_default.js";
+import { showAlertDialog } from "../../dialog-box/show-dialog-box.js";
+
+@customElement("node-label-dialog")
+export class NodeLabelDialog extends LitElement {
+    @property({ attribute: false })
+    public client!: MatterClient;
+
+    @property({ attribute: false })
+    public node!: MatterNode;
+
+    @state()
+    private _nodeLabel: string = "";
+
+    @state()
+    private _saving: boolean = false;
+
+    protected override firstUpdated() {
+        this._nodeLabel = this.node.nodeLabel;
+    }
+
+    protected override render() {
+        return html`
+            <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
+                <div slot="headline">Edit Node Label</div>
+                <div slot="content">
+                    <md-outlined-text-field
+                        label="Node Label"
+                        .value=${this._nodeLabel}
+                        @input=${this._handleInput}
+                        maxlength=${MAX_NODE_LABEL_LENGTH}
+                        ?disabled=${this._saving}
+                        supporting-text="Max ${MAX_NODE_LABEL_LENGTH} characters"
+                        style="width: 100%; margin-top: 8px;"
+                    ></md-outlined-text-field>
+                </div>
+                <div slot="actions">
+                    <md-text-button @click=${this._close} ?disabled=${this._saving}>Cancel</md-text-button>
+                    <md-text-button @click=${this._save} ?disabled=${this._saving}>Save</md-text-button>
+                </div>
+            </md-dialog>
+        `;
+    }
+
+    private _handleInput(e: Event) {
+        const input = e.target as HTMLInputElement;
+        this._nodeLabel = input.value;
+    }
+
+    private _close() {
+        this.shadowRoot!.querySelector<MdDialog>("md-dialog")!.close();
+    }
+
+    private _handleClosed() {
+        this.parentNode!.removeChild(this);
+    }
+
+    private async _save() {
+        this._saving = true;
+        try {
+            await writeNodeLabel(this.client, this.node, this._nodeLabel);
+            this._close();
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            showAlertDialog({
+                title: "Failed to set node label",
+                text: errorMessage,
+            });
+        } finally {
+            this._saving = false;
+        }
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "node-label-dialog": NodeLabelDialog;
+    }
+}

package/src/components/dialogs/node-label-dialog/show-node-label-dialog.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { MatterClient, MatterNode } from "@matter-server/ws-client";
+
+export const showNodeLabelDialog = async (client: MatterClient, node: MatterNode) => {
+    await import("./node-label-dialog.js");
+    const dialog = document.createElement("node-label-dialog");
+    dialog.client = client;
+    dialog.node = node;
+    document.querySelector("matter-dashboard-app")?.renderRoot.appendChild(dialog);
+};

package/src/components/dialogs/settings/log-level-section.ts

@@ -20,6 +20,7 @@ const LOG_LEVELS: { value: LogLevelString; label: string }[] = [
     { value: "critical", label: "Critical" },
     { value: "error", label: "Error" },
     { value: "warning", label: "Warning" },
+    { value: "notice", label: "Notice" },
     { value: "info", label: "Info" },
     { value: "debug", label: "Debug" },
 ];

package/src/pages/cluster-commands/clusters/basic-information-commands.ts

@@ -10,13 +10,10 @@ import { css, html, nothing, type CSSResultGroup } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { showAlertDialog } from "../../../components/dialog-box/show-dialog-box.js";
 import { handleAsync } from "../../../util/async-handler.js";
+import { MAX_NODE_LABEL_LENGTH, NODE_LABEL_CLUSTER_ID, writeNodeLabel } from "../../../util/node-label.js";
 import { BaseClusterCommands } from "../base-cluster-commands.js";
 import { registerClusterCommands } from "../registry.js";
 
-const CLUSTER_ID = 0x28; // BasicInformation cluster (40 decimal)
-const NODE_LABEL_ATTRIBUTE_ID = 5;
-const MAX_NODE_LABEL_LENGTH = 32;
-
 /**
  * Command panel for BasicInformation cluster (ID: 0x28 / 40).
  * Provides ability to edit the NodeLabel attribute.
@@ -44,22 +41,7 @@ export class BasicInformationClusterCommands extends BaseClusterCommands {
         if (!this.node) {
             return;
         }
-
-        // First check the direct nodeLabel property on the node
-        if (this.node.nodeLabel) {
-            this._nodeLabel = this.node.nodeLabel;
-            return;
-        }
-
-        // Fallback to attribute path: endpoint/cluster/attribute = 0/40/5
-        // BasicInformation cluster is always on endpoint 0 per Matter specification
-        const attributePath = `0/${CLUSTER_ID}/${NODE_LABEL_ATTRIBUTE_ID}`;
-        const currentValue = this.node.attributes[attributePath];
-        if (typeof currentValue === "string") {
-            this._nodeLabel = currentValue;
-        } else {
-            this._nodeLabel = "";
-        }
+        this._nodeLabel = this.node.nodeLabel;
     }
 
     /**
@@ -115,13 +97,13 @@ export class BasicInformationClusterCommands extends BaseClusterCommands {
         this._saving = true;
 
         try {
-            // BasicInformation cluster is always on endpoint 0 per Matter specification
-            const attributePath = `0/${CLUSTER_ID}/${NODE_LABEL_ATTRIBUTE_ID}`;
-            await this.client.writeAttribute(this.node.node_id, attributePath, this._nodeLabel);
+            const label = this._nodeLabel.trim();
+            await writeNodeLabel(this.client, this.node, label);
+            this._nodeLabel = label;
 
             showAlertDialog({
                 title: "Success",
-                text: `Node label set to "${this._nodeLabel}"`,
+                text: `Node label set to "${label}"`,
             });
         } catch (error) {
             const errorMessage = error instanceof Error ? error.message : String(error);
@@ -161,8 +143,7 @@ export class BasicInformationClusterCommands extends BaseClusterCommands {
     ];
 }
 
-// Register this component for cluster ID 0x28 (40 decimal)
-registerClusterCommands(CLUSTER_ID, "basic-information-cluster-commands");
+registerClusterCommands(NODE_LABEL_CLUSTER_ID, "basic-information-cluster-commands");
 
 declare global {
     interface HTMLElementTagNameMap {

package/src/pages/components/header.ts

@@ -11,7 +11,7 @@ import "@material/web/list/list";
 import "@material/web/list/list-item";
 import { consume } from "@lit/context";
 import { MatterClient } from "@matter-server/ws-client";
-import { mdiArrowLeft, mdiBrightnessAuto, mdiCog, mdiLogout, mdiWeatherNight, mdiWeatherSunny } from "@mdi/js";
+import { mdiArrowLeft, mdiBrightnessAuto, mdiCog, mdiHome, mdiLogout, mdiWeatherNight, mdiWeatherSunny } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { clientContext, tickContext } from "../../client/client-context.js";
@@ -67,6 +67,16 @@ export class DashboardHeader extends LitElement {
         this._unsubscribeDevMode?.();
     }
 
+    private _goBack() {
+        if (this.backButton) {
+            location.hash = this.backButton;
+        }
+    }
+
+    private _goHome() {
+        location.hash = "#";
+    }
+
     private _cycleTheme() {
         ThemeService.cycleTheme();
     }
@@ -144,11 +154,12 @@ export class DashboardHeader extends LitElement {
             <div class="header">
                 <!-- optional back button -->
                 ${this.backButton
-                    ? html` <a .href=${this.backButton}>
-                          <md-icon-button>
+                    ? html` <md-icon-button title="Back" aria-label="Back" @click=${this._goBack}>
                               <ha-svg-icon .path=${mdiArrowLeft}></ha-svg-icon>
                           </md-icon-button>
-                      </a>`
+                          <md-icon-button title="Home" aria-label="Home" @click=${this._goHome}>
+                              <ha-svg-icon .path=${mdiHome}></ha-svg-icon>
+                          </md-icon-button>`
                     : ""}
 
                 <div class="title">${this.title ?? ""}</div>

package/src/pages/components/node-details.ts

@@ -13,13 +13,14 @@ import "@material/web/list/list";
 import "@material/web/list/list-item";
 import { consume } from "@lit/context";
 import { MatterClient, MatterNode, UpdateSource } from "@matter-server/ws-client";
-import { mdiChatProcessing, mdiLink, mdiShareVariant, mdiTrashCan, mdiUpdate, mdiVideo } from "@mdi/js";
+import { mdiChatProcessing, mdiLink, mdiPencil, mdiShareVariant, mdiTrashCan, mdiUpdate, mdiVideo } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { clientContext, tickContext } from "../../client/client-context.js";
 import { DeviceType } from "../../client/models/descriptions.js";
 import { showAlertDialog, showPromptDialog } from "../../components/dialog-box/show-dialog-box.js";
 import { showNodeBindingDialog } from "../../components/dialogs/binding/show-node-binding-dialog.js";
+import { showNodeLabelDialog } from "../../components/dialogs/node-label-dialog/show-node-label-dialog.js";
 import { handleAsync } from "../../util/async-handler.js";
 import "../../components/ha-svg-icon";
 import "../camera-overlay.js";
@@ -86,8 +87,19 @@ export class NodeDetails extends LitElement {
             <md-list>
                 <md-list-item>
                     <ha-svg-icon slot="start" class="device-icon" .path=${getDeviceIcon(this.node)}></ha-svg-icon>
-                    <div slot="headline">
+                    <div slot="headline" class="node-label-row">
                         <b>${this.node.nodeLabel || "Node Info"}</b>
+                        ${this.node.available
+                            ? html`
+                                  <md-icon-button
+                                      @click=${() => this._editNodeLabel()}
+                                      aria-label="Edit node label"
+                                      title="Edit node label"
+                                  >
+                                      <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
+                                  </md-icon-button>
+                              `
+                            : nothing}
                         ${this.node.available ? nothing : html` <span class="status">OFFLINE</span> `}
                     </div>
                 </md-list-item>
@@ -168,6 +180,10 @@ export class NodeDetails extends LitElement {
         `;
     }
 
+    private _editNodeLabel() {
+        showNodeLabelDialog(this.client, this.node!);
+    }
+
     private async _reinterview() {
         if (
             !(await showPromptDialog({
@@ -318,6 +334,19 @@ export class NodeDetails extends LitElement {
     }
 
     static override styles = css`
+        .node-label-row {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .node-label-row md-icon-button {
+            width: 24px;
+            height: 24px;
+            --md-icon-button-state-layer-width: 32px;
+            --md-icon-button-state-layer-height: 32px;
+        }
+
         .device-icon {
             --icon-primary-color: var(--md-sys-color-on-surface-variant, #666);
         }

package/src/pages/matter-network-view.ts

@@ -291,7 +291,7 @@ class MatterNetworkView extends LitElement {
             return;
         }
 
-        const found = graph.selectByExtendedAddress(searchValue);
+        const found = graph.selectBySearch(searchValue);
         this._threadAddressSearchStatus = found ? "found" : "not-found";
     }
 
@@ -306,8 +306,8 @@ class MatterNetworkView extends LitElement {
                                 type="text"
                                 .value=${this._threadAddressSearch}
                                 @input=${this._handleThreadAddressSearchInput}
-                                placeholder="Search extended address"
-                                title="Find device by Thread extended address (EUI-64)"
+                                placeholder="Search label, node id, or address"
+                                title="Find a Thread device by node label, node id, or extended address (EUI-64)"
                             />
                             <button type="submit" class="search-button">Find</button>
                         </form>
@@ -371,7 +371,7 @@ class MatterNetworkView extends LitElement {
                     : html`<div class="thread-search-status ${this._threadAddressSearchStatus}">
                           ${this._threadAddressSearchStatus === "found"
                               ? "Node highlighted."
-                              : "No matching extended address found."}
+                              : "No matching device found."}
                       </div>`}
                 <thread-graph
                     .nodes=${this.nodes}

package/src/pages/network/thread-graph.ts

@@ -114,36 +114,56 @@ export class ThreadGraph extends BaseNetworkGraph {
     }
 
     /**
-     * Searches for a Thread node (known or unknown) by extended address and selects it.
-     * Accepts formats like:
-     * - AABBCCDDEEFF0011
-     * - AA:BB:CC:DD:EE:FF:00:11
-     * - 0xAABBCCDDEEFF0011
+     * Searches for a Thread node (known or unknown) and selects it. Matches, in priority order:
+     * 1. Extended address (EUI-64), accepting `AABBCCDDEEFF0011`, `AA:BB:...`, or `0x...` forms.
+     * 2. Node id (exact).
+     * 3. Visible device label (case-insensitive substring).
      * Returns true when a match is found.
      */
-    public selectByExtendedAddress(address: string): boolean {
-        const normalized = normalizeExtendedAddressInput(address);
-        if (!normalized) {
+    public selectBySearch(query: string): boolean {
+        const trimmed = query.trim();
+        if (!trimmed) {
             return false;
         }
 
-        // Search commissioned Thread devices first
-        for (const node of Object.values(this.nodes)) {
-            if (getNetworkType(node) !== "thread") {
-                continue;
+        // Only visible nodes are selectable — focusing a hidden node would report a
+        // match the user can't see on the graph.
+        const threadNodes = Object.values(this.nodes).filter(
+            node => getNetworkType(node) === "thread" && !(this.hideOfflineNodes && node.available === false),
+        );
+
+        // 1. Extended address — commissioned devices first, then unknown/external neighbors.
+        const normalized = normalizeExtendedAddressInput(trimmed);
+        if (normalized) {
+            for (const node of threadNodes) {
+                const extAddressHex = getThreadExtendedAddressHex(node);
+                if (extAddressHex && extAddressHex === normalized) {
+                    this.selectNode(String(node.node_id));
+                    return true;
+                }
             }
 
-            const extAddressHex = getThreadExtendedAddressHex(node);
-            if (extAddressHex && extAddressHex === normalized) {
+            for (const [unknownId, unknown] of this._unknownDevicesMapCache) {
+                if (normalizeExtendedAddressInput(unknown.extAddressHex) === normalized) {
+                    this.selectNode(unknownId);
+                    return true;
+                }
+            }
+        }
+
+        // 2. Node id (exact).
+        for (const node of threadNodes) {
+            if (String(node.node_id) === trimmed) {
                 this.selectNode(String(node.node_id));
                 return true;
             }
         }
 
-        // Then search unknown/external Thread devices
-        for (const [unknownId, unknown] of this._unknownDevicesMapCache) {
-            if (normalizeExtendedAddressInput(unknown.extAddressHex) === normalized) {
-                this.selectNode(unknownId);
+        // 3. Device label as shown on the graph (case-insensitive substring).
+        const needle = trimmed.toLowerCase();
+        for (const node of threadNodes) {
+            if (getDeviceName(node).toLowerCase().includes(needle)) {
+                this.selectNode(String(node.node_id));
                 return true;
             }
         }
@@ -258,11 +278,13 @@ export class ThreadGraph extends BaseNetworkGraph {
                         ? `\n${device.networkName}`
                         : "";
                 const label = `${top}${suffix}`;
-                const isLeader = decodeMeshcopStateBitmap(device.stateBitmapHex)?.threadRoleValue === 3;
+                const decodedState = decodeMeshcopStateBitmap(device.stateBitmapHex);
+                const isLeader = decodedState?.threadRoleValue === 3;
+                const isPrimaryBbr = decodedState?.bbr === true && decodedState.bbrFunction === "primary";
                 graphNodes.push({
                     id: device.id,
                     label,
-                    image: createBorderRouterIconDataUrl(isSelected, isLeader),
+                    image: createBorderRouterIconDataUrl(isSelected, isLeader, isPrimaryBbr),
                     shape: "image" as const,
                     networkType: "thread" as const,
                     isUnknown: false,
@@ -622,10 +644,12 @@ export class ThreadGraph extends BaseNetworkGraph {
         }
         const external = this._unknownDevicesMapCache.get(nodeId);
         if (external?.kind === "br") {
-            const isLeader = decodeMeshcopStateBitmap(external.stateBitmapHex)?.threadRoleValue === 3;
+            const decodedState = decodeMeshcopStateBitmap(external.stateBitmapHex);
+            const isLeader = decodedState?.threadRoleValue === 3;
+            const isPrimaryBbr = decodedState?.bbr === true && decodedState.bbrFunction === "primary";
             this._nodesDataSet.update({
                 id: nodeId,
-                image: createBorderRouterIconDataUrl(isHighlighted, isLeader),
+                image: createBorderRouterIconDataUrl(isHighlighted, isLeader, isPrimaryBbr),
             });
         } else if (nodeId.startsWith("unknown_") || nodeId.startsWith("br_")) {
             this._nodesDataSet.update({