@matter-server/dashboard 0.3.2 → 0.3.3

package/dist/web/js/{node-binding-dialog-D52FCBFP.js → node-binding-dialog-DMiHNDLA.js}

@@ -1,8 +1,6 @@
-import { j as i, s as c, v as clientContext, n, a as e, i as i$1, A, h as b, q as handleAsync, t } from './matter-dashboard-app-B7GUghkC.js';
-import { p as preventDefault } from './prevent_default-BPgSQsuY.js';
-import './outlined-text-field-D1DyKQY-.js';
+import { k as i, G as c, H as clientContext, n, a as e, i as i$1, A, j as b, F as handleAsync, t } from './matter-dashboard-app-BuCe_Jxf.js';
+import { p as preventDefault } from './prevent_default-D4FX_PIh.js';
 import './main.js';
-import './validator-C735j770.js';
 
 var _staticBlock$1;
 /**

package/dist/web/js/{prevent_default-BPgSQsuY.js → prevent_default-D4FX_PIh.js}

@@ -1,44 +1,4 @@
-import { E as EASING, m as mixinDelegatesAria, i, _ as __decorate, n, a as e, r, h as b, A, f as e$1, j as i$1, t } from './matter-dashboard-app-B7GUghkC.js';
-
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * Re-dispatches an event from the provided element.
- *
- * This function is useful for forwarding non-composed events, such as `change`
- * events.
- *
- * @example
- * class MyInput extends LitElement {
- *   render() {
- *     return html`<input @change=${this.redispatchEvent}>`;
- *   }
- *
- *   protected redispatchEvent(event: Event) {
- *     redispatchEvent(this, event);
- *   }
- * }
- *
- * @param element The element to dispatch the event from.
- * @param event The event to re-dispatch.
- * @return Whether or not the event was dispatched (if cancelable).
- */
-function redispatchEvent(element, event) {
-  // For bubbling events in SSR light DOM (or composed), stop their propagation
-  // and dispatch the copy.
-  if (event.bubbles && (!element.shadowRoot || event.composed)) {
-    event.stopPropagation();
-  }
-  const copy = Reflect.construct(event.constructor, [event.type, event]);
-  const dispatched = element.dispatchEvent(copy);
-  if (!dispatched) {
-    event.preventDefault();
-  }
-  return dispatched;
-}
+import { E as EASING, m as mixinDelegatesAria, i, _ as __decorate, n, a as e, r, j as b, A, f as e$1, w as redispatchEvent, k as i$1, t } from './matter-dashboard-app-BuCe_Jxf.js';
 
 /**
  * @license
@@ -811,4 +771,4 @@ MdDialog = __decorate([t('md-dialog')], MdDialog);
  */
 const preventDefault = ev => ev.preventDefault();
 
