@matter-server/dashboard 0.7.0-alpha.0-20260512-b404bea → 0.7.0

package/src/pages/cluster-commands/clusters/chime-commands.ts

@@ -0,0 +1,272 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import "@material/web/button/filled-button";
+import "@material/web/iconbutton/icon-button";
+import "@material/web/select/outlined-select";
+import "@material/web/select/select-option";
+import "@material/web/switch/switch";
+import { mdiPlay } from "@mdi/js";
+import { css, html, nothing } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import "../../../components/ha-svg-icon.js";
+import { handleAsync, handleAsyncEvent } from "../../../util/async-handler.js";
+import {
+    CHIME_CLUSTER_ID,
+    play as chimePlay,
+    readEnabled,
+    readRevision,
+    readSelected,
+    readSounds,
+    setEnabled,
+    setSelected,
+} from "../../../util/chime.js";
+import { BaseClusterCommands } from "../base-cluster-commands.js";
+import { registerClusterCommands } from "../registry.js";
+
+@customElement("chime-cluster-commands")
+class ChimeClusterCommands extends BaseClusterCommands {
+    @state() private _lastPlayed: { chimeId: number; at: number } | null = null;
+    @state() private _playDisabledUntil = 0;
+    private _unsubscribeNodes?: () => void;
+    private _unsubscribeEvents?: () => void;
+
+    override updated(changedProperties: Map<string, unknown>) {
+        super.updated(changedProperties);
+        if (changedProperties.has("client") && this.client && !this._unsubscribeNodes) {
+            this._unsubscribeNodes = this.client.addEventListener("nodes_changed", () => {
+                this.requestUpdate();
+            });
+            this._unsubscribeEvents = this.client.addNodeEventListener(ev => {
+                if (
+                    ev.cluster_id !== CHIME_CLUSTER_ID ||
+                    ev.endpoint_id !== this.endpoint ||
+                    String(ev.node_id) !== String(this.node.node_id) ||
+                    ev.event_id !== 0
+                ) {
+                    return;
+                }
+                const raw = ev.data;
+                if (raw === null || typeof raw !== "object") return;
+                const d = raw as Record<string, unknown>;
+                const named = d["chimeID"];
+                const tagged = d["0"];
+                const chimeId = typeof named === "number" ? named : typeof tagged === "number" ? tagged : null;
+                if (chimeId !== null) this.onChimeStartedPlaying(chimeId);
+            });
+        }
+    }
+
+    override disconnectedCallback() {
+        super.disconnectedCallback();
+        this._unsubscribeNodes?.();
+        this._unsubscribeEvents?.();
+        this._lastPlayed = null;
+    }
+
+    override render() {
+        if (!this.node || this.cluster !== CHIME_CLUSTER_ID) return nothing;
+        const sounds = readSounds(this.node, this.endpoint);
+        const selected = readSelected(this.node, this.endpoint);
+        const enabled = readEnabled(this.node, this.endpoint);
+        const revision = readRevision(this.node, this.endpoint);
+        const showPerRowPlay = revision >= 2;
+        const showLastPlayed = revision >= 2 && this._lastPlayed !== null;
+        const playLocked = Date.now() < this._playDisabledUntil;
+        const lastSoundName = showLastPlayed
+            ? (sounds.find(s => s.chimeId === this._lastPlayed!.chimeId)?.name ?? `#${this._lastPlayed!.chimeId}`)
+            : null;
+
+        return html`
+            <details class="command-panel" open>
+                <summary>Chime</summary>
+                <div class="command-content">
+                    <div class="top-row">
+                        <label class="enabled">
+                            <md-switch
+                                ?selected=${enabled}
+                                @change=${handleAsyncEvent((e: Event) =>
+                                    setEnabled(
+                                        this.client,
+                                        this.node.node_id,
+                                        this.endpoint,
+                                        // md-switch exposes `.selected` but has no typed CustomEvent subclass
+                                        (e.target as HTMLElement & { selected: boolean }).selected,
+                                    ),
+                                )}
+                            ></md-switch>
+                            <span>Enabled</span>
+                        </label>
+                        <div class="selected">
+                            <span class="muted">Selected:</span>
+                            <md-outlined-select
+                                .value=${selected !== null ? String(selected) : ""}
+                                ?disabled=${sounds.length === 0}
+                                @change=${handleAsyncEvent((e: Event) => {
+                                    const v = Number((e.target as HTMLSelectElement).value);
+                                    return setSelected(this.client, this.node.node_id, this.endpoint, v);
+                                })}
+                            >
+                                ${sounds.map(
+                                    s => html`
+                                        <md-select-option value=${String(s.chimeId)}>
+                                            <div slot="headline">${s.name}</div>
+                                        </md-select-option>
+                                    `,
+                                )}
+                            </md-outlined-select>
+                        </div>
+                        <md-filled-button
+                            ?disabled=${!enabled || selected === null || playLocked}
+                            @click=${handleAsync(() => this._handlePlay())}
+                        >
+                            <ha-svg-icon slot="icon" .path=${mdiPlay}></ha-svg-icon>
+                            Play
+                        </md-filled-button>
+                    </div>
+
+                    <div class="sounds">
+                        <div class="sounds-header">Installed sounds (${sounds.length})</div>
+                        ${sounds.length === 0
+                            ? html`<div class="muted empty">No sounds installed.</div>`
+                            : sounds.map(
+                                  s => html`
+                                      <div
+                                          class="sound-row ${s.chimeId === selected ? "selected" : ""}"
+                                          @click=${handleAsync(() =>
+                                              setSelected(this.client, this.node.node_id, this.endpoint, s.chimeId),
+                                          )}
+                                      >
+                                          <span class="pid">#${s.chimeId}</span>
+                                          <span class="pname">${s.name}</span>
+                                          ${s.chimeId === selected
+                                              ? html`<span class="muted">✓ selected</span>`
+                                              : nothing}
+                                          <span class="grow"></span>
+                                          ${showPerRowPlay
+                                              ? html`<md-icon-button
+                                                    ?disabled=${!enabled}
+                                                    @click=${handleAsyncEvent((e: Event) => {
+                                                        e.stopPropagation();
+                                                        return chimePlay(
+                                                            this.client,
+                                                            this.node.node_id,
+                                                            this.endpoint,
+                                                            s.chimeId,
+                                                        );
+                                                    })}
+                                                >
+                                                    <ha-svg-icon .path=${mdiPlay}></ha-svg-icon>
+                                                </md-icon-button>`
+                                              : nothing}
+                                      </div>
+                                  `,
+                              )}
+                    </div>
+
+                    ${showLastPlayed
+                        ? html`<div class="last-played">
+                              Last played: ${lastSoundName} · ${new Date(this._lastPlayed!.at).toLocaleTimeString()}
+                          </div>`
+                        : nothing}
+                </div>
+            </details>
+        `;
+    }
+
+    public onChimeStartedPlaying(chimeId: number): void {
+        this._lastPlayed = { chimeId, at: Date.now() };
+    }
+
+    private async _handlePlay() {
+        this._playDisabledUntil = Date.now() + 1000;
+        this.requestUpdate();
+        try {
+            await chimePlay(this.client, this.node.node_id, this.endpoint);
+        } finally {
+            setTimeout(() => this.requestUpdate(), 1000);
+        }
+    }
+
+    static override styles = [
+        ...(Array.isArray(BaseClusterCommands.styles) ? BaseClusterCommands.styles : [BaseClusterCommands.styles]),
+        css`
+            .top-row {
+                display: flex;
+                align-items: center;
+                gap: 16px;
+                flex-wrap: wrap;
+                padding-bottom: 12px;
+            }
+            .enabled {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+            }
+            .selected {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+                flex: 1;
+                min-width: 200px;
+            }
+            .muted {
+                color: var(--md-sys-color-on-surface-variant);
+            }
+            .sounds {
+                border-top: 1px solid var(--md-sys-color-outline-variant);
+                padding-top: 8px;
+            }
+            .sounds-header {
+                font-weight: 500;
+                margin-bottom: 6px;
+            }
+            .sound-row {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                padding: 6px 8px;
+                border-radius: 4px;
+                cursor: pointer;
+            }
+            .sound-row:hover {
+                background: var(--md-sys-color-surface-container-high);
+            }
+            .sound-row.selected {
+                background: var(--md-sys-color-secondary-container);
+            }
+            .pid {
+                font-family: var(--monospace-font, monospace);
+                color: var(--md-sys-color-on-surface-variant);
+                font-size: 0.85rem;
+            }
+            .pname {
+                font-weight: 500;
+            }
+            .grow {
+                flex: 1;
+            }
+            .empty {
+                font-style: italic;
+            }
+            .last-played {
+                margin-top: 12px;
+                padding-top: 8px;
+                border-top: 1px solid var(--md-sys-color-outline-variant);
+                font-size: 0.85rem;
+                color: var(--md-sys-color-on-surface-variant);
+            }
+        `,
+    ];
+}
+
+registerClusterCommands(CHIME_CLUSTER_ID, "chime-cluster-commands");
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "chime-cluster-commands": ChimeClusterCommands;
+    }
+}

