@matter-server/dashboard 0.3.3 → 0.3.5-alpha.0-20260203-66f5d74

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

@@ -4,12 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { consume } from "@lit/context";
 import "@material/web/divider/divider";
-import type { MatterNode } from "@matter-server/ws-client";
-import { mdiClose, mdiSignal, mdiSignalCellular1, mdiSignalCellular2 } from "@mdi/js";
+import { isTestNodeId, type MatterClient, type MatterNode } from "@matter-server/ws-client";
+import { mdiClose, mdiRefresh, mdiSignal, mdiSignalCellular1, mdiSignalCellular2 } from "@mdi/js";
 import { LitElement, TemplateResult, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { clientContext } from "../../client/client-context.js";
 import "../../components/ha-svg-icon";
+import { formatNodeAddressFromAny, getEffectiveFabricIndex } from "../../util/format_hex.js";
 import type { ThreadNeighbor } from "./network-types.js";
 import type { NodeConnection } from "./network-utils.js";
 import {
@@ -17,6 +20,7 @@ import {
     getDeviceName,
     getNetworkType,
     getNodeConnections,
+    getRoutableDestinationsCount,
     getSignalColor,
     getSignalColorFromRssi,
     getThreadChannel,
@@ -28,6 +32,7 @@ import {
     getWiFiVersionName,
     parseNeighborTable,
 } from "./network-utils.js";
+import "./update-connections-dialog.js";
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -52,6 +57,12 @@ export class NetworkDetails extends LitElement {
     @property({ type: Object })
     public wifiAccessPoints: Map<string, { bssid: string; connectedNodes: string[] }> = new Map();
 
+    @consume({ context: clientContext })
+    private client!: MatterClient;
+
+    @state()
+    private _showUpdateDialog: boolean = false;
+
     private _handleClose(): void {
         this.dispatchEvent(
             new CustomEvent("close", {
@@ -100,6 +111,19 @@ export class NetworkDetails extends LitElement {
         return mdiSignalCellular1; // Weak
     }
 
+    /**
+     * Format a node ID as hex for Matter log format display.
+     * Returns format like "@1:7b" for node ID 123.
+     */
+    private _formatNodeIdHex(nodeId: number | bigint | string): string {
+        // For unknown devices (not in nodes), we can't determine if it's a test node,
+        // so we use the fabric index if available
+        const node = this.nodes[String(nodeId)];
+        const isTestNode = node ? isTestNodeId(node.node_id) : false;
+        const fabricIndex = getEffectiveFabricIndex(this.client?.serverInfo?.fabric_index, isTestNode);
+        return formatNodeAddressFromAny(fabricIndex, nodeId);
+    }
+
     private _renderWiFiInfo(node: MatterNode): TemplateResult | typeof nothing {
         const wifiDiag = getWiFiDiagnostics(node);
 
@@ -190,6 +214,21 @@ export class NetworkDetails extends LitElement {
                           </div>
                       `
                     : nothing}
+                <div class="info-row">
+                    <span class="label">Direct neighbors:</span>
+                    <span class="value">${connections.length}</span>
+                </div>
+                ${(() => {
+                    const routableCount = getRoutableDestinationsCount(node);
+                    return routableCount > 0
+                        ? html`
+                              <div class="info-row">
+                                  <span class="label">Routable destinations:</span>
+                                  <span class="value">${routableCount}</span>
+                              </div>
+                          `
+                        : nothing;
+                })()}
             </div>
 
             ${connections.length > 0
@@ -214,13 +253,26 @@ export class NetworkDetails extends LitElement {
                                           <div class="neighbor-info">
                                               <div class="neighbor-name">
                                                   ${conn.connectedNode
-                                                      ? html`Node ${conn.connectedNodeId}:
-                                                        ${getDeviceName(conn.connectedNode)}`
+                                                      ? html`Node ${conn.connectedNodeId}
+                                                            <span class="node-id-hex"
+                                                                >${this._formatNodeIdHex(conn.connectedNodeId)}</span
+                                                            >: ${getDeviceName(conn.connectedNode)}`
                                                       : html`External: <span class="mono">${conn.extAddressHex}</span>`}
                                               </div>
                                               <div class="neighbor-signal">
-                                                  ${conn.rssi !== null ? html`RSSI: ${conn.rssi} dBm, ` : nothing}
-                                                  ${conn.lqi !== null ? html`LQI: ${conn.lqi}` : nothing}
+                                                  ${conn.rssi !== null
+                                                      ? html`RSSI: ${conn.rssi} dBm`
+                                                      : nothing}${conn.rssi !== null && conn.lqi !== null
+                                                      ? ", "
+                                                      : nothing}${conn.lqi !== null
+                                                      ? html`LQI: ${conn.lqi}`
+                                                      : nothing}${conn.bidirectionalLqi !== undefined
+                                                      ? html`<span class="route-info"
+                                                            >, Bidir: ${conn.bidirectionalLqi}</span
+                                                        >`
+                                                      : nothing}${conn.pathCost !== undefined
+                                                      ? html`<span class="route-info">, Cost: ${conn.pathCost}</span>`
+                                                      : nothing}
                                                   ${!conn.isOutgoing
                                                       ? html`<span class="direction-hint">(reverse)</span>`
                                                       : nothing}
@@ -363,7 +415,11 @@ export class NetworkDetails extends LitElement {
                                                 `
                                               : nothing}
                                           <div class="neighbor-info">
-                                              <div class="neighbor-name">Node ${nodeId}: ${getDeviceName(node)}</div>
+                                              <div class="neighbor-name">
+                                                  Node ${nodeId}
+                                                  <span class="node-id-hex">${this._formatNodeIdHex(nodeId)}</span>:
+                                                  ${getDeviceName(node)}
+                                              </div>
                                               ${neighborEntry
                                                   ? html`
                                                         <div class="neighbor-signal">
@@ -391,6 +447,112 @@ export class NetworkDetails extends LitElement {
         `;
     }
 
+    /**
+     * Determine if update connections button should be shown.
+     */
+    private _canUpdateConnections(): boolean {
+        if (this.selectedNodeId === null) return false;
+
+        // WiFi APs: no update possible (not a Matter device)
+        const isAccessPoint = typeof this.selectedNodeId === "string" && this.selectedNodeId.startsWith("ap_");
+        if (isAccessPoint) return false;
+
+        // Unknown devices: only if they have online seenBy nodes
+        const isUnknown = typeof this.selectedNodeId === "string" && this.selectedNodeId.startsWith("unknown_");
+        if (isUnknown) {
+            return this._getOnlineSeenByNodes().length > 0;
+        }
+
+        // Regular nodes: check network type (no update for ethernet)
+        const node = this.nodes[this.selectedNodeId.toString()];
+        if (!node) return false;
+
+        const networkType = getNetworkType(node);
+        if (networkType === "ethernet" || networkType === "unknown") return false;
+
+        return true;
+    }
+
+    /**
+     * Get the type of the currently selected node for dialog variant.
+     */
+    private _getSelectedNodeType(): "online" | "offline" | "unknown" {
+        if (typeof this.selectedNodeId === "string" && this.selectedNodeId.startsWith("unknown_")) {
+            return "unknown";
+        }
+
+        const node = this.nodes[this.selectedNodeId!.toString()];
+        if (!node || node.available === false) {
+            return "offline";
+        }
+        return "online";
+    }
+
+    /**
+     * Get online neighbors for a Thread node.
+     */
+    private _getOnlineNeighbors(nodeId: string): string[] {
+        const node = this.nodes[nodeId];
+        if (!node) return [];
+
+        const networkType = getNetworkType(node);
+        if (networkType === "thread") {
+            const extAddrMap = buildExtAddrMap(this.nodes);
+            const connections = getNodeConnections(nodeId, this.nodes, extAddrMap);
+            return connections
+                .filter(conn => {
+                    // Only include commissioned nodes (not unknown devices)
+                    if (typeof conn.connectedNodeId === "string" && conn.connectedNodeId.startsWith("unknown_")) {
+                        return false;
+                    }
+                    const connectedNode = this.nodes[String(conn.connectedNodeId)];
+                    return connectedNode?.available === true;
+                })
+                .map(conn => String(conn.connectedNodeId));
+        }
+
+        // WiFi nodes don't have peer connections (just AP)
+        return [];
+    }
+
+    /**
+     * Get online nodes that see an unknown device.
+     */
+    private _getOnlineSeenByNodes(): string[] {
+        if (typeof this.selectedNodeId !== "string" || !this.selectedNodeId.startsWith("unknown_")) {
+            return [];
+        }
+
+        const unknown = this.unknownDevices.get(this.selectedNodeId);
+        if (!unknown) return [];
+
+        return unknown.seenBy.filter(nodeId => {
+            const node = this.nodes[nodeId.toString()];
+            return node?.available === true;
+        });
+    }
+
+    /**
+     * Get the name of the selected node for display in dialog.
+     */
+    private _getSelectedNodeName(): string {
+        if (typeof this.selectedNodeId === "string" && this.selectedNodeId.startsWith("unknown_")) {
+            const unknown = this.unknownDevices.get(this.selectedNodeId);
+            return unknown ? `Unknown (${unknown.extAddressHex.slice(-8)})` : "Unknown Device";
+        }
+
+        const node = this.nodes[this.selectedNodeId!.toString()];
+        return node ? getDeviceName(node) : "Unknown";
+    }
+
+    private _handleUpdateConnections(): void {
+        this._showUpdateDialog = true;
+    }
+
+    private _handleDialogClose(): void {
+        this._showUpdateDialog = false;
+    }
+
     private _renderWiFiAccessPointInfo(apId: string): TemplateResult | typeof nothing {
         const ap = this.wifiAccessPoints.get(apId);
         if (!ap) {
@@ -429,7 +591,11 @@ export class NetworkDetails extends LitElement {
                                           @click=${() => this._handleSelectNode(nodeId)}
                                           @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, nodeId)}
                                       >
-                                          <div class="node-name">Node ${nodeId}: ${getDeviceName(node)}</div>
+                                          <div class="node-name">
+                                              Node ${nodeId}
+                                              <span class="node-id-hex">${this._formatNodeIdHex(nodeId)}</span>:
+                                              ${getDeviceName(node)}
+                                          </div>
                                           ${wifiDiag.rssi !== null
                                               ? html`<div class="node-signal" style="color: ${signalColor}">
                                                     ${wifiDiag.rssi} dBm
@@ -464,16 +630,44 @@ export class NetworkDetails extends LitElement {
         const isUnknown = typeof this.selectedNodeId === "string" && this.selectedNodeId.startsWith("unknown_");
 
         if (isUnknown) {
+            const onlineSeenByNodes = this._getOnlineSeenByNodes();
             return html`
                 <div class="details-panel">
                     <div class="header">
                         <h3>External Device</h3>
-                        <button class="close-button" @click=${this._handleClose} aria-label="Close details panel">
-                            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                        </button>
+                        <div class="header-actions">
+                            ${onlineSeenByNodes.length > 0
+                                ? html`
+                                      <button
+                                          class="action-button"
+                                          @click=${this._handleUpdateConnections}
+                                          aria-label="Update connection data"
+                                          title="Update connection data"
+                                      >
+                                          <ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
+                                      </button>
+                                  `
+                                : nothing}
+                            <button class="close-button" @click=${this._handleClose} aria-label="Close details panel">
+                                <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                            </button>
+                        </div>
                     </div>
                     <div class="content">${this._renderUnknownDeviceInfo(this.selectedNodeId as string)}</div>
                 </div>
+                ${this._showUpdateDialog
+                    ? html`
+                          <update-connections-dialog
+                              .client=${this.client}
+                              .nodes=${this.nodes}
+                              selectedNodeType="unknown"
+                              .selectedNodeName=${this._getSelectedNodeName()}
+                              .selectedNodeId=${this.selectedNodeId}
+                              .onlineNeighborIds=${onlineSeenByNodes}
+                              @dialog-closed=${this._handleDialogClose}
+                          ></update-connections-dialog>
+                      `
+                    : nothing}
             `;
         }
 
@@ -503,19 +697,53 @@ export class NetworkDetails extends LitElement {
             `;
         }
 
+        const canUpdate = this._canUpdateConnections();
+        const nodeType = this._getSelectedNodeType();
+        const onlineNeighbors = this._getOnlineNeighbors(String(this.selectedNodeId));
+
         return html`
             <div class="details-panel">
                 <div class="header">
-                    <h3>Node ${this.selectedNodeId}</h3>
-                    <button class="close-button" @click=${this._handleClose} aria-label="Close details panel">
-                        <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                    </button>
+                    <h3>
+                        Node ${this.selectedNodeId}
+                        <span class="node-id-hex">${this._formatNodeIdHex(this.selectedNodeId)}</span>
+                    </h3>
+                    <div class="header-actions">
+                        ${canUpdate
+                            ? html`
+                                  <button
+                                      class="action-button"
+                                      @click=${this._handleUpdateConnections}
+                                      aria-label="Update connection data"
+                                      title="Update connection data"
+                                  >
+                                      <ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
+                                  </button>
+                              `
+                            : nothing}
+                        <button class="close-button" @click=${this._handleClose} aria-label="Close details panel">
+                            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                        </button>
+                    </div>
                 </div>
                 <div class="content">${this._renderNodeInfo(node)}</div>
                 <div class="footer">
                     <a href="#node/${this.selectedNodeId}" class="view-link">View node details</a>
                 </div>
             </div>
+            ${this._showUpdateDialog
+                ? html`
+                      <update-connections-dialog
+                          .client=${this.client}
+                          .nodes=${this.nodes}
+                          .selectedNodeType=${nodeType}
+                          .selectedNodeName=${this._getSelectedNodeName()}
+                          .selectedNodeId=${this.selectedNodeId}
+                          .onlineNeighborIds=${onlineNeighbors}
+                          @dialog-closed=${this._handleDialogClose}
+                      ></update-connections-dialog>
+                  `
+                : nothing}
         `;
     }
 
@@ -561,6 +789,38 @@ export class NetworkDetails extends LitElement {
             color: var(--md-sys-color-on-surface, #333);
         }
 
+        .node-id-hex {
+            font-size: 0.75em;
+            font-weight: 400;
+            color: var(--md-sys-color-on-surface-variant, #666);
+            font-family: monospace;
+        }
+
+        .header-actions {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .action-button {
+            background: none;
+            border: none;
+            padding: 4px;
+            cursor: pointer;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .action-button:hover {
+            background-color: var(--md-sys-color-surface-container-high, #e8e8e8);
+        }
+
+        .action-button ha-svg-icon {
+            --icon-primary-color: var(--md-sys-color-on-surface-variant, #666);
+        }
+
         .close-button {
             background: none;
             border: none;
@@ -682,6 +942,11 @@ export class NetworkDetails extends LitElement {
             opacity: 0.8;
         }
 
+        .route-info {
+            color: var(--md-sys-color-tertiary, #7d5260);
+            font-size: 0.85em;
+        }
+
         .footer {
             padding: 12px 16px;
             border-top: 1px solid var(--md-sys-color-outline-variant, #ccc);

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

@@ -105,6 +105,12 @@ export interface ThreadConnection {
     signalColor: string;
     lqi: number;
     rssi: number | null;
+    /** 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;
+    /** Whether this connection was supplemented by route table data (vs neighbor table only) */
+    fromRouteTable?: boolean;
 }
 
 /**

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
             };
         });