@matter-server/dashboard 0.3.2 → 0.3.4

package/src/pages/network/thread-graph.ts

@@ -0,0 +1,170 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { BaseNetworkGraph } from "./base-network-graph.js";
+import { createNodeIconDataUrl, createUnknownDeviceIconDataUrl } from "./device-icons.js";
+import type { NetworkGraphEdge, NetworkGraphNode, UnknownThreadDevice } from "./network-types.js";
+import {
+    buildExtAddrMap,
+    buildThreadConnections,
+    findUnknownDevices,
+    getDeviceName,
+    getNetworkType,
+    getThreadRole,
+} from "./network-utils.js";
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "thread-graph": ThreadGraph;
+    }
+}
+
+@customElement("thread-graph")
+export class ThreadGraph extends BaseNetworkGraph {
+    /** Cache of unknown devices for the current render */
+    private _unknownDevices: UnknownThreadDevice[] = [];
+
+    /** Cached map of unknown devices (rebuilt in _updateGraph) */
+    private _unknownDevicesMapCache: Map<
+        string,
+        { extAddressHex: string; isRouter: boolean; seenBy: string[]; bestRssi: number | null }
+    > = new Map();
+
+    /** Get unknown devices as a map for use by details panel */
+    public get unknownDevicesMap(): Map<
+        string,
+        { extAddressHex: string; isRouter: boolean; seenBy: string[]; bestRssi: number | null }
+    > {
+        return this._unknownDevicesMapCache;
+    }
+
+    protected override _updateGraph(): void {
+        if (!this._nodesDataSet || !this._edgesDataSet) return;
+
+        // Clear stored edge colors since we're rebuilding edges
+        this._clearOriginalEdgeColors();
+
+        // Filter to Thread devices only
+        const threadNodes = Object.values(this.nodes).filter(node => getNetworkType(node) === "thread");
+
+        if (threadNodes.length === 0) {
+            this._nodesDataSet.clear();
+            this._edgesDataSet.clear();
+            this._unknownDevices = [];
+            this._unknownDevicesMapCache.clear();
+            return;
+        }
+
+        // Build extended address map for connection matching
+        const extAddrMap = buildExtAddrMap(this.nodes);
+
+        // Find unknown devices (seen in neighbor tables but not commissioned)
+        this._unknownDevices = findUnknownDevices(this.nodes, extAddrMap);
+
+        // Rebuild the cached map
+        this._unknownDevicesMapCache.clear();
+        for (const device of this._unknownDevices) {
+            this._unknownDevicesMapCache.set(device.id, {
+                extAddressHex: device.extAddressHex,
+                isRouter: device.isRouter,
+                seenBy: device.seenBy,
+                bestRssi: device.bestRssi,
+            });
+        }
+
+        // Build Thread connections (including to unknown devices)
+        const connections = buildThreadConnections(this.nodes, extAddrMap, this._unknownDevices);
+
+        // Create node data for vis.js - known Thread devices
+        // Use string IDs to avoid precision loss for large bigint node IDs
+        const graphNodes: NetworkGraphNode[] = threadNodes.map(node => {
+            const nodeId = String(node.node_id);
+            const threadRole = getThreadRole(node);
+            const isSelected = nodeId === String(this._selectedNodeId);
+            const isOffline = node.available === false;
+
+            return {
+                id: nodeId,
+                label: getDeviceName(node),
+                image: createNodeIconDataUrl(node, threadRole, isSelected, isOffline),
+                shape: "image",
+                networkType: "thread",
+                threadRole,
+                offline: isOffline,
+            };
+        });
+
+        // Add unknown devices with question mark icons
+        for (const unknown of this._unknownDevices) {
+            const isSelected = unknown.id === this._selectedNodeId;
+            graphNodes.push({
+                id: unknown.id,
+                label: `Unknown (${unknown.extAddressHex.slice(-8)})`,
+                image: createUnknownDeviceIconDataUrl(unknown.isRouter, isSelected),
+                shape: "image",
+                networkType: "thread",
+                isUnknown: true,
+            });
+        }
+
+        // Create edge data for vis.js
+        const graphEdges: NetworkGraphEdge[] = connections.map((conn, index) => {
+            const isToUnknown = typeof conn.toNodeId === "string" && conn.toNodeId.startsWith("unknown_");
+
+            // Check if either endpoint is offline - connection data may be stale
+            const fromNode = this.nodes[String(conn.fromNodeId)];
+            const toNode = this.nodes[String(conn.toNodeId)];
+            const hasOfflineEndpoint = fromNode?.available === false || toNode?.available === false;
+
+            return {
+                id: `edge_${index}`,
+                from: conn.fromNodeId,
+                to: conn.toNodeId,
+                color: {
+                    color: conn.signalColor,
+                    highlight: conn.signalColor,
+                },
+                width: 2,
+                title: conn.rssi !== null ? `RSSI: ${conn.rssi} dBm, LQI: ${conn.lqi}` : `LQI: ${conn.lqi}`,
+                dashes: isToUnknown || hasOfflineEndpoint, // Dashed lines to unknown or offline devices
+            };
+        });
+
+        // Update datasets
+        const existingNodeIds = this._nodesDataSet.getIds();
+        const newNodeIds = new Set(graphNodes.map(n => n.id));
+
+        // Remove nodes that no longer exist
+        const nodesToRemove = existingNodeIds.filter((id: string | number) => !newNodeIds.has(id));
+        if (nodesToRemove.length > 0) {
+            this._nodesDataSet.remove(nodesToRemove);
+        }
+
+        // Update or add nodes
+        this._nodesDataSet.update(graphNodes);
+
+        // Replace all edges (simpler than diff for edge data)
+        this._edgesDataSet.clear();
+        this._edgesDataSet.add(graphEdges);
+    }
+
+    override render() {
+        const threadNodes = Object.values(this.nodes).filter(node => getNetworkType(node) === "thread");
+
+        if (threadNodes.length === 0) {
+            return html`
+                <div class="empty-state">
+                    <p>No Thread devices found</p>
+                    <p class="hint">Thread devices will appear here once commissioned</p>
+                </div>
+            `;
+        }
+
+        return html`<div class="graph-container"></div>`;
+    }
+}

