@matter-server/dashboard 0.2.0-alpha.0-00000000-000000000

package/src/components/dialogs/commission-node-dialog/commission-node-dialog.ts

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import "@material/web/button/text-button";
+import "@material/web/dialog/dialog";
+import type { MdDialog } from "@material/web/dialog/dialog.js";
+import "@material/web/list/list";
+import "@material/web/list/list-item";
+import { MatterClient, MatterNode } from "@matter-server/ws-client";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { preventDefault } from "../../../util/prevent_default.js";
+
+@customElement("commission-node-dialog")
+export class ComissionNodeDialog extends LitElement {
+    @property({ attribute: false }) public client!: MatterClient;
+
+    @state() private _mode?: "wifi" | "thread" | "existing";
+
+    protected override render() {
+        return html`
+            <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
+                <div slot="headline">Commission node</div>
+                <div slot="content" @node-commissioned=${this._nodeCommissioned}>
+                    ${!this._mode
+                        ? html`<md-list>
+                              <md-list-item
+                                  type="button"
+                                  .disabled=${!this.client.serverInfo.bluetooth_enabled}
+                                  @click=${this._commissionWifi}
+                                  >Commission new WiFi device</md-list-item
+                              >
+                              <md-list-item
+                                  type="button"
+                                  .disabled=${!this.client.serverInfo.bluetooth_enabled}
+                                  @click=${this._commissionThread}
+                                  >Commission new Thread device</md-list-item
+                              >
+                              <md-list-item type="button" @click=${this._commissionExisting}
+                                  >Commission existing device</md-list-item
+                              >
+                          </md-list>`
+                        : this._mode === "wifi"
+                          ? html`<commission-node-wifi></commission-node-wifi>`
+                          : this._mode === "thread"
+                            ? html`<commission-node-thread></commission-node-thread>`
+                            : html`<commission-node-existing></commission-node-existing>`}
+                </div>
+                <div slot="actions">
+                    <md-text-button @click=${this._close}>Cancel</md-text-button>
+                </div>
+            </md-dialog>
+        `;
+    }
+
+    private _commissionWifi() {
+        if (!this.client.serverInfo.bluetooth_enabled) {
+            return;
+        }
+        import("./commission-node-wifi.js");
+        this._mode = "wifi";
+    }
+
+    private _commissionThread() {
+        if (!this.client.serverInfo.bluetooth_enabled) {
+            return;
+        }
+        import("./commission-node-thread.js");
+        this._mode = "thread";
+    }
+
+    private _commissionExisting() {
+        import("./commission-node-existing.js");
+        this._mode = "existing";
+    }
+
+    private _nodeCommissioned(ev: CustomEvent<MatterNode>) {
+        window.location.href = `#node/${ev.detail.node_id}`;
+        this._close();
+    }
+
+    private _close() {
+        this.shadowRoot!.querySelector<MdDialog>("md-dialog")!.close();
+    }
+
+    private _handleClosed() {
+        this.parentNode!.removeChild(this);
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "commission-node-dialog": ComissionNodeDialog;
+    }
+
+    interface HASSDomEvents {
+        "node-commissioned": MatterNode;
+    }
+}

