@matter-server/dashboard 0.2.0-alpha.0-00000000-000000000

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

@@ -0,0 +1,252 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import "@material/web/button/filled-button";
+import "@material/web/button/outlined-button";
+import "@material/web/button/text-button";
+import "@material/web/divider/divider";
+import "@material/web/iconbutton/icon-button";
+import "@material/web/list/list";
+import "@material/web/list/list-item";
+import { mdiChatProcessing, mdiLink, mdiShareVariant, mdiTrashCan, mdiUpdate } from "@mdi/js";
+
+import { consume } from "@lit/context";
+import { MatterClient, MatterNode } from "@matter-server/ws-client";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.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 "../../components/ha-svg-icon";
+import { getEndpointDeviceTypes } from "../matter-endpoint-view.js";
+import { bindingContext } from "./context.js";
+
+function getNodeDeviceTypes(node: MatterNode): DeviceType[] {
+    const uniqueEndpoints = new Set(Object.keys(node.attributes).map(key => Number(key.split("/")[0])));
+    const allDeviceTypes: Set<DeviceType> = new Set();
+    uniqueEndpoints.forEach(endpointId => {
+        getEndpointDeviceTypes(node, endpointId).forEach(deviceType => {
+            allDeviceTypes.add(deviceType);
+        });
+    });
+    return Array.from(allDeviceTypes);
+}
+
+@customElement("node-details")
+export class NodeDetails extends LitElement {
+    public client!: MatterClient;
+
+    @property() public node?: MatterNode;
+
+    @state()
+    private _updateInitiated: boolean = false;
+
+    @consume({ context: bindingContext })
+    @property({ attribute: false })
+    endpoint!: number;
+
+    protected override render() {
+        if (!this.node) return html``;
+
+        const bindings = this.node.attributes[this.endpoint + "/30/0"];
+
+        return html`
+            <md-list>
+                <md-list-item>
+                    <div slot="headline">
+                        <b>Node ${this.node.node_id} ${this.node.nodeLabel}</b>
+                        ${this.node.available ? nothing : html`<span class="status">OFFLINE</span>`}
+                    </div>
+                </md-list-item>
+                <md-list-item>
+                    <div slot="supporting-text"><span class="left">VendorName: </span>${this.node.vendorName}</div>
+                    <div slot="supporting-text"><span class="left">productName: </span>${this.node.productName}</div>
+                    <div slot="supporting-text">
+                        <span class="left">Commissioned: </span>${this.node.date_commissioned}
+                    </div>
+                    <div slot="supporting-text">
+                        <span class="left">Last interviewed: </span>${this.node.last_interview}
+                    </div>
+                    <div slot="supporting-text"><span class="left">Is bridge: </span>${this.node.is_bridge}</div>
+                    <div slot="supporting-text"><span class="left">Serialnumber: </span>${this.node.serialNumber}</div>
+                    ${this.node.is_bridge
+                        ? ""
+                        : html` <div slot="supporting-text">
+                              <span class="left">All device types: </span>${getNodeDeviceTypes(this.node)
+                                  .map(deviceType => {
+                                      return deviceType.label;
+                                  })
+                                  .join(" / ")}
+                          </div>`}
+                </md-list-item>
+                <md-list-item class="btn">
+                    <md-outlined-button @click=${this._reinterview}
+                        >Interview<ha-svg-icon slot="icon" .path=${mdiChatProcessing}></ha-svg-icon
+                    ></md-outlined-button>
+                    ${this._updateInitiated || (this.node.updateState || 0) > 1
+                        ? html` <md-outlined-button disabled
+                              >Update in progress (${this.node.updateStateProgress || 0}%)<ha-svg-icon
+                                  slot="icon"
+                                  .path=${mdiUpdate}
+                              ></ha-svg-icon
+                          ></md-outlined-button>`
+                        : html`<md-outlined-button @click=${this._searchUpdate}
+                              >Update<ha-svg-icon slot="icon" .path=${mdiUpdate}></ha-svg-icon
+                          ></md-outlined-button>`}
+                    ${bindings
+                        ? html`
+                              <md-outlined-button @click=${this._binding}>
+                                  Binding
+                                  <ha-svg-icon slot="icon" .path=${mdiLink}></ha-svg-icon>
+                              </md-outlined-button>
+                          `
+                        : nothing}
+
+                    <md-outlined-button @click=${this._openCommissioningWindow}
+                        >Share<ha-svg-icon slot="icon" .path=${mdiShareVariant}></ha-svg-icon
+                    ></md-outlined-button>
+                    <md-outlined-button @click=${this._remove}
+                        >Remove<ha-svg-icon slot="icon" .path=${mdiTrashCan}></ha-svg-icon
+                    ></md-outlined-button>
+                </md-list-item>
+            </md-list>
+        `;
+    }
+
+    private async _reinterview() {
+        if (
+            !(await showPromptDialog({
+                title: "Reinterview",
+                text: "Are you sure you want to reinterview this node?",
+                confirmText: "Reinterview",
+            }))
+        ) {
+            return;
+        }
+        try {
+            await this.client.interviewNode(this.node!.node_id);
+            showAlertDialog({
+                title: "Reinterview node",
+                text: "Success!",
+            });
+            location.reload();
+        } catch (err: any) {
+            showAlertDialog({
+                title: "Failed to reinterview node",
+                text: err.message,
+            });
+        }
+    }
+
+    private async _remove() {
+        if (
+            !(await showPromptDialog({
+                title: "Remove",
+                text: "Are you sure you want to remove this node?",
+                confirmText: "Remove",
+            }))
+        ) {
+            return;
+        }
+        try {
+            await this.client.removeNode(this.node!.node_id);
+            // make sure to navigate back to the root if node details was opened
+            location.replace("#");
+        } catch (err: any) {
+            showAlertDialog({
+                title: "Failed to remove node",
+                text: err.message,
+            });
+        }
+    }
+
+    private async _binding() {
+        try {
+            showNodeBindingDialog(this.client, this.node!, this.endpoint);
+        } catch (err: any) {
+            console.log(err);
+        }
+    }
+
+    private async _searchUpdate() {
+        const nodeUpdate = await this.client.checkNodeUpdate(this.node!.node_id);
+        if (!nodeUpdate) {
+            showAlertDialog({
+                title: "No update available",
+                text: "No update available for this node",
+            });
+            return;
+        }
+        if (
+            !(await showPromptDialog({
+                title: "Firmware update available",
+                text: `Found a firmware update for this node on ${nodeUpdate.update_source}.
+          Do you want to update this node to version ${nodeUpdate.software_version_string}?
+          Note that updating firmware is at your own risk and may cause the device to
+          malfunction or needs additional handling such as power cycling it and/or recommisisoning it.
+          Use with care.\n${nodeUpdate.firmware_information}`,
+                confirmText: "Start Update",
+            }))
+        ) {
+            return;
+        }
+        try {
+            this._updateInitiated = true;
+            await this.client.updateNode(this.node!.node_id, nodeUpdate.software_version);
+        } catch (err: any) {
+            showAlertDialog({
+                title: "Failed to update node",
+                text: err.message,
+            });
+        } finally {
+            this._updateInitiated = false;
+        }
+    }
+
+    private async _openCommissioningWindow() {
+        if (
+            !(await showPromptDialog({
+                title: "Share device",
+                text: "Do you want to share this device with another Matter controller (open commissioning window)?",
+                confirmText: "Share",
+            }))
+        ) {
+            return;
+        }
+        try {
+            const shareCode = await this.client.openCommissioningWindow(this.node!.node_id);
+            showAlertDialog({
+                title: "Share device",
+                text: `Setup code: ${shareCode.setup_manual_code}`,
+            });
+        } catch (err: any) {
+            showAlertDialog({
+                title: "Failed to open commissioning window on node",
+                text: err.message,
+            });
+        }
+    }
+
+    static override styles = css`
+        .btn {
+            --md-outlined-button-container-shape: 0px;
+        }
+
+        .left {
+            width: 30%;
+            display: inline-table;
+        }
+        .whitespace {
+            height: 15px;
+        }
+
+        .status {
+            color: var(--danger-color);
+            font-weight: bold;
+            font-size: 0.8em;
+        }
+    `;
+}

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