package/src/pages/network/update-connections-dialog.ts

@@ -0,0 +1,327 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import "@material/web/button/filled-button";
+import "@material/web/button/text-button";
+import "@material/web/checkbox/checkbox";
+import "@material/web/dialog/dialog";
+import type { MatterClient, MatterNode } from "@matter-server/ws-client";
+import { mdiLoading } from "@mdi/js";
+import { LitElement, css, html, nothing, svg } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { getNetworkType } from "./network-utils.js";
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "update-connections-dialog": UpdateConnectionsDialog;
+    }
+}
+
+/** Thread network attributes to read */
+const THREAD_ATTRIBUTE_PATHS = ["0/53/7", "0/53/8", "0/51/0"]; // NeighborTable, RouteTable, NetworkInterfaces
+
+/** WiFi network attributes to read */
+const WIFI_ATTRIBUTE_PATHS = ["0/54/0", "0/54/3", "0/54/4"]; // BSSID, Channel, RSSI
+
+@customElement("update-connections-dialog")
+export class UpdateConnectionsDialog extends LitElement {
+    @property({ type: Object })
+    public client!: MatterClient;
+
+    @property({ type: Object })
+    public nodes: Record<string, MatterNode> = {};
+
+    @property({ type: String })
+    public selectedNodeType: "online" | "offline" | "unknown" = "online";
+
+    @property({ type: String })
+    public selectedNodeName: string = "";
+
+    @property()
+    public selectedNodeId: number | string | null = null;
+
+    @property({ type: Array })
+    public onlineNeighborIds: string[] = [];
+
+    @state()
+    private _includeNeighbors: boolean = false;
+
+    @state()
+    private _isUpdating: boolean = false;
+
+    /** Timeout ID for auto-close */
+    private _timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+    /** Track if we've already dispatched close event to prevent double-firing */
+    private _hasClosedEvent: boolean = false;
+
+    override firstUpdated(): void {
+        // Open dialog when component is first rendered
+        const dialog = this.shadowRoot?.querySelector("md-dialog") as HTMLElement & { show: () => void };
+        dialog?.show();
+    }
+
+    override disconnectedCallback(): void {
+        super.disconnectedCallback();
+        // Clean up timeout when component is removed
+        if (this._timeoutId) {
+            clearTimeout(this._timeoutId);
+            this._timeoutId = null;
+        }
+    }
+
+    /**
+     * Get the number of nodes that will be updated.
+     */
+    private get _updateCount(): number {
+        if (this.selectedNodeType === "online") {
+            return this._includeNeighbors ? 1 + this.onlineNeighborIds.length : 1;
+        }
+        // offline and unknown: update neighbors only
+        return this.onlineNeighborIds.length;
+    }
+
+    /**
+     * Get the attribute paths to read for a node based on its network type.
+     */
+    private _getAttributePathsForNode(nodeId: string): string[] {
+        const node = this.nodes[nodeId];
+        if (!node) return [];
+
+        const networkType = getNetworkType(node);
+
+        if (networkType === "thread") {
+            return THREAD_ATTRIBUTE_PATHS;
+        }
+        if (networkType === "wifi") {
+            return WIFI_ATTRIBUTE_PATHS;
+        }
+        // Ethernet and unknown have no dynamic network data
+        return [];
+    }
+
+    /**
+     * Get the list of node IDs to update based on current state.
+     */
+    private _getNodeIdsToUpdate(): string[] {
+        if (this.selectedNodeType === "online") {
+            const nodeIds = [String(this.selectedNodeId)];
+            if (this._includeNeighbors) {
+                nodeIds.push(...this.onlineNeighborIds);
+            }
+            return nodeIds;
+        }
+        // offline and unknown: update neighbors only
+        return this.onlineNeighborIds;
+    }
+
+    private async _executeUpdate(): Promise<void> {
+        if (this._isUpdating || this._updateCount === 0) return;
+
+        this._isUpdating = true;
+
+        // Set up 30s timeout to auto-close dialog
+        this._timeoutId = setTimeout(() => {
+            console.warn("Update connections timed out after 30s");
+            this._closeDialog();
+        }, 30000);
+
+        try {
+            const nodeIds = this._getNodeIdsToUpdate();
+
+            // Build promises for all node updates
+            const updatePromises = nodeIds.map(async nodeIdStr => {
+                const node = this.nodes[nodeIdStr];
+                if (!node) return;
+
+                const paths = this._getAttributePathsForNode(nodeIdStr);
+                if (paths.length === 0) return;
+
+                // Use the actual node_id from the node object (number | bigint)
+                await this.client.readAttribute(node.node_id, paths);
+            });
+
+            // Wait for all to complete (results come via events, we just need completion)
+            await Promise.all(updatePromises);
+
+            // Close dialog on success
+            this._closeDialog();
+        } catch (error) {
+            console.error("Failed to update connections:", error);
+            // Close dialog on error too - don't leave user stuck
+            this._closeDialog();
+        } finally {
+            // Clear timeout if we finished before 30s
+            if (this._timeoutId) {
+                clearTimeout(this._timeoutId);
+                this._timeoutId = null;
+            }
+            this._isUpdating = false;
+        }
+    }
+
+    private _closeDialog(): void {
+        // Prevent double-firing the close event
+        if (this._hasClosedEvent) return;
+        this._hasClosedEvent = true;
+
+        const dialog = this.shadowRoot?.querySelector("md-dialog") as HTMLElement & { close: () => void };
+        dialog?.close();
+        // Use 'dialog-closed' to avoid conflicting with network-details 'close' event
+        this.dispatchEvent(new CustomEvent("dialog-closed", { bubbles: true, composed: true }));
+    }
+
+    /** Handle native dialog closed event (ESC key, backdrop click, etc.) */
+    private _handleDialogClosed(): void {
+        this._closeDialog();
+    }
+
+    private _handleCheckboxChange(e: Event): void {
+        const checkbox = e.target as HTMLInputElement;
+        this._includeNeighbors = checkbox.checked;
+    }
+
+    private _renderOnlineContent(): unknown {
+        return html`
+            <p>Refresh network information for "<strong>${this.selectedNodeName}</strong>".</p>
+            ${this.onlineNeighborIds.length > 0
+                ? html`
+                      <label class="checkbox-row">
+                          <md-checkbox
+                              ?checked=${this._includeNeighbors}
+                              @change=${this._handleCheckboxChange}
+                              ?disabled=${this._isUpdating}
+                          ></md-checkbox>
+                          <span
+                              >Include ${this.onlineNeighborIds.length} connected online
+                              neighbor${this.onlineNeighborIds.length !== 1 ? "s" : ""}</span
+                          >
+                      </label>
+                  `
+                : nothing}
+        `;
+    }
+
+    private _renderOfflineContent(): unknown {
+        return html`
+            <p>"<strong>${this.selectedNodeName}</strong>" appears to be offline.</p>
+            ${this.onlineNeighborIds.length > 0
+                ? html`
+                      <p>
+                          Update network data from its ${this.onlineNeighborIds.length} online
+                          neighbor${this.onlineNeighborIds.length !== 1 ? "s" : ""} to refresh connection info.
+                      </p>
+                  `
+                : html` <p>No online neighbors available to update.</p> `}
+        `;
+    }
+
+    private _renderUnknownContent(): unknown {
+        return html`
+            <p>This device is not commissioned to this fabric and cannot be queried directly.</p>
+            ${this.onlineNeighborIds.length > 0
+                ? html`
+                      <p>
+                          Update network data from ${this.onlineNeighborIds.length}
+                          node${this.onlineNeighborIds.length !== 1 ? "s" : ""} that
+                          see${this.onlineNeighborIds.length === 1 ? "s" : ""} this device to refresh info.
+                      </p>
+                  `
+                : html` <p>No online nodes available that see this device.</p> `}
+        `;
+    }
+
+    override render() {
+        const buttonText =
+            this._updateCount === 0
+                ? "No nodes to update"
+                : `Update ${this._updateCount} node${this._updateCount !== 1 ? "s" : ""}`;
+
+        return html`
+            <md-dialog @closed=${this._handleDialogClosed}>
+                <div slot="headline">Update Connection Data</div>
+                <div slot="content">
+                    ${this.selectedNodeType === "online"
+                        ? this._renderOnlineContent()
+                        : this.selectedNodeType === "offline"
+                          ? this._renderOfflineContent()
+                          : this._renderUnknownContent()}
+                </div>
+                <div slot="actions">
+                    <md-text-button @click=${this._closeDialog} ?disabled=${this._isUpdating}>Cancel</md-text-button>
+                    <md-filled-button
+                        @click=${this._executeUpdate}
+                        ?disabled=${this._isUpdating || this._updateCount === 0}
+                    >
+                        ${this._isUpdating
+                            ? html`<span class="updating-content"
+                                  >${svg`<svg class="spinner" viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="${mdiLoading}"/></svg>`}Updating...</span
+                              >`
+                            : buttonText}
+                    </md-filled-button>
+                </div>
+            </md-dialog>
+        `;
+    }
+
+    static override styles = css`
+        md-dialog {
+            --md-dialog-container-color: var(--md-sys-color-surface, #fff);
+        }
+
+        [slot="content"] {
+            padding: 0 24px;
+        }
+
+        [slot="content"] p {
+            margin: 0 0 16px 0;
+            font-size: 0.875rem;
+            line-height: 1.5;
+            color: var(--md-sys-color-on-surface, #333);
+        }
+
+        [slot="content"] p:last-child {
+            margin-bottom: 0;
+        }
+
+        .checkbox-row {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            cursor: pointer;
+            font-size: 0.875rem;
+            color: var(--md-sys-color-on-surface, #333);
+        }
+
+        .updating-content {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .spinner {
+            animation: spin 1s linear infinite;
+            flex-shrink: 0;
+        }
+
+        .updating-content svg {
+            color: inherit;
+        }
+
+        @keyframes spin {
+            from {
+                transform: rotate(0deg);
+            }
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        md-filled-button {
+            min-width: 140px;
+        }
+    `;
+}

