@matter-server/dashboard 0.2.2 → 0.2.3

package/dist/web/js/{node-binding-dialog-2yitVn0R.js → node-binding-dialog-DnO2DL_u.js}

@@ -1,6 +1,6 @@
-import { a as i, c, n, d as clientContext, e, i as i$1, A, b, t } from './matter-dashboard-app-5UjO1Ik8.js';
-import { p as preventDefault } from './prevent_default-BsT53c0u.js';
-import './outlined-text-field-BMLYwwlc.js';
+import { a as i, c, n, d as clientContext, e, i as i$1, A, b, t } from './matter-dashboard-app-DD29PeTW.js';
+import { p as preventDefault } from './prevent_default-C72e35wq.js';
+import './outlined-text-field-tv3ZtxuK.js';
 import './main.js';
 
 var _staticBlock$1;

package/dist/web/js/{outlined-text-field-BMLYwwlc.js → outlined-text-field-tv3ZtxuK.js}

@@ -1,5 +1,5 @@
-import { _ as __decorate, n as n$1, o as o$1, r as r$1, e, i as i$1, f as e$1, A, b, D, E as EASING, a as i$2, t, g as e$2, h as i$3, j as t$1, k as E, l as internals, m as mixinDelegatesAria, p as mixinElementInternals, u, q as i$4 } from './matter-dashboard-app-5UjO1Ik8.js';
-import { r as redispatchEvent } from './prevent_default-BsT53c0u.js';
+import { _ as __decorate, n as n$1, o as o$1, r as r$1, e, i as i$1, f as e$1, A, b, D, E as EASING, a as i$2, t, g as e$2, h as i$3, j as t$1, k as E, l as internals, m as mixinDelegatesAria, p as mixinElementInternals, u, q as i$4 } from './matter-dashboard-app-DD29PeTW.js';
+import { r as redispatchEvent } from './prevent_default-C72e35wq.js';
 
 /**
  * @license

package/dist/web/js/{prevent_default-BsT53c0u.js → prevent_default-C72e35wq.js}

@@ -1,4 +1,4 @@
-import { E as EASING, m as mixinDelegatesAria, i, _ as __decorate, n, e, r, b, f as e$1, A, a as i$1, t } from './matter-dashboard-app-5UjO1Ik8.js';
+import { E as EASING, m as mixinDelegatesAria, i, _ as __decorate, n, e, r, b, f as e$1, A, a as i$1, t } from './matter-dashboard-app-DD29PeTW.js';
 
 /**
  * @license

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@matter-server/dashboard",
-    "version": "0.2.2",
+    "version": "0.2.3",
     "description": "Dashboard for OHF Matter Server",
     "bugs": {
         "url": "https://github.com/matter-js/matterjs-server/issues"
@@ -23,7 +23,7 @@
     },
     "devDependencies": {
         "@babel/preset-env": "^7.28.5",
-        "@matter/main": "0.16.2",
+        "@matter/main": "0.16.4",
         "@rollup/plugin-babel": "^6.1.0",
         "@rollup/plugin-commonjs": "^29.0.0",
         "rollup-plugin-copy": "^3.5.0",
@@ -37,7 +37,7 @@
     "dependencies": {
         "@lit/context": "^1.1.6",
         "@material/web": "^2.4.1",
-        "@matter-server/ws-client": "0.2.2",
+        "@matter-server/ws-client": "0.2.3",
         "@mdi/js": "^7.4.47",
         "lit": "^3.3.1",
         "tslib": "^2.8.1"

package/src/pages/cluster-commands/base-cluster-commands.ts

@@ -0,0 +1,122 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { MatterClient, MatterNode } from "@matter-server/ws-client";
+import { LitElement, css } from "lit";
+import { property } from "lit/decorators.js";
+
+/**
+ * Base class for cluster-specific command panels.
+ * Provides shared properties, styling, and helper methods for sending commands.
+ */
+export abstract class BaseClusterCommands extends LitElement {
+    @property({ attribute: false })
+    public client!: MatterClient;
+
+    @property({ attribute: false })
+    public node!: MatterNode;
+
+    @property({ type: Number })
+    public endpoint!: number;
+
+    @property({ type: Number })
+    public cluster!: number;
+
+    /**
+     * Send a command to the device.
+     * @param command - The command name (PascalCase, e.g., "On", "Off", "MoveToLevel")
+     * @param payload - Optional command payload
+     */
+    protected async sendCommand(command: string, payload?: Record<string, unknown>): Promise<void> {
+        try {
+            await this.client.deviceCommand(this.node.node_id, this.endpoint, this.cluster, command, payload ?? {});
+        } catch (error) {
+            console.error(`Failed to send command ${command}:`, error);
+            // Could dispatch an event here for error handling in parent
+        }
+    }
+
+    static override styles = css`
+        :host {
+            display: block;
+        }
+
+        details.command-panel {
+            background-color: var(--md-sys-color-surface-container);
+            border-radius: 12px;
+            overflow: hidden;
+        }
+
+        details.command-panel summary {
+            padding: 16px;
+            font-weight: 500;
+            color: var(--md-sys-color-on-surface);
+            cursor: pointer;
+            user-select: none;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        details.command-panel summary:hover {
+            background-color: var(--md-sys-color-surface-container-high);
+        }
+
+        details.command-panel summary::before {
+            content: "▶";
+            font-size: 12px;
+            transition: transform 0.2s ease;
+        }
+
+        details.command-panel[open] summary::before {
+            transform: rotate(90deg);
+        }
+
+        details.command-panel summary::-webkit-details-marker {
+            display: none;
+        }
+
+        .command-content {
+            padding: 0 16px 16px 16px;
+        }
+
+        .command-row {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            flex-wrap: wrap;
+        }
+
+        .command-row label {
+            font-size: 14px;
+            color: var(--md-sys-color-on-surface-variant);
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .command-row input[type="number"] {
+            width: 70px;
+            padding: 8px;
+            border: 1px solid var(--md-sys-color-outline);
+            border-radius: 4px;
+            background: var(--md-sys-color-surface);
+            color: var(--md-sys-color-on-surface);
+        }
+
+        .command-row input[type="checkbox"] {
+            width: 16px;
+            height: 16px;
+            margin: 0;
+        }
+
+        md-filled-button,
+        md-outlined-button {
+            --md-filled-button-container-height: 36px;
+            --md-outlined-button-container-height: 36px;
+        }
+    `;
+}

