@matter-server/dashboard 0.3.3 → 0.3.4

package/src/pages/network/network-utils.ts

@@ -297,6 +297,38 @@ export function parseRouteTable(node: MatterNode): ThreadRoute[] {
     });
 }
 
+/**
+ * Find a route table entry for a specific destination by extended address.
+ * Returns the route entry if found, undefined otherwise.
+ */
+export function findRouteByExtAddress(node: MatterNode, targetExtAddr: bigint): ThreadRoute | undefined {
+    const routes = parseRouteTable(node);
+    return routes.find(route => route.extAddress === targetExtAddr && route.linkEstablished);
+}
+
+/**
+ * Count the number of routable destinations for a node (from route table).
+ * Only counts entries where allocated=true and linkEstablished=true.
+ * This is typically only meaningful for router nodes.
+ */
+export function getRoutableDestinationsCount(node: MatterNode): number {
+    const routes = parseRouteTable(node);
+    return routes.filter(route => route.allocated && route.linkEstablished).length;
+}
+
+/**
+ * Calculate combined bidirectional LQI from route table entry.
+ * Returns average of lqiIn and lqiOut if both are non-zero.
+ */
+export function getRouteBidirectionalLqi(route: ThreadRoute): number | undefined {
+    if (route.lqiIn > 0 && route.lqiOut > 0) {
+        return Math.round((route.lqiIn + route.lqiOut) / 2);
+    }
+    if (route.lqiIn > 0) return route.lqiIn;
+    if (route.lqiOut > 0) return route.lqiOut;
+    return undefined;
+}
+
 /**
  * Gets the RLOC16 (short address) for a Thread node.
  * Uses attribute 0/53/64 (Rloc16, 0x0040).
@@ -437,6 +469,21 @@ export function getSignalColor(neighbor: ThreadNeighbor): string {
     return SIGNAL_COLOR_WEAK;
 }
 
+/**
+ * Get signal color based on LQI value alone.
+ * Used for route table entries where only LQI is available.
+ * @param lqi Link Quality Indicator (0-255, higher is better)
+ */
+export function getSignalColorFromLqi(lqi: number): string {
+    if (lqi > LQI_STRONG_THRESHOLD) {
+        return SIGNAL_COLOR_STRONG;
+    }
+    if (lqi > LQI_MEDIUM_THRESHOLD) {
+        return SIGNAL_COLOR_MEDIUM;
+    }
+    return SIGNAL_COLOR_WEAK;
+}
+
 /**
  * Gets a human-readable display name for a node.
  * Format: nodeLabel || productName (serialNumber)
@@ -634,12 +681,58 @@ export function buildThreadConnections(
             }
             seenConnections.add(connectionKey);
 
+            // Look up route table entry for supplementary data (pathCost, bidirectional LQI)
+            const routeEntry = findRouteByExtAddress(node, neighbor.extAddress);
+            const bidirectionalLqi = routeEntry ? getRouteBidirectionalLqi(routeEntry) : undefined;
+
+            // Always use neighbor table RSSI/LQI for signal color (most accurate link quality)
             connections.push({
                 fromNodeId,
                 toNodeId,
                 signalColor: getSignalColor(neighbor),
                 lqi: neighbor.lqi,
                 rssi: neighbor.avgRssi ?? neighbor.lastRssi,
+                pathCost: routeEntry?.pathCost,
+                bidirectionalLqi,
+            });
+        }
+
+        // Check route table for connections not in neighbor table (supplementary data)
+        // This helps when neighbor table is stale or incomplete
+        const routes = parseRouteTable(node);
+        for (const route of routes) {
+            if (!route.linkEstablished || !route.allocated) continue;
+
+            let toNodeId: string | undefined = extAddrMap.get(route.extAddress);
+            if (toNodeId === undefined) {
+                toNodeId = unknownExtAddrMap.get(route.extAddress);
+            }
+            if (toNodeId === undefined || toNodeId === fromNodeId) continue;
+
+            const connectionKey = `${fromNodeId}-${toNodeId}`;
+            const reverseKey = `${toNodeId}-${fromNodeId}`;
+
+            // Only add if we don't already have this connection from neighbor table
+            if (seenConnections.has(connectionKey) || seenConnections.has(reverseKey)) {
+                continue;
+            }
+            seenConnections.add(connectionKey);
+
+            const bidirectionalLqi = getRouteBidirectionalLqi(route);
+            const signalColor =
+                bidirectionalLqi !== undefined
+                    ? getSignalColorFromLqi(bidirectionalLqi)
+                    : "var(--md-sys-color-outline, grey)"; // Unknown signal
+
+            connections.push({
+                fromNodeId,
+                toNodeId,
+                signalColor,
+                lqi: bidirectionalLqi ?? 0,
+                rssi: null,
+                pathCost: route.pathCost,
+                bidirectionalLqi,
+                fromRouteTable: true,
             });
         }
     }
@@ -666,6 +759,10 @@ export interface NodeConnection {
     isOutgoing: boolean;
     /** Whether this is an unknown/external device */
     isUnknown: boolean;
