@matter-server/dashboard 1.0.0 → 1.1.0

package/src/components/dialogs/acl/acl-actions.ts

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { AccessControlEntry, MatterClient } from "@matter-server/ws-client";
+import { Privilege, aclEntryKey, attributeArray, entriesForFabric } from "../../../util/access-control.js";
+import { AccessControlEntryDataTransformer, type AccessControlEntryStruct } from "./model.js";
+
+function toApiAcl(e: AccessControlEntryStruct): AccessControlEntry {
+    return {
+        privilege: e.privilege,
+        auth_mode: e.authMode,
+        subjects: e.subjects ?? null,
+        targets:
+            e.targets?.map(t => ({
+                cluster: t.cluster ?? null,
+                endpoint: t.endpoint ?? null,
+                device_type: t.deviceType ?? null,
+            })) ?? null,
+    };
+}
+
+/**
+ * Read the node's ACL + CurrentFabricIndex fresh (explicit reads are not fabric-filtered) and narrow
+ * to our fabric. Fails rather than risk writing back other fabrics' entries if the index is unknown.
+ */
+async function freshOurAcl(client: MatterClient, nodeId: number | bigint): Promise<AccessControlEntryStruct[]> {
+    const res = await client.readAttribute(nodeId, ["0/31/0", "0/62/5"]);
+    const all = attributeArray(res["0/31/0"]).map(v => AccessControlEntryDataTransformer.transform(v));
+    const fi = res["0/62/5"];
+    if (typeof fi !== "number") {
+        throw new Error(`Cannot determine the current fabric index (0/62/5) for node ${nodeId}`);
+    }
+    return entriesForFabric(all, fi);
+}
+
+export async function addAclEntry(
+    client: MatterClient,
+    nodeId: number | bigint,
+    entry: AccessControlEntryStruct,
+): Promise<void> {
+    const acl = await freshOurAcl(client, nodeId);
+    acl.push(entry);
+    await client.setACLEntry(nodeId, acl.map(toApiAcl));
+}
+
+export async function deleteAclEntry(client: MatterClient, nodeId: number | bigint, key: string): Promise<void> {
+    const acl = await freshOurAcl(client, nodeId);
+    let removed = false;
+    const kept = acl.filter(e => {
+        if (!removed && aclEntryKey(e) === key) {
+            removed = true;
+            return false;
+        }
+        return true;
+    });
+    await client.setACLEntry(nodeId, kept.map(toApiAcl));
+}
+
+/** Downgrade the given entries (by key) to Operate privilege. */
+export async function downgradeToOperate(
+    client: MatterClient,
+    nodeId: number | bigint,
+    keys: Set<string>,
+): Promise<void> {
+    const acl = await freshOurAcl(client, nodeId);
+    const updated = acl.map(e => (keys.has(aclEntryKey(e)) ? { ...e, privilege: Privilege.Operate } : e));
+    await client.setACLEntry(nodeId, updated.map(toApiAcl));
+}

package/src/components/dialogs/acl/model.ts

@@ -26,6 +26,10 @@ export type AccessControlEntryStruct = {
     fabricIndex: number;
 };
 