package/src/pages/cluster-commands/clusters/level-control-commands.ts

@@ -0,0 +1,130 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import "@material/web/button/filled-button";
+import { html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { BaseClusterCommands } from "../base-cluster-commands.js";
+import { registerClusterCommands } from "../registry.js";
+
+const CLUSTER_ID = 8; // LevelControl cluster
+
+/**
+ * Command panel for LevelControl cluster (ID: 8).
+ * Provides MoveToLevel command with configurable parameters.
+ */
+@customElement("level-control-cluster-commands")
+class LevelControlClusterCommands extends BaseClusterCommands {
+    @state()
+    private _targetLevel = 128;
+
+    @state()
+    private _transitionTime = 0;
+
+    @state()
+    private _executeIfOff = false;
+
+    override render() {
+        return html`
+            <details class="command-panel">
+                <summary>Level Control Commands</summary>
+                <div class="command-content">
+                    <div class="command-row">
+                        <label for="targetLevel">Level:</label>
+                        <input
+                            id="targetLevel"
+                            type="number"
+                            min="1"
+                            max="254"
+                            .value=${String(this._targetLevel)}
+                            @input=${this._handleTargetLevelChange}
+                        />
+                        <label for="transitionTime">Transition (0.1s):</label>
+                        <input
+                            id="transitionTime"
+                            type="number"
+                            min="0"
+                            max="65535"
+                            .value=${String(this._transitionTime)}
+                            @input=${this._handleTransitionTimeChange}
+                        />
+                        <label for="executeIfOff">
+                            <input
+                                id="executeIfOff"
+                                type="checkbox"
+                                .checked=${this._executeIfOff}
+                                @change=${this._handleExecuteIfOffChange}
+                            />
+                            Execute if Off
+                        </label>
+                        <md-outlined-button @click=${this._handleMoveToLevel}>MoveToLevel</md-outlined-button>
+                        <md-outlined-button @click=${this._handleMoveToLevelWithOnOff}
+                            >MoveToLevelWithOnOff</md-outlined-button
+                        >
+                    </div>
+                </div>
+            </details>
+        `;
+    }
+
+    private _handleTargetLevelChange(e: Event) {
+        const input = e.target as HTMLInputElement;
+        let value = parseInt(input.value, 10);
+        if (isNaN(value)) value = 1;
+        if (value < 1) value = 1;
+        if (value > 254) value = 254;
+        this._targetLevel = value;
+    }
+
+    private _handleTransitionTimeChange(e: Event) {
+        const input = e.target as HTMLInputElement;
+        let value = parseInt(input.value, 10);
+        if (isNaN(value)) value = 0;
+        if (value < 0) value = 0;
+        if (value > 65535) value = 65535;
+        this._transitionTime = value;
+    }
+
+    private _handleExecuteIfOffChange(e: Event) {
+        const input = e.target as HTMLInputElement;
+        this._executeIfOff = input.checked;
+    }
+
+    private async _handleMoveToLevel() {
+        // ExecuteIfOff is bit 0 of the Options bitmap
+        const optionsMask = this._executeIfOff ? { executeIfOff: true } : {};
+        const optionsOverride = this._executeIfOff ? { executeIfOff: true } : {};
+
+        await this.sendCommand("MoveToLevel", {
+            level: this._targetLevel,
+            transitionTime: this._transitionTime,
+            optionsMask,
+            optionsOverride,
+        });
+    }
+
+    private async _handleMoveToLevelWithOnOff() {
+        // ExecuteIfOff is bit 0 of the Options bitmap
+        const optionsMask = this._executeIfOff ? { executeIfOff: true } : {};
+        const optionsOverride = this._executeIfOff ? { executeIfOff: true } : {};
+
+        await this.sendCommand("MoveToLevelWithOnOff", {
+            level: this._targetLevel,
+            transitionTime: this._transitionTime,
+            optionsMask,
+            optionsOverride,
+        });
+    }
+}
+
+// Register this component for cluster ID 8
+registerClusterCommands(CLUSTER_ID, "level-control-cluster-commands");
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "level-control-cluster-commands": LevelControlClusterCommands;
+    }
+}