@@ -0,0 +1,124 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import "@material/web/button/filled-button";
+import "@material/web/button/outlined-button";
+import "@material/web/button/text-button";
+import "@material/web/divider/divider";
+import "@material/web/iconbutton/icon-button";
+import "@material/web/list/list";
+import "@material/web/list/list-item";
+import { MatterClient } from "@matter-server/ws-client";
+import { mdiFile, mdiPlus } from "@mdi/js";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement } from "lit/decorators.js";
+import { showAlertDialog, showPromptDialog } from "../../components/dialog-box/show-dialog-box.js";
+import { showCommissionNodeDialog } from "../../components/dialogs/commission-node-dialog/show-commission-node-dialog.js";
+import "../../components/ha-svg-icon";
+
+@customElement("server-details")
+export class ServerDetails extends LitElement {
+    public client?: MatterClient;
+
+    protected override render() {
+        if (!this.client) return html``;
+
+        return html`
+      <md-list>
+        <md-list-item>
+            <div slot="headline">
+                <b>Open Home Foundation Matter Server ${this.client.isProduction ? "" : `(${this.client.serverBaseAddress})`}</b>
+                ${this.client.connection.connected ? nothing : html`<span class="status">OFFLINE</span>`}
+      </div>
+        </md-list-item>
+        <md-list-item>
+          <div slot="supporting-text">
+            <div class="left">FabricId: </div>${this.client.serverInfo.fabric_id}
+          </div>
+          <div slot="supporting-text">
+            <div class="left">Compressed FabricId: </div>${this.client.serverInfo.compressed_fabric_id}
+          </div>
+          <div slot="supporting-text">
+            <div class="left">SDK Wheels Version: </div>${this.client.serverInfo.sdk_version}
+          </div>
+          <div slot="supporting-text">
+            <div class="left">Schema Version: </div>${this.client.serverInfo.schema_version}
+          </div>
+          <div slot="supporting-text">
+            <div class="left">Node count: </div>${Object.keys(this.client.nodes).length}
+          </div>
+        </md-list-item>
+        <md-list-item class="btn">
+          <span>
+          <md-outlined-button @click=${this._commissionNode}>Commission node<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon></md-outlined-button>
+          <md-outlined-button @click=${this._uploadDiagnosticsDumpFile}>Import node<ha-svg-icon slot="icon" .path=${mdiFile}></ha-svg-icon></md-outlined-button>
+          </md-list-item>
+      </md-list>
+      <!-- hidden file element for the upload diagnostics -->
+      <input
+        @change=${this._onFileInput}
+        type="file"
+        id="fileElem"
+        accept=".json"
+        style="display:none" />
+      </div>
+  `;
+    }
+
+    private _commissionNode() {
+        console.log(this.client);
+        showCommissionNodeDialog(this.client!);
+    }
+
+    private async _uploadDiagnosticsDumpFile() {
+        if (
+            !(await showPromptDialog({
+                title: "Add test node",
+                text: "Do you want to add a test node from a diagnostics dump ?",
+                confirmText: "Select file",
+            }))
+        ) {
+            return;
+        }
+        // @ts-expect-error why?
+        const fileElem = this.renderRoot.getElementById("fileElem") as HTMLInputElement;
+        fileElem.click();
+    }
+
+    private _onFileInput = (event: Event) => {
+        const fileElem = event.target as HTMLInputElement;
+        if (fileElem.files!.length > 0) {
+            const selectedFile = fileElem.files![0];
+            const reader = new FileReader();
+            reader.readAsText(selectedFile, "UTF-8");
+            reader.onload = async () => {
+                try {
+                    await this.client!.importTestNode(reader.result?.toString() || "");
+                } catch (err: any) {
+                    showAlertDialog({
+                        title: "Failed to import test node",
+                        text: err.message,
+                    });
+                }
+            };
+        }
+        event.preventDefault();
+    };
+
+    static override styles = css`
+        .btn {
+            --md-outlined-button-container-shape: 0px;
+        }
+
+        .left {
+            width: 30%;
+            display: inline-table;
+        }
+        .whitespace {
+            height: 15px;
+        }
+    `;
+}

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