+function isRecord(value: unknown): value is Record<string, unknown> {
+    return typeof value === "object" && value !== null;
+}
+
 export class AccessControlTargetTransformer {
     private static readonly KEY_MAPPING: {
         [inputKey: string]: keyof AccessControlTargetStruct;
@@ -35,8 +39,8 @@ export class AccessControlTargetTransformer {
         "2": "deviceType",
     };
 
-    public static transform(input: any): AccessControlTargetStruct {
-        if (!input || typeof input !== "object") {
+    public static transform(input: unknown): AccessControlTargetStruct {
+        if (!isRecord(input)) {
             throw new Error("Invalid input: expected an object");
         }
 
@@ -48,8 +52,9 @@ export class AccessControlTargetTransformer {
                 const mappedKey = keyMapping[key];
                 if (mappedKey) {
                     const value = input[key];
-                    if (value === undefined) continue;
-                    result[mappedKey] = value;
+                    // Treat unset/wildcard fields (null or absent) as omitted, not numeric 0.
+                    if (value == null) continue;
+                    result[mappedKey] = Number(value);
                 }
             }
         }
@@ -68,8 +73,8 @@ export class AccessControlEntryDataTransformer {
         "254": "fabricIndex",
     };
 
-    public static transform(input: any): AccessControlEntryStruct {
-        if (!input || typeof input !== "object") {
+    public static transform(input: unknown): AccessControlEntryStruct {
+        if (!isRecord(input)) {
             throw new Error("Invalid input: expected an object");
         }
 
@@ -81,20 +86,16 @@ export class AccessControlEntryDataTransformer {
                 const mappedKey = keyMapping[key];
                 if (mappedKey) {
                     const value = input[key];
-                    if (value === undefined) continue;
+                    if (value == null) continue;
                     if (mappedKey === "subjects") {
-                        result[mappedKey] = Array.isArray(value) ? value : undefined;
+                        result.subjects = Array.isArray(value) ? value : undefined;
                     } else if (mappedKey === "targets") {
-                        if (Array.isArray(value)) {
-                            const _targets = Object.values(value).map(val =>
-                                AccessControlTargetTransformer.transform(val),
-                            );
-                            result[mappedKey] = _targets;
-                        } else {
-                            result[mappedKey] = undefined;
-                        }
+                        result.targets = Array.isArray(value)
+                            ? value.map(val => AccessControlTargetTransformer.transform(val))
+                            : undefined;
                     } else {
-                        result[mappedKey] = value;
+                        // privilege, authMode, fabricIndex are numeric
+                        result[mappedKey] = Number(value);
                     }
                 }
             }

package/src/components/dialogs/acl/node-acl-add-dialog.ts

@@ -0,0 +1,350 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import "@material/web/button/text-button";
+import "@material/web/dialog/dialog";
+import "@material/web/select/outlined-select";
+import "@material/web/select/select-option";
+import "@material/web/textfield/outlined-text-field";
+import { consume } from "@lit/context";
+import type { MdDialog } from "@material/web/dialog/dialog.js";
+import { MatterClient, MatterNode } from "@matter-server/ws-client";
+import { mdiClose } from "@mdi/js";
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import "../../../components/ha-svg-icon.js";
+import { clientContext } from "../../../client/client-context.js";
+import { clusters } from "../../../client/models/descriptions.js";
+import { AuthMode, Privilege, PRIVILEGE_NAMES, aclCapacity, nodeIdKey } from "../../../util/access-control.js";
+import { handleAsync } from "../../../util/async-handler.js";
+import { targetServerClusters } from "../../../util/binding.js";
+import { getDeviceName } from "../../../util/node-name.js";
+import { preventDefault } from "../../../util/prevent_default.js";
+import { showAlertDialog } from "../../dialog-box/show-dialog-box.js";
+import { addAclEntry } from "./acl-actions.js";
+import type { AccessControlEntryStruct, AccessControlTargetStruct } from "./model.js";
+
+@customElement("node-acl-add-dialog")
+export class NodeAclAddDialog extends LitElement {
+    @consume({ context: clientContext, subscribe: true })
+    @property({ attribute: false })
+    public client!: MatterClient;
+
+    @property({ attribute: false })
+    public node!: MatterNode;
+
+    @state() private _privilege = Privilege.Operate;
+    @state() private _subjects = new Array<number | bigint>();
+    @state() private _subjectInput = "";
+    @state() private _targets = new Array<AccessControlTargetStruct>();
+    @state() private _targetEndpoint = "all";
+    @state() private _targetCluster = "";
+    @state() private _busy = false;
+
+    private _knownNodes(): MatterNode[] {
+        return Object.values(this.client.nodes).sort((a, b) => {
+            const x = BigInt(a.node_id);
+            const y = BigInt(b.node_id);
+            return x < y ? -1 : x > y ? 1 : 0;
+        });
+    }
+
+    private _addSubject(raw: string) {
+        const value = raw.trim();
+        if (!/^\d+$/.test(value)) return;
+        const id = BigInt(value);
+        const key = nodeIdKey(id);
+        if (this._subjects.some(s => nodeIdKey(s) === key)) return;
+        const max = aclCapacity(this.node).subjectsMax;
+        if (max > 0 && this._subjects.length >= max) {
+            void showAlertDialog({ title: "Limit reached", text: `At most ${max} subjects per entry.` });
+            return;
+        }
+        this._subjects = [...this._subjects, id];
+        this._subjectInput = "";
+    }
+
+    private _removeSubject(key: string) {
+        this._subjects = this._subjects.filter(s => nodeIdKey(s) !== key);
+    }
+
+    private _nodeEndpoints(): number[] {
+        const eps = new Set<number>();
+        for (const key of Object.keys(this.node.attributes)) {
+            const m = /^(\d+)\/29\/0$/.exec(key);
+            if (m) eps.add(Number(m[1]));
+        }
+        return Array.from(eps).sort((a, b) => a - b);
+    }
+
+    private _clusterOptions(): number[] {
+        if (this._targetEndpoint === "all") {
+            const all = new Set<number>();
+            for (const ep of this._nodeEndpoints()) targetServerClusters(this.node, ep).forEach(c => all.add(c));
+            return Array.from(all).sort((a, b) => a - b);
+        }
+        return targetServerClusters(this.node, Number(this._targetEndpoint)).sort((a, b) => a - b);
+    }
+
+    private _clusterLabel(id: number): string {
+        return `${clusters[id]?.label ?? "Cluster"} (0x${id.toString(16).padStart(2, "0").toUpperCase()})`;
+    }
+
+    private _addTarget() {
+        const max = aclCapacity(this.node).targetsMax;
+        if (max > 0 && this._targets.length >= max) {
+            void showAlertDialog({ title: "Limit reached", text: `At most ${max} targets per entry.` });
+            return;
+        }
+        const endpoint =
+            this._targetEndpoint === "all" || this._targetEndpoint === "" ? undefined : Number(this._targetEndpoint);
+        const cluster =
+            this._targetCluster === "all" || this._targetCluster === "" ? undefined : Number(this._targetCluster);
+        if (endpoint === undefined && cluster === undefined) {
+            void showAlertDialog({
+                title: "Validation error",
+                text: "Pick an endpoint and/or a cluster for the target.",
+            });
+            return;
+        }
+        this._targets = [...this._targets, { endpoint, cluster, deviceType: undefined }];
+        this._targetEndpoint = "all";
+        this._targetCluster = "all";
+    }
+
+    private _removeTarget(index: number) {
+        this._targets = this._targets.filter((_, i) => i !== index);
+    }
+
+    private async _save() {
+        if (this._subjects.length === 0) {
+            await showAlertDialog({ title: "Validation error", text: "Add at least one subject node." });
+            return;
+        }
+        const entry: AccessControlEntryStruct = {
+            privilege: this._privilege,
+            authMode: AuthMode.Case,
+            subjects: this._subjects,
+            targets: this._targets.length ? this._targets : undefined,
+            fabricIndex: 0,
+        };
+        this._busy = true;
+        try {
+            await addAclEntry(this.client, this.node.node_id, entry);
+            this._close();
+        } catch (err) {
+            await showAlertDialog({
+                title: "Failed to add entry",
+                text: err instanceof Error ? err.message : String(err),
+            });
+        } finally {
+            this._busy = false;
+        }
+    }
+
+    private _close() {
+        this.shadowRoot!.querySelector<MdDialog>("md-dialog")!.close();
+    }
+
+    private _handleClosed() {
+        this.parentNode?.removeChild(this);
+    }
+
+    protected override render() {
+        return html`
+            <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
+                <div slot="headline">Add ACL entry</div>
+                <div slot="content">
+                    <div class="form">
+                        <md-outlined-select
+                            label="Privilege"
+                            .value=${String(this._privilege)}
+                            ?disabled=${this._busy}
+                            @change=${(e: Event) => (this._privilege = Number((e.target as HTMLSelectElement).value))}
+                        >
+                            ${[Privilege.View, Privilege.Operate, Privilege.Manage, Privilege.Administer].map(
+                                p =>
+                                    html`<md-select-option value=${String(p)}
+                                        ><div slot="headline">${PRIVILEGE_NAMES[p]} · ${p}</div></md-select-option
+                                    >`,
+                            )}
+                        </md-outlined-select>
+                        <div class="note">Auth mode: CASE (node). Group subjects are not supported yet.</div>
+
+                        <div class="label">Subjects (nodes)</div>
+                        <div class="chips">
+                            ${this._subjects.length === 0
+                                ? html`<span class="mut">none — add at least one</span>`
+                                : this._subjects.map(s => {
+                                      const known = this.client.nodes[nodeIdKey(s)];
+                                      return html`<span class="chip"
+                                          >${known ? getDeviceName(known) : "Node"} · ${s.toString()}
+                                          <ha-svg-icon
+                                              class="x"
+                                              .path=${mdiClose}
+                                              @click=${() => this._removeSubject(nodeIdKey(s))}
+                                          ></ha-svg-icon
+                                      ></span>`;
+                                  })}
+                        </div>
+                        <div class="row">
+                            <md-outlined-select
+                                label="Known nodes"
+                                ?disabled=${this._busy}
+                                @change=${(e: Event) => {
+                                    const v = (e.target as HTMLSelectElement).value;
+                                    if (v) this._addSubject(v);
+                                }}
+                            >
+                                <md-select-option value=""><div slot="headline">— pick —</div></md-select-option>
+                                ${this._knownNodes().map(
+                                    n =>
+                                        html`<md-select-option value=${nodeIdKey(n.node_id)}
+                                            ><div slot="headline">
+                                                ${n.node_id.toString()} · ${getDeviceName(n)}
+                                            </div></md-select-option
+                                        >`,
+                                )}
+                            </md-outlined-select>
+                            <md-outlined-text-field
+                                label="or raw node id"
+                                type="text"
+                                pattern="[0-9]+"
+                                .value=${this._subjectInput}
+                                ?disabled=${this._busy}
+                                @input=${(e: Event) => (this._subjectInput = (e.target as HTMLInputElement).value)}
+                            ></md-outlined-text-field>
+                            <md-text-button ?disabled=${this._busy} @click=${() => this._addSubject(this._subjectInput)}
+                                >Add</md-text-button
+                            >
+                        </div>
+
+                        <div class="label">Targets (optional — none means whole node)</div>
+                        <div class="chips">
+                            ${this._targets.length === 0
+                                ? html`<span class="mut">whole node</span>`
+                                : this._targets.map(
+                                      (t, i) =>
+                                          html`<span class="chip"
+                                              >${t.endpoint != null ? `EP ${t.endpoint}` : "All endpoints"}
+                                              ${t.cluster != null
+                                                  ? `· ${this._clusterLabel(t.cluster)}`
+                                                  : "· all clusters"}
+                                              <ha-svg-icon
+                                                  class="x"
+                                                  .path=${mdiClose}
+                                                  @click=${() => this._removeTarget(i)}
+                                              ></ha-svg-icon
+                                          ></span>`,
+                                  )}
+                        </div>
+                        <div class="row">
+                            <md-outlined-select
+                                label="endpoint"
+                                .value=${this._targetEndpoint}
+                                ?disabled=${this._busy}
+                                @change=${(e: Event) => {
+                                    this._targetEndpoint = (e.target as HTMLSelectElement).value;
+                                    this._targetCluster = "";
+                                }}
+                            >
+                                <md-select-option value="all"
+                                    ><div slot="headline">All endpoints</div></md-select-option
+                                >
+                                ${this._nodeEndpoints().map(
+                                    ep =>
+                                        html`<md-select-option value=${String(ep)}
+                                            ><div slot="headline">EP ${ep}</div></md-select-option
+                                        >`,
+                                )}
+                            </md-outlined-select>
+                            <md-outlined-select
+                                label="cluster"
+                                .value=${this._targetCluster}
+                                ?disabled=${this._busy}
+                                @change=${(e: Event) => (this._targetCluster = (e.target as HTMLSelectElement).value)}
+                            >
+                                <md-select-option value="all"><div slot="headline">All clusters</div></md-select-option>
+                                ${this._clusterOptions().map(
+                                    c =>
+                                        html`<md-select-option value=${String(c)}
+                                            ><div slot="headline">${this._clusterLabel(c)}</div></md-select-option
+                                        >`,
+                                )}
+                            </md-outlined-select>
+                            <md-text-button ?disabled=${this._busy} @click=${() => this._addTarget()}
+                                >Add target</md-text-button
+                            >
+                        </div>
+                    </div>
+                </div>
+                <div slot="actions">
+                    <md-text-button ?disabled=${this._busy} @click=${handleAsync(() => this._save())}
+                        >Add</md-text-button
+                    >
+                    <md-text-button ?disabled=${this._busy} @click=${this._close}>Cancel</md-text-button>
+                </div>
+            </md-dialog>
+        `;
+    }
+
+    static override styles = css`
+        .form {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            min-width: 360px;
+        }
+        .label {
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+            opacity: 0.65;
+            margin-top: 6px;
+        }
+        .note {
+            font-size: 12px;
+            opacity: 0.7;
+        }
+        .row {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .chips {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 6px;
+        }
+        .chip {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            padding: 3px 8px;
+            border-radius: 6px;
+            font-size: 12px;
+            background: var(--md-sys-color-surface-container-high);
+            color: var(--md-sys-color-on-surface);
+        }
+        .chip .x {
+            cursor: pointer;
+            --mdc-icon-size: 16px;
+            width: 16px;
+            height: 16px;
+        }
+        .mut {
+            opacity: 0.6;
+            font-size: 12px;
+        }
+    `;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "node-acl-add-dialog": NodeAclAddDialog;
+    }
+}

package/src/components/dialogs/acl/show-node-acl-add-dialog.ts

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