package/src/pages/cluster-commands/clusters/on-off-commands.ts

@@ -0,0 +1,57 @@
+/**
+ * @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 { html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { BaseClusterCommands } from "../base-cluster-commands.js";
+import { registerClusterCommands } from "../registry.js";
+
+const CLUSTER_ID = 6; // OnOff cluster
+
+/**
+ * Command panel for OnOff cluster (ID: 6).
+ * Provides On, Off, and Toggle commands.
+ */
+@customElement("on-off-cluster-commands")
+class OnOffClusterCommands extends BaseClusterCommands {
+    override render() {
+        return html`
+            <details class="command-panel">
+                <summary>OnOff Commands</summary>
+                <div class="command-content">
+                    <div class="command-row">
+                        <md-outlined-button @click=${this._handleOn}>On</md-outlined-button>
+                        <md-outlined-button @click=${this._handleOff}>Off</md-outlined-button>
+                        <md-outlined-button @click=${this._handleToggle}>Toggle</md-outlined-button>
+                    </div>
+                </div>
+            </details>
+        `;
+    }
+
+    private async _handleOn() {
+        await this.sendCommand("On");
+    }
+
+    private async _handleOff() {
+        await this.sendCommand("Off");
+    }
+
+    private async _handleToggle() {
+        await this.sendCommand("Toggle");
+    }
+}
+
+// Register this component for cluster ID 6
+registerClusterCommands(CLUSTER_ID, "on-off-cluster-commands");
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "on-off-cluster-commands": OnOffClusterCommands;
+    }
+}

