@matter-server/dashboard 0.3.3 → 0.3.4

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

@@ -1,5 +1,5 @@
-import { k as i, G as c, H as clientContext, n, a as e, i as i$1, A, j as b, F as handleAsync, t } from './matter-dashboard-app-BuCe_Jxf.js';
-import { p as preventDefault } from './prevent_default-D4FX_PIh.js';
+import { k as i, G as c, H as clientContext, n, a as e, i as i$1, A, j as b, F as handleAsync, t } from './matter-dashboard-app-CrBHT4fT.js';
+import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 
 var _staticBlock$1;

package/dist/web/js/prevent_default-D-ohDGsN.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const preventDefault = ev => ev.preventDefault();
+
+export { preventDefault as p };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@matter-server/dashboard",
-    "version": "0.3.3",
+    "version": "0.3.4",
     "description": "Dashboard for OHF Matter Server",
     "bugs": {
         "url": "https://github.com/matter-js/matterjs-server/issues"
@@ -23,7 +23,7 @@
     },
     "devDependencies": {
         "@babel/preset-env": "^7.28.6",
-        "@matter/main": "0.16.8-alpha.0-20260130-2554cb6e2",
+        "@matter/main": "0.16.9-alpha.0-20260201-8748390b1",
         "@rollup/plugin-babel": "^6.1.0",
         "@rollup/plugin-commonjs": "^29.0.0",
         "rollup-plugin-copy": "^3.5.0",
@@ -37,8 +37,8 @@
     "dependencies": {
         "@lit/context": "^1.1.6",
         "@material/web": "^2.4.1",
-        "@matter-server/ws-client": "0.3.3",
-        "@matter-server/custom-clusters": "0.3.3",
+        "@matter-server/ws-client": "0.3.4",
+        "@matter-server/custom-clusters": "0.3.4",
         "@mdi/js": "^7.4.47",
         "lit": "^3.3.2",
         "tslib": "^2.8.1",

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

@@ -79,7 +79,7 @@ export class NodeDetails extends LitElement {
             <md-list>
                 <md-list-item>
                     <div slot="headline">
-                        <b>Node ${this.node.node_id} ${this.node.nodeLabel}</b>
+                        <b>${this.node.nodeLabel || "Node Info"}</b>
                         ${this.node.available ? nothing : html`<span class="status">OFFLINE</span>`}
                     </div>
                 </md-list-item>

package/src/pages/matter-cluster-view.ts

@@ -9,8 +9,8 @@ import "@material/web/divider/divider";
 import "@material/web/iconbutton/icon-button";
 import "@material/web/list/list";
 import "@material/web/list/list-item";
-import { MatterClient, MatterNode, toBigIntAwareJson } from "@matter-server/ws-client";
-import { LitElement, css, html } from "lit";
+import { isTestNodeId, MatterClient, MatterNode, toBigIntAwareJson } from "@matter-server/ws-client";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { clusters } from "../client/models/descriptions.js";
@@ -19,7 +19,7 @@ import "../components/ha-svg-icon";
 import "../pages/components/node-details";
 import { bindingContext } from "./components/context.js";
 // Cluster command components (auto-register on import)
-import { formatHex } from "../util/format_hex.js";
+import { formatHex, formatNodeAddress, getEffectiveFabricIndex } from "../util/format_hex.js";
 import { getClusterCommandsTag } from "./cluster-commands/index.js";
 
 declare global {
@@ -79,9 +79,16 @@ class MatterClusterView extends LitElement {
             `;
         }
 
+        // Format node address for hex display
+        const fabricIndex = getEffectiveFabricIndex(
+            this.client.serverInfo.fabric_index,
+            isTestNodeId(this.node.node_id),
+        );
+        const nodeHex = formatNodeAddress(fabricIndex, this.node.node_id);
+
         return html`
             <dashboard-header
-                .title=${`Node ${this.node.node_id}  |  Endpoint ${this.endpoint}  |  Cluster ${this.cluster}`}
+                .title=${`Node ${this.node.node_id} ${nodeHex}  |  Endpoint ${this.endpoint}  |  Cluster ${this.cluster}`}
                 .backButton=${`#node/${this.node.node_id}/${this.endpoint}`}
                 .client=${this.client}
             ></dashboard-header>

package/src/pages/matter-endpoint-view.ts

@@ -8,14 +8,14 @@ import "@material/web/divider/divider";
 import "@material/web/iconbutton/icon-button";
 import "@material/web/list/list";
 import "@material/web/list/list-item";
-import { MatterClient, MatterNode } from "@matter-server/ws-client";
+import { MatterClient, MatterNode, isTestNodeId } from "@matter-server/ws-client";
 import { mdiChevronRight } from "@mdi/js";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
 import { DeviceType, clusters, device_types } from "../client/models/descriptions.js";
 import "../components/ha-svg-icon";
-import { formatHex } from "../util/format_hex.js";
+import { formatHex, formatNodeAddress, getEffectiveFabricIndex } from "../util/format_hex.js";
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -62,9 +62,16 @@ class MatterEndpointView extends LitElement {
             `;
         }
 
+        // Format node address for hex display
+        const fabricIndex = getEffectiveFabricIndex(
+            this.client.serverInfo.fabric_index,
+            isTestNodeId(this.node.node_id),
+        );
+        const nodeHex = formatNodeAddress(fabricIndex, this.node.node_id);
+
         return html`
             <dashboard-header
-                .title=${`Node ${this.node.node_id}  |  Endpoint ${this.endpoint}`}
+                .title=${`Node ${this.node.node_id} ${nodeHex}  |  Endpoint ${this.endpoint}`}
                 .backButton=${`#node/${this.node.node_id}`}
                 .client=${this.client}
             ></dashboard-header>

package/src/pages/matter-node-view.ts

@@ -8,12 +8,13 @@ import "@material/web/divider/divider";
 import "@material/web/iconbutton/icon-button";
 import "@material/web/list/list";
 import "@material/web/list/list-item";
-import { MatterClient, MatterNode } from "@matter-server/ws-client";
+import { isTestNodeId, MatterClient, MatterNode } from "@matter-server/ws-client";
 import { mdiChevronRight, mdiGraphOutline } from "@mdi/js";
-import { LitElement, css, html } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
 import "../components/ha-svg-icon";
+import { formatNodeAddress, getEffectiveFabricIndex } from "../util/format_hex.js";
 import "./components/header";
 import "./components/node-details";
 import { getEndpointDeviceTypes } from "./matter-endpoint-view.js";
@@ -54,9 +55,16 @@ class MatterNodeView extends LitElement {
         const graphViewType = networkType === "ethernet" ? "wifi" : networkType;
         const graphUrl = showGraphButton ? `#${graphViewType}/${this.node.node_id}` : null;
 
+        // Format node address for hex display
+        const fabricIndex = getEffectiveFabricIndex(
+            this.client.serverInfo.fabric_index,
+            isTestNodeId(this.node.node_id),
+        );
+        const nodeHex = formatNodeAddress(fabricIndex, this.node.node_id);
+
         return html`
             <dashboard-header
-                .title=${"Node " + this.node.node_id}
+                .title=${`Node ${this.node.node_id} ${nodeHex}`}
                 .client=${this.client}
                 backButton="#"
             ></dashboard-header>
@@ -64,7 +72,7 @@ class MatterNodeView extends LitElement {
             <!-- node details section -->
             <div class="container">
                 <div class="node-title-bar">
-                    <h2>Node ${this.node.node_id}</h2>
+                    <h2>Node ${this.node.node_id} <span class="node-id-hex">${nodeHex}</span></h2>
                     ${showGraphButton
                         ? html`
                               <a href=${graphUrl} class="show-in-graph-button" title="Show in ${graphViewType} graph">
@@ -156,6 +164,13 @@ class MatterNodeView extends LitElement {
             color: var(--md-sys-color-on-background, #333);
         }
 
+        .node-id-hex {
+            font-size: 0.75em;
+            font-weight: 400;
+            color: var(--md-sys-color-on-surface-variant, #666);
+            font-family: monospace;
+        }
+
         .show-in-graph-button {
             display: inline-flex;
             align-items: center;

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

@@ -133,17 +133,31 @@ export abstract class BaseNetworkGraph extends LitElement {
 
         // Subscribe to theme changes - refresh entire graph to update colors
         this._themeUnsubscribe = ThemeService.subscribe(() => {
-            if (this._network) {
-                // Update font colors
+            if (this._network && this._nodesDataSet) {
+                const fontColor = this._getFontColor();
+
+                // Update default font colors for new nodes
                 this._network.setOptions({
                     nodes: {
                         font: {
-                            color: this._getFontColor(),
+                            color: fontColor,
                         },
                     },
                 });
+
                 // Regenerate node icons and edges with new theme colors
                 this._updateGraph();
+
+                // Update font color on all existing nodes in the dataset
+                const allNodes = this._nodesDataSet.get();
+                const nodeUpdates = allNodes.map((node: NetworkGraphNode) => ({
+                    id: node.id,
+                    font: { color: fontColor },
+                }));
+                this._nodesDataSet.update(nodeUpdates);
+
+                // Force redraw
+                this._network.redraw();
             }
         });
     }

package/src/pages/network/device-icons.ts

@@ -278,6 +278,6 @@ export function createUnknownDeviceIconDataUrl(isRouter: boolean = false, isSele
  * @returns A data URL containing the SVG
  */
 export function createWiFiRouterIconDataUrl(isSelected: boolean = false): string {
-    const color = isSelected ? "#1976d2" : "#2196f3"; // Blue for WiFi AP
+    const color = isSelected ? "#1976d2" : "#ff9800"; // Orange for external infrastructure (same as Thread unknown)
     return createIconDataUrl(mdiWifi, color);
 }

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;
 }
 
 /**