@matter-server/dashboard 0.2.7-alpha.0-20260118-993a1c7 → 0.2.7-alpha.0-20260118-45c7af0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@matter-server/dashboard",
-    "version": "0.2.7-alpha.0-20260118-993a1c7",
+    "version": "0.2.7-alpha.0-20260118-45c7af0",
     "description": "Dashboard for OHF Matter Server",
     "bugs": {
         "url": "https://github.com/matter-js/matterjs-server/issues"
@@ -23,7 +23,7 @@
     },
     "devDependencies": {
         "@babel/preset-env": "^7.28.5",
-        "@matter/main": "0.16.5",
+        "@matter/main": "0.16.6-alpha.0-20260118-ceec17415",
         "@rollup/plugin-babel": "^6.1.0",
         "@rollup/plugin-commonjs": "^29.0.0",
         "rollup-plugin-copy": "^3.5.0",
@@ -37,8 +37,8 @@
     "dependencies": {
         "@lit/context": "^1.1.6",
         "@material/web": "^2.4.1",
-        "@matter-server/ws-client": "0.2.7-alpha.0-20260118-993a1c7",
-        "@matter-server/custom-clusters": "0.2.7-alpha.0-20260118-993a1c7",
+        "@matter-server/ws-client": "0.2.7-alpha.0-20260118-45c7af0",
+        "@matter-server/custom-clusters": "0.2.7-alpha.0-20260118-45c7af0",
         "@mdi/js": "^7.4.47",
         "lit": "^3.3.1",
         "tslib": "^2.8.1"

package/src/components/dialogs/settings/log-level-dialog.ts

@@ -0,0 +1,179 @@
+/**
+ * @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/select/outlined-select";
+import type { MdOutlinedSelect } from "@material/web/select/outlined-select.js";
+import "@material/web/select/select-option";
+import { LogLevelString, MatterClient } from "@matter-server/ws-client";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { preventDefault } from "../../../util/prevent_default.js";
+
+const LOG_LEVELS: { value: LogLevelString; label: string }[] = [
+    { value: "critical", label: "Critical" },
+    { value: "error", label: "Error" },
+    { value: "warning", label: "Warning" },
+    { value: "info", label: "Info" },
+    { value: "debug", label: "Debug" },
+];
+
+@customElement("log-level-dialog")
+export class LogLevelDialog extends LitElement {
+    @property({ attribute: false })
+    public client!: MatterClient;
+
+    @state() private _consoleLevel: LogLevelString = "info";
+    @state() private _fileLevel: LogLevelString | null = null;
+    @state() private _loading = true;
+    @state() private _applying = false;
+
+    @query("md-outlined-select[name='console']")
+    private _consoleSelect!: MdOutlinedSelect;
+
+    @query("md-outlined-select[name='file']")
+    private _fileSelect?: MdOutlinedSelect;
+
+    override connectedCallback() {
+        super.connectedCallback();
+        void this._loadLogLevels();
+    }
+
+    private async _loadLogLevels() {
+        try {
+            const result = await this.client.getLogLevel();
+            this._consoleLevel = result.console_loglevel;
+            this._fileLevel = result.file_loglevel;
+        } catch (err) {
+            console.error("Failed to load log levels:", err);
+        } finally {
+            this._loading = false;
+        }
+    }
+
+    private async _apply() {
+        this._applying = true;
+        try {
+            const consoleLevel = this._consoleSelect.value as LogLevelString;
+            const fileLevel = this._fileSelect?.value as LogLevelString | undefined;
+
+            const result = await this.client.setLogLevel(
+                consoleLevel,
+                this._fileLevel !== null ? fileLevel : undefined,
+            );
+
+            this._consoleLevel = result.console_loglevel;
+            this._fileLevel = result.file_loglevel;
+            this._close();
+        } catch (err) {
+            console.error("Failed to apply log levels:", err);
+            alert("Failed to apply log levels");
+        } finally {
+            this._applying = false;
+        }
+    }
+
+    private _close() {
+        this.shadowRoot!.querySelector<MdDialog>("md-dialog")!.close();
+    }
+
+    private _handleClosed() {
+        this.parentNode!.removeChild(this);
+    }
+
+    protected override render() {
+        return html`
+            <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
+                <div slot="headline">Server Log Settings</div>
+                <div slot="content">
+                    ${this._loading
+                        ? html`<p class="loading">Loading...</p>`
+                        : html`
+                              <p class="hint">Changes are temporary and will be reset on the next server restart.</p>
+                              <div class="form-field">
+                                  <label>Console Log Level</label>
+                                  <md-outlined-select name="console" .value=${this._consoleLevel}>
+                                      ${LOG_LEVELS.map(
+                                          level => html`
+                                              <md-select-option
+                                                  value=${level.value}
+                                                  ?selected=${level.value === this._consoleLevel}
+                                              >
+                                                  <div slot="headline">${level.label}</div>
+                                              </md-select-option>
+                                          `,
+                                      )}
+                                  </md-outlined-select>
+                              </div>
+                              ${this._fileLevel !== null
+                                  ? html`
+                                        <div class="form-field">
+                                            <label>File Log Level</label>
+                                            <md-outlined-select name="file" .value=${this._fileLevel}>
+                                                ${LOG_LEVELS.map(
+                                                    level => html`
+                                                        <md-select-option
+                                                            value=${level.value}
+                                                            ?selected=${level.value === this._fileLevel}
+                                                        >
+                                                            <div slot="headline">${level.label}</div>
+                                                        </md-select-option>
+                                                    `,
+                                                )}
+                                            </md-outlined-select>
+                                        </div>
+                                    `
+                                  : nothing}
+                          `}
+                </div>
+                <div slot="actions">
+                    <md-text-button @click=${this._close}>Cancel</md-text-button>
+                    <md-text-button @click=${this._apply} ?disabled=${this._loading || this._applying}>
+                        ${this._applying ? "Applying..." : "Apply"}
+                    </md-text-button>
+                </div>
+            </md-dialog>
+        `;
+    }
+
+    static override styles = css`
+        .loading {
+            text-align: center;
+            padding: 24px;
+            color: var(--md-sys-color-on-surface-variant);
+        }
+
+        .hint {
+            font-size: 0.875rem;
+            color: var(--md-sys-color-on-surface-variant);
+            margin: 0 0 16px 0;
+            font-style: italic;
+        }
+
+        .form-field {
+            margin-bottom: 16px;
+        }
+
+        .form-field label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 500;
+            color: var(--md-sys-color-on-surface);
+        }
+
+        md-outlined-select {
+            width: 100%;
+        }
+    `;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "log-level-dialog": LogLevelDialog;
+    }
+}

package/src/components/dialogs/settings/show-log-level-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 showLogLevelDialog = async (client: MatterClient) => {
+    await import("./log-level-dialog.js");
+    const dialog = document.createElement("log-level-dialog");
+    dialog.client = client;
+    document.querySelector("matter-dashboard-app")?.renderRoot.appendChild(dialog);
+};

package/src/pages/components/header.ts

@@ -10,9 +10,10 @@ 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, mdiBrightnessAuto, mdiLogout, mdiWeatherNight, mdiWeatherSunny } from "@mdi/js";
+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 { showLogLevelDialog } from "../../components/dialogs/settings/show-log-level-dialog.js";
 import "../../components/ha-svg-icon";
 import { EffectiveTheme, ThemePreference, ThemeService } from "../../util/theme-service.js";
 
@@ -51,6 +52,12 @@ export class DashboardHeader extends LitElement {
         ThemeService.cycleTheme();
     }
 
+    private _openSettings() {
+        if (this.client) {
+            showLogLevelDialog(this.client);
+        }
+    }
+
     private _getThemeIcon(): string {
         switch (this._themePreference) {
             case "light":
@@ -95,6 +102,14 @@ export class DashboardHeader extends LitElement {
                             </md-icon-button>
                         `;
                     })}
+                    <!-- settings button (only when connected) -->
+                    ${this.client
+                        ? html`
+                              <md-icon-button @click=${this._openSettings} title="Server Settings">
+                                  <ha-svg-icon .path=${mdiCog}></ha-svg-icon>
+                              </md-icon-button>
+                          `
+                        : nothing}
                     <!-- theme toggle button -->
                     <md-icon-button @click=${this._cycleTheme} .title=${this._getThemeTooltip()}>
                         <ha-svg-icon .path=${this._getThemeIcon()}></ha-svg-icon>