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

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

@@ -306,7 +306,7 @@ export class NodeBindingDialog extends LitElement {
                         <md-list style="padding-bottom:18px;">
                             ${Object.values(bindings).map(
                                 (entry, index) => html`
-                  <md-list-item style="background:cornsilk;">
+                  <md-list-item class="binding-item">
                     <div style="display:flex;gap:10px;">
                         <div>node:${entry["node"]}</div>
                         <div>endpoint:${entry["endpoint"]}</div>
@@ -376,9 +376,13 @@ export class NodeBindingDialog extends LitElement {
     }
 
     static override styles = css`
+        .binding-item {
+            background: var(--md-sys-color-surface-container-high);
+        }
+
         .inline-group {
             display: flex;
-            border: 2px solid #673ab7;
+            border: 2px solid var(--md-sys-color-primary);
             padding: 1px;
             border-radius: 8px;
             position: relative;
@@ -404,8 +408,8 @@ export class NodeBindingDialog extends LitElement {
             position: absolute;
             left: 15px;
             top: -12px;
-            background: #673ab7;
-            color: white;
+            background: var(--md-sys-color-primary);
+            color: var(--md-sys-color-on-primary);
             padding: 3px 15px;
             border-radius: 4px;
         }

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/entrypoint/main.ts

@@ -5,6 +5,7 @@
  */
 
 import { MatterClient } from "@matter-server/ws-client";
+import "../util/theme-service.js"; // Initialize theme service early
 
 async function main() {
     import("../pages/matter-dashboard-app.js");

package/src/pages/components/header.ts

@@ -10,10 +10,12 @@ 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 { mdiArrowLeft, mdiBrightnessAuto, mdiCog, mdiLogout, mdiWeatherNight, mdiWeatherSunny } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
+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";
 
 interface HeaderAction {
     label: string;
@@ -28,6 +30,56 @@ export class DashboardHeader extends LitElement {
 
     public client?: MatterClient;
 
+    @state() private _themePreference: ThemePreference = ThemeService.preference;
+    @state() private _effectiveTheme: EffectiveTheme = ThemeService.effectiveTheme;
+
+    private _unsubscribeTheme?: () => void;
+
+    override connectedCallback() {
+        super.connectedCallback();
+        this._unsubscribeTheme = ThemeService.subscribe(theme => {
+            this._effectiveTheme = theme;
+            this._themePreference = ThemeService.preference;
+        });
+    }
+
+    override disconnectedCallback() {
+        super.disconnectedCallback();
+        this._unsubscribeTheme?.();
+    }
+
+    private _cycleTheme() {
+        ThemeService.cycleTheme();
+    }
+
+    private _openSettings() {
+        if (this.client) {
+            showLogLevelDialog(this.client);
+        }
+    }
+
+    private _getThemeIcon(): string {
+        switch (this._themePreference) {
+            case "light":
+                return mdiWeatherSunny;
+            case "dark":
+                return mdiWeatherNight;
+            case "system":
+                return mdiBrightnessAuto;
+        }
+    }
+
+    private _getThemeTooltip(): string {
+        switch (this._themePreference) {
+            case "light":
+                return "Theme: Light";
+            case "dark":
+                return "Theme: Dark";
+            case "system":
+                return `Theme: System (${this._effectiveTheme})`;
+        }
+    }
+
     protected override render() {
         return html`
             <div class="header">
@@ -50,14 +102,26 @@ export class DashboardHeader extends LitElement {
                             </md-icon-button>
                         `;
                     })}
-                    <!-- optional logout button -->
-                    ${this.client?.isProduction
-                        ? nothing
-                        : html`
-                              <md-icon-button @click=${this.client?.disconnect}>
+                    <!-- 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>
+                    </md-icon-button>
+                    <!-- optional logout button (only when client exists and not in production) -->
+                    ${this.client && !this.client.isProduction
+                        ? html`
+                              <md-icon-button @click=${this.client.disconnect}>
                                   <ha-svg-icon .path=${mdiLogout}></ha-svg-icon>
                               </md-icon-button>
-                          `}
+                          `
+                        : nothing}
                 </div>
             </div>
         `;

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

@@ -6,11 +6,14 @@
 
 import { ContextProvider } from "@lit/context";
 import { MatterClient, MatterError } from "@matter-server/ws-client";
-import { LitElement, PropertyValueMap, html } from "lit";
+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 "../components/ha-svg-icon";
 import { clone } from "../util/clone_class.js";
 import type { Route } from "../util/routing.js";
+import "./components/header";
 import "./matter-cluster-view";
 import "./matter-endpoint-view";
 import "./matter-node-view";
@@ -34,31 +37,11 @@ class MatterDashboardApp extends LitElement {
     @state()
     private _state: "connecting" | "connected" | "error" | "disconnected" = "connecting";
 
-    private _error: string | undefined;
-
     private provider = new ContextProvider(this, { context: clientContext, initialValue: this.client });
 
     protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
         super.firstUpdated(_changedProperties);
-        this.client.startListening().then(
-            () => {
-                this._state = "connected";
-                this.client.addEventListener("nodes_changed", () => {
-                    this.requestUpdate();
-                    this.provider.setValue(clone(this.client));
-                });
-                this.client.addEventListener("server_info_updated", () => {
-                    this.provider.setValue(clone(this.client));
-                });
-                this.client.addEventListener("connection_lost", () => {
-                    this._state = "disconnected";
-                });
-            },
-            (err: MatterError) => {
-                this._state = "error";
-                this._error = err.message;
-            },
-        );
+        this._connect();
 
         // Handle history changes
         const updateRoute = () => {
@@ -72,17 +55,73 @@ class MatterDashboardApp extends LitElement {
         updateRoute();
     }
 
+    private _connect() {
+        this.client.startListening().then(
+            () => {
+                this._state = "connected";
+                this._setupEventListeners();
+            },
+            (_err: MatterError) => {
+                this._state = "error";
+            },
+        );
+    }
+
+    private _setupEventListeners() {
+        this.client.addEventListener("nodes_changed", () => {
+            this.requestUpdate();
+            this.provider.setValue(clone(this.client));
+        });
+        this.client.addEventListener("server_info_updated", () => {
+            this.provider.setValue(clone(this.client));
+        });
+        this.client.addEventListener("connection_lost", () => {
+            this._state = "disconnected";
+        });
+    }
+
+    private _reconnect = () => {
+        this._state = "connecting";
+        this._connect();
+    };
+
     override render() {
         if (this._state === "connecting") {
-            return html`<p>Connecting...</p>`;
+            return html`
+                <dashboard-header title="Matter Server"></dashboard-header>
+                <div class="status-page">
+                    <p class="status-message">Connecting...</p>
+                </div>
+            `;
         }
         if (this._state === "disconnected") {
-            return html`<p>Connection lost</p>`;
+            return html`
+                <dashboard-header title="Matter Server"></dashboard-header>
+                <div class="status-page">
+                    <p class="status-message error">Connection lost</p>
+                    <p class="status-hint">
+                        The connection to the Matter Server was lost. Please check if the server is running.
+                    </p>
+                    <button class="retry-button" @click=${this._reconnect}>
+                        <ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
+                        Reconnect
+                    </button>
+                </div>
+            `;
         }
         if (this._state === "error") {
             return html`
-                <p>Error: ${this._error}</p>
-                <button @click=${this.client.disconnect}>Clear stored URL</button>
+                <dashboard-header title="Matter Server"></dashboard-header>
+                <div class="status-page">
+                    <p class="status-message error">No connection</p>
+                    <p class="status-hint">
+                        Unable to connect to the Matter Server. Please check if the server is running.
+                    </p>
+                    <button class="retry-button" @click=${this._reconnect}>
+                        <ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
+                        Reconnect
+                    </button>
+                </div>
             `;
         }
         if (this._route.prefix === "node" && this._route.path.length == 3) {
@@ -122,4 +161,62 @@ class MatterDashboardApp extends LitElement {
             .route=${this._route}
         ></matter-server-view>`;
     }
+
+    static override styles = css`
+        :host {
+            display: block;
+            min-height: 100vh;
+            background-color: var(--md-sys-color-background);
+        }
+
+        .status-page {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 48px 24px;
+            text-align: center;
+        }
+
+        .status-message {
+            font-size: 1.5rem;
+            color: var(--md-sys-color-on-background);
+            margin: 0 0 16px 0;
+        }
+
+        .status-message.error {
+            color: var(--danger-color);
+        }
+
+        .status-hint {
+            font-size: 1rem;
+            color: var(--md-sys-color-on-surface-variant);
+            margin: 0;
+            max-width: 400px;
+        }
+
+        .retry-button {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            margin-top: 24px;
+            padding: 12px 24px;
+            font-size: 1rem;
+            background-color: var(--md-sys-color-primary);
+            color: var(--md-sys-color-on-primary);
+            --icon-primary-color: var(--md-sys-color-on-primary);
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        .retry-button:hover {
+            opacity: 0.9;
+        }
+
+        .retry-button ha-svg-icon {
+            width: 20px;
+            height: 20px;
+        }
+    `;
 }

package/src/util/theme-service.ts

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Theme service for managing dark/light mode preferences.
+ * Supports three modes: light, dark, and system (auto-detect from OS).
+ */
+
+export type ThemePreference = "light" | "dark" | "system";
+export type EffectiveTheme = "light" | "dark";
+
+const STORAGE_KEY = "matterTheme";
+
+class ThemeServiceImpl {
+    private _preference: ThemePreference = "system";
+    private _mediaQuery: MediaQueryList;
+    private _listeners: Set<(theme: EffectiveTheme) => void> = new Set();
+
+    constructor() {
+        this._mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        this._mediaQuery.addEventListener("change", () => this._applyTheme());
+        this._loadPreference();
+        this._applyTheme();
+    }
+
+    get preference(): ThemePreference {
+        return this._preference;
+    }
+
+    get effectiveTheme(): EffectiveTheme {
+        if (this._preference === "system") {
+            return this._mediaQuery.matches ? "dark" : "light";
+        }
+        return this._preference;
+    }
+
+    setPreference(pref: ThemePreference): void {
+        this._preference = pref;
+        localStorage.setItem(STORAGE_KEY, pref);
+        this._applyTheme();
+    }
+
+    cycleTheme(): ThemePreference {
+        const cycle: ThemePreference[] = ["light", "dark", "system"];
+        const currentIndex = cycle.indexOf(this._preference);
+        const nextIndex = (currentIndex + 1) % cycle.length;
+        this.setPreference(cycle[nextIndex]);
+        return this._preference;
+    }
+
+    subscribe(callback: (theme: EffectiveTheme) => void): () => void {
+        this._listeners.add(callback);
+        return () => this._listeners.delete(callback);
+    }
+
+    private _loadPreference(): void {
+        // Check for query parameter override (e.g., ?theme=dark)
+        const urlParams = new URLSearchParams(window.location.search);
+        const themeParam = urlParams.get("theme") as ThemePreference | null;
+        if (themeParam && ["light", "dark", "system"].includes(themeParam)) {
+            // Use query parameter value and save to localStorage
+            this._preference = themeParam;
+            localStorage.setItem(STORAGE_KEY, themeParam);
+            // Remove the query parameter from URL without reload
+            urlParams.delete("theme");
+            const newUrl = urlParams.toString()
+                ? `${window.location.pathname}?${urlParams.toString()}${window.location.hash}`
+                : `${window.location.pathname}${window.location.hash}`;
+            history.replaceState({}, "", newUrl);
+            return;
+        }
+
+        // Fall back to localStorage
+        const stored = localStorage.getItem(STORAGE_KEY) as ThemePreference | null;
+        if (stored && ["light", "dark", "system"].includes(stored)) {
+            this._preference = stored;
+        }
+        // Default is "system" if nothing stored
+    }
+
+    private _applyTheme(): void {
+        const effective = this.effectiveTheme;
+        document.documentElement.classList.toggle("dark-theme", effective === "dark");
+
+        // Update meta theme-color for mobile browsers
+        const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+        if (metaThemeColor) {
+            metaThemeColor.setAttribute("content", effective === "dark" ? "#1e1e1e" : "#03a9f4");
+        }
+
+        this._listeners.forEach(cb => cb(effective));
+    }
+}
+
+export const ThemeService = new ThemeServiceImpl();