@matter-server/dashboard 0.7.1 → 0.7.2-alpha.0-20260602-cef59f5

package/dist/web/js/{settings-dialog-DlL0QdYN.js → settings-dialog-DxDp7265.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-CRf1z2eY.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-FxzNxVJ6.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.1",
+    "version": "0.7.2-alpha.0-20260602-cef59f5",
     "description": "Dashboard for OHF Matter Server",
     "homepage": "https://github.com/matter-js/matterjs-server",
     "bugs": {
@@ -33,23 +33,23 @@
     "dependencies": {
         "@lit/context": "^1.1.6",
         "@material/web": "^2.4.1",
-        "@matter-server/custom-clusters": "0.7.1",
-        "@matter-server/ws-client": "0.7.1",
+        "@matter-server/custom-clusters": "0.7.2-alpha.0-20260602-cef59f5",
+        "@matter-server/ws-client": "0.7.2-alpha.0-20260602-cef59f5",
         "@mdi/js": "^7.4.47",
         "lit": "^3.3.3",
         "tslib": "^2.8.1",
         "vis-network": "^10.1.0"
     },
     "devDependencies": {
-        "@babel/preset-env": "^7.29.5",
-        "@matter/main": "0.17.0",
-        "@rollup/plugin-babel": "^7.0.0",
-        "@rollup/plugin-commonjs": "^29.0.2",
+        "@babel/preset-env": "^7.29.7",
+        "@matter/main": "0.17.1-alpha.0-20260601-9386e30f9",
+        "@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/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}
@@ -479,8 +479,6 @@ class MatterNetworkView extends LitElement {
                 flex: 1 1 0;
                 padding: 8px 16px;
                 gap: 8px;
-                max-width: 1600px;
-                margin: 0 auto;
                 width: 100%;
                 box-sizing: border-box;
                 min-height: 0;
@@ -683,7 +681,7 @@ class MatterNetworkView extends LitElement {
             }
 
             .details-sidebar {
-                width: 320px;
+                width: clamp(320px, 22vw, 480px);
                 flex-shrink: 0;
                 display: none;
                 min-height: 0;

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

@@ -24,6 +24,7 @@ import {
     buildExtAddrMap,
     buildRloc16Map,
     buildThreadEdgePairs,
+    decodeMeshcopStateBitmap,
     findUnknownDevices,
     getDeviceName,
     getEdgeSignalScore,
@@ -113,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;
             }
         }
@@ -257,10 +278,13 @@ export class ThreadGraph extends BaseNetworkGraph {
                         ? `\n${device.networkName}`
                         : "";
                 const label = `${top}${suffix}`;
+                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),
+                    image: createBorderRouterIconDataUrl(isSelected, isLeader, isPrimaryBbr),
                     shape: "image" as const,
                     networkType: "thread" as const,
                     isUnknown: false,
@@ -620,9 +644,12 @@ export class ThreadGraph extends BaseNetworkGraph {
         }
         const external = this._unknownDevicesMapCache.get(nodeId);
         if (external?.kind === "br") {
+            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),
+                image: createBorderRouterIconDataUrl(isHighlighted, isLeader, isPrimaryBbr),
             });
         } else if (nodeId.startsWith("unknown_") || nodeId.startsWith("br_")) {
             this._nodesDataSet.update({

package/src/util/device-icons.ts

@@ -17,6 +17,8 @@ import {
     mdiCast,
     mdiCctv,
     mdiChip,
+    mdiCircleMedium,
+    mdiCrown,
     mdiDishwasher,
     mdiDoorbell,
     mdiDoorbellVideo,
@@ -40,12 +42,15 @@ import {
     mdiRobotVacuum,
     mdiRouter,
     mdiRouterWireless,
+    mdiSleep,
     mdiSmokeDetector,
     mdiSnowflakeAlert,
     mdiSolarPower,
     mdiSpeaker,
     mdiSprinkler,
+    mdiStar,
     mdiStove,
+    mdiSwapHorizontal,
     mdiTelevision,
     mdiThermometer,
     mdiToggleSwitch,
@@ -303,6 +308,19 @@ const threadRoleToIcon: Record<number, string> = {
     6: mdiAccessPoint, // Leader
 };
 
+/**
+ * Corner badge marking a node's Thread RoutingRole (attr 0/53/1) — a role-rank indicator overlaid on
+ * the device icon. The Leader is the rare, high-signal exception (amber crown); routers and end
+ * devices use progressively lower-key glyphs. Unassigned/Unspecified and unknown roles get no badge.
+ */
+const THREAD_ROLE_BADGES: Record<number, { iconPath: string; colorVar: string; colorFallback: string }> = {
+    2: { iconPath: mdiSleep, colorVar: "--node-color-thread-enddevice", colorFallback: "#90a4ae" }, // Sleepy End Device
+    3: { iconPath: mdiCircleMedium, colorVar: "--node-color-thread-enddevice", colorFallback: "#90a4ae" }, // End Device
+    4: { iconPath: mdiCircleMedium, colorVar: "--node-color-thread-enddevice", colorFallback: "#90a4ae" }, // REED
+    5: { iconPath: mdiSwapHorizontal, colorVar: "--node-color-thread-router", colorFallback: "#1e88e5" }, // Router
+    6: { iconPath: mdiCrown, colorVar: "--node-color-thread-leader", colorFallback: "#f9a825" }, // Leader
+};
+
 /**
  * Utility device types (per Matter spec) deprioritized when selecting the primary type for icon display.
  * These are commonly reported alongside the actual application type (e.g., a light also reports as
@@ -453,14 +471,26 @@ export function getNetworkTypeIcon(networkType: string): string {
  * @param iconPath - The MDI icon path
  * @param color - The icon color (CSS color string)
  * @param size - The icon size in pixels
+ * @param badge - Optional top-right corner badge: an MDI glyph filled white on a colored disc
  * @returns A data URL containing the SVG
  */
-export function createIconDataUrl(iconPath: string, color: string, size: number = 48): string {
+export function createIconDataUrl(
+    iconPath: string,
+    color: string,
+    size: number = 48,
+    badge?: { iconPath: string; color: string },
+): string {
     // MDI icons use a 24x24 viewBox
+    const badgeMarkup =
+        badge !== undefined
+            ? `<circle cx="18" cy="6" r="4" fill="${badge.color}"/>
+            <path d="${badge.iconPath}" fill="white" transform="translate(14.64,2.64) scale(0.28)"/>`
+            : "";
     const svg = `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${size}" height="${size}">
             <circle cx="12" cy="12" r="11" fill="white" stroke="${color}" stroke-width="1"/>
             <path d="${iconPath}" fill="${color}" transform="scale(0.6) translate(8,8)"/>
+            ${badgeMarkup}
         </svg>
     `.trim();
 
@@ -492,7 +522,14 @@ export function createNodeIconDataUrl(
     } else {
         color = getDefaultIconColor(); // Theme-aware default
     }
-    return createIconDataUrl(iconPath, color);
+    // Thread RoutingRole (incl. Leader) applies to any router node, not just BRs. Badge it over the
+    // device icon rather than replacing the icon, preserving device identity.
+    const roleBadge = threadRole !== undefined ? THREAD_ROLE_BADGES[threadRole] : undefined;
+    const badge =
+        roleBadge !== undefined
+            ? { iconPath: roleBadge.iconPath, color: getCssVar(roleBadge.colorVar, roleBadge.colorFallback) }
+            : undefined;
+    return createIconDataUrl(iconPath, color, 48, badge);
 }
 
 /**
@@ -511,14 +548,31 @@ export function createUnknownDeviceIconDataUrl(isRouter: boolean = false, isSele
 
 /**
  * Creates an SVG data URL for a Thread Border Router identified via mDNS.
+ *
+ * Thread Leader (mesh routing role) and Primary BBR (backbone role) are orthogonal: the central
+ * glyph reflects the mesh role (crown for leader, router otherwise) while a corner star badge marks
+ * the primary BBR. A BR that is both shows both.
+ *
  * @param isSelected - Whether the node is selected
+ * @param isLeader - Whether this BR is the Thread network leader (from MeshCoP state bitmap)
+ * @param isPrimaryBbr - Whether this BR is the primary Backbone Border Router (from MeshCoP state bitmap)
  * @returns A data URL containing the SVG
  */
-export function createBorderRouterIconDataUrl(isSelected: boolean = false): string {
+export function createBorderRouterIconDataUrl(
+    isSelected: boolean = false,
+    isLeader: boolean = false,
+    isPrimaryBbr: boolean = false,
+): string {
+    const glyph = isLeader ? mdiCrown : mdiRouterWireless;
     const color = isSelected
         ? getCssVar("--node-color-selected", "#1976d2")
-        : getCssVar("--md-sys-color-primary", "#03a9f4");
-    return createIconDataUrl(mdiRouterWireless, color);
+        : isLeader
+          ? getCssVar("--node-color-thread-leader", "#f9a825")
+          : getCssVar("--md-sys-color-primary", "#03a9f4");
+    const badge = isPrimaryBbr
+        ? { iconPath: mdiStar, color: getCssVar("--node-color-primary-bbr", "#00897b") }
+        : undefined;
+    return createIconDataUrl(glyph, color, 48, badge);
 }
 
 /**

package/src/util/node-label.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { MatterClient, MatterNode } from "@matter-server/ws-client";
+
+// BasicInformation cluster (0x28 / 40), always on endpoint 0 per Matter specification.
+export const NODE_LABEL_CLUSTER_ID = 0x28;
+export const NODE_LABEL_ATTRIBUTE_ID = 5;
+export const MAX_NODE_LABEL_LENGTH = 32;
+
+export const NODE_LABEL_ATTRIBUTE_PATH = `0/${NODE_LABEL_CLUSTER_ID}/${NODE_LABEL_ATTRIBUTE_ID}`;
+
+/**
+ * Write the BasicInformation NodeLabel attribute for a node.
+ * Trims surrounding whitespace so the stored value matches what MatterNode.nodeLabel reads back.
+ */
+export function writeNodeLabel(client: MatterClient, node: MatterNode, label: string): Promise<unknown> {
+    return client.writeAttribute(node.node_id, NODE_LABEL_ATTRIBUTE_PATH, label.trim());
+}