@matter-server/dashboard 1.2.4 → 1.2.5

package/dist/web/js/{node-acl-add-dialog-DMKY5qsl.js → node-acl-add-dialog-DJrFkAp9.js}

@@ -1,4 +1,4 @@
-import { i, c, a as clientContext, n, r, b as i$1, P as Privilege, v as nodeIdKey, x as aclCapacity, s as showAlertDialog, y as targetServerClusters, z as clusters, B as AuthMode, C as addAclEntry, E as PRIVILEGE_NAMES, d as b, F as mdiClose, G as getDeviceName, h as handleAsync, g as t } from './matter-dashboard-app-BGWRh_7q.js';
+import { i, c, a as clientContext, n, r, b as i$1, P as Privilege, v as nodeIdKey, x as aclCapacity, s as showAlertDialog, y as targetServerClusters, z as clusters, B as AuthMode, C as addAclEntry, E as PRIVILEGE_NAMES, d as b, F as mdiClose, G as getDeviceName, h as handleAsync, g as t } from './matter-dashboard-app-mMXFHv8v.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 

package/dist/web/js/{node-binding-dialog-bephut8j.js → node-binding-dialog-CQt-LbiG.js}

@@ -1,4 +1,4 @@
-import { i, c, a as clientContext, n, r, b as i$1, v as nodeIdKey, z as clusters, s as showAlertDialog, H as targetAclCapacityForBinding, I as addBinding, J as bindableClusters, A, d as b, G as getDeviceName, K as getEndpointDeviceTypes, h as handleAsync, g as t } from './matter-dashboard-app-BGWRh_7q.js';
+import { i, c, a as clientContext, n, r, b as i$1, v as nodeIdKey, z as clusters, s as showAlertDialog, H as targetAclCapacityForBinding, I as addBinding, J as bindableClusters, A, d as b, G as getDeviceName, K as getEndpointDeviceTypes, h as handleAsync, g as t } from './matter-dashboard-app-mMXFHv8v.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 

package/dist/web/js/{node-label-dialog-CHDD9Bk1.js → node-label-dialog-D1CyUaCS.js}

@@ -1,4 +1,4 @@
-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-BGWRh_7q.js';
+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-mMXFHv8v.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 

package/dist/web/js/{settings-dialog-BT_YDlXZ.js → settings-dialog-B9ctg2Ji.js}