-export { preventDefault as p, redispatchEvent as r };
+export { preventDefault as p };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@matter-server/dashboard",
-    "version": "0.3.2",
+    "version": "0.3.3",
     "description": "Dashboard for OHF Matter Server",
     "bugs": {
         "url": "https://github.com/matter-js/matterjs-server/issues"
@@ -37,11 +37,12 @@
     "dependencies": {
         "@lit/context": "^1.1.6",
         "@material/web": "^2.4.1",
-        "@matter-server/ws-client": "0.3.2",
-        "@matter-server/custom-clusters": "0.3.2",
+        "@matter-server/ws-client": "0.3.3",
+        "@matter-server/custom-clusters": "0.3.3",
         "@mdi/js": "^7.4.47",
         "lit": "^3.3.2",
-        "tslib": "^2.8.1"
+        "tslib": "^2.8.1",
+        "vis-network": "^9.1.9"
     },
     "files": [
         "dist/**/*",

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

@@ -5,7 +5,7 @@
  */
 
 import { MatterClient, MatterNode } from "@matter-server/ws-client";
-import { LitElement, css } from "lit";
+import { LitElement, css, type CSSResultGroup } from "lit";
 import { property } from "lit/decorators.js";
 
 /**
@@ -39,7 +39,7 @@ export abstract class BaseClusterCommands extends LitElement {
         }
     }
 
-    static override styles = css`
+    static override styles: CSSResultGroup = css`
         :host {
             display: block;
         }

package/src/pages/cluster-commands/clusters/basic-information-commands.ts

@@ -0,0 +1,171 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import "@material/web/button/filled-button";
+import "@material/web/textfield/outlined-text-field";
+import { css, html, nothing, type CSSResultGroup } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { showAlertDialog } from "../../../components/dialog-box/show-dialog-box.js";
+import { handleAsync } from "../../../util/async-handler.js";
+import { BaseClusterCommands } from "../base-cluster-commands.js";
+import { registerClusterCommands } from "../registry.js";
+
+const CLUSTER_ID = 0x28; // BasicInformation cluster (40 decimal)
+const NODE_LABEL_ATTRIBUTE_ID = 5;
+const MAX_NODE_LABEL_LENGTH = 32;
+
+/**
+ * Command panel for BasicInformation cluster (ID: 0x28 / 40).
+ * Provides ability to edit the NodeLabel attribute.
+ */
+@customElement("basic-information-cluster-commands")
+export class BasicInformationClusterCommands extends BaseClusterCommands {
+    @state()
+    private _nodeLabel: string = "";
+
+    @state()
+    private _saving: boolean = false;
+
+    override updated(changedProperties: Map<string, unknown>) {
+        super.updated(changedProperties);
+        // Load node label when node property is first set
+        if (changedProperties.has("node") && this.node) {
+            this._loadCurrentNodeLabel();
+        }
+    }
+
+    /**
+     * Load the current NodeLabel from the node's cached attributes.
+     */
+    private _loadCurrentNodeLabel() {
+        if (!this.node) {
+            return;
+        }
+
+        // First check the direct nodeLabel property on the node
+        if (this.node.nodeLabel) {
+            this._nodeLabel = this.node.nodeLabel;
+            return;
+        }
+
+        // Fallback to attribute path: endpoint/cluster/attribute = 0/40/5
+        // BasicInformation cluster is always on endpoint 0 per Matter specification
+        const attributePath = `0/${CLUSTER_ID}/${NODE_LABEL_ATTRIBUTE_ID}`;
+        const currentValue = this.node.attributes[attributePath];
+        if (typeof currentValue === "string") {
+            this._nodeLabel = currentValue;
+        } else {
+            this._nodeLabel = "";
+        }
+    }
+
+    /**
+     * Check if the node is available (not offline).
+     */
+    private get _isNodeAvailable(): boolean {
+        return this.node.available;
+    }
+
+    override render() {
+        return html`
+            <details class="command-panel">
+                <summary>Node Label</summary>
+                <div class="command-content">
+                    ${!this._isNodeAvailable
+                        ? html`<div class="offline-warning">Node is offline - cannot edit label</div>`
+                        : nothing}
+                    <div class="command-row">
+                        <md-outlined-text-field
+                            label="Node Label"
+                            .value=${this._nodeLabel}
+                            @input=${this._handleInput}
+                            maxlength=${MAX_NODE_LABEL_LENGTH}
+                            ?disabled=${!this._isNodeAvailable || this._saving}
+                            supporting-text="Max ${MAX_NODE_LABEL_LENGTH} characters"
+                        ></md-outlined-text-field>
+                        <md-filled-button
+                            @click=${handleAsync(() => this._handleSave())}
+                            ?disabled=${!this._isNodeAvailable || this._saving}
+                        >
+                            ${this._saving ? "Saving..." : "Save"}
+                        </md-filled-button>
+                    </div>
+                </div>
+            </details>
+        `;
+    }
+
+    private _handleInput(e: Event) {
+        const input = e.target as HTMLInputElement;
+        this._nodeLabel = input.value;
+    }
+
+    private async _handleSave() {
+        if (!this._isNodeAvailable) {
+            showAlertDialog({
+                title: "Cannot Save",
+                text: "Node is offline. Please wait until the node is available.",
+            });
+            return;
+        }
+
+        this._saving = true;
+
+        try {
+            // BasicInformation cluster is always on endpoint 0 per Matter specification
+            const attributePath = `0/${CLUSTER_ID}/${NODE_LABEL_ATTRIBUTE_ID}`;
+            await this.client.writeAttribute(this.node.node_id, attributePath, this._nodeLabel);
+
+            showAlertDialog({
+                title: "Success",
+                text: `Node label set to "${this._nodeLabel}"`,
+            });
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            showAlertDialog({
+                title: "Failed to set node label",
+                text: errorMessage,
+            });
+        } finally {
+            this._saving = false;
+        }
+    }
+
+    static override styles: CSSResultGroup = [
+        BaseClusterCommands.styles,
+        css`
+            .command-row {
+                align-items: flex-start;
+            }
+
+            md-outlined-text-field {
+                width: 36ch; /* 32 chars + some padding for field chrome */
+            }
+
+            md-filled-button {
+                margin-top: 8px; /* Align with text field input area, accounting for label */
+            }
+
+            .offline-warning {
+                color: var(--danger-color, #d32f2f);
+                font-size: 14px;
+                margin-bottom: 12px;
+                padding: 8px 12px;
+                background-color: var(--md-sys-color-error-container, #fdecea);
+                border-radius: 4px;
+            }
+        `,
+    ];
+}
+
+// Register this component for cluster ID 0x28 (40 decimal)
+registerClusterCommands(CLUSTER_ID, "basic-information-cluster-commands");
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "basic-information-cluster-commands": BasicInformationClusterCommands;
+    }
+}

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