@@ -0,0 +1,162 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { provide } from "@lit/context";
+import "@material/web/divider/divider";
+import "@material/web/iconbutton/icon-button";
+import "@material/web/list/list";
+import "@material/web/list/list-item";
+import { MatterClient, MatterNode, toBigIntAwareJson } from "@matter-server/ws-client";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { clusters } from "../client/models/descriptions.js";
+import { showAlertDialog } from "../components/dialog-box/show-dialog-box.js";
+import "../components/ha-svg-icon";
+import "../pages/components/node-details";
+import { bindingContext } from "./components/context.js";
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "matter-cluster-view": MatterClusterView;
+    }
+}
+
+function clusterAttributes(attributes: { [key: string]: any }, endpoint: number, cluster: number) {
+    // extract unique clusters from the node attributes, as (sorted) array
+    return Object.keys(attributes)
+        .filter(key => key.startsWith(`${endpoint}/${cluster}`))
+        .map(key => {
+            const attributeKey = Number(key.split("/")[2]);
+            return { key: attributeKey, value: attributes[key] };
+        }, []);
+}
+
+@customElement("matter-cluster-view")
+class MatterClusterView extends LitElement {
+    public client!: MatterClient;
+
+    @property()
+    public node?: MatterNode;
+
+    @provide({ context: bindingContext })
+    @property()
+    public endpoint!: number;
+
+    @property()
+    public cluster?: number;
+
+    override render() {
+        if (!this.node || this.endpoint == undefined || this.cluster == undefined) {
+            return html`
+                <p>Node, endpoint or cluster not found!</p>
+                <button @click=${this._goBack}>Back</button>
+            `;
+        }
+
+        return html`
+            <dashboard-header
+                .title=${`Node ${this.node.node_id}  |  Endpoint ${this.endpoint}  |  Cluster ${this.cluster}`}
+                .backButton=${`#node/${this.node.node_id}/${this.endpoint}`}
+                .client=${this.client}
+            ></dashboard-header>
+
+            <!-- node details section -->
+            <div class="container">
+                <node-details .node=${this.node} .client=${this.client}></node-details>
+            </div>
+
+            <!-- Cluster attributes listing -->
+            <div class="container">
+                <md-list>
+                    <md-list-item>
+                        <div slot="headline">
+                            <b
+                                >Attributes of ${clusters[this.cluster]?.label || "Custom/Unknown Cluster"} Cluster on
+                                Endpoint ${this.endpoint}</b
+                            >
+                        </div>
+                        <div slot="supporting-text">ClusterId ${this.cluster} (0x00${this.cluster.toString(16)})</div>
+                    </md-list-item>
+                    ${clusterAttributes(this.node.attributes, this.endpoint, this.cluster).map(attribute => {
+                        return html`
+                            <md-list-item>
+                                <div slot="headline">
+                                    ${clusters[this.cluster!]?.attributes[attribute.key]?.label ||
+                                    "Custom/Unknown Attribute"}
+                                </div>
+                                <div slot="supporting-text">
+                                    AttributeId: ${attribute.key} (0x00${attribute.key.toString(16)}) - Value type:
+                                    ${clusters[this.cluster!]?.attributes[attribute.key]?.type || "unknown"}
+                                </div>
+                                <div slot="end">
+                                    ${toBigIntAwareJson(attribute.value).length > 20
+                                        ? html`<button
+                                              @click=${() => {
+                                                  this._showAttributeValue(attribute.value);
+                                              }}
+                                          >
+                                              Show value
+                                          </button>`
+                                        : toBigIntAwareJson(attribute.value)}
+                                </div>
+                            </md-list-item>
+                            <md-divider />
+                        `;
+                    })}
+                </md-list>
+            </div>
+        `;
+    }
+
+    private async _showAttributeValue(value: any) {
+        showAlertDialog({
+            title: "Attribute value",
+            text: toBigIntAwareJson(value),
+        });
+    }
+
+    private _goBack() {
+        history.back();
+    }
+
+    static override styles = css`
+        :host {
+            display: block;
+            background-color: var(--md-sys-color-background);
+        }
+
+        .header {
+            background-color: var(--md-sys-color-primary);
+            color: var(--md-sys-color-on-primary);
+            --icon-primary-color: var(--md-sys-color-on-primary);
+            font-weight: 400;
+            display: flex;
+            align-items: center;
+            padding-right: 8px;
+            height: 48px;
+        }
+
+        md-icon-button {
+            margin-right: 8px;
+        }
+
+        .flex {
+            flex: 1;
+        }
+
+        .container {
+            padding: 16px;
+            max-width: 95%;
+            margin: 0 auto;
+        }
+
+        .status {
+            color: var(--danger-color);
+            font-weight: bold;
+            font-size: 0.8em;
+        }
+    `;
+}

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

@@ -0,0 +1,125 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ContextProvider } from "@lit/context";
+import { MatterClient, MatterError } from "@matter-server/ws-client";
+import { LitElement, PropertyValueMap, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { clientContext } from "../client/client-context.js";
+import { clone } from "../util/clone_class.js";
+import type { Route } from "../util/routing.js";
+import "./matter-cluster-view";
+import "./matter-endpoint-view";
+import "./matter-node-view";
+import "./matter-server-view";
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "matter-dashboard-app": MatterDashboardApp;
+    }
+}
+
+@customElement("matter-dashboard-app")
+class MatterDashboardApp extends LitElement {
+    @state() private _route: Route = {
+        prefix: "",
+        path: [],
+    };
+
+    public client!: MatterClient;
+
+    @state()
+    private _state: "connecting" | "connected" | "error" | "disconnected" = "connecting";
+
+    private _error: string | undefined;
+
+    private provider = new ContextProvider(this, { context: clientContext, initialValue: this.client });
+
+    protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+        super.firstUpdated(_changedProperties);
+        this.client.startListening().then(
+            () => {
+                this._state = "connected";
+                this.client.addEventListener("nodes_changed", () => {
+                    this.requestUpdate();
+                    this.provider.setValue(clone(this.client));
+                });
+                this.client.addEventListener("server_info_updated", () => {
+                    this.provider.setValue(clone(this.client));
+                });
+                this.client.addEventListener("connection_lost", () => {
+                    this._state = "disconnected";
+                });
+            },
+            (err: MatterError) => {
+                this._state = "error";
+                this._error = err.message;
+            },
+        );
+
+        // Handle history changes
+        const updateRoute = () => {
+            const pathParts = location.hash.substring(1).split("/");
+            this._route = {
+                prefix: pathParts.length == 1 ? "" : pathParts[0],
+                path: pathParts.length == 1 ? pathParts : pathParts.slice(1),
+            };
+        };
+        window.addEventListener("hashchange", updateRoute);
+        updateRoute();
+    }
+
+    override render() {
+        if (this._state === "connecting") {
+            return html`<p>Connecting...</p>`;
+        }
+        if (this._state === "disconnected") {
+            return html`<p>Connection lost</p>`;
+        }
+        if (this._state === "error") {
+            return html`
+                <p>Error: ${this._error}</p>
+                <button @click=${this.client.disconnect}>Clear stored URL</button>
+            `;
+        }
+        if (this._route.prefix === "node" && this._route.path.length == 3) {
+            // cluster level
+            return html`
+                <matter-cluster-view
+                    .client=${this.client}
+                    .node=${this.client.nodes[this._route.path[0]]}
+                    .endpoint=${parseInt(this._route.path[1], 10)}
+                    .cluster=${parseInt(this._route.path[2], 10)}
+                ></matter-cluster-view>
+            `;
+        }
+        if (this._route.prefix === "node" && this._route.path.length == 2) {
+            // endpoint level
+            return html`
+                <matter-endpoint-view
+                    .client=${this.client}
+                    .node=${this.client.nodes[this._route.path[0]]}
+                    .endpoint=${parseInt(this._route.path[1], 10)}
+                ></matter-endpoint-view>
+            `;
+        }
+        if (this._route.prefix === "node") {
+            // node level
+            return html`
+                <matter-node-view
+                    .client=${this.client}
+                    .node=${this.client.nodes[this._route.path[0]]}
+                ></matter-node-view>
+            `;
+        }
+        // root level: server overview
+        return html`<matter-server-view
+            .client=${this.client}
+            .nodes=${this.client.nodes}
+            .route=${this._route}
+        ></matter-server-view>`;
+    }
+}