@@ -1,4 +1,4 @@
-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 mdiPlus, k as mdiPencil, l as mdiDelete, o as mdiEyeOff, p as mdiEye, q as mdiAccessPoint } from './matter-dashboard-app-BGWRh_7q.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 mdiPlus, k as mdiPencil, l as mdiDelete, o as mdiEyeOff, p as mdiEye, q as mdiAccessPoint } from './matter-dashboard-app-mMXFHv8v.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@matter-server/dashboard",
-    "version": "1.2.4",
+    "version": "1.2.5",
     "description": "Dashboard for OHF Matter Server",
     "homepage": "https://github.com/matter-js/matterjs-server",
     "bugs": {
@@ -28,27 +28,30 @@
         "generate": "tsx scripts/generate-descriptions.ts",
         "build": "npm run generate && nacho-build && npm run bundle",
         "build-clean": "npm run generate && nacho-build --clean && npm run bundle",
-        "bundle": "rollup -c"
+        "bundle": "rollup -c",
+        "test": "matter-test --force-exit"
     },
     "dependencies": {
         "@lit/context": "^1.1.6",
         "@material/web": "^2.4.1",
-        "@matter-server/custom-clusters": "1.2.4",
-        "@matter-server/ws-client": "1.2.4",
+        "@matter-server/custom-clusters": "1.2.5",
+        "@matter-server/ws-client": "1.2.5",
         "@mdi/js": "^7.4.47",
         "lit": "^3.3.3",
+        "qrcode-generator": "^2.0.4",
         "tslib": "^2.8.1",
         "vis-network": "^10.1.0"
     },
     "devDependencies": {
         "@babel/preset-env": "^8.0.2",
-        "@matter/main": "0.17.5-alpha.0-20260711-a60245c75",
+        "@matter/main": "0.17.5",
         "@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",
+        "@types/qrcode-generator": "^0.0.16",
         "rollup": "^4.62.2",
         "rollup-plugin-copy": "^3.5.0",
         "serve": "^14.2.6"

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

@@ -26,6 +26,7 @@ import "../camera-overlay.js";
 import { getDeviceIcon } from "../../util/device-icons.js";
 import { getEndpointDeviceTypes } from "../../util/endpoints.js";
 import { ICD_CLUSTER_ID, icdBadge } from "../../util/icd.js";
+import { formatManualPairingCode, renderPairingQrCodeDataUri } from "../../util/pairing-code.js";
 import { bindingContext } from "./context.js";
 
 /** Map updateState values to user-friendly labels */
@@ -320,9 +321,21 @@ export class NodeDetails extends LitElement {
         }
         try {
             const shareCode = await this.client.openCommissioningWindow(this.node!.node_id);
+            const manualCode = formatManualPairingCode(shareCode.setup_manual_code);
+            const qrDataUri = renderPairingQrCodeDataUri(shareCode.setup_qr_code);
             showAlertDialog({
                 title: "Share device",
-                text: `Setup code: ${shareCode.setup_manual_code}`,
+                text: html`
+                    <div style="display:flex;flex-direction:column;align-items:center;gap:16px;">
+                        <img src=${qrDataUri} alt="Commissioning QR code" style="width:200px;height:200px;" />
+                        <div style="text-align:center;">
+                            <div style="font-size:0.8rem;color:var(--md-sys-color-on-surface-variant);">Setup code</div>
+                            <div style="font-size:1.4rem;font-family:monospace;letter-spacing:0.05em;">
+                                ${manualCode}
+                            </div>
+                        </div>
+                    </div>
+                `,
             });
         } catch (err: any) {
             showAlertDialog({

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

@@ -377,6 +377,7 @@ class MatterClusterView extends LitElement {
         // Reset per-attribute refresh state when navigating to a different cluster/endpoint.
         if (changedProperties.has("cluster") || changedProperties.has("endpoint")) {
             this._refreshState = {};
+            this._scrollCommandPanelIntoView();
         }
 
         // After render, find and configure the cluster commands component
@@ -391,6 +392,14 @@ class MatterClusterView extends LitElement {
         }
     }
 
+    // Route change resets scroll to top; for clusters with a command panel land on the panel instead.
+    private _scrollCommandPanelIntoView() {
+        requestAnimationFrame(() => {
+            const container = this.shadowRoot?.getElementById("cluster-commands-container");
+            container?.scrollIntoView({ block: "start", behavior: "auto" });
+        });
+    }
+
     private _goBack() {
         history.back();
     }

package/src/pages/matter-dashboard-app.ts

@@ -64,6 +64,9 @@ class MatterDashboardApp extends LitElement {
             const hash = location.hash.substring(1);
             const pathParts = hash.split("/");
 
+            // Single scroll container: without this a route change keeps the previous view's offset.
+            window.scrollTo(0, 0);
+
             // Reset initial selected node
             this._initialSelectedNodeId = null;
 

package/src/pages/network/network-details.ts

@@ -37,12 +37,16 @@ import {
     formatThreadVersion,
     getDeviceName,
     getNetworkType,
+    DIAGNOSTIC_MESH_NODE_EXPLANATION,
+    EXTERNAL_ROUTER_CAPABLE_NOTE,
+    EXTERNAL_THREAD_DEVICE_CASES,
     getNodeConnectionsFromPairs,
     getRoutableDestinationsCount,
     getSignalColorFromRssi,
     getThreadChannel,
     getThreadExtendedAddressHex,
     getThreadRole,
+    getThreadRoleDescription,
     getThreadRoleName,
     getThreadVersion,
     getWiFiDiagnostics,
@@ -237,6 +241,7 @@ export class NetworkDetails extends LitElement {
                     <span class="label">Role:</span>
                     <span class="value">${getThreadRoleName(threadRole)}</span>
                 </div>
+                <p class="hint-text inline-note">${getThreadRoleDescription(threadRole)}</p>
                 ${threadVersion !== undefined
                     ? html`
                           <div class="info-row">
@@ -482,10 +487,7 @@ export class NetworkDetails extends LitElement {
 
             <md-divider></md-divider>
             <div class="section">
-                <p class="hint-text">
-                    This node was inferred from Border Router diagnostics (Route64 / child table) and is not
-                    commissioned to this fabric, so no device details are available.
-                </p>
+                <p class="hint-text">${DIAGNOSTIC_MESH_NODE_EXPLANATION}</p>
             </div>
         `;
     }
@@ -504,6 +506,9 @@ export class NetworkDetails extends LitElement {
                     <span class="label">Type:</span>
                     <span class="value">${unknown.isRouter ? "Router (external)" : "End Device (external)"}</span>
                 </div>
+                ${unknown.isRouter
+                    ? html`<p class="hint-text inline-note">${EXTERNAL_ROUTER_CAPABLE_NOTE}</p>`
+                    : nothing}
                 <div class="info-row">
                     <span class="label">Extended Address:</span>
                     <span class="value mono">${unknown.extAddressHex}</span>
@@ -539,10 +544,12 @@ export class NetworkDetails extends LitElement {
             <md-divider></md-divider>
             <div class="section">
                 <p class="hint-text">
-                    This device appears in Thread neighbor tables but is not commissioned to this fabric. It may be a
-                    Thread Border Router whose Thread radio MAC differs from its MeshCoP border-agent ID (common with
-                    Apple and Aqara), or a device from another Matter ecosystem.
+                    This device appears in a commissioned node's Thread neighbor table but is not part of this fabric.
+                    It may be:
                 </p>
+                <ul class="hint-text">
+                    ${EXTERNAL_THREAD_DEVICE_CASES.map(c => html`<li>${c}</li>`)}
+                </ul>
             </div>
         `;
     }
@@ -1828,6 +1835,14 @@ export class NetworkDetails extends LitElement {
                 margin: 0;
             }
 
+            .hint-text.inline-note {
+                margin-top: 6px;
+                margin-bottom: 4px;
+                padding-left: 10px;
+                border-left: 2px solid var(--md-sys-color-outline-variant, #ccc);
+                font-size: 0.72rem;
+            }
+
             .connected-nodes-list {
                 display: flex;
                 flex-direction: column;

package/src/pages/network/network-types.ts

@@ -35,6 +35,8 @@ export interface NetworkGraphNode {
     shape: "image";
     networkType: NetworkType;
     threadRole?: ThreadRoutingRole;
+    /** Hover tooltip (vis.js): role or unknown/external explanation. */
+    title?: string;
     /** Whether the node is offline */
     offline?: boolean;
     /** Whether this is an unknown/external device */

package/src/pages/network/network-utils.ts

@@ -150,6 +150,51 @@ export function getThreadRoleName(role: number | undefined): string {
     }
 }
 
+/** Tooltip-friendly long form of {@link getThreadRoleName}. */
+export function getThreadRoleDescription(role: number | undefined): string {
+    switch (role) {
+        case 2:
+            return "Sleepy End Device: keeps its radio off while idle to save battery and reaches the mesh only through a parent router. The links shown for it can include stale router-table entries for Thread addresses it no longer uses.";
+        case 3:
+            return "End Device: a leaf node that reaches the mesh through a parent router and does not route for other nodes. The links shown for it can include stale router-table entries for old or unused Thread addresses.";
+        case 4:
+            return "REED (Router-Eligible End Device): currently acts as an end device but can be promoted to a full Router when the mesh needs more routing capacity.";
+        case 5:
+            return "Router: forwards traffic for other nodes in the Thread mesh.";
+        case 6:
+            return "Leader: the elected node that manages router assignments for the Thread network.";
+        case 0:
+        case 1:
+            return "Thread routing role is unassigned or unspecified.";
+        default:
+            return "Thread routing role could not be determined.";
+    }
+}
+
+/**
+ * Cases a Thread node shown as unknown/external may actually be. These devices are
+ * inferred from a commissioned node's neighbor table; the code cannot tell the cases
+ * apart, so the copy enumerates the possibilities rather than asserting one.
+ */
+export const EXTERNAL_THREAD_DEVICE_CASES = [
+    "a device commissioned to another Matter fabric on the same Thread network",
+    "a native (non-Matter) Thread accessory",
+    "a Border Router whose Thread radio MAC differs from its MeshCoP border-agent ID (common with Apple and Aqara)",
+    "a stale neighbor entry for a device that has left",
+] as const;
+
+/** Single-sentence form of {@link EXTERNAL_THREAD_DEVICE_CASES} for plain-text tooltips. */
+export const EXTERNAL_THREAD_DEVICE_EXPLANATION = `Seen in a commissioned node's Thread neighbor table but not part of this fabric. It may be ${EXTERNAL_THREAD_DEVICE_CASES.slice(0, -1).join(", ")}, or ${EXTERNAL_THREAD_DEVICE_CASES[EXTERNAL_THREAD_DEVICE_CASES.length - 1]}.`;
+
+/**
+ * `isRouter` for an external neighbor is derived from rx-on-when-idle, so it means
+ * router-capable (mains-powered), not a confirmed routing role.
+ */
+export const EXTERNAL_ROUTER_CAPABLE_NOTE = `"Router" here means the neighbor advertised rx-on-when-idle (mains-powered / router-capable), not a confirmed routing role.`;
+
+export const DIAGNOSTIC_MESH_NODE_EXPLANATION =
+    "Inferred from Border Router diagnostics (Route64 / child table) and not commissioned to this fabric, so no device details are available.";
+
 /**
  * Gets WiFi security type name.
  */

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

@@ -27,6 +27,9 @@ import {
     buildRloc16Map,
     buildThreadEdgePairs,
     decodeMeshcopStateBitmap,
+    DIAGNOSTIC_MESH_NODE_EXPLANATION,
+    EXTERNAL_ROUTER_CAPABLE_NOTE,
+    EXTERNAL_THREAD_DEVICE_EXPLANATION,
     findDiagnosticMeshNodes,
     findUnknownDevices,
     makeDiagnosticRloc16Resolver,
@@ -36,6 +39,7 @@ import {
     getNetworkType,
     getThreadExtendedAddressHex,
     getThreadRole,
+    getThreadRoleDescription,
     mergeDiagnosticEdges,
     signalLevelToColor,
     stripMdnsHostname,
@@ -340,6 +344,7 @@ export class ThreadGraph extends BaseNetworkGraph {
             return {
                 id: nodeId,
                 label: getDeviceName(node),
+                title: getThreadRoleDescription(threadRole),
                 image: createNodeIconDataUrl(node, threadRole, false, isOffline),
                 shape: "image" as const,
                 networkType: "thread" as const,
@@ -401,9 +406,16 @@ export class ThreadGraph extends BaseNetworkGraph {
                 const decodedState = decodeMeshcopStateBitmap(device.stateBitmapHex);
                 const isLeader = decodedState?.threadRoleValue === 3;
                 const isPrimaryBbr = decodedState?.bbr === true && decodedState.bbrFunction === "primary";
+                const brRole = new Array<string>();
+                if (isLeader) brRole.push("currently the Thread Leader");
+                if (isPrimaryBbr) brRole.push("Primary Backbone Border Router (BBR)");
+                const brTitle =
+                    "Thread Border Router bridging the Thread mesh to the IP network" +
+                    (brRole.length > 0 ? ` — ${brRole.join("; ")}.` : ".");
                 graphNodes.push({
                     id: device.id,
                     label,
+                    title: brTitle,
                     image: createBorderRouterIconDataUrl(isSelected, isLeader, isPrimaryBbr),
                     shape: "image" as const,
                     networkType: "thread" as const,
@@ -415,9 +427,13 @@ export class ThreadGraph extends BaseNetworkGraph {
                 const typeLabel =
                     diagNode?.vendorName !== undefined ? `${baseType} (${diagNode.vendorName})` : baseType;
                 const suffix = device.networkName !== undefined ? `\n${device.networkName}` : "";
+                const title = device.isRouter
+                    ? `${EXTERNAL_THREAD_DEVICE_EXPLANATION} ${EXTERNAL_ROUTER_CAPABLE_NOTE}`
+                    : EXTERNAL_THREAD_DEVICE_EXPLANATION;
                 graphNodes.push({
                     id: device.id,
                     label: `${typeLabel} [${device.extAddressHex.slice(-8)}]${suffix}`,
+                    title,
                     image: createUnknownDeviceIconDataUrl(device.isRouter, isSelected),
                     shape: "image" as const,
                     networkType: "thread" as const,
@@ -485,6 +501,7 @@ export class ThreadGraph extends BaseNetworkGraph {
             graphNodes.push({
                 id: meshNode.id,
                 label,
+                title: DIAGNOSTIC_MESH_NODE_EXPLANATION,
                 image: createUnknownDeviceIconDataUrl(meshNode.isRouter, meshNode.id === this._selectedNodeId),
                 shape: "image" as const,
                 networkType: "thread" as const,

package/src/util/pairing-code.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import qrcode from "qrcode-generator";
+
+/**
+ * Format a Matter manual pairing code for display. The 11-digit short code is
+ * grouped as `XXXX-XXX-XXXX` per the Matter spec; codes of any other length are
+ * returned stripped to their digits, or unchanged when they contain no digits.
+ */
+export function formatManualPairingCode(code: string): string {
+    const digits = code.replace(/\D/g, "");
+    if (digits.length === 11) {
+        return `${digits.slice(0, 4)}-${digits.slice(4, 7)}-${digits.slice(7, 11)}`;
+    }
+    return digits || code;
+}
+
+/**
+ * Render a Matter QR pairing payload (the `MT:...` string) as an SVG data URI.
+ * The generated SVG carries an opaque white background, so the code stays
+ * scannable regardless of the surrounding theme.
+ */
+export function renderPairingQrCodeDataUri(qrPayload: string, cellSize = 5, margin = 4): string {
+    const qr = qrcode(0, "M");
+    qr.addData(qrPayload);
+    qr.make();
+    return `data:image/svg+xml,${encodeURIComponent(qr.createSvgTag(cellSize, margin))}`;
+}