package/src/pages/cluster-commands/index.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Cluster-specific command panels.
+ * Import this file to register all cluster command components.
+ */
+
+// Registry exports
+export { getClusterCommandsTag, hasClusterCommands, registerClusterCommands } from "./registry.js";
+
+// Base class for creating new cluster commands
+export { BaseClusterCommands } from "./base-cluster-commands.js";
+
+// Cluster command components (auto-register on import)
+import "./clusters/level-control-commands.js";
+import "./clusters/on-off-commands.js";

package/src/pages/cluster-commands/registry.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Registry for cluster-specific command panel components.
+ * Components register themselves by cluster ID and are dynamically
+ * rendered in the cluster view when viewing that cluster.
+ */
+
+const clusterCommandRegistry = new Map<number, string>();
+
+/**
+ * Register a cluster command panel component.
+ * @param clusterId - The Matter cluster ID (e.g., 6 for OnOff, 8 for LevelControl)
+ * @param tagName - The custom element tag name (e.g., "on-off-cluster-commands")
+ */
+export function registerClusterCommands(clusterId: number, tagName: string): void {
+    clusterCommandRegistry.set(clusterId, tagName);
+}
+
+/**
+ * Get the registered component tag name for a cluster ID.
+ * @param clusterId - The Matter cluster ID
+ * @returns The custom element tag name, or undefined if not registered
+ */
+export function getClusterCommandsTag(clusterId: number): string | undefined {
+    return clusterCommandRegistry.get(clusterId);
+}
+
+/**
+ * Check if a cluster has a registered command panel.
+ * @param clusterId - The Matter cluster ID
+ * @returns true if a command panel is registered
+ */
+export function hasClusterCommands(clusterId: number): boolean {
+    return clusterCommandRegistry.has(clusterId);
+}

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

@@ -12,11 +12,14 @@ 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 { unsafeHTML } from "lit/directives/unsafe-html.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";
+// Cluster command components (auto-register on import)
+import { getClusterCommandsTag } from "./cluster-commands/index.js";
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -27,7 +30,7 @@ declare global {
 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}`))
+        .filter(key => key.startsWith(`${endpoint}/${cluster}/`))
         .map(key => {
             const attributeKey = Number(key.split("/")[2]);
             return { key: attributeKey, value: attributes[key] };
@@ -68,6 +71,9 @@ class MatterClusterView extends LitElement {
                 <node-details .node=${this.node} .client=${this.client}></node-details>
             </div>
 
+            <!-- Cluster commands section (if available for this cluster) -->
+            ${this._renderClusterCommands()}
+
             <!-- Cluster attributes listing -->
             <div class="container">
                 <md-list>
@@ -118,6 +124,40 @@ 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
+
+        const tagName = getClusterCommandsTag(this.cluster);
+        if (!tagName) return html``;
+
+        // Dynamically render the registered cluster command component
+        const componentHtml = `<${tagName}></${tagName}>`;
+        const element = unsafeHTML(componentHtml);
+
+        return html`
+            <div class="container">
+                <div id="cluster-commands-container">${element}</div>
+            </div>
+        `;
+    }
+
+    override updated(changedProperties: Map<string, unknown>) {
+        super.updated(changedProperties);
+
+        // After render, find and configure the cluster commands component
+        const container = this.shadowRoot?.getElementById("cluster-commands-container");
+        if (container) {
+            const commandsElement = container.firstElementChild as any;
+            if (commandsElement && this.node && this.client) {
+                commandsElement.client = this.client;
+                commandsElement.node = this.node;
+                commandsElement.endpoint = this.endpoint;
+                commandsElement.cluster = this.cluster;
+            }
+        }
+    }
+
     private _goBack() {
         history.back();
     }