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

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

@@ -0,0 +1,152 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+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 } from "@matter-server/ws-client";
+import { mdiChevronRight } from "@mdi/js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { guard } from "lit/directives/guard.js";
+import { DeviceType, clusters, device_types } from "../client/models/descriptions.js";
+import "../components/ha-svg-icon";
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "matter-endpoint-view": MatterEndpointView;
+    }
+}
+
+function getUniqueClusters(node: MatterNode, endpoint: number) {
+    return Array.from(
+        new Set(
+            Object.keys(node.attributes)
+                .filter(key => key.startsWith(`${endpoint.toString()}/`))
+                .map(key => Number(key.split("/")[1])),
+        ),
+    ).sort((a, b) => {
+        return a - b;
+    });
+}
+
+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: [] };
+    });
+}
+
+@customElement("matter-endpoint-view")
+class MatterEndpointView extends LitElement {
+    public client!: MatterClient;
+
+    @property()
+    public node?: MatterNode;
+
+    @property()
+    public endpoint?: number;
+
+    override render() {
+        if (!this.node || this.endpoint == undefined) {
+            return html`
+                <p>Node or endpoint not found!</p>
+                <button @click=${this._goBack}>Back</button>
+            `;
+        }
+
+        return html`
+            <dashboard-header
+                .title=${`Node ${this.node.node_id}  |  Endpoint ${this.endpoint}`}
+                .backButton=${`#node/${this.node.node_id}`}
+                .client=${this.client}
+            ></dashboard-header>
+
+            <!-- node details section -->
+            <div class="container">
+                <node-details .node=${this.node} .client=${this.client}></node-details>
+            </div>
+
+            <!-- Endpoint clusters listing -->
+            <div class="container">
+                <md-list>
+                    <md-list-item>
+                        <div slot="headline">
+                            <b>Clusters on Endpoint ${this.endpoint}</b>
+                        </div>
+                        <div slot="supporting-text">
+                            Device Type(s):
+                            ${getEndpointDeviceTypes(this.node, this.endpoint)
+                                .map(deviceType => {
+                                    return deviceType.label;
+                                })
+                                .join(" / ")}
+                        </div>
+                    </md-list-item>
+                    ${guard([this.node?.attributes.length], () =>
+                        getUniqueClusters(this.node!, this.endpoint!).map(cluster => {
+                            return html`
+                                <md-list-item
+                                    type="link"
+                                    href=${`#node/${this.node!.node_id}/${this.endpoint}/${cluster}`}
+                                >
+                                    <div slot="headline">${clusters[cluster]?.label || "Custom/Unknown Cluster"}</div>
+                                    <div slot="supporting-text">ClusterId ${cluster} (0x00${cluster.toString(16)})</div>
+                                    <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
+                                </md-list-item>
+                            `;
+                        }),
+                    )}
+                </md-list>
+            </div>
+        `;
+    }
+
+    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-node-view.ts

@@ -0,0 +1,126 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+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 } from "@matter-server/ws-client";
+import { mdiChevronRight } from "@mdi/js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { guard } from "lit/directives/guard.js";
+import "../components/ha-svg-icon";
+import "./components/header";
+import "./components/node-details";
+import { getEndpointDeviceTypes } from "./matter-endpoint-view.js";
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "matter-node-view": MatterNodeView;
+    }
+}
+
+function getUniqueEndpoints(node: MatterNode) {
+    // extract unique endpoints from the node attributes, as (sorted) array
+    return Array.from(new Set(Object.keys(node.attributes).map(key => Number(key.split("/")[0])))).sort((a, b) => {
+        return a - b;
+    });
+}
+
+@customElement("matter-node-view")
+class MatterNodeView extends LitElement {
+    public client!: MatterClient;
+
+    @property()
+    public node?: MatterNode;
+
+    override render() {
+        if (!this.node) {
+            return html`
+                <p>Node not found!</p>
+                <button @click=${this._goBack}>Back</button>
+            `;
+        }
+
+        return html`
+            <dashboard-header
+                .title=${"Node " + this.node.node_id}
+                .client=${this.client}
+                backButton="#"
+            ></dashboard-header>
+
+            <!-- node details section -->
+            <div class="container">
+                <node-details .node=${this.node} .client=${this.client}></node-details>
+            </div>
+
+            <!-- Node Endpoints listing -->
+            <div class="container">
+                <md-list>
+                    <md-list-item>
+                        <div slot="headline">
+                            <b>Endpoints</b>
+                        </div>
+                    </md-list-item>
+                    ${guard([this.node?.attributes.length], () =>
+                        getUniqueEndpoints(this.node!).map(endPointId => {
+                            return html`
+                                <md-list-item type="link" href=${`#node/${this.node!.node_id}/${endPointId}`}>
+                                    <div slot="headline">Endpoint ${endPointId}</div>
+                                    <div slot="supporting-text">
+                                        Device Type(s):
+                                        ${getEndpointDeviceTypes(this.node!, endPointId)
+                                            .map(deviceType => {
+                                                return deviceType.label;
+                                            })
+                                            .join(" / ")}
+                                    </div>
+                                    <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
+                                </md-list-item>
+                            `;
+                        }),
+                    )}
+                </md-list>
+            </div>
+
+            <dashboard-footer />
+        `;
+    }
+
+    private _goBack() {
+        history.back();
+    }
+
+    static override styles = css`
+        :host {
+            display: flex;
+            background-color: var(--md-sys-color-background);
+            box-sizing: border-box;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+
+        .container {
+            padding: 16px;
+            max-width: 95%;
+            margin: 0 auto;
+            width: 100%;
+        }
+
+        @media (max-width: 600px) {
+            .container {
+                padding: 16px 0;
+            }
+        }
+
+        .status {
+            color: var(--danger-color);
+            font-weight: bold;
+            font-size: 0.8em;
+        }
+    `;
+}

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

@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+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 } from "@matter-server/ws-client";
+import { mdiChevronRight } from "@mdi/js";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "../components/ha-svg-icon";
+import "./components/footer";
+import "./components/header";
+import "./components/server-details";
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "matter-server-view": MatterServerView;
+    }
+}
+
+@customElement("matter-server-view")
+class MatterServerView extends LitElement {
+    public client!: MatterClient;
+
+    @property()
+    public nodes!: MatterClient["nodes"];
+
+    private _cachedNodes?: MatterClient["nodes"];
+    private _cachedNodeEntries?: [string, MatterNode][];
+
+    private getNodeEntries(nodes: MatterClient["nodes"]): [string, MatterNode][] {
+        if (nodes !== this._cachedNodes) {
+            this._cachedNodes = nodes;
+            this._cachedNodeEntries = Object.entries(nodes);
+        }
+        return this._cachedNodeEntries!;
+    }
+
+    override render() {
+        const nodes = this.getNodeEntries(this.nodes);
+
+        return html`
+            <dashboard-header title="Open Home Foundation Matter Server" .client=${this.client}></dashboard-header>
+
+            <!-- server details section -->
+            <div class="container">
+                <server-details .client=${this.client}></server-details>
+            </div>
+
+            <!-- Nodes listing -->
+            <div class="container">
+                <md-list>
+                    <md-list-item>
+                        <div slot="headline">
+                            <b>Nodes</b>
+                        </div>
+                    </md-list-item>
+                    ${nodes.map(([_id, node]) => {
+                        return html`
+                            <md-list-item type="link" href=${`#node/${node.node_id}`}>
+                                <div slot="headline">
+                                    Node ${node.node_id}
+                                    ${node.available ? "" : html`<span class="status">OFFLINE</span>`}
+                                </div>
+                                <div slot="supporting-text">
+                                    ${node.nodeLabel ? `${node.nodeLabel} | ` : nothing} ${node.vendorName} |
+                                    ${node.productName}
+                                </div>
+                                <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
+                            </md-list-item>
+                        `;
+                    })}
+                </md-list>
+            </div>
+            <dashboard-footer />
+        `;
+    }
+
+    static override styles = css`
+        :host {
+            display: flex;
+            background-color: var(--md-sys-color-background);
+            box-sizing: border-box;
+            flex-direction: column;
+        }
+
+        .container {
+            padding: 16px;
+            max-width: 95%;
+            margin: 0 auto;
+            flex: 1;
+            width: 100%;
+        }
+
+        @media (max-width: 600px) {
+            .container {
+                padding: 16px 0;
+            }
+        }
+
+        span[slot="start"] {
+            width: 40px;
+            text-align: center;
+        }
+
+        .status {
+            color: var(--danger-color);
+            font-weight: bold;
+            font-size: 0.8em;
+        }
+    `;
+}

