@matter-server/dashboard 0.3.2 → 0.3.4

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

@@ -0,0 +1,904 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { consume } from "@lit/context";
+import "@material/web/divider/divider";
+import { isTestNodeId } from "@matter-server/ws-client";
+import { mdiClose, mdiRefresh, mdiSignal, mdiSignalCellular1, mdiSignalCellular2 } from "@mdi/js";
+import { LitElement, css, html, nothing } from "lit";
+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 {
+  buildExtAddrMap,
+  getDeviceName,
+  getNetworkType,
+  getNodeConnections,
+  getRoutableDestinationsCount,
+  getSignalColor,
+  getSignalColorFromRssi,
+  getThreadChannel,
+  getThreadExtendedAddressHex,
+  getThreadRole,
+  getThreadRoleName,
+  getWiFiDiagnostics,
+  getWiFiSecurityTypeName,
+  getWiFiVersionName,
+  parseNeighborTable
+} from "./network-utils.js";
+import "./update-connections-dialog.js";
+let NetworkDetails = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.selectedNodeId = null;
+    this.nodes = {};
+    this.unknownDevices = /* @__PURE__ */ new Map();
+    this.wifiAccessPoints = /* @__PURE__ */ new Map();
+    this._showUpdateDialog = false;
+  }
+  _handleClose() {
+    this.dispatchEvent(
+      new CustomEvent("close", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _handleSelectNode(nodeId) {
+    this.dispatchEvent(
+      new CustomEvent("select-node", {
+        detail: { nodeId },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /** Handle keyboard interaction for clickable elements (Enter/Space activates) */
+  _handleKeyDown(event, nodeId) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      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) {
+    const color = getSignalColor(neighbor);
+    if (color === "#4caf50") return mdiSignal;
+    if (color === "#ff9800") return mdiSignalCellular2;
+    return mdiSignalCellular1;
+  }
+  _getSignalIconFromColor(color) {
+    if (color === "#4caf50") return mdiSignal;
+    if (color === "#ff9800") return mdiSignalCellular2;
+    return mdiSignalCellular1;
+  }
+  /**
+   * Format a node ID as hex for Matter log format display.
+   * Returns format like "@1:7b" for node ID 123.
+   */
+  _formatNodeIdHex(nodeId) {
+    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);
+  }
+  _renderWiFiInfo(node) {
+    const wifiDiag = getWiFiDiagnostics(node);
+    if (!wifiDiag.bssid && wifiDiag.rssi === null) {
+      return nothing;
+    }
+    const signalColor = getSignalColorFromRssi(wifiDiag.rssi);
+    return html`
+            <div class="section">
+                <h4>WiFi Network</h4>
+                ${wifiDiag.bssid ? html`
+                          <div class="info-row">
+                              <span class="label">BSSID:</span>
+                              <span class="value mono">${wifiDiag.bssid}</span>
+                          </div>
+                      ` : nothing}
+                ${wifiDiag.rssi !== null ? html`
+                          <div class="info-row">
+                              <span class="label">Signal:</span>
+                              <span class="value" style="color: ${signalColor}">${wifiDiag.rssi} dBm</span>
+                          </div>
+                      ` : nothing}
+                ${wifiDiag.channel !== null ? html`
+                          <div class="info-row">
+                              <span class="label">Channel:</span>
+                              <span class="value">${wifiDiag.channel}</span>
+                          </div>
+                      ` : nothing}
+                ${wifiDiag.securityType !== null ? html`
+                          <div class="info-row">
+                              <span class="label">Security:</span>
+                              <span class="value">${getWiFiSecurityTypeName(wifiDiag.securityType)}</span>
+                          </div>
+                      ` : nothing}
+                ${wifiDiag.wifiVersion !== null ? html`
+                          <div class="info-row">
+                              <span class="label">WiFi Version:</span>
+                              <span class="value">${getWiFiVersionName(wifiDiag.wifiVersion)}</span>
+                          </div>
+                      ` : nothing}
+            </div>
+        `;
+  }
+  _renderThreadInfo(node) {
+    const threadRole = getThreadRole(node);
+    const channel = getThreadChannel(node);
+    const extAddressHex = getThreadExtendedAddressHex(node);
+    const extAddrMap = buildExtAddrMap(this.nodes);
+    const nodeId = String(node.node_id);
+    const connections = getNodeConnections(nodeId, this.nodes, extAddrMap);
+    return html`
+            <div class="section">
+                <h4>Thread Network</h4>
+                <div class="info-row">
+                    <span class="label">Role:</span>
+                    <span class="value">${getThreadRoleName(threadRole)}</span>
+                </div>
+                ${channel !== void 0 ? html`
+                          <div class="info-row">
+                              <span class="label">Channel:</span>
+                              <span class="value">${channel}</span>
+                          </div>
+                      ` : nothing}
+                ${extAddressHex ? html`
+                          <div class="info-row">
+                              <span class="label">Extended Address:</span>
+                              <span class="value mono">${extAddressHex}</span>
+                          </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 ? html`
+                      <md-divider></md-divider>
+                      <div class="section">
+                          <h4>Connections (${connections.length})</h4>
+                          <div class="neighbors-list">
+                              ${connections.map((conn) => {
+      return html`
+                                      <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">
+                                                  ${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.rssi !== null && conn.lqi !== null ? ", " : nothing}${conn.lqi !== null ? html`LQI: ${conn.lqi}` : nothing}${conn.bidirectionalLqi !== void 0 ? html`<span class="route-info"
+                                                            >, Bidir: ${conn.bidirectionalLqi}</span
+                                                        >` : 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}
+                                              </div>
+                                          </div>
+                                      </div>
+                                  `;
+    })}
+                          </div>
+                      </div>
+                  ` : nothing}
+        `;
+  }
+  _renderNodeInfo(node) {
+    const networkType = getNetworkType(node);
+    return html`
+            <div class="section">
+                <h4>Device Info</h4>
+                <div class="info-row">
+                    <span class="label">Name:</span>
+                    <span class="value">${getDeviceName(node)}</span>
+                </div>
+                <div class="info-row">
+                    <span class="label">Vendor:</span>
+                    <span class="value">${node.vendorName ?? "Unknown"}</span>
+                </div>
+                <div class="info-row">
+                    <span class="label">Product:</span>
+                    <span class="value">${node.productName ?? "Unknown"}</span>
+                </div>
+                ${node.serialNumber ? html`
+                          <div class="info-row">
+                              <span class="label">Serial:</span>
+                              <span class="value mono">${node.serialNumber}</span>
+                          </div>
+                      ` : nothing}
+                <div class="info-row">
+                    <span class="label">Network:</span>
+                    <span class="value">${networkType.charAt(0).toUpperCase() + networkType.slice(1)}</span>
+                </div>
+                <div class="info-row">
+                    <span class="label">Status:</span>
+                    <span class="value ${node.available ? "status-online" : "status-offline"}"
+                        >${node.available ? "Online" : "Offline"}</span
+                    >
+                </div>
+            </div>
+
+            ${networkType === "thread" ? html`
+                      <md-divider></md-divider>
+                      ${this._renderThreadInfo(node)}
+                  ` : nothing}
+            ${networkType === "wifi" ? html`
+                      <md-divider></md-divider>
+                      ${this._renderWiFiInfo(node)}
+                  ` : 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) {
+      return html`<p>Unknown device data not available</p>`;
+    }
+    return html`
+            <div class="section">
+                <h4>Unknown Device</h4>
+                <div class="info-row">
+                    <span class="label">Type:</span>
+                    <span class="value">${unknown.isRouter ? "Router (external)" : "End Device (external)"}</span>
+                </div>
+                <div class="info-row">
+                    <span class="label">Extended Address:</span>
+                    <span class="value mono">${unknown.extAddressHex}</span>
+                </div>
+                ${unknown.bestRssi !== null ? html`
+                          <div class="info-row">
+                              <span class="label">Best RSSI:</span>
+                              <span class="value">${unknown.bestRssi} dBm</span>
+                          </div>
+                      ` : 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.map((nodeId) => {
+      const node = this.nodes[nodeId.toString()];
+      if (!node) return nothing;
+      const neighborEntry = this._findNeighborEntry(node, unknown.extAddressHex);
+      const signalColor = neighborEntry ? getSignalColor(neighborEntry) : "#999";
+      const rssi = neighborEntry?.avgRssi ?? neighborEntry?.lastRssi ?? null;
+      const lqi = neighborEntry?.lqi;
+      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>
+                      </div>
+                  ` : nothing}
+
+            <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 or a device from another Matter ecosystem.
+                </p>
+            </div>
+        `;
+  }
+  /**
+   * Determine if update connections button should be shown.
+   */
+  _canUpdateConnections() {
+    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) {
+      return this._getOnlineSeenByNodes().length > 0;
+    }
+    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.
+   */
+  _getSelectedNodeType() {
+    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.
+   */
+  _getOnlineNeighbors(nodeId) {
+    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) => {
+        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));
+    }
+    return [];
+  }
+  /**
+   * Get online nodes that see an unknown device.
+   */
+  _getOnlineSeenByNodes() {
+    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.
+   */
+  _getSelectedNodeName() {
+    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";
+  }
+  _handleUpdateConnections() {
+    this._showUpdateDialog = true;
+  }
+  _handleDialogClose() {
+    this._showUpdateDialog = false;
+  }
+  _renderWiFiAccessPointInfo(apId) {
+    const ap = this.wifiAccessPoints.get(apId);
+    if (!ap) {
+      return html`<p>Access point data not available</p>`;
+    }
+    return html`
+            <div class="section">
+                <h4>WiFi Access Point</h4>
+                <div class="info-row">
+                    <span class="label">BSSID:</span>
+                    <span class="value mono">${ap.bssid}</span>
+                </div>
+                <div class="info-row">
+                    <span class="label">Connected devices:</span>
+                    <span class="value">${ap.connectedNodes.length}</span>
+                </div>
+            </div>
+            ${ap.connectedNodes.length > 0 ? html`
+                      <md-divider></md-divider>
+                      <div class="section">
+                          <h4>Connected Nodes</h4>
+                          <div class="connected-nodes-list">
+                              ${ap.connectedNodes.map((nodeId) => {
+      const node = this.nodes[nodeId.toString()];
+      if (!node) return nothing;
+      const wifiDiag = getWiFiDiagnostics(node);
+      const signalColor = getSignalColorFromRssi(wifiDiag.rssi);
+      return html`
+                                      <div
+                                          class="connected-node-item clickable"
+                                          role="button"
+                                          tabindex="0"
+                                          @click=${() => this._handleSelectNode(nodeId)}
+                                          @keydown=${(e) => this._handleKeyDown(e, nodeId)}
+                                      >
+                                          <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
+                                                </div>` : nothing}
+                                      </div>
+                                  `;
+    })}
+                          </div>
+                      </div>
+                  ` : nothing}
+            <md-divider></md-divider>
+            <div class="section">
+                <p class="hint-text">
+                    This is a WiFi access point that Matter devices connect to. It is not a Matter device itself.
+                </p>
+            </div>
+        `;
+  }
+  render() {
+    if (this.selectedNodeId === null) {
+      return html`
+                <div class="empty-state">
+                    <p>Select a device to view details</p>
+                </div>
+            `;
+    }
+    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>
+                        <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)}</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`
+                <div class="details-panel">
+                    <div class="header">
+                        <h3>Access Point</h3>
+                        <button class="close-button" @click=${this._handleClose} aria-label="Close details panel">
+                            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                        </button>
+                    </div>
+                    <div class="content">${this._renderWiFiAccessPointInfo(this.selectedNodeId)}</div>
+                </div>
+            `;
+    }
+    const node = this.nodes[this.selectedNodeId.toString()];
+    if (!node) {
+      return html`
+                <div class="empty-state">
+                    <p>Device not found</p>
+                </div>
+            `;
+    }
+    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}
+                        <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}
+        `;
+  }
+};
+NetworkDetails.styles = css`
+        :host {
+            display: block;
+            height: 100%;
+        }
+
+        .empty-state {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: var(--md-sys-color-on-surface-variant, #666);
+            text-align: center;
+            padding: 24px;
+        }
+
+        .details-panel {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            background-color: var(--md-sys-color-surface, #fff);
+            border-radius: 8px;
+            border: 1px solid var(--md-sys-color-outline-variant, #ccc);
+            overflow: hidden;
+        }
+
+        .header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 12px 16px;
+            background-color: var(--md-sys-color-surface-container, #f5f5f5);
+            border-bottom: 1px solid var(--md-sys-color-outline-variant, #ccc);
+        }
+
+        .header h3 {
+            margin: 0;
+            font-size: 1rem;
+            font-weight: 500;
+            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;
+            padding: 4px;
+            cursor: pointer;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .close-button:hover {
+            background-color: var(--md-sys-color-surface-container-high, #e8e8e8);
+        }
+
+        .close-button ha-svg-icon {
+            --icon-primary-color: var(--md-sys-color-on-surface-variant, #666);
+        }
+
+        .content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 0;
+        }
+
+        .section {
+            padding: 16px;
+        }
+
+        .section h4 {
+            margin: 0 0 12px 0;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: var(--md-sys-color-primary, #6200ee);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .info-row {
+            display: flex;
+            justify-content: space-between;
+            padding: 6px 0;
+            font-size: 0.875rem;
+        }
+
+        .label {
+            color: var(--md-sys-color-on-surface-variant, #666);
+        }
+
+        .value {
+            color: var(--md-sys-color-on-surface, #333);
+            font-weight: 500;
+            text-align: right;
+            word-break: break-all;
+            max-width: 60%;
+        }
+
+        .value.mono {
+            font-family: monospace;
+            font-size: 0.8rem;
+        }
+
+        .status-online {
+            color: #4caf50;
+        }
+
+        .status-offline {
+            color: var(--danger-color, #f44336);
+        }
+
+        .neighbors-list {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .neighbor-item {
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+            padding: 8px;
+            background-color: var(--md-sys-color-surface-container, #f5f5f5);
+            border-radius: 4px;
+        }
+
+        .neighbor-item.clickable {
+            cursor: pointer;
+            transition: background-color 0.15s;
+        }
+
+        .neighbor-item.clickable:hover {
+            background-color: var(--md-sys-color-surface-container-high, #e8e8e8);
+        }
+
+        .neighbor-item ha-svg-icon {
+            flex-shrink: 0;
+            margin-top: 2px;
+        }
+
+        .neighbor-info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .neighbor-name {
+            font-size: 0.875rem;
+            color: var(--md-sys-color-on-surface, #333);
+            word-break: break-word;
+        }
+
+        .neighbor-signal {
+            font-size: 0.75rem;
+            color: var(--md-sys-color-on-surface-variant, #666);
+            margin-top: 2px;
+        }
+
+        .direction-hint {
+            font-style: italic;
+            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);
+            text-align: center;
+        }
+
+        .view-link {
+            color: var(--md-sys-color-primary, #6200ee);
+            text-decoration: none;
+            font-size: 0.875rem;
+            font-weight: 500;
+        }
+
+        .view-link:hover {
+            text-decoration: underline;
+        }
+
+        md-divider {
+            --md-divider-color: var(--md-sys-color-outline-variant, #ccc);
+        }
+
+        .hint-text {
+            font-size: 0.8rem;
+            color: var(--md-sys-color-on-surface-variant, #666);
+            line-height: 1.4;
+            margin: 0;
+        }
+
+        .connected-nodes-list {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .connected-node-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 8px;
+            background-color: var(--md-sys-color-surface-container, #f5f5f5);
+            border-radius: 4px;
+        }
+
+        .connected-node-item.clickable {
+            cursor: pointer;
+            transition: background-color 0.15s;
+        }
+
+        .connected-node-item.clickable:hover {
+            background-color: var(--md-sys-color-surface-container-high, #e8e8e8);
+        }
+
+        .connected-node-item .node-name {
+            font-size: 0.875rem;
+            color: var(--md-sys-color-on-surface, #333);
+            word-break: break-word;
+        }
+
+        .connected-node-item .node-signal {
+            font-size: 0.8rem;
+            font-weight: 500;
+            flex-shrink: 0;
+            margin-left: 8px;
+        }
+    `;
+__decorateClass([
+  property()
+], NetworkDetails.prototype, "selectedNodeId", 2);
+__decorateClass([
+  property({ type: Object })
+], NetworkDetails.prototype, "nodes", 2);
+__decorateClass([
+  property({ type: Object })
+], NetworkDetails.prototype, "unknownDevices", 2);
+__decorateClass([
+  property({ type: Object })
+], NetworkDetails.prototype, "wifiAccessPoints", 2);
+__decorateClass([
+  consume({ context: clientContext })
+], NetworkDetails.prototype, "client", 2);
+__decorateClass([
+  state()
+], NetworkDetails.prototype, "_showUpdateDialog", 2);
+NetworkDetails = __decorateClass([
+  customElement("network-details")
+], NetworkDetails);
+export {
+  NetworkDetails
+};
+//# sourceMappingURL=network-details.js.map