@@ -16,5 +16,6 @@ export { getClusterCommandsTag, hasClusterCommands, registerClusterCommands } fr
 export { BaseClusterCommands } from "./base-cluster-commands.js";
 
 // Cluster command components (auto-register on import)
+import "./clusters/basic-information-commands.js";
 import "./clusters/level-control-commands.js";
 import "./clusters/on-off-commands.js";

package/src/pages/components/footer.ts

@@ -22,14 +22,11 @@ export class DashboardFooter extends LitElement {
 
     static override styles = css`
         .footer {
-            padding: 16px;
+            padding: 4px 16px;
             text-align: center;
-            font-size: 0.8em;
-            color: var(--md-sys-color-on-surface);
-            display: flex;
-            flex-direction: column;
-            position: relative;
-            clear: both;
+            font-size: 0.75em;
+            color: var(--md-sys-color-on-surface-variant);
+            flex-shrink: 0;
         }
 
         .footer a {

package/src/pages/components/header.ts

@@ -23,10 +23,15 @@ interface HeaderAction {
     action: void;
 }
 
+export type ActiveView = "nodes" | "thread" | "wifi";
+
 @customElement("dashboard-header")
 export class DashboardHeader extends LitElement {
     @property() public backButton?: string;
     @property() public actions?: HeaderAction[];
+    @property() public activeView?: ActiveView;
+    @property({ type: Boolean }) public hasThreadDevices?: boolean;
+    @property({ type: Boolean }) public hasWifiDevices?: boolean;
 
     public client?: MatterClient;
 
@@ -80,6 +85,48 @@ export class DashboardHeader extends LitElement {
         }
     }
 
+    private _renderNavTabs() {
+        if (this.activeView === undefined) {
+            return nothing;
+        }
+
+        // Only show tabs if at least one network type has devices
+        const showThreadTab = this.hasThreadDevices === true;
+        const showWifiTab = this.hasWifiDevices === true;
+
+        // Don't show nav tabs if no network devices exist
+        if (!showThreadTab && !showWifiTab) {
+            return nothing;
+        }
+
+        return html`
+            <nav class="nav-tabs" aria-label="View navigation">
+                <a
+                    href="#nodes"
+                    class="nav-tab ${this.activeView === "nodes" ? "active" : ""}"
+                    aria-current=${this.activeView === "nodes" ? "page" : nothing}
+                    >Nodes</a
+                >
+                ${showThreadTab
+                    ? html`<a
+                          href="#thread"
+                          class="nav-tab ${this.activeView === "thread" ? "active" : ""}"
+                          aria-current=${this.activeView === "thread" ? "page" : nothing}
+                          >Thread</a
+                      >`
+                    : nothing}
+                ${showWifiTab
+                    ? html`<a
+                          href="#wifi"
+                          class="nav-tab ${this.activeView === "wifi" ? "active" : ""}"
+                          aria-current=${this.activeView === "wifi" ? "page" : nothing}
+                          >WiFi</a
+                      >`
+                    : nothing}
+            </nav>
+        `;
+    }
+
     protected override render() {
         return html`
             <div class="header">
@@ -93,6 +140,7 @@ export class DashboardHeader extends LitElement {
                     : ""}
 
                 <div class="title">${this.title ?? ""}</div>
+                ${this._renderNavTabs()}
                 <div class="actions">
                     ${this.actions?.map(action => {
                         return html`
@@ -156,5 +204,38 @@ export class DashboardHeader extends LitElement {
             max-width: 100%;
             align-items: center;
         }
+
+        .nav-tabs {
+            display: flex;
+            margin-left: 24px;
+            gap: 4px;
+        }
+
+        .nav-tab {
+            padding: 8px 16px;
+            color: var(--md-sys-color-on-primary);
+            text-decoration: none;
+            font-size: 0.875rem;
+            font-weight: 500;
+            border-radius: 4px 4px 0 0;
+            opacity: 0.7;
+            transition: opacity 0.2s;
+        }
+
+        .nav-tab:hover {
+            opacity: 0.9;
+        }
+
+        .nav-tab.active {
+            opacity: 1;
+            background-color: rgba(255, 255, 255, 0.15);
+            border-bottom: 2px solid var(--md-sys-color-on-primary);
+        }
+
+        @media (max-width: 768px) {
+            .nav-tabs {
+                display: none;
+            }
+        }
     `;
 }

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

@@ -199,8 +199,8 @@ export class NodeDetails extends LitElement {
     private async _binding() {
         try {
             showNodeBindingDialog(this.client, this.node!, this.endpoint);
-        } catch (err: any) {
-            console.log(err);
+        } catch (err: unknown) {
+            console.error("Binding error:", err);
         }
     }
 

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

@@ -71,7 +71,6 @@ export class ServerDetails extends LitElement {
     }
 
     private _commissionNode() {
-        console.log(this.client);
         showCommissionNodeDialog(this.client!);
     }
 

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

@@ -14,10 +14,13 @@ import "../components/ha-svg-icon";
 import { clone } from "../util/clone_class.js";
 import type { Route } from "../util/routing.js";
 import "./components/header";
+import type { ActiveView } from "./components/header.js";
 import "./matter-cluster-view";
 import "./matter-endpoint-view";
+import "./matter-network-view";
 import "./matter-node-view";
 import "./matter-server-view";
+import { categorizeDevices } from "./network/network-utils.js";
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -32,27 +35,73 @@ class MatterDashboardApp extends LitElement {
         path: [],
     };
 
+    @state() private _activeView: ActiveView = "nodes";
+
+    /** Initial selected node ID from URL (string to avoid BigInt precision loss) */
+    @state() private _initialSelectedNodeId: string | null = null;
+
     public client!: MatterClient;
 
     @state()
     private _state: "connecting" | "connected" | "error" | "disconnected" = "connecting";
 
+    /** Track whether nodes have been loaded at least once (to avoid redirecting before data arrives) */
+    private _nodesLoaded = false;
+
     private provider = new ContextProvider(this, { context: clientContext, initialValue: this.client });
 
+    /** Reference to updateRoute function so it can be called from event listeners */
+    private _updateRoute?: () => void;
+
     protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
         super.firstUpdated(_changedProperties);
         this._connect();
 
         // Handle history changes
-        const updateRoute = () => {
-            const pathParts = location.hash.substring(1).split("/");
+        this._updateRoute = () => {
+            const hash = location.hash.substring(1);
+            const pathParts = hash.split("/");
+
+            // Reset initial selected node
+            this._initialSelectedNodeId = null;
+
+            // Get device counts for conditional navigation
+            const { hasThreadDevices, hasWifiDevices } = this._getDeviceCounts();
+
+            // Determine active view from hash
+            if (pathParts[0] === "thread") {
+                // Only redirect if nodes have been loaded (avoid redirecting on initial load before data arrives)
+                if (this._nodesLoaded && !hasThreadDevices) {
+                    location.hash = "#nodes";
+                    return;
+                }
+                this._activeView = "thread";
+                // Check for node ID: #thread/123 - keep as string to avoid BigInt precision loss
+                if (pathParts.length > 1 && pathParts[1]) {
+                    this._initialSelectedNodeId = pathParts[1];
+                }
+            } else if (pathParts[0] === "wifi") {
+                // Only redirect if nodes have been loaded (avoid redirecting on initial load before data arrives)
+                if (this._nodesLoaded && !hasWifiDevices) {
+                    location.hash = "#nodes";
+                    return;
+                }
+                this._activeView = "wifi";
+                // Check for node ID: #wifi/123 - keep as string to avoid BigInt precision loss
+                if (pathParts.length > 1 && pathParts[1]) {
+                    this._initialSelectedNodeId = pathParts[1];
+                }
+            } else if (hash === "nodes" || hash === "" || pathParts[0] === "node") {
+                this._activeView = "nodes";
+            }
+
             this._route = {
                 prefix: pathParts.length == 1 ? "" : pathParts[0],
                 path: pathParts.length == 1 ? pathParts : pathParts.slice(1),
             };
         };
-        window.addEventListener("hashchange", updateRoute);
-        updateRoute();
+        window.addEventListener("hashchange", this._updateRoute);
+        this._updateRoute();
     }
 
     private _connect() {
@@ -69,6 +118,13 @@ class MatterDashboardApp extends LitElement {
 
     private _setupEventListeners() {
         this.client.addEventListener("nodes_changed", () => {
+            // Mark nodes as loaded and re-evaluate route (for redirect logic)
+            const wasFirstLoad = !this._nodesLoaded;
+            this._nodesLoaded = true;
+            if (wasFirstLoad && this._updateRoute) {
+                // Re-run route check now that nodes are available
+                this._updateRoute();
+            }
             this.requestUpdate();
             this.provider.setValue(clone(this.client));
         });
@@ -85,6 +141,20 @@ class MatterDashboardApp extends LitElement {
         this._connect();
     };
 
+    /**
+     * Get device counts for Thread and WiFi networks.
+     */
+    private _getDeviceCounts(): { hasThreadDevices: boolean; hasWifiDevices: boolean } {
+        if (!this.client?.nodes) {
+            return { hasThreadDevices: false, hasWifiDevices: false };
+        }
+        const categorized = categorizeDevices(this.client.nodes);
+        return {
+            hasThreadDevices: categorized.thread.length > 0,
+            hasWifiDevices: categorized.wifi.length > 0 || categorized.ethernet.length > 0,
+        };
+    }
+
     override render() {
         if (this._state === "connecting") {
             return html`
@@ -154,11 +224,41 @@ class MatterDashboardApp extends LitElement {
                 ></matter-node-view>
             `;
         }
-        // root level: server overview
+        // Get device counts for conditional navigation
+        const { hasThreadDevices, hasWifiDevices } = this._getDeviceCounts();
+
+        // Check for Thread view (#thread or #thread/123)
+        if (this._route.prefix === "thread" || this._route.path[0] === "thread") {
+            return html`<matter-network-view
+                .client=${this.client}
+                .nodes=${this.client.nodes}
+                .activeView=${this._activeView}
+                .initialSelectedNodeId=${this._initialSelectedNodeId}
+                .hasThreadDevices=${hasThreadDevices}
+                .hasWifiDevices=${hasWifiDevices}
+                networkType="thread"
+            ></matter-network-view>`;
+        }
+        // Check for WiFi view (#wifi or #wifi/123)
+        if (this._route.prefix === "wifi" || this._route.path[0] === "wifi") {
+            return html`<matter-network-view
+                .client=${this.client}
+                .nodes=${this.client.nodes}
+                .activeView=${this._activeView}
+                .initialSelectedNodeId=${this._initialSelectedNodeId}
+                .hasThreadDevices=${hasThreadDevices}
+                .hasWifiDevices=${hasWifiDevices}
+                networkType="wifi"
+            ></matter-network-view>`;
+        }
+        // root level: server overview (nodes view)
         return html`<matter-server-view
             .client=${this.client}
             .nodes=${this.client.nodes}
             .route=${this._route}
+            .activeView=${this._activeView}
+            .hasThreadDevices=${hasThreadDevices}
+            .hasWifiDevices=${hasWifiDevices}
         ></matter-server-view>`;
     }