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

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/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,11 @@ 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, 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 "../../components/ha-svg-icon";
+import { EffectiveTheme, ThemePreference, ThemeService } from "../../util/theme-service.js";
 
 interface HeaderAction {
     label: string;
@@ -28,6 +29,50 @@ 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 _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 +95,18 @@ export class DashboardHeader extends LitElement {
                             </md-icon-button>
                         `;
                     })}
-                    <!-- optional logout button -->
-                    ${this.client?.isProduction
-                        ? nothing
-                        : html`
-                              <md-icon-button @click=${this.client?.disconnect}>
+                    <!-- 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/components/node-details.ts

@@ -24,6 +24,27 @@ import "../../components/ha-svg-icon";
 import { getEndpointDeviceTypes } from "../matter-endpoint-view.js";
 import { bindingContext } from "./context.js";
 
+/** Map updateState values to user-friendly labels */
+const UPDATE_STATE_LABELS: Record<number, string> = {
+    1: "Idle",
+    2: "Querying",
+    3: "Waiting (Querying)",
+    4: "Downloading",
+    5: "Applying",
+    6: "Waiting (Applying)",
+    7: "Rolling back",
+    8: "Waiting for consent",
+};
+
+function getUpdateStateLabel(state: number, progress?: number): string {
+    const label = UPDATE_STATE_LABELS[state] || `Unknown (${state})`;
+    // Show progress only for downloading state
+    if (state === 4 && progress !== undefined) {
+        return `${label} (${progress}%)`;
+    }
+    return label;
+}
+
 function getNodeDeviceTypes(node: MatterNode): DeviceType[] {
     const uniqueEndpoints = new Set(Object.keys(node.attributes).map(key => Number(key.split("/")[0])));
     const allDeviceTypes: Set<DeviceType> = new Set();
@@ -86,16 +107,20 @@ export class NodeDetails extends LitElement {
                     <md-outlined-button @click=${this._reinterview}
                         >Interview<ha-svg-icon slot="icon" .path=${mdiChatProcessing}></ha-svg-icon
                     ></md-outlined-button>
-                    ${this._updateInitiated || (this.node.updateState || 0) > 1
+                    ${this._updateInitiated
                         ? html` <md-outlined-button disabled
-                              >Update in progress (${this.node.updateStateProgress || 0}%)<ha-svg-icon
-                                  slot="icon"
-                                  .path=${mdiUpdate}
-                              ></ha-svg-icon
+                              >Checking for updates<ha-svg-icon slot="icon" .path=${mdiUpdate}></ha-svg-icon
                           ></md-outlined-button>`
-                        : html`<md-outlined-button @click=${this._searchUpdate}
-                              >Update<ha-svg-icon slot="icon" .path=${mdiUpdate}></ha-svg-icon
-                          ></md-outlined-button>`}
+                        : (this.node.updateState || 0) > 1
+                          ? html` <md-outlined-button disabled
+                                >${getUpdateStateLabel(
+                                    this.node.updateState!,
+                                    this.node.updateStateProgress,
+                                )}<ha-svg-icon slot="icon" .path=${mdiUpdate}></ha-svg-icon
+                            ></md-outlined-button>`
+                          : html`<md-outlined-button @click=${this._searchUpdate}
+                                >Update<ha-svg-icon slot="icon" .path=${mdiUpdate}></ha-svg-icon
+                            ></md-outlined-button>`}
                     ${bindings
                         ? html`
                               <md-outlined-button @click=${this._binding}>

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

@@ -19,6 +19,7 @@ import "../components/ha-svg-icon";
 import "../pages/components/node-details";
 import { bindingContext } from "./components/context.js";
 // Cluster command components (auto-register on import)
+import { formatHex } from "../util/format_hex.js";
 import { getClusterCommandsTag } from "./cluster-commands/index.js";
 
 declare global {
@@ -103,7 +104,7 @@ class MatterClusterView extends LitElement {
                                 Endpoint ${this.endpoint}</b
                             >
                         </div>
-                        <div slot="supporting-text">ClusterId ${this.cluster} (0x00${this.cluster.toString(16)})</div>
+                        <div slot="supporting-text">ClusterId ${this.cluster} (${formatHex(this.cluster)})</div>
                     </md-list-item>
                     <md-divider></md-divider>
                     ${clusterAttributes(this.node.attributes, this.endpoint, this.cluster).map(
@@ -114,7 +115,7 @@ class MatterClusterView extends LitElement {
                                     "Custom/Unknown Attribute"}
                                 </div>
                                 <div slot="supporting-text">
-                                    AttributeId: ${attribute.key} (0x00${attribute.key.toString(16)}) - Value type:
+                                    AttributeId: ${attribute.key} (${formatHex(attribute.key)}) - Value type:
                                     ${clusters[this.cluster!]?.attributes[attribute.key]?.type || "unknown"}
                                 </div>
                                 <div slot="end">

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/pages/matter-endpoint-view.ts

@@ -15,6 +15,7 @@ import { customElement, property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
 import { DeviceType, clusters, device_types } from "../client/models/descriptions.js";
 import "../components/ha-svg-icon";
+import { formatHex } from "../util/format_hex.js";
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -97,7 +98,7 @@ class MatterEndpointView extends LitElement {
                                     href=${`#node/${this.node!.node_id}/${this.endpoint}/${cluster}`}
                                 >
                                     <div slot="headline">${clusters[cluster]?.label || "Custom/Unknown Cluster"}</div>
-                                    <div slot="supporting-text">ClusterId ${cluster} (0x00${cluster.toString(16)})</div>
+                                    <div slot="supporting-text">ClusterId ${cluster} (${formatHex(cluster)})</div>
                                     <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
                                 </md-list-item>
                             `;

package/src/util/format_hex.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Format a number as a hex string with 0x prefix.
+ * Ensures even number of digits with a minimum of 4 digits.
+ *
+ * Examples:
+ *   0 -> "0x0000"
+ *   255 -> "0x00FF"
+ *   65535 -> "0xFFFF"
+ *   65536 -> "0x010000"
+ */
+export function formatHex(value: number): string {
+    let hex = value.toString(16).toUpperCase();
+
+    // Ensure minimum 4 digits
+    if (hex.length < 4) {
+        hex = hex.padStart(4, "0");
+    }
+    // Ensure even number of digits
+    else if (hex.length % 2 !== 0) {
+        hex = "0" + hex;
+    }
+
+    return `0x${hex}`;
+}

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();