package/src/components/dialogs/commission-node-dialog/commission-node-existing.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { consume } from "@lit/context";
+import "@material/web/progress/circular-progress";
+import "@material/web/textfield/outlined-text-field";
+import type { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js";
+import { MatterClient } from "@matter-server/ws-client";
+import { LitElement, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { clientContext } from "../../../client/client-context.js";
+import { fireEvent } from "../../../util/fire_event.js";
+
+@customElement("commission-node-existing")
+export class CommissionNodeExisting extends LitElement {
+    @consume({ context: clientContext, subscribe: true })
+    @property({ attribute: false })
+    public client!: MatterClient;
+
+    @state()
+    private _loading: boolean = false;
+
+    @query("md-outlined-text-field[label='Share code']")
+    private _pairingCodeField!: MdOutlinedTextField;
+
+    protected override render() {
+        return html`<md-outlined-text-field label="Share code" .disabled="${this._loading}"> </md-outlined-text-field>
+            <br />
+            <br />
+            <md-outlined-button @click=${this._commissionNode} .disabled="${this._loading}"
+                >Commission</md-outlined-button
+            >${this._loading ? html`<md-circular-progress indeterminate></md-circular-progress>` : nothing}`;
+    }
+
+    private async _commissionNode() {
+        this._loading = true;
+        try {
+            const node = await this.client.commissionWithCode(this._pairingCodeField.value, true);
+            fireEvent(this, "node-commissioned", node);
+        } catch (err) {
+            alert(`Error commissioning node: ${(err as Error).message}`);
+        } finally {
+            this._loading = false;
+        }
+    }
+}

package/src/components/dialogs/commission-node-dialog/commission-node-thread.ts

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { consume } from "@lit/context";
+import "@material/web/progress/circular-progress";
+import "@material/web/textfield/outlined-text-field";
+import type { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js";
+import { MatterClient } from "@matter-server/ws-client";
+import { LitElement, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { clientContext } from "../../../client/client-context.js";
+import { fireEvent } from "../../../util/fire_event.js";
+
+@customElement("commission-node-thread")
+export class CommissionNodeThread extends LitElement {
+    @consume({ context: clientContext, subscribe: true })
+    @property({ attribute: false })
+    public client!: MatterClient;
+
+    @state()
+    private _loading: boolean = false;
+
+    @query("md-outlined-text-field[label='Thread dataset']")
+    private _datasetField!: MdOutlinedTextField;
+    @query("md-outlined-text-field[label='Pairing code']")
+    private _pairingCodeField!: MdOutlinedTextField;
+
+    protected override render() {
+        if (!this.client.serverInfo.thread_credentials_set) {
+            return html`<md-outlined-text-field label="Thread dataset" .disabled="${this._loading}">
+                </md-outlined-text-field>
+                <br />
+                <br />
+                <md-outlined-button @click=${this._setThreadDataset} .disabled="${this._loading}"
+                    >Set Thread Dataset</md-outlined-button
+                >${this._loading ? html`<md-circular-progress indeterminate></md-circular-progress>` : nothing}`;
+        }
+        return html`<md-outlined-text-field label="Pairing code" .disabled="${this._loading}"> </md-outlined-text-field>
+            <br />
+            <br />
+            <md-outlined-button @click=${this._commissionNode} .disabled="${this._loading}"
+                >Commission</md-outlined-button
+            >${this._loading ? html`<md-circular-progress indeterminate></md-circular-progress>` : nothing}`;
+    }
+
+    private async _setThreadDataset() {
+        const dataset = this._datasetField.value;
+        if (!dataset) {
+            alert("Dataset is required");
+            return;
+        }
+        this._loading = true;
+        try {
+            await this.client.setThreadOperationalDataset(dataset);
+        } catch (err) {
+            alert(`Error setting Thread dataset: ${(err as Error).message}`);
+        } finally {
+            this._loading = false;
+        }
+    }
+
+    private async _commissionNode() {
+        this._loading = true;
+        try {
+            const node = await this.client.commissionWithCode(this._pairingCodeField.value, false);
+            fireEvent(this, "node-commissioned", node);
+        } catch (err) {
+            alert(`Error commissioning node: ${(err as Error).message}`);
+        } finally {
+            this._loading = false;
+        }
+    }
+}

package/src/components/dialogs/commission-node-dialog/commission-node-wifi.ts

@@ -0,0 +1,90 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { consume } from "@lit/context";
+import "@material/web/progress/circular-progress";
+import "@material/web/textfield/outlined-text-field";
+import type { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js";
+import { MatterClient } from "@matter-server/ws-client";
+import { LitElement, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { clientContext } from "../../../client/client-context.js";
+import { fireEvent } from "../../../util/fire_event.js";
+
+@customElement("commission-node-wifi")
+export class CommissionNodeWifi extends LitElement {
+    @consume({ context: clientContext, subscribe: true })
+    @property({ attribute: false })
+    public client!: MatterClient;
+
+    @state()
+    private _loading: boolean = false;
+
+    @query("md-outlined-text-field[label='SSID']")
+    private _ssidField!: MdOutlinedTextField;
+    @query("md-outlined-text-field[label='Password']")
+    private _passwordField!: MdOutlinedTextField;
+    @query("md-outlined-text-field[label='Pairing code']")
+    private _pairingCodeField!: MdOutlinedTextField;
+
+    protected override render() {
+        if (!this.client.serverInfo.wifi_credentials_set) {
+            return html`<md-outlined-text-field label="SSID" .disabled="${this._loading}"> </md-outlined-text-field>
+                <md-outlined-text-field label="Password" type="password" .disabled="${this._loading}">
+                </md-outlined-text-field>
+                <br />
+                <br />
+                <md-outlined-button @click=${this._setWifiCredentials} .disabled="${this._loading}"
+                    >Set WiFi Credentials</md-outlined-button
+                >${this._loading
+                    ? html`<md-circular-progress indeterminate .visible="${this._loading}"></md-circular-progress>`
+                    : nothing}`;
+        }
+        return html`<md-outlined-text-field label="Pairing code" .disabled="${this._loading}"> </md-outlined-text-field>
+            <br />
+            <br />
+            <md-outlined-button @click=${this._commissionNode} .disabled="${this._loading}"
+                >Commission</md-outlined-button
+            >${this._loading ? html`<md-circular-progress indeterminate></md-circular-progress>` : nothing}`;
+    }
+
+    private _setWifiCredentials() {
+        const ssid = this._ssidField.value;
+        if (!ssid) {
+            alert("SSID is required");
+            return;
+        }
+        const password = this._passwordField.value;
+        if (!password) {
+            alert("Password is required");
+            return;
+        }
+        this._loading = true;
+        try {
+            this.client.setWifiCredentials(ssid, password);
+        } catch (err) {
+            alert(`Error setting WiFi credentials: \n${(err as Error).message}`);
+        } finally {
+            this._loading = false;
+        }
+    }
+
+    private async _commissionNode() {
+        try {
+            if (!this._pairingCodeField.value) {
+                alert("Pairing code is required");
+                return;
+            }
+            this._loading = true;
+            const node = await this.client.commissionWithCode(this._pairingCodeField.value, false);
+            fireEvent(this, "node-commissioned", node);
+        } catch (err) {
+            alert(`Error commissioning node: \n${(err as Error).message}`);
+        } finally {
+            this._loading = false;
+        }
+    }
+}

package/src/components/dialogs/commission-node-dialog/show-commission-node-dialog.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { MatterClient } from "@matter-server/ws-client";
+
+export const showCommissionNodeDialog = async (client: MatterClient) => {
+    await import("./commission-node-dialog.js");
+    const dialog = document.createElement("commission-node-dialog");
+    dialog.client = client;
+    document.querySelector("matter-dashboard-app")?.renderRoot.appendChild(dialog);
+};

package/src/components/ha-svg-icon.ts

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { css, CSSResultGroup, LitElement, nothing, svg, SVGTemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("ha-svg-icon")
+export class HaSvgIcon extends LitElement {
+    @property() public path?: string;
+
+    @property() public secondaryPath?: string;
+
+    @property() public viewBox?: string;
+
+    protected override render(): SVGTemplateResult {
+        return svg`
+    <svg
+      viewBox=${this.viewBox || "0 0 24 24"}
+      preserveAspectRatio="xMidYMid meet"
+      focusable="false"
+      role="img"
+      aria-hidden="true"
+    >
+      <g>
+        ${this.path ? svg`<path class="primary-path" d=${this.path}></path>` : nothing}
+        ${this.secondaryPath ? svg`<path class="secondary-path" d=${this.secondaryPath}></path>` : nothing}
+      </g>
+    </svg>`;
+    }
+
+    static override get styles(): CSSResultGroup {
+        return css`
+            :host {
+                display: var(--ha-icon-display, inline-flex);
+                align-items: center;
+                justify-content: center;
+                position: relative;
+                vertical-align: middle;
+                fill: var(--icon-primary-color, currentcolor);
+                width: var(--mdc-icon-size, 24px);
+                height: var(--mdc-icon-size, 24px);
+            }
+            svg {
+                width: 100%;
+                height: 100%;
+                pointer-events: none;
+                display: block;
+            }
+            path.primary-path {
+                opacity: var(--icon-primary-opactity, 1);
+            }
+            path.secondary-path {
+                fill: var(--icon-secondary-color, currentcolor);
+                opacity: var(--icon-secondary-opactity, 0.5);
+            }
+        `;
+    }
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ha-svg-icon": HaSvgIcon;
+    }
+}

package/src/entrypoint/main.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { MatterClient } from "@matter-server/ws-client";
+
+async function main() {
+    import("../pages/matter-dashboard-app.js");
+
+    let url = "";
+
+    // Detect if we're running in the (production) webserver included in the matter server or not.
+    const isProductionServer =
+        location.origin.includes(":5580") ||
+        location.href.includes("hassio_ingress") ||
+        location.href.includes("/api/ingress/");
+
+    if (!isProductionServer) {
+        // development server, ask for url to matter server
+        let storageUrl = localStorage.getItem("matterURL");
+        if (!storageUrl) {
+            const urlParams = new URLSearchParams(window.location.search);
+            const suggestedUrl = urlParams.get("url");
+            storageUrl = prompt(
+                "Enter Websocket URL to a running Matter Server",
+                suggestedUrl || "ws://localhost:5580/ws",
+            );
+            if (!storageUrl) {
+                alert("Unable to connect without URL");
+                return;
+            }
+            if (suggestedUrl) {
+                // Remove suggested url from address without redirecting
+                history.pushState({}, "", window.location.pathname);
+            }
+            localStorage.setItem("matterURL", storageUrl);
+        }
+        url = storageUrl;
+    } else {
+        // assume a production server running inside the matter server
+        // Turn httpX url into wsX url and append "/ws"
+        let baseUrl = window.location.origin + window.location.pathname;
+        if (baseUrl.endsWith("/")) {
+            baseUrl = baseUrl.slice(0, -1);
+        }
+        url = baseUrl.replace("http", "ws") + "/ws";
+        console.log(`Connecting to Matter Server API using url: ${url}`);
+    }
+
+    const client = new MatterClient(url);
+    client.isProduction = isProductionServer;
+
+    const dashboard = document.createElement("matter-dashboard-app");
+    dashboard.client = client;
+    document.body.append(dashboard);
+}
+
+main();

package/src/pages/components/context.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createContext } from "@lit/context";
+
+// export const bindingContext = createContext<string>("");
+export const bindingContext = createContext<number>("binding");

package/src/pages/components/footer.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("dashboard-footer")
+export class DashboardFooter extends LitElement {
+    protected override render() {
+        return html`
+            <div class="footer">
+                The OHF Matter Server is a project by the Open Home Foundation.
+                <a href="https://www.openhomefoundation.org/structure/#support-our-work" target="_blank"
+                    >Support development</a
+                >
+            </div>
+        `;
+    }
+
+    static override styles = css`
+        .footer {
+            padding: 16px;
+            text-align: center;
+            font-size: 0.8em;
+            color: var(--md-sys-color-on-surface);
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            clear: both;
+        }
+
+        .footer a {
+            color: var(--md-sys-color-on-surface);
+        }
+    `;
+}

package/src/pages/components/header.ts

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import "@material/web/button/outlined-button";
+import "@material/web/divider/divider";
+import "@material/web/iconbutton/icon-button";
+import "@material/web/list/list";
+import "@material/web/list/list-item";
+import { MatterClient } from "@matter-server/ws-client";
+import { mdiArrowLeft, mdiLogout } from "@mdi/js";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "../../components/ha-svg-icon";
+
+interface HeaderAction {
+    label: string;
+    icon: string;
+    action: void;
+}
+
+@customElement("dashboard-header")
+export class DashboardHeader extends LitElement {
+    @property() public backButton?: string;
+    @property() public actions?: HeaderAction[];
+
+    public client?: MatterClient;
+
+    protected override render() {
+        return html`
+            <div class="header">
+                <!-- optional back button -->
+                ${this.backButton
+                    ? html` <a .href=${this.backButton}>
+                          <md-icon-button>
+                              <ha-svg-icon .path=${mdiArrowLeft}></ha-svg-icon>
+                          </md-icon-button>
+                      </a>`
+                    : ""}
+
+                <div>${this.title || ""}</div>
+                <div class="flex"></div>
+                <div class="actions">
+                    ${this.actions?.map(action => {
+                        return html`
+                            <md-icon-button @click=${action.action} .title=${action.label}>
+                                <ha-svg-icon .path=${action.icon}></ha-svg-icon>
+                            </md-icon-button>
+                        `;
+                    })}
+                    <!-- optional logout button -->
+                    ${this.client?.isProduction
+                        ? nothing
+                        : html`
+                              <md-icon-button @click=${this.client?.disconnect}>
+                                  <ha-svg-icon .path=${mdiLogout}></ha-svg-icon>
+                              </md-icon-button>
+                          `}
+                </div>
+            </div>
+        `;
+    }
+
+    static override styles = css`
+        .header {
+            background-color: var(--md-sys-color-primary);
+            color: var(--md-sys-color-on-primary);
+            --icon-primary-color: var(--md-sys-color-on-primary);
+            font-weight: 400;
+            display: flex;
+            align-items: center;
+            padding-left: 18px;
+            padding-right: 8px;
+            height: 48px;
+        }
+
+        md-icon-button {
+            margin-right: 8px;
+        }
+
+        .flex {
+            flex: 1;
+        }
+    `;
+}