package/src/pages/cluster-commands/index.ts

@@ -16,6 +16,8 @@ export { getClusterCommandsTag, hasClusterCommands, registerClusterCommands } fr
 export { BaseClusterCommands } from "./base-cluster-commands.js";
 
 // Cluster command components (auto-register on import)
+import "./clusters/avsum-commands.js";
 import "./clusters/basic-information-commands.js";
+import "./clusters/chime-commands.js";
 import "./clusters/level-control-commands.js";
 import "./clusters/on-off-commands.js";

package/src/pages/components/header.ts

@@ -9,10 +9,12 @@ import "@material/web/divider/divider";
 import "@material/web/iconbutton/icon-button";
 import "@material/web/list/list";
 import "@material/web/list/list-item";
+import { consume } from "@lit/context";
 import { MatterClient } from "@matter-server/ws-client";
 import { mdiArrowLeft, mdiBrightnessAuto, mdiCog, mdiLogout, mdiWeatherNight, mdiWeatherSunny } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { clientContext, tickContext } from "../../client/client-context.js";
 import { showSettingsDialog } from "../../components/dialogs/settings/show-settings-dialog.js";
 import "../../components/ha-svg-icon";
 import { DevModeService } from "../../util/dev-mode-service.js";
@@ -35,8 +37,12 @@ export class DashboardHeader extends LitElement {
     @property({ type: Boolean }) public hasThreadDevices?: boolean;
     @property({ type: Boolean }) public hasWifiDevices?: boolean;
 
+    @consume({ context: clientContext })
     public client?: MatterClient;
 
+    @consume({ context: tickContext, subscribe: true })
+    protected _tick = 0;
+
     @state() private _themePreference: ThemePreference = ThemeService.preference;
     @state() private _effectiveTheme: EffectiveTheme = ThemeService.effectiveTheme;
     @state() private _devMode = DevModeService.active;
@@ -66,9 +72,7 @@ export class DashboardHeader extends LitElement {
     }
 
     private _openSettings() {
-        if (this.client) {
-            showSettingsDialog(this.client);
-        }
+        showSettingsDialog();
     }
 
     private _getThemeIcon(): string {

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

@@ -13,14 +13,16 @@ import "@material/web/list/list";
 import "@material/web/list/list-item";
 import { consume } from "@lit/context";
 import { MatterClient, MatterNode, UpdateSource } from "@matter-server/ws-client";
-import { mdiChatProcessing, mdiLink, mdiShareVariant, mdiTrashCan, mdiUpdate } from "@mdi/js";
+import { mdiChatProcessing, mdiLink, mdiShareVariant, mdiTrashCan, mdiUpdate, mdiVideo } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { clientContext, tickContext } from "../../client/client-context.js";
 import { DeviceType } from "../../client/models/descriptions.js";
 import { showAlertDialog, showPromptDialog } from "../../components/dialog-box/show-dialog-box.js";
 import { showNodeBindingDialog } from "../../components/dialogs/binding/show-node-binding-dialog.js";
 import { handleAsync } from "../../util/async-handler.js";
 import "../../components/ha-svg-icon";
+import "../camera-overlay.js";
 import { getDeviceIcon } from "../../util/device-icons.js";
 import { getEndpointDeviceTypes } from "../matter-endpoint-view.js";
 import { bindingContext } from "./context.js";
@@ -59,21 +61,26 @@ function getNodeDeviceTypes(node: MatterNode): DeviceType[] {
 
 @customElement("node-details")
 export class NodeDetails extends LitElement {
+    @consume({ context: clientContext })
     public client!: MatterClient;
 
+    @consume({ context: tickContext, subscribe: true })
+    protected _tick = 0;
+
     @property() public node?: MatterNode;
 
     @state()
     private _updateInitiated: boolean = false;
 
     @consume({ context: bindingContext })
-    @property({ attribute: false })
     endpoint!: number;
 
     protected override render() {
         if (!this.node) return html``;
 
         const bindings = this.node.attributes[this.endpoint + "/30/0"];
+        const deviceTypeIds = getEndpointDeviceTypes(this.node, this.endpoint).map(d => d.id);
+        const isCamera = deviceTypeIds.includes(0x0142) || deviceTypeIds.includes(0x0143);
 
         return html`
             <md-list>
@@ -129,6 +136,17 @@ export class NodeDetails extends LitElement {
                               : html`<md-outlined-button @click=${handleAsync(() => this._searchUpdate())}
                                     >Update<ha-svg-icon slot="icon" .path=${mdiUpdate}></ha-svg-icon
                                 ></md-outlined-button>`}
+                        ${isCamera
+                            ? html`
+                                  <md-outlined-button
+                                      @click=${() => this._openCameraOverlay()}
+                                      ?disabled=${!this.node.available}
+                                  >
+                                      Live View
+                                      <ha-svg-icon slot="icon" .path=${mdiVideo}></ha-svg-icon>
+                                  </md-outlined-button>
+                              `
+                            : nothing}
                         ${bindings
                             ? html`
                                   <md-outlined-button @click=${handleAsync(() => this._binding())}>
@@ -199,12 +217,24 @@ export class NodeDetails extends LitElement {
 
     private async _binding() {
         try {
-            showNodeBindingDialog(this.client, this.node!, this.endpoint);
+            showNodeBindingDialog(this.node!, this.endpoint);
         } catch (err: unknown) {
             console.error("Binding error:", err);
         }
     }
 
+    private _openCameraOverlay(): void {
+        const overlay = document.createElement("camera-overlay");
+        overlay.nodeId = this.node!.node_id;
+        overlay.endpointId = this.endpoint;
+        const root = document.querySelector("matter-dashboard-app");
+        if (root) {
+            root.renderRoot.appendChild(overlay);
+        } else {
+            document.body.appendChild(overlay);
+        }
+    }
+
     private async _searchUpdate() {
         const nodeUpdate = await this.client.checkNodeUpdate(this.node!.node_id);
         if (!nodeUpdate) {

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

@@ -11,10 +11,12 @@ import "@material/web/divider/divider";
 import "@material/web/iconbutton/icon-button";
 import "@material/web/list/list";
 import "@material/web/list/list-item";
+import { consume } from "@lit/context";
 import { MatterClient } from "@matter-server/ws-client";
 import { mdiFile, mdiPlus } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement } from "lit/decorators.js";
+import { clientContext, tickContext } from "../../client/client-context.js";
 import { showAlertDialog, showPromptDialog } from "../../components/dialog-box/show-dialog-box.js";
 import { showCommissionNodeDialog } from "../../components/dialogs/commission-node-dialog/show-commission-node-dialog.js";
 import "../../components/ha-svg-icon";
@@ -22,8 +24,12 @@ import { handleAsync } from "../../util/async-handler.js";
 
 @customElement("server-details")
 export class ServerDetails extends LitElement {
+    @consume({ context: clientContext })
     public client?: MatterClient;
 
+    @consume({ context: tickContext, subscribe: true })
+    protected _tick = 0;
+
     protected override render() {
         if (!this.client) return html``;
 
@@ -71,7 +77,7 @@ export class ServerDetails extends LitElement {
     }
 
     private _commissionNode() {
-        showCommissionNodeDialog(this.client!);
+        showCommissionNodeDialog();
     }
 
     private async _uploadDiagnosticsDumpFile() {
@@ -96,7 +102,7 @@ export class ServerDetails extends LitElement {
             reader.readAsText(selectedFile, "UTF-8");
             reader.onload = async () => {
                 try {
-                    await this.client!.importTestNode(reader.result?.toString() ?? "");
+                    await this.client?.importTestNode(reader.result?.toString() ?? "");
                 } catch (err: any) {
                     showAlertDialog({
                         title: "Failed to import test node",

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

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { provide } from "@lit/context";
+import { consume, provide } from "@lit/context";
 import "@material/web/button/outlined-button";
 import "@material/web/divider/divider";
 import "@material/web/iconbutton/icon-button";
@@ -16,6 +16,7 @@ import { mdiAlertCircleOutline, mdiPencil, mdiPlay, mdiRefresh } from "@mdi/js";
 import { css, html, LitElement, nothing, type TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { clientContext, tickContext } from "../client/client-context.js";
 import { clusters } from "../client/models/descriptions.js";
 import { showAlertDialog } from "../components/dialog-box/show-dialog-box.js";
 import { showAttributeWriteDialog } from "../components/dialogs/dev/show-attribute-write-dialog.js";
@@ -26,7 +27,7 @@ import "../pages/components/node-details";
 import { DevModeService } from "../util/dev-mode-service.js";
 import { formatHex, formatNodeAddress, getEffectiveFabricIndex } from "../util/format_hex.js";
 import { notFoundStyles } from "../util/shared-styles.js";
-import { getClusterCommandsTag } from "./cluster-commands/index.js";
+import { BaseClusterCommands, getClusterCommandsTag } from "./cluster-commands/index.js";
 import { bindingContext } from "./components/context.js";
 
 declare global {
@@ -74,8 +75,12 @@ function clusterAttributes(attributes: { [key: string]: any }, endpoint: number,
 
 @customElement("matter-cluster-view")
 class MatterClusterView extends LitElement {
+    @consume({ context: clientContext })
     public client!: MatterClient;
 
+    @consume({ context: tickContext, subscribe: true })
+    protected _tick = 0;
+
     @property()
     public node?: MatterNode;
 
@@ -108,7 +113,7 @@ class MatterClusterView extends LitElement {
     override render() {
         if (!this.node || this.endpoint == undefined || this.cluster == undefined) {
             return html`
-                <dashboard-header title="Not found" .client=${this.client} backButton="#"></dashboard-header>
+                <dashboard-header title="Not found" backButton="#"></dashboard-header>
                 <div class="not-found">
                     <ha-svg-icon .path=${mdiAlertCircleOutline}></ha-svg-icon>
                     <p>Node, endpoint, or cluster not found</p>
@@ -130,12 +135,11 @@ class MatterClusterView extends LitElement {
             <dashboard-header
                 .title=${`Node ${this.node.node_id} ${nodeHex}  |  Endpoint ${this.endpoint}  |  Cluster ${this.cluster} (${clusterName})`}
                 .backButton=${`#node/${this.node.node_id}/${this.endpoint}`}
-                .client=${this.client}
             ></dashboard-header>
 
             <!-- node details section -->
             <div class="container">
-                <node-details .node=${this.node} .client=${this.client}></node-details>
+                <node-details .node=${this.node}></node-details>
             </div>
 
             <!-- Cluster commands section (if available for this cluster) -->
@@ -373,10 +377,9 @@ class MatterClusterView extends LitElement {
 
         // After render, find and configure the cluster commands component
         const container = this.shadowRoot?.getElementById("cluster-commands-container");
-        if (container) {
-            const commandsElement = container.firstElementChild as any;
-            if (commandsElement && this.node && this.client) {
-                commandsElement.client = this.client;
+        if (container && this.node && this.endpoint !== undefined && this.cluster !== undefined) {
+            const commandsElement = container.firstElementChild;
+            if (commandsElement instanceof BaseClusterCommands) {
                 commandsElement.node = this.node;
                 commandsElement.endpoint = this.endpoint;
                 commandsElement.cluster = this.cluster;
@@ -394,6 +397,7 @@ class MatterClusterView extends LitElement {
             :host {
                 display: block;
                 background-color: var(--md-sys-color-background);
+                color: var(--md-sys-color-on-background);
             }
 
             .header {

package/src/pages/matter-dashboard-app.ts

@@ -9,9 +9,8 @@ import { MatterClient, MatterError } from "@matter-server/ws-client";
 import { mdiRefresh } from "@mdi/js";
 import { LitElement, PropertyValueMap, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
-import { clientContext } from "../client/client-context.js";
+import { clientContext, tickContext } from "../client/client-context.js";
 import "../components/ha-svg-icon";
-import { clone } from "../util/clone_class.js";
 import type { Route } from "../util/routing.js";
 import "./components/header";
 import type { ActiveView } from "./components/header.js";
@@ -45,10 +44,13 @@ class MatterDashboardApp extends LitElement {
     @state()
     private _state: "connecting" | "connected" | "error" | "disconnected" = "connecting";
 
+    @state() private _tick = 0;
+
     /** Track whether nodes have been loaded at least once (to avoid redirecting before data arrives) */
     private _nodesLoaded = false;
 
-    private provider = new ContextProvider(this, { context: clientContext, initialValue: this.client });
+    private clientProvider = new ContextProvider(this, { context: clientContext });
+    private tickProvider = new ContextProvider(this, { context: tickContext, initialValue: 0 });
 
     /** Reference to updateRoute function so it can be called from event listeners */
     private _updateRoute?: () => void;
@@ -107,6 +109,9 @@ class MatterDashboardApp extends LitElement {
     private _connect() {
         this.client.startListening().then(
             () => {
+                // Publish context before flipping state so the connected render sees a defined client.
+                this.clientProvider.setValue(this.client);
+                this.tickProvider.setValue(++this._tick);
                 this._state = "connected";
                 this._setupEventListeners();
             },
@@ -126,10 +131,10 @@ class MatterDashboardApp extends LitElement {
                 this._updateRoute();
             }
             this.requestUpdate();
-            this.provider.setValue(clone(this.client));
+            this.tickProvider.setValue(++this._tick);
         });
         this.client.addEventListener("server_info_updated", () => {
-            this.provider.setValue(clone(this.client));
+            this.tickProvider.setValue(++this._tick);
         });
         this.client.addEventListener("connection_lost", () => {
             this._state = "disconnected";
@@ -198,7 +203,6 @@ class MatterDashboardApp extends LitElement {
             // cluster level
             return html`
                 <matter-cluster-view
-                    .client=${this.client}
                     .node=${this.client.nodes[this._route.path[0]]}
                     .endpoint=${parseInt(this._route.path[1], 10)}
                     .cluster=${parseInt(this._route.path[2], 10)}
@@ -209,7 +213,6 @@ class MatterDashboardApp extends LitElement {
             // endpoint level
             return html`
                 <matter-endpoint-view
-                    .client=${this.client}
                     .node=${this.client.nodes[this._route.path[0]]}
                     .endpoint=${parseInt(this._route.path[1], 10)}
                 ></matter-endpoint-view>
@@ -217,12 +220,7 @@ class MatterDashboardApp extends LitElement {
         }
         if (this._route.prefix === "node") {
             // node level
-            return html`
-                <matter-node-view
-                    .client=${this.client}
-                    .node=${this.client.nodes[this._route.path[0]]}
-                ></matter-node-view>
-            `;
+            return html` <matter-node-view .node=${this.client.nodes[this._route.path[0]]}></matter-node-view> `;
         }
         // Get device counts for conditional navigation
         const { hasThreadDevices, hasWifiDevices } = this._getDeviceCounts();
@@ -230,7 +228,6 @@ class MatterDashboardApp extends LitElement {
         // Check for Thread view (#thread or #thread/123)
         if (this._route.prefix === "thread" || this._route.path[0] === "thread") {
             return html`<matter-network-view
-                .client=${this.client}
                 .nodes=${this.client.nodes}
                 .activeView=${this._activeView}
                 .initialSelectedNodeId=${this._initialSelectedNodeId}
@@ -242,7 +239,6 @@ class MatterDashboardApp extends LitElement {
         // Check for WiFi view (#wifi or #wifi/123)
         if (this._route.prefix === "wifi" || this._route.path[0] === "wifi") {
             return html`<matter-network-view
-                .client=${this.client}
                 .nodes=${this.client.nodes}
                 .activeView=${this._activeView}
                 .initialSelectedNodeId=${this._initialSelectedNodeId}
@@ -253,7 +249,6 @@ class MatterDashboardApp extends LitElement {
         }
         // root level: server overview (nodes view)
         return html`<matter-server-view
-            .client=${this.client}
             .nodes=${this.client.nodes}
             .route=${this._route}
             .activeView=${this._activeView}