package/src/pages/network/wifi-graph.ts

@@ -0,0 +1,193 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { BaseNetworkGraph } from "./base-network-graph.js";
+import { createNodeIconDataUrl, createWiFiRouterIconDataUrl } from "./device-icons.js";
+import type { NetworkGraphEdge, NetworkGraphNode } from "./network-types.js";
+import {
+    categorizeDevices,
+    getDeviceName,
+    getNetworkType,
+    getSignalColorFromRssi,
+    getWiFiDiagnostics,
+} from "./network-utils.js";
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "wifi-graph": WiFiGraph;
+    }
+}
+
+/** WiFi access point (router) node info */
+interface WiFiAccessPoint {
+    bssid: string;
+    /** Connected node IDs as strings to avoid BigInt precision loss */
+    connectedNodes: string[];
+}
+
+@customElement("wifi-graph")
+export class WiFiGraph extends BaseNetworkGraph {
+    /** Cache of access points for the current render */
+    private _accessPoints: Map<string, WiFiAccessPoint> = new Map();
+
+    /** Get access points map for use by details panel */
+    public get wifiAccessPointsMap(): Map<string, { bssid: string; connectedNodes: string[] }> {
+        return this._accessPoints;
+    }
+
+    /**
+     * Override physics for WiFi star topology - needs stronger cluster separation.
+     */
+    protected override _getPhysicsOptions(): any {
+        return {
+            enabled: true,
+            solver: "forceAtlas2Based",
+            forceAtlas2Based: {
+                gravitationalConstant: -120, // Stronger repulsion for star topology
+                centralGravity: 0.003, // Weaker central pull
+                springLength: 100, // Shorter springs keep devices close to their AP
+                springConstant: 0.12, // Stronger springs
+                damping: 0.4,
+                avoidOverlap: 0.8,
+            },
+            stabilization: {
+                enabled: true,
+                iterations: 300,
+                updateInterval: 25,
+            },
+        };
+    }
+
+    protected override _updateGraph(): void {
+        if (!this._nodesDataSet || !this._edgesDataSet) return;
+
+        // Clear stored edge colors since we're rebuilding edges
+        this._clearOriginalEdgeColors();
+
+        // Get WiFi devices only (Ethernet has no dynamic network data)
+        const categorized = categorizeDevices(this.nodes);
+        const wifiNodeIds = categorized.wifi;
+
+        if (wifiNodeIds.length === 0) {
+            this._nodesDataSet.clear();
+            this._edgesDataSet.clear();
+            this._accessPoints.clear();
+            return;
+        }
+
+        // Build access points map from BSSID, keyed by apId
+        // wifiNodeIds are already strings from categorizeDevices
+        this._accessPoints.clear();
+
+        for (const nodeId of wifiNodeIds) {
+            const node = this.nodes[nodeId];
+            if (!node) continue;
+
+            const wifiDiag = getWiFiDiagnostics(node);
+            if (wifiDiag.bssid) {
+                const apId = `ap_${wifiDiag.bssid.replace(/:/g, "")}`;
+                if (!this._accessPoints.has(apId)) {
+                    this._accessPoints.set(apId, {
+                        bssid: wifiDiag.bssid,
+                        connectedNodes: [],
+                    });
+                }
+                this._accessPoints.get(apId)!.connectedNodes.push(nodeId);
+            }
+        }
+
+        // Create graph nodes
+        const graphNodes: NetworkGraphNode[] = [];
+        const graphEdges: NetworkGraphEdge[] = [];
+
+        // Add access point nodes
+        for (const [apId, ap] of this._accessPoints) {
+            const bssid = ap.bssid;
+            const isSelected = String(apId) === String(this._selectedNodeId);
+
+            graphNodes.push({
+                id: apId,
+                label: `AP ${bssid.slice(-8)}`,
+                image: createWiFiRouterIconDataUrl(isSelected),
+                shape: "image",
+                networkType: "wifi",
+                isUnknown: true, // Mark as infrastructure
+            });
+        }
+
+        // Add device nodes and edges
+        // nodeId is already a string from categorizeDevices
+        let edgeIndex = 0;
+        for (const nodeId of wifiNodeIds) {
+            const node = this.nodes[nodeId];
+            if (!node) continue;
+
+            const isSelected = nodeId === String(this._selectedNodeId);
+            const isOffline = node.available === false;
+            const networkType = getNetworkType(node);
+            const wifiDiag = getWiFiDiagnostics(node);
+
+            graphNodes.push({
+                id: nodeId,
+                label: getDeviceName(node),
+                image: createNodeIconDataUrl(node, undefined, isSelected, isOffline),
+                shape: "image",
+                networkType: networkType,
+                offline: isOffline,
+            });
+
+            // Create edge to access point if we have BSSID
+            if (wifiDiag.bssid) {
+                const apId = `ap_${wifiDiag.bssid.replace(/:/g, "")}`;
+                const signalColor = getSignalColorFromRssi(wifiDiag.rssi);
+
+                graphEdges.push({
+                    id: `edge_${edgeIndex++}`,
+                    from: nodeId,
+                    to: apId,
+                    color: {
+                        color: signalColor,
+                        highlight: signalColor,
+                    },
+                    width: 2,
+                    title: wifiDiag.rssi !== null ? `RSSI: ${wifiDiag.rssi} dBm` : "RSSI: Unknown",
+                    dashes: isOffline, // Dashed lines for offline devices
+                });
+            }
+        }
+
+        // Update datasets
+        const existingNodeIds = this._nodesDataSet.getIds();
+        const newNodeIds = new Set(graphNodes.map(n => n.id));
+
+        const nodesToRemove = existingNodeIds.filter((id: string | number) => !newNodeIds.has(id));
+        if (nodesToRemove.length > 0) {
+            this._nodesDataSet.remove(nodesToRemove);
+        }
+
+        this._nodesDataSet.update(graphNodes);
+        this._edgesDataSet.clear();
+        this._edgesDataSet.add(graphEdges);
+    }
+
+    override render() {
+        const categorized = categorizeDevices(this.nodes);
+        const wifiCount = categorized.wifi.length;
+
+        if (wifiCount === 0) {
+            return html`
+                <div class="empty-state">
+                    <p>No WiFi devices found</p>
+                    <p class="hint">WiFi devices will appear here once commissioned</p>
+                </div>
+            `;
+        }
+
+        return html`<div class="graph-container"></div>`;
+    }
+}