+    /** Path cost from route table (1 = direct, higher = multi-hop). Only available for routers. */
+    pathCost?: number;
+    /** Bidirectional LQI from route table (average of lqiIn and lqiOut) */
+    bidirectionalLqi?: number;
 }
 
 /**
@@ -705,6 +802,10 @@ export function getNodeConnections(
 
         seenConnectedIds.add(displayId);
 
+        // Look up route table entry for enhanced data
+        const routeEntry = findRouteByExtAddress(node, neighbor.extAddress);
+        const bidirectionalLqi = routeEntry ? getRouteBidirectionalLqi(routeEntry) : undefined;
+
         connections.push({
             connectedNodeId: displayId,
             connectedNode,
@@ -714,6 +815,8 @@ export function getNodeConnections(
             rssi: neighbor.avgRssi ?? neighbor.lastRssi,
             isOutgoing: true,
             isUnknown,
+            pathCost: routeEntry?.pathCost,
+            bidirectionalLqi,
         });
     }
 
@@ -734,6 +837,10 @@ export function getNodeConnections(
                 const otherExtAddr = getThreadExtendedAddress(otherNode);
                 const extAddrHex = otherExtAddr ? otherExtAddr.toString(16).toUpperCase().padStart(16, "0") : "Unknown";
 
+                // Look up route table entry from the other node's perspective
+                const routeEntry = findRouteByExtAddress(otherNode, thisExtAddr);
+                const bidirectionalLqi = routeEntry ? getRouteBidirectionalLqi(routeEntry) : undefined;
+
                 connections.push({
                     connectedNodeId: otherNodeId,
                     connectedNode: otherNode,
@@ -743,6 +850,8 @@ export function getNodeConnections(
                     rssi: reverseEntry.avgRssi ?? reverseEntry.lastRssi,
                     isOutgoing: false,
                     isUnknown: false,
+                    pathCost: routeEntry?.pathCost,
+                    bidirectionalLqi,
                 });
             }
         }

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

@@ -115,6 +115,12 @@ export class ThreadGraph extends BaseNetworkGraph {
         // 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,
@@ -125,7 +131,7 @@ export class ThreadGraph extends BaseNetworkGraph {
                 },
                 width: 2,
                 title: conn.rssi !== null ? `RSSI: ${conn.rssi} dBm, LQI: ${conn.lqi}` : `LQI: ${conn.lqi}`,
-                dashes: isToUnknown, // Dashed lines to unknown devices
+                dashes: isToUnknown || hasOfflineEndpoint, // Dashed lines to unknown or offline devices
             };
         });
 

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

@@ -69,9 +69,9 @@ export class WiFiGraph extends BaseNetworkGraph {
         // Clear stored edge colors since we're rebuilding edges
         this._clearOriginalEdgeColors();
 
-        // Get WiFi and Ethernet devices
+        // Get WiFi devices only (Ethernet has no dynamic network data)
         const categorized = categorizeDevices(this.nodes);
-        const wifiNodeIds = [...categorized.wifi, ...categorized.ethernet];
+        const wifiNodeIds = categorized.wifi;
 
         if (wifiNodeIds.length === 0) {
             this._nodesDataSet.clear();
@@ -156,6 +156,7 @@ export class WiFiGraph extends BaseNetworkGraph {
                     },
                     width: 2,
                     title: wifiDiag.rssi !== null ? `RSSI: ${wifiDiag.rssi} dBm` : "RSSI: Unknown",
+                    dashes: isOffline, // Dashed lines for offline devices
                 });
             }
         }
@@ -176,7 +177,7 @@ export class WiFiGraph extends BaseNetworkGraph {
 
     override render() {
         const categorized = categorizeDevices(this.nodes);
-        const wifiCount = categorized.wifi.length + categorized.ethernet.length;
+        const wifiCount = categorized.wifi.length;
 
         if (wifiCount === 0) {
             return html`

package/src/util/format_hex.ts

@@ -43,3 +43,42 @@ export function formatNodeAddress(fabricIndex: number | undefined, nodeId: numbe
     const fabricPart = fabricIndex !== undefined ? fabricIndex : "?";
     return `@${fabricPart}:${nodeId.toString(16)}`;
 }
+
+/**
+ * Get the effective fabric index for formatting a node address.
+ * Returns undefined for test nodes or when fabric index is not available,
+ * which will result in "?" being displayed.
+ *
+ * @param serverFabricIndex - The fabric_index from client.serverInfo
+ * @param isTestNode - Whether this is a test node (from isTestNodeId())
+ */
+export function getEffectiveFabricIndex(
+    serverFabricIndex: number | undefined,
+    isTestNode: boolean,
+): number | undefined {
+    return isTestNode || serverFabricIndex === undefined ? undefined : serverFabricIndex;
+}
+
+/**
+ * Format a node address, handling string node IDs.
+ * Useful when node IDs come from various sources (string keys, numbers, bigints).
+ *
+ * @param fabricIndex - The fabric index (or undefined for "?")
+ * @param nodeId - The node ID as string, number, or bigint
+ * @returns Formatted address like "@1:7b" or empty string if nodeId is invalid
+ */
+export function formatNodeAddressFromAny(fabricIndex: number | undefined, nodeId: number | bigint | string): string {
+    let numericId: bigint;
+    if (typeof nodeId === "bigint") {
+        numericId = nodeId;
+    } else if (typeof nodeId === "number") {
+        numericId = BigInt(nodeId);
+    } else {
+        try {
+            numericId = BigInt(nodeId);
+        } catch {
+            return "";
+        }
+    }
+    return formatNodeAddress(fabricIndex, numericId);
+}