@matter-server/dashboard 0.3.2 → 0.3.4

package/dist/esm/pages/network/device-panel.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import "@material/web/list/list";
+import "@material/web/list/list-item";
+import type { MatterNode } from "@matter-server/ws-client";
+import { LitElement, nothing } from "lit";
+import "../../components/ha-svg-icon";
+declare global {
+    interface HTMLElementTagNameMap {
+        "device-panel": DevicePanel;
+    }
+}
+export type PanelType = "wifi" | "ethernet" | "bridges";
+export declare class DevicePanel extends LitElement {
+    type: PanelType;
+    nodeIds: number[];
+    nodes: Record<string, MatterNode>;
+    expanded: boolean;
+    private _isExpanded;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    private _getIcon;
+    private _getTitle;
+    private _toggleExpanded;
+    private _handleNodeClick;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+//# sourceMappingURL=device-panel.d.ts.map

package/dist/esm/pages/network/device-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-panel.d.ts","sourceRoot":"","sources":["../../../../src/pages/network/device-panel.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,yBAAyB,CAAC;AACjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAErD,OAAO,8BAA8B,CAAC;AAGtC,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,cAAc,EAAE,WAAW,CAAC;KAC/B;CACJ;AAED,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;AAExD,qBACa,WAAY,SAAQ,UAAU;IAEhC,IAAI,EAAE,SAAS,CAAU;IAGzB,OAAO,EAAE,MAAM,EAAE,CAAM;IAGvB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAM;IAGvC,QAAQ,UAAQ;IAGvB,OAAO,CAAC,WAAW,CAAQ;IAElB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMlE,OAAO,CAAC,QAAQ;IAWhB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,gBAAgB;IAUf,MAAM;IAsCf,OAAgB,MAAM,0BA0DpB;CACL"}

package/dist/esm/pages/network/device-panel.js

@@ -0,0 +1,183 @@
+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 "@material/web/list/list";
+import "@material/web/list/list-item";
+import { mdiChevronDown, mdiChevronRight, mdiEthernet, mdiRouter, mdiWifi } from "@mdi/js";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import "../../components/ha-svg-icon";
+import { getDeviceName } from "./network-utils.js";
+let DevicePanel = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.type = "wifi";
+    this.nodeIds = [];
+    this.nodes = {};
+    this.expanded = true;
+    this._isExpanded = true;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("expanded")) {
+      this._isExpanded = this.expanded;
+    }
+  }
+  _getIcon() {
+    switch (this.type) {
+      case "wifi":
+        return mdiWifi;
+      case "ethernet":
+        return mdiEthernet;
+      case "bridges":
+        return mdiRouter;
+    }
+  }
+  _getTitle() {
+    switch (this.type) {
+      case "wifi":
+        return "WiFi Devices";
+      case "ethernet":
+        return "Ethernet Devices";
+      case "bridges":
+        return "Bridges";
+    }
+  }
+  _toggleExpanded() {
+    this._isExpanded = !this._isExpanded;
+  }
+  _handleNodeClick(nodeId) {
+    this.dispatchEvent(
+      new CustomEvent("node-selected", {
+        detail: { nodeId },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    if (this.nodeIds.length === 0) {
+      return nothing;
+    }
+    return html`
+            <div class="panel">
+                <div class="header" @click=${this._toggleExpanded}>
+                    <ha-svg-icon .path=${this._getIcon()} class="type-icon"></ha-svg-icon>
+                    <span class="title">${this._getTitle()}</span>
+                    <span class="count">(${this.nodeIds.length})</span>
+                    <ha-svg-icon
+                        .path=${this._isExpanded ? mdiChevronDown : mdiChevronRight}
+                        class="expand-icon"
+                    ></ha-svg-icon>
+                </div>
+                ${this._isExpanded ? html`
+                          <md-list class="device-list">
+                              ${this.nodeIds.map((nodeId) => {
+      const node = this.nodes[nodeId.toString()];
+      if (!node) return nothing;
+      return html`
+                                      <md-list-item type="button" @click=${() => this._handleNodeClick(nodeId)}>
+                                          <div slot="headline">Node ${nodeId}</div>
+                                          <div slot="supporting-text">${getDeviceName(node)}</div>
+                                          <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
+                                      </md-list-item>
+                                  `;
+    })}
+                          </md-list>
+                      ` : nothing}
+            </div>
+        `;
+  }
+};
+DevicePanel.styles = css`
+        :host {
+            display: block;
+        }
+
+        .panel {
+            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;
+            padding: 12px 16px;
+            cursor: pointer;
+            user-select: none;
+            background-color: var(--md-sys-color-surface-container, #f5f5f5);
+        }
+
+        .header:hover {
+            background-color: var(--md-sys-color-surface-container-high, #e8e8e8);
+        }
+
+        .type-icon {
+            --icon-primary-color: var(--md-sys-color-primary, #6200ee);
+            margin-right: 12px;
+        }
+
+        .title {
+            font-weight: 500;
+            color: var(--md-sys-color-on-surface, #333);
+        }
+
+        .count {
+            margin-left: 8px;
+            color: var(--md-sys-color-on-surface-variant, #666);
+            font-size: 0.875rem;
+        }
+
+        .expand-icon {
+            margin-left: auto;
+            --icon-primary-color: var(--md-sys-color-on-surface-variant, #666);
+        }
+
+        .device-list {
+            --md-list-item-leading-space: 16px;
+            --md-list-item-trailing-space: 16px;
+        }
+
+        md-list-item {
+            --md-list-item-one-line-container-height: 48px;
+        }
+
+        md-list-item::part(focus-ring) {
+            display: none;
+        }
+    `;
+__decorateClass([
+  property()
+], DevicePanel.prototype, "type", 2);
+__decorateClass([
+  property({ type: Array })
+], DevicePanel.prototype, "nodeIds", 2);
+__decorateClass([
+  property({ type: Object })
+], DevicePanel.prototype, "nodes", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DevicePanel.prototype, "expanded", 2);
+__decorateClass([
+  state()
+], DevicePanel.prototype, "_isExpanded", 2);
+DevicePanel = __decorateClass([
+  customElement("device-panel")
+], DevicePanel);
+export {
+  DevicePanel
+};
+//# sourceMappingURL=device-panel.js.map

package/dist/esm/pages/network/device-panel.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/pages/network/device-panel.ts"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/pages/network/network-details.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import "@material/web/divider/divider";
+import { type MatterNode } from "@matter-server/ws-client";
+import { LitElement, TemplateResult } from "lit";
+import "../../components/ha-svg-icon";
+import "./update-connections-dialog.js";
+declare global {
+    interface HTMLElementTagNameMap {
+        "network-details": NetworkDetails;
+    }
+}
+export declare class NetworkDetails extends LitElement {
+    selectedNodeId: number | string | null;
+    nodes: Record<string, MatterNode>;
+    unknownDevices: Map<string, {
+        extAddressHex: string;
+        isRouter: boolean;
+        seenBy: string[];
+        bestRssi: number | null;
+    }>;
+    wifiAccessPoints: Map<string, {
+        bssid: string;
+        connectedNodes: string[];
+    }>;
+    private client;
+    private _showUpdateDialog;
+    private _handleClose;
+    private _handleSelectNode;
+    /** Handle keyboard interaction for clickable elements (Enter/Space activates) */
+    private _handleKeyDown;
+    private _formatExtAddress;
+    private _getSignalIcon;
+    private _getSignalIconFromColor;
+    /**
+     * Format a node ID as hex for Matter log format display.
+     * Returns format like "@1:7b" for node ID 123.
+     */
+    private _formatNodeIdHex;
+    private _renderWiFiInfo;
+    private _renderThreadInfo;
+    private _renderNodeInfo;
+    /**
+     * Find the neighbor entry for an unknown device from a node's neighbor table.
+     */
+    private _findNeighborEntry;
+    private _renderUnknownDeviceInfo;
+    /**
+     * Determine if update connections button should be shown.
+     */
+    private _canUpdateConnections;
+    /**
+     * Get the type of the currently selected node for dialog variant.
+     */
+    private _getSelectedNodeType;
+    /**
+     * Get online neighbors for a Thread node.
+     */
+    private _getOnlineNeighbors;
+    /**
+     * Get online nodes that see an unknown device.
+     */
+    private _getOnlineSeenByNodes;
+    /**
+     * Get the name of the selected node for display in dialog.
+     */
+    private _getSelectedNodeName;
+    private _handleUpdateConnections;
+    private _handleDialogClose;
+    private _renderWiFiAccessPointInfo;
+    render(): TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+//# sourceMappingURL=network-details.d.ts.map

package/dist/esm/pages/network/network-details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"network-details.d.ts","sourceRoot":"","sources":["../../../../src/pages/network/network-details.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,+BAA+B,CAAC;AACvC,OAAO,EAAmC,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE5F,OAAO,EAAE,UAAU,EAAE,cAAc,EAAsB,MAAM,KAAK,CAAC;AAGrE,OAAO,8BAA8B,CAAC;AAqBtC,OAAO,gCAAgC,CAAC;AAExC,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,iBAAiB,EAAE,cAAc,CAAC;KACrC;CACJ;AAED,qBACa,cAAe,SAAQ,UAAU;IAEnC,cAAc,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAQ;IAG9C,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAM;IAGvC,cAAc,EAAE,GAAG,CACtB,MAAM,EACN;QAAE,aAAa,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAC;QAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAC1F,CAAa;IAGP,gBAAgB,EAAE,GAAG,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,cAAc,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAa;IAG9F,OAAO,CAAC,MAAM,CAAgB;IAG9B,OAAO,CAAC,iBAAiB,CAAkB;IAE3C,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,iBAAiB;IAUzB,iFAAiF;IACjF,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,uBAAuB;IAM/B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,eAAe;IAwDvB,OAAO,CAAC,iBAAiB;IA4GzB,OAAO,CAAC,eAAe;IAqDvB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,wBAAwB;IA4FhC;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAuB7B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAY5B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAwB3B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAc7B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,0BAA0B;IAgEzB,MAAM;IAkIf,OAAgB,MAAM,0BAwQpB;CACL"}