@matter-server/dashboard 1.0.0 → 1.1.0

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

@@ -13,19 +13,18 @@ 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, mdiPencil, mdiShareVariant, mdiTrashCan, mdiUpdate, mdiVideo } from "@mdi/js";
+import { mdiChatProcessing, 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";
 import { getDeviceIcon } from "../../util/device-icons.js";
-import { getEndpointDeviceTypes } from "../matter-endpoint-view.js";
+import { getEndpointDeviceTypes } from "../../util/endpoints.js";
 import { bindingContext } from "./context.js";
 
 /** Map updateState values to user-friendly labels */
@@ -79,7 +78,6 @@ export class NodeDetails extends LitElement {
     protected override render() {
         if (!this.node) return html``;
 
-        const bindings = this.node.attributes[this.endpoint + "/30/0"];
         const deviceTypeIds = getEndpointDeviceTypes(this.node, this.endpoint).map(d => d.id);
         const isCamera = deviceTypeIds.includes(0x0142) || deviceTypeIds.includes(0x0143);
 
@@ -159,15 +157,6 @@ export class NodeDetails extends LitElement {
                                   </md-outlined-button>
                               `
                             : nothing}
-                        ${bindings
-                            ? html`
-                                  <md-outlined-button @click=${handleAsync(() => this._binding())}>
-                                      Binding
-                                      <ha-svg-icon slot="icon" .path=${mdiLink}></ha-svg-icon>
-                                  </md-outlined-button>
-                              `
-                            : nothing}
-
                         <md-outlined-button @click=${handleAsync(() => this._openCommissioningWindow())}
                             >Share<ha-svg-icon slot="icon" .path=${mdiShareVariant}></ha-svg-icon
                         ></md-outlined-button>
@@ -231,14 +220,6 @@ export class NodeDetails extends LitElement {
         }
     }
 
-    private async _binding() {
-        try {
-            showNodeBindingDialog(this.node!, this.endpoint);
-        } catch (err: unknown) {
-            console.error("Binding error:", err);
-        }
-    }
-
     private _openCameraOverlay(): void {
         const overlay = document.createElement("camera-overlay");
         overlay.nodeId = this.node!.node_id;

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

@@ -43,13 +43,13 @@ export class ServerDetails extends LitElement {
         </md-list-item>
         <md-list-item>
           <div slot="supporting-text">
-            <div class="left">FabricId: </div>${this.client.serverInfo.fabric_id}
+            <div class="left">Matter Server Version: </div>${this.client.serverInfo.sdk_version}
           </div>
           <div slot="supporting-text">
-            <div class="left">Compressed FabricId: </div>${this.client.serverInfo.compressed_fabric_id}
+            <div class="left">FabricId: </div>${this.client.serverInfo.fabric_id}
           </div>
           <div slot="supporting-text">
-            <div class="left">SDK Wheels Version: </div>${this.client.serverInfo.sdk_version}
+            <div class="left">Compressed FabricId: </div>${this.client.serverInfo.compressed_fabric_id}
           </div>
           <div slot="supporting-text">
             <div class="left">Schema Version: </div>${this.client.serverInfo.schema_version}

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

@@ -351,7 +351,10 @@ class MatterClusterView extends LitElement {
 
     private _renderClusterCommands() {
         if (this.cluster === undefined) return html``;
-        if (!this.node?.available) return html``; // Don't show commands when device is offline
+        // ACL (31) and Binding (30) panels stay visible read-only for offline nodes; commands for
+        // other clusters are hidden while the device is unreachable.
+        const RENDER_WHEN_OFFLINE = new Set<number>([30, 31]);
+        if (!this.node?.available && !RENDER_WHEN_OFFLINE.has(this.cluster)) return html``;
 
         const tagName = getClusterCommandsTag(this.cluster);
         if (!tagName) return html``;

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

@@ -13,12 +13,14 @@ import "@material/web/list/list-item";
 import { consume } from "@lit/context";
 import { MatterClient, MatterNode, isTestNodeId } from "@matter-server/ws-client";
 import { mdiAlertCircleOutline, mdiChevronRight } from "@mdi/js";
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
+import "./cluster-commands/clusters/binding-commands.js";
 import { clientContext, tickContext } from "../client/client-context.js";
-import { DeviceType, clusters, device_types } from "../client/models/descriptions.js";
+import { clusters } from "../client/models/descriptions.js";
 import "../components/ha-svg-icon";
+import { getEndpointDeviceTypes } from "../util/endpoints.js";
 import { formatHex, formatNodeAddress, getEffectiveFabricIndex } from "../util/format_hex.js";
 import { notFoundStyles } from "../util/shared-styles.js";
 import { bindingContext } from "./components/context.js";
@@ -41,14 +43,7 @@ function getUniqueClusters(node: MatterNode, endpoint: number) {
     });
 }
 
-export function getEndpointDeviceTypes(node: MatterNode, endpoint: number): DeviceType[] {
-    const rawValues = node.attributes[`${endpoint}/29/0`] as Record<string, number>[] | undefined;
-    if (!rawValues) return [];
-    return rawValues.map(rawValue => {
-        const id = rawValue["0"] ?? rawValue["deviceType"];
-        return device_types[id] ?? { id: id ?? -1, label: `Unknown Device Type (${id})`, clusters: [] };
-    });
-}
+export { getEndpointDeviceTypes };
 
 @customElement("matter-endpoint-view")
 class MatterEndpointView extends LitElement {
@@ -95,6 +90,17 @@ class MatterEndpointView extends LitElement {
                 <node-details .node=${this.node}></node-details>
             </div>
 
+            <!-- Binding editor (when this endpoint has a Binding cluster) -->
+            ${getUniqueClusters(this.node, this.endpoint).includes(30)
+                ? html`<div class="container">
+                      <binding-cluster-commands
+                          .node=${this.node}
+                          .endpoint=${this.endpoint}
+                          .cluster=${30}
+                      ></binding-cluster-commands>
+                  </div>`
+                : nothing}
+
             <!-- Endpoint clusters listing -->
             <div class="container">
                 <md-list>

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

@@ -18,11 +18,11 @@ import { guard } from "lit/directives/guard.js";
 import { clientContext, tickContext } from "../client/client-context.js";
 import "../components/ha-svg-icon";
 import { getDeviceIcon, getEndpointIcon } from "../util/device-icons.js";
+import { getEndpointDeviceTypes } from "../util/endpoints.js";
 import { formatNodeAddress, getEffectiveFabricIndex } from "../util/format_hex.js";
-import { notFoundStyles, reducedMotionStyles } from "../util/shared-styles.js";
 import "./components/header";
 import "./components/node-details";
-import { getEndpointDeviceTypes } from "./matter-endpoint-view.js";
+import { notFoundStyles, reducedMotionStyles } from "../util/shared-styles.js";
 import { getNetworkType } from "./network/network-utils.js";
 
 declare global {

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

@@ -707,24 +707,7 @@ export function stripMdnsHostname(hostname: string): string {
     return hostname.replace(/\.$/, "").replace(/\.local$/i, "");
 }
 
-/**
- * Gets a human-readable display name for a node.
- * Format: nodeLabel || productName (serialNumber)
- */
-export function getDeviceName(node: MatterNode): string {
-    if (node.nodeLabel) {
-        return node.nodeLabel;
-    }
-
-    const productName = node.productName || "Unknown Device";
-    const serialNumber = node.serialNumber;
-
-    if (serialNumber) {
-        return `${productName} (${serialNumber})`;
-    }
-
-    return productName;
-}
+export { getDeviceName } from "../../util/node-name.js";
 
 /**
  * Gets the human-readable name for a Thread routing role.

package/src/util/access-control.ts

@@ -0,0 +1,135 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { MatterNode } from "@matter-server/ws-client";
+import { AccessControlEntryDataTransformer, type AccessControlEntryStruct } from "../components/dialogs/acl/model.js";
+
+export enum Privilege {
+    View = 1,
+    ProxyView = 2,
+    Operate = 3,
+    Manage = 4,
+    Administer = 5,
+}
+
+export enum AuthMode {
+    Pase = 1,
+    Case = 2,
+    Group = 3,
+}
+
+export const PRIVILEGE_NAMES: Record<number, string> = {
+    [Privilege.View]: "View",
+    [Privilege.ProxyView]: "ProxyView",
+    [Privilege.Operate]: "Operate",
+    [Privilege.Manage]: "Manage",
+    [Privilege.Administer]: "Administer",
+};
+
+export const AUTH_MODE_NAMES: Record<number, string> = {
+    [AuthMode.Pase]: "PASE",
+    [AuthMode.Case]: "CASE",
+    [AuthMode.Group]: "Group",
+};
+
+export function nodeIdKey(id: number | bigint): string {
+    return String(id);
+}
+
+/** Normalize a raw attribute value (array or index-keyed object, or absent) into an element array. */
+export function attributeArray(value: unknown): unknown[] {
+    if (Array.isArray(value)) return value;
+    if (value && typeof value === "object") return Object.values(value);
+    return new Array<unknown>();
+}
+
+export function readAclEntries(node: MatterNode): AccessControlEntryStruct[] {
+    return attributeArray(node.attributes["0/31/0"]).map(value => AccessControlEntryDataTransformer.transform(value));
+}
+
+export function entriesForFabric(
+    entries: AccessControlEntryStruct[],
+    fabricIndex: number | undefined,
+): AccessControlEntryStruct[] {
+    if (fabricIndex === undefined) return entries;
+    return entries.filter(e => e.fabricIndex === fabricIndex);
+}
+
+/**
+ * The device-side fabric index for our controller's fabric, read from CurrentFabricIndex (0/62/5).
+ * ACL/Binding entries carry this index in their fabricIndex field — NOT the controller's own
+ * fabric-table index (serverInfo.fabric_index), which lives in a different numbering space.
+ */
+export function nodeFabricIndex(node: MatterNode): number | undefined {
+    const v = node.attributes["0/62/5"];
+    return typeof v === "number" ? v : undefined;
+}
+
+export function isWholeNode(entry: AccessControlEntryStruct): boolean {
+    return !entry.targets || entry.targets.length === 0;
+}
+
+/**
+ * Whether the entry grants access to (endpoint, cluster). A null target endpoint/cluster is an ACL
+ * wildcard (grants all). Cluster matching is directional: a wildcard *request* (cluster undefined,
+ * i.e. an all-clusters binding) is only covered by a wildcard ACL target — a cluster-specific grant
+ * does not cover "all clusters".
+ */
+export function entryMatchesTarget(
+    entry: AccessControlEntryStruct,
+    endpoint: number,
+    cluster: number | undefined,
+): boolean {
+    if (isWholeNode(entry)) return true;
+    return entry.targets!.some(t => {
+        const endpointMatch = t.endpoint == null || t.endpoint === endpoint;
+        const clusterMatch = cluster == null ? t.cluster == null : t.cluster == null || t.cluster === cluster;
+        return endpointMatch && clusterMatch;
+    });
+}
+
+export interface AclCapacity {
+    max: number;
+    subjectsMax: number;
+    targetsMax: number;
+}
+
+export function aclCapacity(node: MatterNode): AclCapacity {
+    const num = (key: string, fallback: number) => {
+        const v = node.attributes[key];
+        return typeof v === "number" ? v : fallback;
+    };
+    return { max: num("0/31/4", 0), subjectsMax: num("0/31/2", 0), targetsMax: num("0/31/3", 0) };
+}
+
+/**
+ * Stable structural identity for an ACL entry, used to re-locate it in a freshly-read list before a
+ * write (the cache copy and the fresh copy are different objects).
+ */
+export function aclEntryKey(entry: AccessControlEntryStruct): string {
+    const subjects = (entry.subjects ?? []).map(nodeIdKey).sort();
+    const targets = (entry.targets ?? [])
+        .map(t => `${t.endpoint ?? ""}:${t.cluster ?? ""}:${t.deviceType ?? ""}`)
+        .sort();
+    return JSON.stringify([entry.fabricIndex, entry.privilege, entry.authMode, subjects, targets]);
+}
+
+export function subjectsInclude(entry: AccessControlEntryStruct, nodeId: number | bigint): boolean {
+    const key = nodeIdKey(nodeId);
+    return (entry.subjects ?? []).some(s => nodeIdKey(s) === key);
+}
+
+export function isProtectedAdmin(
+    entry: AccessControlEntryStruct,
+    controllerNodeId: number | bigint | undefined,
+): boolean {
+    if (controllerNodeId === undefined) return false;
+    return (
+        entry.privilege === Privilege.Administer &&
+        entry.authMode === AuthMode.Case &&
+        subjectsInclude(entry, controllerNodeId)
+    );
+}

package/src/util/binding.ts

@@ -0,0 +1,182 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { MatterNode } from "@matter-server/ws-client";
+import type { AccessControlEntryStruct } from "../components/dialogs/acl/model.js";
+import { BindingEntryDataTransformer, type BindingEntryStruct } from "../components/dialogs/binding/model.js";
+import {
+    AuthMode,
+    Privilege,
+    attributeArray,
+    entriesForFabric,
+    entryMatchesTarget,
+    isWholeNode,
+    nodeFabricIndex,
+    nodeIdKey,
+    readAclEntries,
+    subjectsInclude,
+} from "./access-control.js";
+
+const BINDING_KEY_RE = /^(\d+)\/30\/0$/;
+
+export function readBindings(node: MatterNode, endpoint: number): BindingEntryStruct[] {
+    return attributeArray(node.attributes[`${endpoint}/30/0`]).map(value =>
+        BindingEntryDataTransformer.transform(value),
+    );
+}
+
+export interface EndpointBinding {
+    endpoint: number;
+    binding: BindingEntryStruct;
+}
+
+export function readAllBindings(node: MatterNode): EndpointBinding[] {
+    const result = new Array<EndpointBinding>();
+    for (const key of Object.keys(node.attributes)) {
+        const m = BINDING_KEY_RE.exec(key);
+        if (!m) continue;
+        const endpoint = Number(m[1]);
+        for (const value of attributeArray(node.attributes[key])) {
+            result.push({ endpoint, binding: BindingEntryDataTransformer.transform(value) });
+        }
+    }
+    return result;
+}
+
+function numberList(node: MatterNode, key: string): number[] {
+    const raw = node.attributes[key];
+    if (!Array.isArray(raw)) return new Array<number>();
+    return raw.map(v => Number(v));
+}
+
+export function targetServerClusters(node: MatterNode, endpoint: number): number[] {
+    return numberList(node, `${endpoint}/29/1`);
+}
+
+export function sourceClientClusters(node: MatterNode, endpoint: number): number[] {
+    return numberList(node, `${endpoint}/29/2`);
+}
+
+export interface BindableClusters {
+    bindable: number[];
+    otherTarget: number[];
+}
+
+export function bindableClusters(
+    source: MatterNode,
+    sourceEndpoint: number,
+    target: MatterNode,
+    targetEndpoint: number,
+): BindableClusters {
+    const client = new Set(sourceClientClusters(source, sourceEndpoint));
+    const server = targetServerClusters(target, targetEndpoint);
+    const bindable = new Array<number>();
+    const otherTarget = new Array<number>();
+    for (const c of server) {
+        if (client.has(c)) bindable.push(c);
+        else otherTarget.push(c);
+    }
+    return { bindable, otherTarget };
+}
+
+export type ReverseAclState = "present" | "missing" | "overPrivileged" | "cannotVerify";
+
+export interface ReverseAclResult {
+    state: ReverseAclState;
+}
+
+/**
+ * Whether the target node's ACL grants the source the access this binding needs:
+ *  - present:        a matching CASE entry at Operate exists
+ *  - overPrivileged: the only matching grant is above Operate (Manage/Administer)
+ *  - missing:        no matching grant (or only below Operate)
+ *  - cannotVerify:   target node not known / offline
+ */
+export function reverseAclState(
+    sourceNodeId: number | bigint,
+    binding: BindingEntryStruct,
+    targetNode: MatterNode | undefined,
+): ReverseAclResult {
+    if (!targetNode || !targetNode.available) return { state: "cannotVerify" };
+    const matching = entriesForFabric(readAclEntries(targetNode), nodeFabricIndex(targetNode)).filter(
+        e =>
+            e.authMode === AuthMode.Case &&
+            subjectsInclude(e, sourceNodeId) &&
+            entryMatchesTarget(e, binding.endpoint ?? -1, binding.cluster),
+    );
+    const granting = matching.filter(e => e.privilege >= Privilege.Operate);
+    if (granting.length === 0) return { state: "missing" };
+    if (granting.some(e => e.privilege === Privilege.Operate)) return { state: "present" };
+    return { state: "overPrivileged" };
+}
+
+export type RelationshipKind = "none" | "backs" | "overPrivileged";
+
+export interface RelationshipResult {
+    kind: RelationshipKind;
+    sourceNodeId?: number | bigint;
+    sourceEndpoint?: number;
+}
+
+/**
+ * Whether an ACL entry on the viewed node backs a real binding from one of its subjects. Grants
+ * above Operate are flagged over-privileged (Operate is sufficient for a binding).
+ */
+export function detectBindingRelationship(
+    entry: AccessControlEntryStruct,
+    viewedNodeId: number | bigint,
+    allNodes: MatterNode[],
+): RelationshipResult {
+    if (entry.authMode !== AuthMode.Case) return { kind: "none" };
+    const viewedKey = nodeIdKey(viewedNodeId);
+
+    for (const subject of entry.subjects ?? []) {
+        const sourceKey = nodeIdKey(subject);
+        const source = allNodes.find(n => nodeIdKey(n.node_id) === sourceKey);
+        if (!source || !source.available) continue;
+        for (const { endpoint, binding } of readAllBindings(source)) {
+            if (binding.node == null) continue;
+            if (nodeIdKey(binding.node) !== viewedKey) continue;
+            if (!entryMatchesTarget(entry, binding.endpoint ?? -1, binding.cluster)) continue;
+            const kind: RelationshipKind = entry.privilege > Privilege.Operate ? "overPrivileged" : "backs";
+            return { kind, sourceNodeId: source.node_id, sourceEndpoint: endpoint };
+        }
+    }
+    return { kind: "none" };
+}
+
+export interface AddBindingCapacity {
+    canAdd: boolean;
+    reason?: string;
+}
+
+/**
+ * A new binding consumes a target ACL slot only when no existing our-fabric Operate+ entry for the
+ * source can absorb it — mirrors the merge behavior the writer implements.
+ */
+export function targetAclCapacityForBinding(targetNode: MatterNode, sourceNodeId: number | bigint): AddBindingCapacity {
+    const fabricIndex = nodeFabricIndex(targetNode);
+    // Advisory pre-check only. If CurrentFabricIndex isn't cached for this target yet, don't block:
+    // the write path (ensureBindingAcl → freshOurAcl) reads 0/62/5 fresh and fails cleanly if absent.
+    if (fabricIndex === undefined) return { canAdd: true };
+    const entries = entriesForFabric(readAclEntries(targetNode), fabricIndex);
+    const targetsMaxRaw = targetNode.attributes["0/31/3"];
+    const targetsMax = typeof targetsMaxRaw === "number" && targetsMaxRaw > 0 ? targetsMaxRaw : Number.MAX_SAFE_INTEGER;
+    const reusable = entries.some(
+        e =>
+            e.authMode === AuthMode.Case &&
+            e.privilege >= Privilege.Operate &&
+            subjectsInclude(e, sourceNodeId) &&
+            (isWholeNode(e) || (e.targets?.length ?? 0) < targetsMax),
+    );
+    if (reusable) return { canAdd: true };
+    const maxRaw = targetNode.attributes["0/31/4"];
+    const max = typeof maxRaw === "number" ? maxRaw : 0;
+    if (max > 0 && entries.length >= max) {
+        return { canAdd: false, reason: "Target node's access control list is full." };
+    }
+    return { canAdd: true };
+}

package/src/util/endpoints.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { MatterNode } from "@matter-server/ws-client";
+import { type DeviceType, device_types } from "../client/models/descriptions.js";
+
+export function getEndpointDeviceTypes(node: MatterNode, endpoint: number): DeviceType[] {
+    const rawValues = node.attributes[`${endpoint}/29/0`] as Record<string, number>[] | undefined;
+    if (!rawValues) return new Array<DeviceType>();
+    return rawValues.map(rawValue => {
+        const id = rawValue["0"] ?? rawValue["deviceType"];
+        return device_types[id] ?? { id: id ?? -1, label: `Unknown Device Type (${id})`, clusters: [] };
+    });
+}

package/src/util/node-name.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { MatterNode } from "@matter-server/ws-client";
+
+/**
+ * Human-readable display name for a node: nodeLabel, else productName (serialNumber), else a
+ * generic fallback. Shared so node pickers and tables name devices consistently.
+ */
+export function getDeviceName(node: MatterNode): string {
+    if (node.nodeLabel) return node.nodeLabel;
+    const productName = node.productName || "Unknown Device";
+    const serialNumber = node.serialNumber;
+    return serialNumber ? `${productName} (${serialNumber})` : productName;
+}