@matter-server/dashboard 0.3.2 → 0.3.3

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

@@ -0,0 +1,197 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import {
+  mdiAccessPoint,
+  mdiCeilingLight,
+  mdiDoorOpen,
+  mdiFan,
+  mdiGauge,
+  mdiHelp,
+  mdiHome,
+  mdiLightbulb,
+  mdiLock,
+  mdiMotionSensor,
+  mdiPowerPlug,
+  mdiRouter,
+  mdiSpeaker,
+  mdiTelevision,
+  mdiThermometer,
+  mdiToggleSwitch,
+  mdiWater,
+  mdiWifi
+} from "@mdi/js";
+import { ThemeService } from "../../util/theme-service.js";
+function getDefaultIconColor() {
+  return ThemeService.effectiveTheme === "dark" ? "#b0b0b0" : "#666666";
+}
+const DeviceTypes = {
+  // Lighting
+  ON_OFF_LIGHT: 256,
+  DIMMABLE_LIGHT: 257,
+  COLOR_TEMPERATURE_LIGHT: 268,
+  EXTENDED_COLOR_LIGHT: 269,
+  // Plugs/Outlets
+  ON_OFF_PLUG: 266,
+  DIMMABLE_PLUG: 267,
+  // Switches
+  ON_OFF_SWITCH: 259,
+  DIMMER_SWITCH: 260,
+  COLOR_DIMMER_SWITCH: 261,
+  GENERIC_SWITCH: 15,
+  // Sensors
+  CONTACT_SENSOR: 21,
+  OCCUPANCY_SENSOR: 263,
+  TEMPERATURE_SENSOR: 770,
+  HUMIDITY_SENSOR: 775,
+  LIGHT_SENSOR: 262,
+  PRESSURE_SENSOR: 773,
+  FLOW_SENSOR: 774,
+  // HVAC
+  THERMOSTAT: 769,
+  FAN: 43,
+  // Closures
+  DOOR_LOCK: 10,
+  WINDOW_COVERING: 514,
+  // Media
+  SPEAKER: 34,
+  BASIC_VIDEO_PLAYER: 40,
+  TELEVISION: 35,
+  // Infrastructure
+  ROOT_NODE: 22,
+  BRIDGE: 14,
+  AGGREGATOR: 14,
+  // Same as bridge
+  // Water
+  WATER_LEAK_DETECTOR: 67,
+  WATER_VALVE: 66
+};
+const deviceTypeToIcon = {
+  // Lighting
+  [DeviceTypes.ON_OFF_LIGHT]: mdiLightbulb,
+  [DeviceTypes.DIMMABLE_LIGHT]: mdiLightbulb,
+  [DeviceTypes.COLOR_TEMPERATURE_LIGHT]: mdiCeilingLight,
+  [DeviceTypes.EXTENDED_COLOR_LIGHT]: mdiCeilingLight,
+  // Plugs/Outlets
+  [DeviceTypes.ON_OFF_PLUG]: mdiPowerPlug,
+  [DeviceTypes.DIMMABLE_PLUG]: mdiPowerPlug,
+  // Switches
+  [DeviceTypes.ON_OFF_SWITCH]: mdiToggleSwitch,
+  [DeviceTypes.DIMMER_SWITCH]: mdiToggleSwitch,
+  [DeviceTypes.COLOR_DIMMER_SWITCH]: mdiToggleSwitch,
+  [DeviceTypes.GENERIC_SWITCH]: mdiToggleSwitch,
+  // Sensors
+  [DeviceTypes.CONTACT_SENSOR]: mdiDoorOpen,
+  [DeviceTypes.OCCUPANCY_SENSOR]: mdiMotionSensor,
+  [DeviceTypes.TEMPERATURE_SENSOR]: mdiThermometer,
+  [DeviceTypes.HUMIDITY_SENSOR]: mdiGauge,
+  [DeviceTypes.LIGHT_SENSOR]: mdiGauge,
+  [DeviceTypes.PRESSURE_SENSOR]: mdiGauge,
+  [DeviceTypes.FLOW_SENSOR]: mdiGauge,
+  // HVAC
+  [DeviceTypes.THERMOSTAT]: mdiThermometer,
+  [DeviceTypes.FAN]: mdiFan,
+  // Closures
+  [DeviceTypes.DOOR_LOCK]: mdiLock,
+  [DeviceTypes.WINDOW_COVERING]: mdiHome,
+  // Media
+  [DeviceTypes.SPEAKER]: mdiSpeaker,
+  [DeviceTypes.BASIC_VIDEO_PLAYER]: mdiTelevision,
+  [DeviceTypes.TELEVISION]: mdiTelevision,
+  // Infrastructure
+  [DeviceTypes.ROOT_NODE]: mdiHome,
+  [DeviceTypes.BRIDGE]: mdiRouter,
+  [DeviceTypes.AGGREGATOR]: mdiRouter,
+  // Water
+  [DeviceTypes.WATER_LEAK_DETECTOR]: mdiWater,
+  [DeviceTypes.WATER_VALVE]: mdiWater
+};
+const threadRoleToIcon = {
+  5: mdiRouter,
+  // Router
+  6: mdiAccessPoint
+  // Leader
+};
+function getPrimaryDeviceType(node) {
+  const deviceTypeList1 = node.attributes["1/29/0"];
+  if (deviceTypeList1?.length) {
+    const entry = deviceTypeList1[0];
+    return entry?.["0"] ?? entry?.deviceType;
+  }
+  const deviceTypeList0 = node.attributes["0/29/0"];
+  if (deviceTypeList0?.length) {
+    const entry = deviceTypeList0[0];
+    return entry?.["0"] ?? entry?.deviceType;
+  }
+  return void 0;
+}
+function getDeviceIcon(node, threadRole) {
+  if (threadRole !== void 0 && threadRoleToIcon[threadRole]) {
+    const deviceType2 = getPrimaryDeviceType(node);
+    if (deviceType2 === DeviceTypes.ROOT_NODE || deviceType2 === DeviceTypes.BRIDGE || node.is_bridge) {
+      return threadRoleToIcon[threadRole];
+    }
+  }
+  if (node.is_bridge) {
+    return mdiRouter;
+  }
+  const deviceType = getPrimaryDeviceType(node);
+  if (deviceType !== void 0 && deviceTypeToIcon[deviceType]) {
+    return deviceTypeToIcon[deviceType];
+  }
+  return mdiHome;
+}
+function getNetworkTypeIcon(networkType) {
+  switch (networkType) {
+    case "thread":
+      return mdiAccessPoint;
+    case "wifi":
+      return mdiWifi;
+    case "ethernet":
+      return mdiRouter;
+    default:
+      return mdiHome;
+  }
+}
+function createIconDataUrl(iconPath, color, size = 48) {
+  const svg = `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${size}" height="${size}">
+            <circle cx="12" cy="12" r="11" fill="white" stroke="${color}" stroke-width="1"/>
+            <path d="${iconPath}" fill="${color}" transform="scale(0.6) translate(8,8)"/>
+        </svg>
+    `.trim();
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+function createNodeIconDataUrl(node, threadRole, isSelected = false, isOffline = false) {
+  const iconPath = getDeviceIcon(node, threadRole);
+  let color;
+  if (isSelected) {
+    color = isOffline ? "#b71c1c" : "#1976d2";
+  } else if (isOffline) {
+    color = "#d32f2f";
+  } else {
+    color = getDefaultIconColor();
+  }
+  return createIconDataUrl(iconPath, color);
+}
+function createUnknownDeviceIconDataUrl(isRouter = false, isSelected = false) {
+  const iconPath = isRouter ? mdiAccessPoint : mdiHelp;
+  const color = isSelected ? "#1976d2" : "#ff9800";
+  return createIconDataUrl(iconPath, color);
+}
+function createWiFiRouterIconDataUrl(isSelected = false) {
+  const color = isSelected ? "#1976d2" : "#2196f3";
+  return createIconDataUrl(mdiWifi, color);
+}
+export {
+  createIconDataUrl,
+  createNodeIconDataUrl,
+  createUnknownDeviceIconDataUrl,
+  createWiFiRouterIconDataUrl,
+  getDeviceIcon,
+  getNetworkTypeIcon,
+  getPrimaryDeviceType
+};
+//# sourceMappingURL=device-icons.js.map

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

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

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,47 @@
+/**
+ * @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";
+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 _handleClose;
+    private _handleSelectNode;
+    /** Handle keyboard interaction for clickable elements (Enter/Space activates) */
+    private _handleKeyDown;
+    private _formatExtAddress;
+    private _getSignalIcon;
+    private _getSignalIconFromColor;
+    private _renderWiFiInfo;
+    private _renderThreadInfo;
+    private _renderNodeInfo;
+    /**
+     * Find the neighbor entry for an unknown device from a node's neighbor table.
+     */
+    private _findNeighborEntry;
+    private _renderUnknownDeviceInfo;
+    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;AAEH,OAAO,+BAA+B,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,EAAE,UAAU,EAAE,cAAc,EAAsB,MAAM,KAAK,CAAC;AAErE,OAAO,8BAA8B,CAAC;AAoBtC,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;IAE9F,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,OAAO,CAAC,eAAe;IAwDvB,OAAO,CAAC,iBAAiB;IAgFzB,OAAO,CAAC,eAAe;IAqDvB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,wBAAwB;IAwFhC,OAAO,CAAC,0BAA0B;IA4DzB,MAAM;IAoEf,OAAgB,MAAM,0BAmOpB;CACL"}