@matter-server/dashboard 0.6.2 → 0.6.3

package/dist/esm/pages/network/network-details.js

@@ -24,13 +24,11 @@ import "../../components/ha-svg-icon";
 import { formatNodeAddressFromAny, getEffectiveFabricIndex } from "../../util/format_hex.js";
 import { getCssVar, reducedMotionStyles } from "../../util/shared-styles.js";
 import {
-  buildExtAddrMap,
-  buildRloc16Map,
+  decodeMeshcopStateBitmap,
   getDeviceName,
   getNetworkType,
-  getNodeConnections,
+  getNodeConnectionsFromPairs,
   getRoutableDestinationsCount,
-  getSignalColor,
   getSignalColorFromRssi,
   getThreadChannel,
   getThreadExtendedAddressHex,
@@ -38,17 +36,22 @@ import {
   getThreadRoleName,
   getWiFiDiagnostics,
   getWiFiSecurityTypeName,
-  getWiFiVersionName,
-  parseNeighborTable
+  getWiFiVersionName
 } from "./network-utils.js";
 import "./update-connections-dialog.js";
 let NetworkDetails = class extends LitElement {
   constructor() {
     super(...arguments);
     this.selectedNodeId = null;
+    this.hideOfflineNodes = false;
+    this.hideWeakSignalEdges = false;
+    this.hideMediumSignalEdges = false;
+    this.hideStrongSignalEdges = false;
     this.nodes = {};
     this.unknownDevices = /* @__PURE__ */ new Map();
+    this.borderRouters = /* @__PURE__ */ new Map();
     this.wifiAccessPoints = /* @__PURE__ */ new Map();
+    this.threadEdgePairs = /* @__PURE__ */ new Map();
     this._showUpdateDialog = false;
   }
   _handleClose() {
@@ -75,16 +78,6 @@ let NetworkDetails = class extends LitElement {
       this._handleSelectNode(nodeId);
     }
   }
-  _formatExtAddress(extAddr) {
-    if (extAddr === void 0 || extAddr === "") return "Unknown";
-    if (typeof extAddr === "bigint") {
-      return extAddr.toString(16).toUpperCase().padStart(16, "0");
-    }
-    return extAddr;
-  }
-  _getSignalIcon(neighbor) {
-    return this._getSignalIconFromColor(getSignalColor(neighbor));
-  }
   _getSignalIconFromColor(color) {
     const strongColor = getCssVar("--signal-color-strong", "#4caf50");
     const mediumColor = getCssVar("--signal-color-medium", "#ff9800");
@@ -148,10 +141,13 @@ let NetworkDetails = class extends LitElement {
     const threadRole = getThreadRole(node);
     const channel = getThreadChannel(node);
     const extAddressHex = getThreadExtendedAddressHex(node);
-    const extAddrMap = buildExtAddrMap(this.nodes);
-    const rloc16Map = buildRloc16Map(this.nodes);
     const nodeId = String(node.node_id);
-    const connections = getNodeConnections(nodeId, this.nodes, extAddrMap, rloc16Map);
+    const connections = getNodeConnectionsFromPairs(nodeId, this.threadEdgePairs, this.nodes, {
+      hideOfflineNodes: this.hideOfflineNodes,
+      hideWeakSignalEdges: this.hideWeakSignalEdges,
+      hideMediumSignalEdges: this.hideMediumSignalEdges,
+      hideStrongSignalEdges: this.hideStrongSignalEdges
+    });
     return html`
             <div class="section">
                 <h4>Thread Network</h4>
@@ -231,7 +227,13 @@ let NetworkDetails = class extends LitElement {
                                                             >` : nothing}${conn.pathCost !== void 0 ? html`<span class="route-info"
                                                                 >, Cost: ${conn.pathCost}</span
                                                             >` : nothing}
-                                                      ${!conn.isOutgoing ? html` <span class="direction-hint">(reverse)</span> ` : nothing}
+                                                      ${conn.isReverseOnly ? html`
+                                                                <span
+                                                                    class="direction-hint reverse-only"
+                                                                    title="Peer reports this node but this node has no matching neighbor-table entry. Possible one-way visibility (range, TX power, or stale neighbor table)."
+                                                                    >← one-way</span
+                                                                >
+                                                            ` : !conn.isOutgoing ? html` <span class="direction-hint">(reverse)</span> ` : nothing}
                                                   </div>
                                               </div>
                                           </div>
@@ -287,24 +289,12 @@ let NetworkDetails = class extends LitElement {
                   ` : nothing}
         `;
   }
-  /**
-   * Find the neighbor entry for an unknown device from a node's neighbor table.
-   */
-  _findNeighborEntry(node, unknownExtAddrHex) {
-    const neighbors = parseNeighborTable(node);
-    for (const neighbor of neighbors) {
-      const neighborHex = this._formatExtAddress(neighbor.extAddress);
-      if (neighborHex === unknownExtAddrHex) {
-        return neighbor;
-      }
-    }
-    return null;
-  }
   _renderUnknownDeviceInfo(deviceId) {
-    const unknown = this.unknownDevices.get(deviceId);
-    if (!unknown) {
+    const device = this.unknownDevices.get(deviceId);
+    if (!device || device.kind !== "unknown") {
       return html` <p>Unknown device data not available</p> `;
     }
+    const unknown = device;
     return html`
             <div class="section">
                 <h4>Unknown Device</h4>
@@ -316,6 +306,18 @@ let NetworkDetails = class extends LitElement {
                     <span class="label">Extended Address:</span>
                     <span class="value mono">${unknown.extAddressHex}</span>
                 </div>
+                ${unknown.networkName !== void 0 ? html`
+                          <div class="info-row">
+                              <span class="label">Thread Network:</span>
+                              <span class="value">${unknown.networkName}</span>
+                          </div>
+                      ` : nothing}
+                ${unknown.extendedPanIdHex !== void 0 ? html`
+                          <div class="info-row">
+                              <span class="label">Extended PAN ID:</span>
+                              <span class="value mono">${unknown.extendedPanIdHex}</span>
+                          </div>
+                      ` : nothing}
                 ${unknown.bestRssi !== null ? html`
                           <div class="info-row">
                               <span class="label">Best RSSI:</span>
@@ -324,71 +326,286 @@ let NetworkDetails = class extends LitElement {
                       ` : nothing}
             </div>
 
-            ${unknown.seenBy.length > 0 ? html`
-                      <md-divider></md-divider>
-                      <div class="section">
-                          <h4>Neighbors (${unknown.seenBy.length})</h4>
-                          <div class="neighbors-list">
-                              ${unknown.seenBy.toSorted((a, b) => {
-      const score = (nodeId) => {
-        const n = this.nodes[nodeId.toString()];
-        if (!n) return -Infinity;
-        const entry = this._findNeighborEntry(n, unknown.extAddressHex);
-        if (!entry) return -Infinity;
-        const rssi = entry.avgRssi ?? entry.lastRssi;
-        if (rssi !== null && rssi !== void 0) return rssi;
-        if (entry.lqi !== null && entry.lqi !== void 0) return entry.lqi;
+            ${this._renderExternalDeviceNeighbors(deviceId)}
+
+            <md-divider></md-divider>
+            <div class="section">
+                <p class="hint-text">
+                    This device appears in Thread neighbor tables but is not commissioned to this fabric. It may be a
+                    Thread Border Router whose Thread radio MAC differs from its MeshCoP border-agent ID (common with
+                    Apple and Aqara), or a device from another Matter ecosystem.
+                </p>
+            </div>
+        `;
+  }
+  /**
+   * Neighbor list shared by external-device panels (unknown + BR). Uses the
+   * same edge pairs as the graph so panel and graph agree on which links
+   * survive filtering. Sorted by best RSSI/LQI signal, descending.
+   */
+  _renderExternalDeviceNeighbors(deviceId) {
+    const connections = getNodeConnectionsFromPairs(deviceId, this.threadEdgePairs, this.nodes, {
+      hideOfflineNodes: this.hideOfflineNodes,
+      hideWeakSignalEdges: this.hideWeakSignalEdges,
+      hideMediumSignalEdges: this.hideMediumSignalEdges,
+      hideStrongSignalEdges: this.hideStrongSignalEdges
+    });
+    if (connections.length === 0) return nothing;
+    return html`
+            <md-divider></md-divider>
+            <div class="section">
+                <h4>Neighbors (${connections.length})</h4>
+                <div class="neighbors-list">
+                    ${connections.toSorted((a, b) => {
+      const score = (conn) => {
+        if (conn.rssi !== null && conn.rssi !== void 0) return conn.rssi;
+        if (conn.lqi !== null && conn.lqi !== void 0) return conn.lqi;
         return -Infinity;
       };
       return score(b) - score(a);
-    }).map((nodeId) => {
-      const node = this.nodes[nodeId.toString()];
-      if (!node) return nothing;
-      const neighborEntry = this._findNeighborEntry(node, unknown.extAddressHex);
-      const signalColor = neighborEntry ? getSignalColor(neighborEntry) : getCssVar("--graph-node-fallback", "#999");
-      const rssi = neighborEntry?.avgRssi ?? neighborEntry?.lastRssi ?? null;
-      const lqi = neighborEntry?.lqi;
+    }).map((conn) => {
+      if (!conn.connectedNode) return nothing;
       return html`
-                                          <div
-                                              class="neighbor-item clickable"
-                                              role="button"
-                                              tabindex="0"
-                                              @click=${() => this._handleSelectNode(nodeId)}
-                                              @keydown=${(e) => this._handleKeyDown(e, nodeId)}
-                                          >
-                                              ${neighborEntry ? html`
-                                                        <ha-svg-icon
-                                                            .path=${this._getSignalIcon(neighborEntry)}
-                                                            style="--icon-primary-color: ${signalColor}"
-                                                        ></ha-svg-icon>
-                                                    ` : nothing}
-                                              <div class="neighbor-info">
-                                                  <div class="neighbor-name">
-                                                      Node ${nodeId}
-                                                      <span class="node-id-hex">${this._formatNodeIdHex(nodeId)}</span>:
-                                                      ${getDeviceName(node)}
-                                                  </div>
-                                                  ${neighborEntry ? html`
-                                                            <div class="neighbor-signal">
-                                                                ${rssi !== null ? html`RSSI: ${rssi} dBm, ` : nothing}
-                                                                ${lqi !== void 0 ? html`LQI: ${lqi}` : nothing}
-                                                            </div>
-                                                        ` : nothing}
-                                              </div>
-                                          </div>
-                                      `;
+                                <div
+                                    class="neighbor-item clickable"
+                                    role="button"
+                                    tabindex="0"
+                                    @click=${() => this._handleSelectNode(conn.connectedNodeId)}
+                                    @keydown=${(e) => this._handleKeyDown(e, conn.connectedNodeId)}
+                                >
+                                    <ha-svg-icon
+                                        .path=${this._getSignalIconFromColor(conn.signalColor)}
+                                        style="--icon-primary-color: ${conn.signalColor}"
+                                    ></ha-svg-icon>
+                                    <div class="neighbor-info">
+                                        <div class="neighbor-name">
+                                            Node ${conn.connectedNodeId}
+                                            <span class="node-id-hex"
+                                                >${this._formatNodeIdHex(conn.connectedNodeId)}</span
+                                            >: ${getDeviceName(conn.connectedNode)}
+                                        </div>
+                                        <div class="neighbor-signal">
+                                            ${conn.rssi !== null ? html`RSSI: ${conn.rssi} dBm, ` : nothing}
+                                            ${conn.lqi !== null ? html`LQI: ${conn.lqi}` : nothing}
+                                        </div>
+                                    </div>
+                                </div>
+                            `;
     })}
-                          </div>
+                </div>
+            </div>
+        `;
+  }
+  /**
+   * Identity rows for a Border Router (network name, vendor, model, Thread version, ext address).
+   * Caller controls the surrounding <div class="section"> + heading.
+   */
+  _renderBorderRouterIdentityRows(br, includeExtAddr) {
+    return html`
+            ${br.networkName ? html`
+                      <div class="info-row">
+                          <span class="label">Network name:</span>
+                          <span class="value">${br.networkName}</span>
                       </div>
                   ` : nothing}
-
-            <md-divider></md-divider>
+            ${br.vendorName ? html`
+                      <div class="info-row">
+                          <span class="label">Vendor:</span>
+                          <span class="value">${br.vendorName}</span>
+                      </div>
+                  ` : nothing}
+            ${br.modelName ? html`
+                      <div class="info-row">
+                          <span class="label">Model:</span>
+                          <span class="value">${br.modelName}</span>
+                      </div>
+                  ` : nothing}
+            ${br.threadVersion ? html`
+                      <div class="info-row">
+                          <span class="label">Thread version:</span>
+                          <span class="value">${br.threadVersion}</span>
+                      </div>
+                  ` : nothing}
+            ${includeExtAddr ? html`
+                      <div class="info-row">
+                          <span class="label">Extended Address:</span>
+                          <span class="value mono">${br.extAddressHex}</span>
+                      </div>
+                  ` : nothing}
+        `;
+  }
+  /**
+   * Render the MeshCoP state bitmap as decoded fields (BBR role, connection mode, Thread
+   * interface status, availability, ePSKc) plus the raw hex underneath. Reserved values are
+   * rendered as numeric so a future spec extension stays visible.
+   */
+  _renderStateBitmap(hex) {
+    if (hex === void 0) return nothing;
+    const decoded = decodeMeshcopStateBitmap(hex);
+    if (decoded === void 0) {
+      return html`
+                <div class="info-row">
+                    <span class="label">State bitmap:</span>
+                    <span class="value mono">${hex}</span>
+                </div>
+            `;
+    }
+    const stateParts = new Array();
+    stateParts.push(decoded.bbr ? `BBR (${decoded.bbrFunction ?? "?"})` : "not BBR");
+    if (decoded.threadRole !== void 0) {
+      stateParts.push(`Thread ${decoded.threadRole}`);
+    }
+    if (decoded.threadInterfaceStatus !== void 0) {
+      stateParts.push(decoded.threadInterfaceStatus);
+    }
+    return html`
+            <div class="info-row">
+                <span class="label">State:</span>
+                <span class="value">${stateParts.join(", ")}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">Connection:</span>
+                <span class="value">${decoded.connectionMode ?? `reserved (${decoded.connectionModeValue})`}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">Availability:</span>
+                <span class="value">${decoded.availability ?? `reserved (${decoded.availabilityValue})`}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">ePSKc:</span>
+                <span class="value">${decoded.epskcSupported ? "supported" : "not supported"}</span>
+            </div>
+            ${decoded.multiAilStateValue !== 0 ? html`
+                      <div class="info-row">
+                          <span class="label">Multi-AIL:</span>
+                          <span class="value">
+                              ${decoded.multiAilState ?? `reserved (${decoded.multiAilStateValue})`}
+                          </span>
+                      </div>
+                  ` : nothing}
+            <div class="info-row">
+                <span class="label">State bitmap (raw):</span>
+                <span class="value mono">${hex}</span>
+            </div>
+        `;
+  }
+  /**
+   * Network-info rows for a Border Router (extended PAN ID, partition, timestamps, state, domain, agent ID).
+   * Returns nothing if no fields are populated, so the caller can skip the surrounding section.
+   */
+  _renderBorderRouterNetworkRows(br) {
+    const hasAny = br.extendedPanIdHex !== void 0 || br.partitionIdHex !== void 0 || br.activeTimestampHex !== void 0 || br.stateBitmapHex !== void 0 || br.domainName !== void 0 || br.borderAgentIdHex !== void 0;
+    if (!hasAny) return nothing;
+    return html`
+            ${br.extendedPanIdHex ? html`
+                      <div class="info-row">
+                          <span class="label">Extended PAN ID:</span>
+                          <span class="value mono">${br.extendedPanIdHex}</span>
+                      </div>
+                  ` : nothing}
+            ${br.partitionIdHex ? html`
+                      <div class="info-row">
+                          <span class="label">Partition ID:</span>
+                          <span class="value mono">${br.partitionIdHex}</span>
+                      </div>
+                  ` : nothing}
+            ${br.activeTimestampHex ? html`
+                      <div class="info-row">
+                          <span class="label">Active timestamp:</span>
+                          <span class="value mono">${br.activeTimestampHex}</span>
+                      </div>
+                  ` : nothing}
+            ${this._renderStateBitmap(br.stateBitmapHex)}
+            ${br.domainName ? html`
+                      <div class="info-row">
+                          <span class="label">Domain:</span>
+                          <span class="value">${br.domainName}</span>
+                      </div>
+                  ` : nothing}
+            ${br.borderAgentIdHex ? html`
+                      <div class="info-row">
+                          <span class="label">Border agent ID:</span>
+                          <span class="value mono">${br.borderAgentIdHex}</span>
+                      </div>
+                  ` : nothing}
+        `;
+  }
+  /**
+   * Address rows for a Border Router (hostname, IPs, ports, sources).
+   */
+  _renderBorderRouterAddressRows(br) {
+    const hasAny = br.hostname !== void 0 || br.addresses.length > 0 || br.meshcopPort !== void 0 || br.trelPort !== void 0 || br.sources.length > 0;
+    if (!hasAny) return nothing;
+    return html`
+            ${br.hostname ? html`
+                      <div class="info-row">
+                          <span class="label">Hostname:</span>
+                          <span class="value mono">${br.hostname}</span>
+                      </div>
+                  ` : nothing}
+            ${br.addresses.map(
+      (addr) => html`
+                    <div class="info-row">
+                        <span class="label">Address:</span>
+                        <span class="value mono">${addr}</span>
+                    </div>
+                `
+    )}
+            ${br.meshcopPort !== void 0 ? html`
+                      <div class="info-row">
+                          <span class="label">meshcop port:</span>
+                          <span class="value">${br.meshcopPort}</span>
+                      </div>
+                  ` : nothing}
+            ${br.trelPort !== void 0 ? html`
+                      <div class="info-row">
+                          <span class="label">trel port:</span>
+                          <span class="value">${br.trelPort}</span>
+                      </div>
+                  ` : nothing}
+            ${br.sources.length > 0 ? html`
+                      <div class="info-row">
+                          <span class="label">Sources:</span>
+                          <span class="value">${br.sources.join(", ")}</span>
+                      </div>
+                  ` : nothing}
+        `;
+  }
+  _renderBorderRouterInfo(deviceId) {
+    const device = this.unknownDevices.get(deviceId);
+    if (!device || device.kind !== "br") {
+      return html` <p>Border router data not available</p> `;
+    }
+    const br = device;
+    const networkRows = this._renderBorderRouterNetworkRows(br);
+    const addressRows = this._renderBorderRouterAddressRows(br);
+    return html`
             <div class="section">
-                <p class="hint-text">
-                    This device appears in Thread neighbor tables but is not commissioned to this fabric. It may be a
-                    Thread Border Router or a device from another Matter ecosystem.
-                </p>
+                <h4>Border Router</h4>
+                ${this._renderBorderRouterIdentityRows(br, true)}
+                ${br.bestRssi !== null ? html`
+                          <div class="info-row">
+                              <span class="label">Best RSSI:</span>
+                              <span class="value">${br.bestRssi} dBm</span>
+                          </div>
+                      ` : nothing}
             </div>
+
+            ${networkRows !== nothing ? html`
+                      <md-divider></md-divider>
+                      <div class="section">
+                          <h4>Thread Network</h4>
+                          ${networkRows}
+                      </div>
+                  ` : nothing}
+            ${addressRows !== nothing ? html`
+                      <md-divider></md-divider>
+                      <div class="section">
+                          <h4>Addresses</h4>
+                          ${addressRows}
+                      </div>
+                  ` : nothing}
+            ${this._renderExternalDeviceNeighbors(deviceId)}
         `;
   }
   /**
@@ -398,8 +615,8 @@ let NetworkDetails = class extends LitElement {
     if (this.selectedNodeId === null) return false;
     const isAccessPoint = typeof this.selectedNodeId === "string" && this.selectedNodeId.startsWith("ap_");
     if (isAccessPoint) return false;
-    const isUnknown = typeof this.selectedNodeId === "string" && this.selectedNodeId.startsWith("unknown_");
-    if (isUnknown) {
+    const isExternal = typeof this.selectedNodeId === "string" && (this.selectedNodeId.startsWith("unknown_") || this.selectedNodeId.startsWith("br_"));
+    if (isExternal) {
       return this._getOnlineSeenByNodes().length > 0;
     }
     const node = this.nodes[this.selectedNodeId.toString()];
@@ -412,7 +629,7 @@ let NetworkDetails = class extends LitElement {
    * Get the type of the currently selected node for dialog variant.
    */
   _getSelectedNodeType() {
-    if (typeof this.selectedNodeId === "string" && this.selectedNodeId.startsWith("unknown_")) {
+    if (typeof this.selectedNodeId === "string" && (this.selectedNodeId.startsWith("unknown_") || this.selectedNodeId.startsWith("br_"))) {
       return "unknown";
     }
     const node = this.nodes[this.selectedNodeId.toString()];
@@ -429,15 +646,10 @@ let NetworkDetails = class extends LitElement {
     if (!node) return [];
     const networkType = getNetworkType(node);
     if (networkType === "thread") {
-      const extAddrMap = buildExtAddrMap(this.nodes);
-      const rloc16Map = buildRloc16Map(this.nodes);
-      const connections = getNodeConnections(nodeId, this.nodes, extAddrMap, rloc16Map);
+      const connections = getNodeConnectionsFromPairs(nodeId, this.threadEdgePairs, this.nodes);
       return connections.filter((conn) => {
-        if (typeof conn.connectedNodeId === "string" && conn.connectedNodeId.startsWith("unknown_")) {
-          return false;
-        }
-        const connectedNode = this.nodes[String(conn.connectedNodeId)];
-        return connectedNode?.available === true;
+        if (conn.isUnknown) return false;
+        return conn.connectedNode?.available === true;
       }).map((conn) => String(conn.connectedNodeId));
     }
     return [];
@@ -446,12 +658,12 @@ let NetworkDetails = class extends LitElement {
    * Get online nodes that see an unknown device.
    */
   _getOnlineSeenByNodes() {
-    if (typeof this.selectedNodeId !== "string" || !this.selectedNodeId.startsWith("unknown_")) {
+    if (typeof this.selectedNodeId !== "string" || !this.selectedNodeId.startsWith("unknown_") && !this.selectedNodeId.startsWith("br_")) {
       return [];
     }
-    const unknown = this.unknownDevices.get(this.selectedNodeId);
-    if (!unknown) return [];
-    return unknown.seenBy.filter((nodeId) => {
+    const device = this.unknownDevices.get(this.selectedNodeId);
+    if (!device) return [];
+    return device.seenBy.filter((nodeId) => {
       const node = this.nodes[nodeId.toString()];
       return node?.available === true;
     });
@@ -460,11 +672,19 @@ let NetworkDetails = class extends LitElement {
    * Get the name of the selected node for display in dialog.
    */
   _getSelectedNodeName() {
-    if (typeof this.selectedNodeId === "string" && this.selectedNodeId.startsWith("unknown_")) {
-      const unknown = this.unknownDevices.get(this.selectedNodeId);
-      if (!unknown) return "External Device";
-      const typeLabel = unknown.isRouter ? "External Router" : "External Device";
-      return `${typeLabel} (${unknown.extAddressHex.slice(-8)})`;
+    if (typeof this.selectedNodeId === "string") {
+      if (this.selectedNodeId.startsWith("br_")) {
+        const device = this.unknownDevices.get(this.selectedNodeId);
+        if (!device || device.kind !== "br") return "Border Router";
+        const label = device.networkName ?? device.vendorName ?? "Border Router";
+        return `${label} (${device.extAddressHex.slice(-8)})`;
+      }
+      if (this.selectedNodeId.startsWith("unknown_")) {
+        const device = this.unknownDevices.get(this.selectedNodeId);
+        if (!device || device.kind !== "unknown") return "External Device";
+        const typeLabel = device.isRouter ? "External Router" : "External Device";
+        return `${typeLabel} (${device.extAddressHex.slice(-8)})`;
+      }
     }
     const node = this.nodes[this.selectedNodeId.toString()];
     return node ? getDeviceName(node) : "Unknown";
@@ -474,6 +694,12 @@ let NetworkDetails = class extends LitElement {
   }
   _handleDialogClose() {
     this._showUpdateDialog = false;
+    this.dispatchEvent(
+      new CustomEvent("connections-updated", {
+        bubbles: true,
+        composed: true
+      })
+    );
   }
   _renderWiFiAccessPointInfo(apId) {
     const ap = this.wifiAccessPoints.get(apId);
@@ -538,6 +764,33 @@ let NetworkDetails = class extends LitElement {
             </div>
         `;
   }
+  /**
+   * Annotation shown on a commissioned Thread node that is also a discovered Border Router.
+   * Mirrors the BR Identity/Network/Addresses sections, sans the redundant ext-address row.
+   */
+  _renderCommissionedNodeBorderRouterAnnotation(node) {
+    const xaHex = getThreadExtendedAddressHex(node);
+    if (!xaHex) return nothing;
+    const br = this.borderRouters.get(xaHex);
+    if (!br) return nothing;
+    const networkRows = this._renderBorderRouterNetworkRows(br);
+    const addressRows = this._renderBorderRouterAddressRows(br);
+    return html`
+            <md-divider></md-divider>
+            <div class="section">
+                <h4>Also a Border Router</h4>
+                ${this._renderBorderRouterIdentityRows(br, false)}
+                ${networkRows !== nothing ? html`
+                          <div class="subsection-label">Thread Network</div>
+                          ${networkRows}
+                      ` : nothing}
+                ${addressRows !== nothing ? html`
+                          <div class="subsection-label">Addresses</div>
+                          ${addressRows}
+                      ` : nothing}
+            </div>
+        `;
+  }
   render() {
     if (this.selectedNodeId === null) {
       return html`
@@ -584,6 +837,44 @@ let NetworkDetails = class extends LitElement {
                       ` : nothing}
             `;
     }
+    const borderRouterId = typeof this.selectedNodeId === "string" && this.selectedNodeId.startsWith("br_") ? this.selectedNodeId : null;
+    if (borderRouterId !== null) {
+      const onlineSeenByNodes = this._getOnlineSeenByNodes();
+      return html`
+                <div class="details-panel">
+                    <div class="header">
+                        <h3>Border Router</h3>
+                        <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._renderBorderRouterInfo(borderRouterId)}</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}
+            `;
+    }
     const isAccessPoint = typeof this.selectedNodeId === "string" && this.selectedNodeId.startsWith("ap_");
     if (isAccessPoint) {
       return html`
@@ -632,7 +923,9 @@ let NetworkDetails = class extends LitElement {
                         </button>
                     </div>
                 </div>
-                <div class="content">${this._renderNodeInfo(node)}</div>
+                <div class="content">
+                    ${this._renderNodeInfo(node)}${this._renderCommissionedNodeBorderRouterAnnotation(node)}
+                </div>
                 <div class="footer">
                     <a href="#node/${this.selectedNodeId}" class="view-link">View node details</a>
                 </div>
@@ -765,6 +1058,15 @@ NetworkDetails.styles = [
                 letter-spacing: 0.5px;
             }
 
+            .subsection-label {
+                margin: 12px 0 4px 0;
+                font-size: 0.75rem;
+                font-weight: 500;
+                color: var(--md-sys-color-on-surface-variant, #666);
+                text-transform: uppercase;
+                letter-spacing: 0.4px;
+            }
+
             .info-row {
                 display: flex;
                 justify-content: space-between;
@@ -848,6 +1150,14 @@ NetworkDetails.styles = [
                 opacity: 0.8;
             }
 
+            .direction-hint.reverse-only {
+                font-style: normal;
+                font-weight: 500;
+                opacity: 1;
+                color: var(--md-sys-color-error, #b3261e);
+                cursor: help;
+            }
+
             .route-info {
                 color: var(--md-sys-color-tertiary, #7d5260);
                 font-size: 0.85em;
@@ -922,15 +1232,33 @@ NetworkDetails.styles = [
 __decorateClass([
   property()
 ], NetworkDetails.prototype, "selectedNodeId", 2);
+__decorateClass([
+  property({ type: Boolean })
+], NetworkDetails.prototype, "hideOfflineNodes", 2);
+__decorateClass([
+  property({ type: Boolean })
+], NetworkDetails.prototype, "hideWeakSignalEdges", 2);
+__decorateClass([
+  property({ type: Boolean })
+], NetworkDetails.prototype, "hideMediumSignalEdges", 2);
+__decorateClass([
+  property({ type: Boolean })
+], NetworkDetails.prototype, "hideStrongSignalEdges", 2);
 __decorateClass([
   property({ type: Object })
 ], NetworkDetails.prototype, "nodes", 2);
 __decorateClass([
   property({ type: Object })
 ], NetworkDetails.prototype, "unknownDevices", 2);
+__decorateClass([
+  property({ attribute: false })
+], NetworkDetails.prototype, "borderRouters", 2);
 __decorateClass([
   property({ type: Object })
 ], NetworkDetails.prototype, "wifiAccessPoints", 2);
+__decorateClass([
+  property({ type: Object })
+], NetworkDetails.prototype, "threadEdgePairs", 2);
 __decorateClass([
   consume({ context: clientContext })
 ], NetworkDetails.prototype, "client", 2);