@matter-server/dashboard 0.3.2 → 0.3.3

package/dist/esm/pages/matter-dashboard-app.js

@@ -23,8 +23,10 @@ import { clone } from "../util/clone_class.js";
 import "./components/header";
 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";
 let MatterDashboardApp = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -32,7 +34,11 @@ let MatterDashboardApp = class extends LitElement {
       prefix: "",
       path: []
     };
+    this._activeView = "nodes";
+    this._initialSelectedNodeId = null;
     this._state = "connecting";
+    /** Track whether nodes have been loaded at least once (to avoid redirecting before data arrives) */
+    this._nodesLoaded = false;
     this.provider = new ContextProvider(this, { context: clientContext, initialValue: this.client });
     this._reconnect = () => {
       this._state = "connecting";
@@ -42,15 +48,39 @@ let MatterDashboardApp = class extends LitElement {
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
     this._connect();
-    const updateRoute = () => {
-      const pathParts = location.hash.substring(1).split("/");
+    this._updateRoute = () => {
+      const hash = location.hash.substring(1);
+      const pathParts = hash.split("/");
+      this._initialSelectedNodeId = null;
+      const { hasThreadDevices, hasWifiDevices } = this._getDeviceCounts();
+      if (pathParts[0] === "thread") {
+        if (this._nodesLoaded && !hasThreadDevices) {
+          location.hash = "#nodes";
+          return;
+        }
+        this._activeView = "thread";
+        if (pathParts.length > 1 && pathParts[1]) {
+          this._initialSelectedNodeId = pathParts[1];
+        }
+      } else if (pathParts[0] === "wifi") {
+        if (this._nodesLoaded && !hasWifiDevices) {
+          location.hash = "#nodes";
+          return;
+        }
+        this._activeView = "wifi";
+        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();
   }
   _connect() {
     this.client.startListening().then(
@@ -65,6 +95,11 @@ let MatterDashboardApp = class extends LitElement {
   }
   _setupEventListeners() {
     this.client.addEventListener("nodes_changed", () => {
+      const wasFirstLoad = !this._nodesLoaded;
+      this._nodesLoaded = true;
+      if (wasFirstLoad && this._updateRoute) {
+        this._updateRoute();
+      }
       this.requestUpdate();
       this.provider.setValue(clone(this.client));
     });
@@ -75,6 +110,19 @@ let MatterDashboardApp = class extends LitElement {
       this._state = "disconnected";
     });
   }
+  /**
+   * Get device counts for Thread and WiFi networks.
+   */
+  _getDeviceCounts() {
+    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
+    };
+  }
   render() {
     if (this._state === "connecting") {
       return html`
@@ -141,10 +189,36 @@ let MatterDashboardApp = class extends LitElement {
                 ></matter-node-view>
             `;
     }
+    const { hasThreadDevices, hasWifiDevices } = this._getDeviceCounts();
+    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>`;
+    }
+    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>`;
+    }
     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>`;
   }
 };
@@ -208,6 +282,12 @@ MatterDashboardApp.styles = css`
 __decorateClass([
   state()
 ], MatterDashboardApp.prototype, "_route", 2);
+__decorateClass([
+  state()
+], MatterDashboardApp.prototype, "_activeView", 2);
+__decorateClass([
+  state()
+], MatterDashboardApp.prototype, "_initialSelectedNodeId", 2);
 __decorateClass([
   state()
 ], MatterDashboardApp.prototype, "_state", 2);

package/dist/esm/pages/matter-dashboard-app.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/pages/matter-dashboard-app.ts"],
-  "mappings": "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",
+  "mappings": "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",
   "names": []
 }

package/dist/esm/pages/matter-network-view.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { MatterClient, MatterNode } from "@matter-server/ws-client";
+import { LitElement } from "lit";
+import "../components/ha-svg-icon";
+import "./components/footer";
+import "./components/header";
+import type { ActiveView } from "./components/header.js";
+import "./network/device-panel";
+import "./network/network-details";
+import "./network/thread-graph";
+import "./network/wifi-graph";
+declare global {
+    interface HTMLElementTagNameMap {
+        "matter-network-view": MatterNetworkView;
+    }
+}
+declare class MatterNetworkView extends LitElement {
+    client: MatterClient;
+    nodes: Record<string, MatterNode>;
+    activeView?: ActiveView;
+    networkType: "thread" | "wifi";
+    /** Initial selected node ID from URL (string to avoid BigInt precision loss) */
+    initialSelectedNodeId: string | null;
+    hasThreadDevices?: boolean;
+    hasWifiDevices?: boolean;
+    private _selectedNodeId;
+    private _initialSelectionApplied;
+    private _selectRetryTimer?;
+    private _threadGraph?;
+    private _wifiGraph?;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    /**
+     * Tries to select a node in the graph, retrying until the graph is ready.
+     */
+    private _selectNodeWhenReady;
+    private _handleNodeSelected;
+    private _handleDetailsClose;
+    private _handleSelectNode;
+    private _handleFitToScreen;
+    private _renderThreadView;
+    private _renderWifiView;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export {};
+//# sourceMappingURL=matter-network-view.d.ts.map

package/dist/esm/pages/matter-network-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"matter-network-view.d.ts","sourceRoot":"","sources":["../../../src/pages/matter-network-view.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEzE,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,wBAAwB,CAAC;AAChC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,sBAAsB,CAAC;AAG9B,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,qBAAqB,EAAE,iBAAiB,CAAC;KAC5C;CACJ;AAED,cACM,iBAAkB,SAAQ,UAAU;IAC/B,MAAM,EAAG,YAAY,CAAC;IAGtB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAM;IAGvC,UAAU,CAAC,EAAE,UAAU,CAAC;IAGxB,WAAW,EAAE,QAAQ,GAAG,MAAM,CAAY;IAEjD,gFAAgF;IAEzE,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAG5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAG3B,cAAc,CAAC,EAAE,OAAO,CAAC;IAGhC,OAAO,CAAC,eAAe,CAAgC;IAEvD,OAAO,CAAC,wBAAwB,CAAS;IACzC,OAAO,CAAC,iBAAiB,CAAC,CAAgC;IAG1D,OAAO,CAAC,YAAY,CAAC,CAAc;IAGnC,OAAO,CAAC,UAAU,CAAC,CAAY;IAEtB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAQzD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAWtD,oBAAoB,IAAI,IAAI;IAOrC;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,eAAe;IAcd,MAAM;IAmCf,OAAgB,MAAM,0BAmIpB;CACL"}

package/dist/esm/pages/matter-network-view.js

@@ -0,0 +1,309 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { mdiFitToScreen } from "@mdi/js";
+import { css, html, LitElement } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import "../components/ha-svg-icon";
+import "./components/footer";
+import "./components/header";
+import "./network/device-panel";
+import "./network/network-details";
+import "./network/thread-graph";
+import "./network/wifi-graph";
+let MatterNetworkView = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.nodes = {};
+    this.networkType = "thread";
+    this.initialSelectedNodeId = null;
+    this._selectedNodeId = null;
+    this._initialSelectionApplied = false;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("initialSelectedNodeId") && this.initialSelectedNodeId !== null) {
+      this._selectedNodeId = this.initialSelectedNodeId;
+      this._initialSelectionApplied = false;
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (!this._initialSelectionApplied && this.initialSelectedNodeId !== null) {
+      this._initialSelectionApplied = true;
+      this._selectNodeWhenReady(this.initialSelectedNodeId);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._selectRetryTimer) {
+      clearTimeout(this._selectRetryTimer);
+    }
+  }
+  /**
+   * Tries to select a node in the graph, retrying until the graph is ready.
+   */
+  _selectNodeWhenReady(nodeId, retries = 10) {
+    const graph = this.networkType === "thread" ? this._threadGraph : this._wifiGraph;
+    if (graph?.isReady()) {
+      graph.selectNode(nodeId);
+    } else if (retries > 0) {
+      this._selectRetryTimer = setTimeout(() => this._selectNodeWhenReady(nodeId, retries - 1), 100);
+    }
+  }
+  _handleNodeSelected(event) {
+    this._selectedNodeId = event.detail.nodeId;
+  }
+  _handleDetailsClose() {
+    this._selectedNodeId = null;
+  }
+  _handleSelectNode(event) {
+    const nodeId = event.detail.nodeId;
+    this._selectedNodeId = nodeId;
+    if (this.networkType === "thread") {
+      this._threadGraph?.selectNode(nodeId);
+    } else {
+      this._wifiGraph?.selectNode(nodeId);
+    }
+  }
+  _handleFitToScreen() {
+    if (this.networkType === "thread") {
+      this._threadGraph?.fit();
+    } else {
+      this._wifiGraph?.fit();
+    }
+  }
+  _renderThreadView() {
+    return html`
+            <div class="graph-section">
+                <div class="graph-header">
+                    <h2>Thread Network Mesh</h2>
+                    <button class="fit-button" @click=${this._handleFitToScreen} title="Fit to screen">
+                        <ha-svg-icon .path=${mdiFitToScreen}></ha-svg-icon>
+                    </button>
+                </div>
+                <thread-graph .nodes=${this.nodes} @node-selected=${this._handleNodeSelected}></thread-graph>
+            </div>
+        `;
+  }
+  _renderWifiView() {
+    return html`
+            <div class="graph-section">
+                <div class="graph-header">
+                    <h2>WiFi Network</h2>
+                    <button class="fit-button" @click=${this._handleFitToScreen} title="Fit to screen">
+                        <ha-svg-icon .path=${mdiFitToScreen}></ha-svg-icon>
+                    </button>
+                </div>
+                <wifi-graph .nodes=${this.nodes} @node-selected=${this._handleNodeSelected}></wifi-graph>
+            </div>
+        `;
+  }
+  render() {
+    const showSidebar = this._selectedNodeId !== null;
+    const unknownDevices = this._threadGraph?.unknownDevicesMap ?? /* @__PURE__ */ new Map();
+    const wifiAccessPoints = this._wifiGraph?.wifiAccessPointsMap ?? /* @__PURE__ */ new Map();
+    return html`
+            <dashboard-header
+                title="Open Home Foundation Matter Server"
+                .client=${this.client}
+                .activeView=${this.activeView}
+                .hasThreadDevices=${this.hasThreadDevices}
+                .hasWifiDevices=${this.hasWifiDevices}
+            ></dashboard-header>
+
+            <div class="content">
+                <div class="main-area">
+                    ${this.networkType === "thread" ? this._renderThreadView() : this._renderWifiView()}
+                </div>
+
+                <aside class="details-sidebar ${showSidebar ? "visible" : ""}">
+                    <network-details
+                        .selectedNodeId=${this._selectedNodeId}
+                        .nodes=${this.nodes}
+                        .unknownDevices=${unknownDevices}
+                        .wifiAccessPoints=${wifiAccessPoints}
+                        @close=${this._handleDetailsClose}
+                        @select-node=${this._handleSelectNode}
+                    ></network-details>
+                </aside>
+            </div>
+
+            <dashboard-footer></dashboard-footer>
+        `;
+  }
+};
+MatterNetworkView.styles = css`
+        :host {
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            height: 100dvh; /* dynamic viewport height - fallback above for older browsers */
+            overflow: hidden;
+            background-color: var(--md-sys-color-background, #fafafa);
+        }
+
+        .content {
+            display: flex;
+            flex: 1 1 0;
+            padding: 8px 16px;
+            gap: 8px;
+            max-width: 1600px;
+            margin: 0 auto;
+            width: 100%;
+            box-sizing: border-box;
+            min-height: 0;
+            overflow: hidden;
+        }
+
+        .main-area {
+            flex: 1 1 0;
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+            min-height: 0;
+            overflow: hidden;
+        }
+
+        .graph-section {
+            flex: 1 1 0;
+            min-height: 0;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .graph-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 4px;
+            flex-shrink: 0;
+        }
+
+        .graph-header h2 {
+            margin: 0;
+            font-size: 1.1rem;
+            font-weight: 500;
+            color: var(--md-sys-color-on-background, #333);
+        }
+
+        .fit-button {
+            background: none;
+            border: 1px solid var(--md-sys-color-outline-variant, #ccc);
+            border-radius: 4px;
+            padding: 6px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background-color 0.2s;
+        }
+
+        .fit-button:hover {
+            background-color: var(--md-sys-color-surface-container-high, #e8e8e8);
+        }
+
+        .fit-button ha-svg-icon {
+            --icon-primary-color: var(--md-sys-color-on-surface-variant, #666);
+        }
+
+        .graph-section thread-graph,
+        .graph-section wifi-graph {
+            flex: 1 1 0;
+            min-height: 0;
+        }
+
+        .wifi-section {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            overflow-y: auto;
+        }
+
+        .wifi-section h2 {
+            margin: 0;
+            font-size: 1.25rem;
+            font-weight: 500;
+            color: var(--md-sys-color-on-background, #333);
+        }
+
+        .wifi-section device-panel {
+            flex-shrink: 0;
+        }
+
+        .details-sidebar {
+            width: 320px;
+            flex-shrink: 0;
+            display: none;
+            min-height: 0;
+            overflow-y: auto;
+        }
+
+        .details-sidebar.visible {
+            display: block;
+        }
+
+        @media (max-width: 1024px) {
+            .content {
+                flex-direction: column;
+            }
+
+            .details-sidebar {
+                width: 100%;
+                max-height: 300px;
+            }
+
+            .details-sidebar.visible {
+                display: block;
+            }
+        }
+
+        @media (max-width: 600px) {
+            .content {
+                padding: 8px;
+            }
+        }
+    `;
+__decorateClass([
+  property({ type: Object })
+], MatterNetworkView.prototype, "nodes", 2);
+__decorateClass([
+  property()
+], MatterNetworkView.prototype, "activeView", 2);
+__decorateClass([
+  property()
+], MatterNetworkView.prototype, "networkType", 2);
+__decorateClass([
+  property()
+], MatterNetworkView.prototype, "initialSelectedNodeId", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MatterNetworkView.prototype, "hasThreadDevices", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MatterNetworkView.prototype, "hasWifiDevices", 2);
+__decorateClass([
+  state()
+], MatterNetworkView.prototype, "_selectedNodeId", 2);
+__decorateClass([
+  query("thread-graph")
+], MatterNetworkView.prototype, "_threadGraph", 2);
+__decorateClass([
+  query("wifi-graph")
+], MatterNetworkView.prototype, "_wifiGraph", 2);
+MatterNetworkView = __decorateClass([
+  customElement("matter-network-view")
+], MatterNetworkView);
+//# sourceMappingURL=matter-network-view.js.map

package/dist/esm/pages/matter-network-view.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/pages/matter-network-view.ts"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/pages/matter-node-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"matter-node-view.d.ts","sourceRoot":"","sources":["../../../src/pages/matter-node-view.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,+BAA+B,CAAC;AACvC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,yBAAyB,CAAC;AACjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,2BAA2B,CAAC;AAGnC,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,cAAc,CAAC;KACtC;CACJ;AASD,cACM,cAAe,SAAQ,UAAU;IAC5B,MAAM,EAAG,YAAY,CAAC;IAGtB,IAAI,CAAC,EAAE,UAAU,CAAC;IAEhB,MAAM;IAqDf,OAAO,CAAC,OAAO;IAIf,OAAgB,MAAM,0BA2BpB;CACL"}
+{"version":3,"file":"matter-node-view.d.ts","sourceRoot":"","sources":["../../../src/pages/matter-node-view.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,+BAA+B,CAAC;AACvC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,yBAAyB,CAAC;AACjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,2BAA2B,CAAC;AAInC,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,cAAc,CAAC;KACtC;CACJ;AASD,cACM,cAAe,SAAQ,UAAU;IAC5B,MAAM,EAAG,YAAY,CAAC;IAGtB,IAAI,CAAC,EAAE,UAAU,CAAC;IAEhB,MAAM;IAuEf,OAAO,CAAC,OAAO;IAIf,OAAgB,MAAM,0BAkFpB;CACL"}

package/dist/esm/pages/matter-node-view.js

@@ -17,7 +17,7 @@ import "@material/web/divider/divider";
 import "@material/web/iconbutton/icon-button";
 import "@material/web/list/list";
 import "@material/web/list/list-item";
-import { mdiChevronRight } from "@mdi/js";
+import { mdiChevronRight, mdiGraphOutline } from "@mdi/js";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
@@ -25,6 +25,7 @@ import "../components/ha-svg-icon";
 import "./components/header";
 import "./components/node-details";
 import { getEndpointDeviceTypes } from "./matter-endpoint-view.js";
+import { getNetworkType } from "./network/network-utils.js";
 function getUniqueEndpoints(node) {
   return Array.from(new Set(Object.keys(node.attributes).map((key) => Number(key.split("/")[0])))).sort((a, b) => {
     return a - b;
@@ -38,6 +39,10 @@ let MatterNodeView = class extends LitElement {
                 <button @click=${this._goBack}>Back</button>
             `;
     }
+    const networkType = getNetworkType(this.node);
+    const showGraphButton = networkType === "thread" || networkType === "wifi" || networkType === "ethernet";
+    const graphViewType = networkType === "ethernet" ? "wifi" : networkType;
+    const graphUrl = showGraphButton ? `#${graphViewType}/${this.node.node_id}` : null;
     return html`
             <dashboard-header
                 .title=${"Node " + this.node.node_id}
@@ -47,6 +52,15 @@ let MatterNodeView = class extends LitElement {
 
             <!-- node details section -->
             <div class="container">
+                <div class="node-title-bar">
+                    <h2>Node ${this.node.node_id}</h2>
+                    ${showGraphButton ? html`
+                              <a href=${graphUrl} class="show-in-graph-button" title="Show in ${graphViewType} graph">
+                                  <ha-svg-icon .path=${mdiGraphOutline}></ha-svg-icon>
+                                  <span class="button-text">Show in graph</span>
+                              </a>
+                          ` : ""}
+                </div>
                 <node-details .node=${this.node} .client=${this.client}></node-details>
             </div>
 
@@ -112,6 +126,61 @@ MatterNodeView.styles = css`
             font-weight: bold;
             font-size: 0.8em;
         }
+
+        .node-title-bar {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            margin-bottom: 16px;
+        }
+
+        .node-title-bar h2 {
+            margin: 0;
+            font-size: 1.25rem;
+            font-weight: 500;
+            color: var(--md-sys-color-on-background, #333);
+        }
+
+        .show-in-graph-button {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 12px;
+            background-color: var(--md-sys-color-primary);
+            color: var(--md-sys-color-on-primary);
+            text-decoration: none;
+            border-radius: 4px;
+            font-size: 0.8rem;
+            font-weight: 500;
+            transition: opacity 0.2s;
+            white-space: nowrap;
+        }
+
+        .show-in-graph-button:hover {
+            opacity: 0.9;
+        }
+
+        .show-in-graph-button ha-svg-icon {
+            --icon-primary-color: var(--md-sys-color-on-primary);
+            width: 16px;
+            height: 16px;
+        }
+
+        @media (max-width: 768px) {
+            .show-in-graph-button {
+                display: none;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .show-in-graph-button .button-text {
+                display: none;
+            }
+
+            .show-in-graph-button {
+                padding: 6px;
+            }
+        }
     `;
 __decorateClass([
   property()

package/dist/esm/pages/matter-node-view.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/pages/matter-node-view.ts"],
-  "mappings": ";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,SAAS,uBAAuB;AAChC,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AACxC,SAAS,aAAa;AACtB,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,8BAA8B;AAQvC,SAAS,mBAAmB,MAAkB;AAE1C,SAAO,MAAM,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE,IAAI,SAAO,OAAO,IAAI,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,MAAM;AAC1G,WAAO,IAAI;AAAA,EACf,CAAC;AACL;AAGA,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAM3B,SAAS;AACd,QAAI,CAAC,KAAK,MAAM;AACZ,aAAO;AAAA;AAAA,iCAEc,KAAK,OAAO;AAAA;AAAA,IAErC;AAEA,WAAO;AAAA;AAAA,yBAEU,UAAU,KAAK,KAAK,OAAO;AAAA,0BAC1B,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAMC,KAAK,IAAI,YAAY,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAWhD;AAAA,MAAM,CAAC,KAAK,MAAM,WAAW,MAAM;AAAA,MAAG,MACpC,mBAAmB,KAAK,IAAK,EAAE,IAAI,gBAAc;AAC7C,eAAO;AAAA,iEAC8B,SAAS,KAAK,KAAM,OAAO,IAAI,UAAU,EAAE;AAAA,oEACxC,UAAU;AAAA;AAAA;AAAA,0CAGpC,uBAAuB,KAAK,MAAO,UAAU,EAC1C,IAAI,gBAAc;AACf,iBAAO,WAAW;AAAA,QACtB,CAAC,EACA,KAAK,KAAK,CAAC;AAAA;AAAA,oEAEY,eAAe;AAAA;AAAA;AAAA,MAG3D,CAAC;AAAA,IACL,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMjB;AAAA,EAEQ,UAAU;AACd,YAAQ,KAAK;AAAA,EACjB;AA8BJ;AA3FM,eA+Dc,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA3DlB;AAAA,EADN,SAAS;AAAA,GAHR,eAIK;AAJL,iBAAN;AAAA,EADC,cAAc,kBAAkB;AAAA,GAC3B;",
+  "mappings": ";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AACxC,SAAS,aAAa;AACtB,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAQ/B,SAAS,mBAAmB,MAAkB;AAE1C,SAAO,MAAM,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE,IAAI,SAAO,OAAO,IAAI,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,MAAM;AAC1G,WAAO,IAAI;AAAA,EACf,CAAC;AACL;AAGA,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAM3B,SAAS;AACd,QAAI,CAAC,KAAK,MAAM;AACZ,aAAO;AAAA;AAAA,iCAEc,KAAK,OAAO;AAAA;AAAA,IAErC;AAEA,UAAM,cAAc,eAAe,KAAK,IAAI;AAE5C,UAAM,kBAAkB,gBAAgB,YAAY,gBAAgB,UAAU,gBAAgB;AAE9F,UAAM,gBAAgB,gBAAgB,aAAa,SAAS;AAC5D,UAAM,WAAW,kBAAkB,IAAI,aAAa,IAAI,KAAK,KAAK,OAAO,KAAK;AAE9E,WAAO;AAAA;AAAA,yBAEU,UAAU,KAAK,KAAK,OAAO;AAAA,0BAC1B,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAON,KAAK,KAAK,OAAO;AAAA,sBAC1B,kBACI;AAAA,wCACc,QAAQ,gDAAgD,aAAa;AAAA,uDACtD,eAAe;AAAA;AAAA;AAAA,8BAI5C,EAAE;AAAA;AAAA,sCAEU,KAAK,IAAI,YAAY,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAWhD;AAAA,MAAM,CAAC,KAAK,MAAM,WAAW,MAAM;AAAA,MAAG,MACpC,mBAAmB,KAAK,IAAK,EAAE,IAAI,gBAAc;AAC7C,eAAO;AAAA,iEAC8B,SAAS,KAAK,KAAM,OAAO,IAAI,UAAU,EAAE;AAAA,oEACxC,UAAU;AAAA;AAAA;AAAA,0CAGpC,uBAAuB,KAAK,MAAO,UAAU,EAC1C,IAAI,gBAAc;AACf,iBAAO,WAAW;AAAA,QACtB,CAAC,EACA,KAAK,KAAK,CAAC;AAAA;AAAA,oEAEY,eAAe;AAAA;AAAA;AAAA,MAG3D,CAAC;AAAA,IACL,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMjB;AAAA,EAEQ,UAAU;AACd,YAAQ,KAAK;AAAA,EACjB;AAqFJ;AApKM,eAiFc,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA7ElB;AAAA,EADN,SAAS;AAAA,GAHR,eAIK;AAJL,iBAAN;AAAA,EADC,cAAc,kBAAkB;AAAA,GAC3B;",
   "names": []
 }