package/src/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "extends": "../../tools/tsc/tsconfig.lib.json",
+    "compilerOptions": {
+        "types": [
+            "globals"
+        ],
+        "experimentalDecorators": true,
+        "useDefineForClassFields": false,
+        "allowSyntheticDefaultImports": true
+    },
+    "references": [
+        {
+            "path": "../../ws-client/src"
+        }
+    ]
+}

package/src/util/clone_class.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const clone = (orig: any) => Object.assign(Object.create(Object.getPrototypeOf(orig)), orig);

package/src/util/fire_event.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Polymer legacy event helpers used courtesy of the Polymer project.
+//
+// Copyright (c) 2017 The Polymer Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+declare global {
+    interface HASSDomEvents {}
+}
+
+export type ValidHassDomEvent = keyof HASSDomEvents;
+
+export interface HASSDomEvent<T> extends Event {
+    detail: T;
+}
+
+/**
+ * Dispatches a custom event with an optional detail value.
+ *
+ * @param {string} type Name of event type.
+ * @param {*=} detail Detail value containing event-specific
+ *   payload.
+ * @param {{ bubbles: (boolean|undefined),
+ *           cancelable: (boolean|undefined),
+ *           composed: (boolean|undefined) }=}
+ *  options Object specifying options.  These may include:
+ *  `bubbles` (boolean, defaults to `true`),
+ *  `cancelable` (boolean, defaults to false), and
+ *  `node` on which to fire the event (HTMLElement, defaults to `this`).
+ * @return {Event} The new event that was fired.
+ */
+export const fireEvent = <HassEvent extends ValidHassDomEvent>(
+    node: HTMLElement | Window,
+    type: HassEvent,
+    detail?: HASSDomEvents[HassEvent],
+    options?: {
+        bubbles?: boolean;
+        cancelable?: boolean;
+        composed?: boolean;
+    },
+) => {
+    options = options || {};
+    // @ts-expect-error why?
+    detail = detail === null || detail === undefined ? {} : detail;
+    const event = new Event(type, {
+        bubbles: options.bubbles === undefined ? true : options.bubbles,
+        cancelable: Boolean(options.cancelable),
+        composed: options.composed === undefined ? true : options.composed,
+    });
+    (event as any).detail = detail;
+    node.dispatchEvent(event);
+    return event;
+};

package/src/util/prevent_default.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const preventDefault = (ev: Event) => ev.preventDefault();

package/src/util/routing.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface Route {
+    prefix: string;
+    path: string[];
+}