@matter-server/dashboard 0.3.4 → 0.3.5

package/dist/web/js/{node-binding-dialog-C8fqOJiB.js → node-binding-dialog-DSBwIJcQ.js}

@@ -1,4 +1,4 @@
-import { k as i, G as c, H as clientContext, n, a as e, i as i$1, A, j as b, F as handleAsync, t } from './matter-dashboard-app-CrBHT4fT.js';
+import { k as i, G as c, H as clientContext, n, a as e, i as i$1, A, j as b, F as handleAsync, t } from './matter-dashboard-app-D7YWrgXj.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 
@@ -116,6 +116,104 @@ class AccessControlEntryDataTransformer {
 }
 _staticBlock2();
 
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const MatterStatusNames = {
+  0: "Success",
+  1: "Failure",
+  125: "InvalidSubscription",
+  126: "UnsupportedAccess",
+  127: "UnsupportedEndpoint",
+  128: "InvalidAction",
+  129: "UnsupportedCommand",
+  133: "InvalidCommand",
+  134: "UnsupportedAttribute",
+  135: "ConstraintError",
+  136: "UnsupportedWrite",
+  137: "ResourceExhausted",
+  139: "NotFound",
+  140: "UnreportableAttribute",
+  141: "InvalidDataType",
+  143: "UnsupportedRead",
+  146: "DataVersionMismatch",
+  148: "Timeout",
+  155: "UnsupportedNode",
+  156: "Busy",
+  157: "AccessRestricted",
+  195: "UnsupportedCluster",
+  197: "NoUpstreamSubscription",
+  198: "NeedsTimedInteraction",
+  199: "UnsupportedEvent",
+  200: "PathsExhausted",
+  201: "TimedRequestMismatch",
+  202: "FailsafeRequired",
+  203: "InvalidInState",
+  204: "NoCommandResponse",
+  205: "TermsAndConditionsChanged",
+  206: "MaintenanceRequired",
+  207: "DynamicConstraintError",
+  208: "AlreadyExists",
+  209: "InvalidTransportType"
+};
+function getMatterStatusName(status) {
+  return MatterStatusNames[status] ?? `Unknown(${status})`;
+}
+function analyzeBatchResults(results) {
+  if (!results || results.length === 0) {
+    return {
+      outcome: "all_failed",
+      successCount: 0,
+      failureCount: 0,
+      errorCounts: {},
+      message: "No response/results returned"
+    };
+  }
+  let successCount = 0;
+  let failureCount = 0;
+  const errorCounts = {};
+  for (const result of results) {
+    if (result.status === 0) {
+      successCount++;
+    } else {
+      failureCount++;
+      errorCounts[result.status] = (errorCounts[result.status] ?? 0) + 1;
+    }
+  }
+  let outcome;
+  if (failureCount === 0) {
+    outcome = "all_success";
+  } else if (successCount === 0) {
+    outcome = "all_failed";
+  } else {
+    outcome = "partial";
+  }
+  const message = formatBatchMessage(outcome, successCount, failureCount, errorCounts);
+  return {
+    outcome,
+    successCount,
+    failureCount,
+    errorCounts,
+    message
+  };
+}
+function formatBatchMessage(outcome, successCount, failureCount, errorCounts) {
+  const entryWord = count => count === 1 ? "entry" : "entries";
+  if (outcome === "all_success") {
+    return "Write successful";
+  }
+  const errorParts = Object.entries(errorCounts).map(([code, count]) => {
+    const statusCode = parseInt(code, 10);
+    return `${count}x ${getMatterStatusName(statusCode)} (${code})`;
+  }).join(", ");
+  if (outcome === "all_failed") {
+    return `All ${failureCount} ${entryWord(failureCount)} failed: ${errorParts}`;
+  }
+  return `Partial failure: ${successCount} ${entryWord(successCount)} succeeded, ${failureCount} failed (${errorParts}). Please verify.`;
+}
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -192,14 +290,23 @@ let NodeBindingDialog = class extends i$1 {
       const entries = rawEntries ? Object.values(rawEntries).map(v => AccessControlEntryDataTransformer.transform(v)) : [];
       entries.push(entry);
       const apiEntries = entries.map(e => this.toAccessControlEntry(e));
-      const result = await this.client.setACLEntry(targetNodeId, apiEntries);
-      if (result && result.length > 0) {
-        return result[0].status === 0;
+      const results = await this.client.setACLEntry(targetNodeId, apiEntries);
+      const batchResult = analyzeBatchResults(results);
+      if (batchResult.outcome !== "all_success") {
+        console.error(`Set ACL entry: ${batchResult.message}`);
       }
-      return true;
+      return batchResult;
     } catch (err) {
-      console.error("add acl error:", err);
-      return false;
+      console.error("Add ACL error:", err);
+      return {
+        outcome: "all_failed",
+        successCount: 0,
+        failureCount: 1,
+        errorCounts: {
+          1: 1
+        },
+        message: `Exception: ${err instanceof Error ? err.message : String(err)}`
+      };
     }
   }
   /** Convert local BindingEntryStruct to API BindingTarget (without fabricIndex) */
@@ -230,14 +337,23 @@ let NodeBindingDialog = class extends i$1 {
     bindings.push(bindingEntry);
     try {
       const apiBindings = bindings.map(b => this.toBindingTarget(b));
-      const result = await this.client.setNodeBinding(this.getNodeIdAsNumber(), endpoint, apiBindings);
-      if (result && result.length > 0) {
-        return result[0].status === 0;
+      const results = await this.client.setNodeBinding(this.getNodeIdAsNumber(), endpoint, apiBindings);
+      const batchResult = analyzeBatchResults(results);
+      if (batchResult.outcome !== "all_success") {
+        console.error(`Set binding: ${batchResult.message}`);
       }
-      return true;
+      return batchResult;
     } catch (err) {
-      console.log("add bindings error:", err);
-      return false;
+      console.error("Add bindings error:", err);
+      return {
+        outcome: "all_failed",
+        successCount: 0,
+        failureCount: 1,
+        errorCounts: {
+          1: 1
+        },
+        message: `Exception: ${err instanceof Error ? err.message : String(err)}`
+      };
     }
   }
   async addBindingHandler() {
@@ -271,11 +387,16 @@ let NodeBindingDialog = class extends i$1 {
       fabricIndex: 0
       // Placeholder - server will use correct fabric index
     };
-    const result_acl = await this.add_target_acl(targetNodeId, acl_entry);
-    if (!result_acl) {
-      alert("add target acl error!");
+    const aclResult = await this.add_target_acl(targetNodeId, acl_entry);
+    if (aclResult.outcome === "all_failed") {
+      alert(`Failed to add ACL entry:
+${aclResult.message}`);
       return;
     }
+    if (aclResult.outcome === "partial") {
+      alert(`ACL entry partially failed:
+${aclResult.message}`);
+    }
     const endpoint = this.endpoint;
     const bindingEntry = {
       node: targetNodeId,
@@ -285,12 +406,19 @@ let NodeBindingDialog = class extends i$1 {
       fabricIndex: void 0
       // Server will use correct fabric index
     };
-    const result_binding = await this.add_bindings(endpoint, bindingEntry);
-    if (result_binding) {
+    const bindingResult = await this.add_bindings(endpoint, bindingEntry);
+    if (bindingResult.outcome === "all_success") {
       this._targetNodeId.value = "";
       this._targetEndpoint.value = "";
       this._targetCluster.value = "";
       this.requestUpdate();
+    } else if (bindingResult.outcome === "partial") {
+      alert(`Binding partially failed:
+${bindingResult.message}`);
+      this.requestUpdate();
+    } else {
+      alert(`Failed to add binding:
+${bindingResult.message}`);
     }
   }
   _close() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@matter-server/dashboard",
-    "version": "0.3.4",
+    "version": "0.3.5",
     "description": "Dashboard for OHF Matter Server",
     "bugs": {
         "url": "https://github.com/matter-js/matterjs-server/issues"
@@ -22,8 +22,8 @@
         "bundle": "rollup -c"
     },
     "devDependencies": {
-        "@babel/preset-env": "^7.28.6",
-        "@matter/main": "0.16.9-alpha.0-20260201-8748390b1",
+        "@babel/preset-env": "^7.29.0",
+        "@matter/main": "0.16.9-alpha.0-20260204-fd5b6ed86",
         "@rollup/plugin-babel": "^6.1.0",
         "@rollup/plugin-commonjs": "^29.0.0",
         "rollup-plugin-copy": "^3.5.0",
@@ -31,14 +31,14 @@
         "@rollup/plugin-node-resolve": "^16.0.3",
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^12.3.0",
-        "rollup": "^4.57.0",
+        "rollup": "^4.57.1",
         "serve": "^14.2.5"
     },
     "dependencies": {
         "@lit/context": "^1.1.6",
         "@material/web": "^2.4.1",
-        "@matter-server/ws-client": "0.3.4",
-        "@matter-server/custom-clusters": "0.3.4",
+        "@matter-server/ws-client": "0.3.5",
+        "@matter-server/custom-clusters": "0.3.5",
         "@mdi/js": "^7.4.47",
         "lit": "^3.3.2",
         "tslib": "^2.8.1",

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

@@ -28,6 +28,7 @@ import {
 
 import { consume } from "@lit/context";
 import { clientContext } from "../../../client/client-context.js";
+import { analyzeBatchResults, type MatterBatchResult } from "../../../util/matter-status.js";
 
 @customElement("node-binding-dialog")
 export class NodeBindingDialog extends LitElement {
@@ -137,7 +138,7 @@ export class NodeBindingDialog extends LitElement {
         console.error(`Binding deletion failed: ${errorMessage}`);
     }
 
-    private async add_target_acl(targetNodeId: number, entry: AccessControlEntryStruct) {
+    private async add_target_acl(targetNodeId: number, entry: AccessControlEntryStruct): Promise<MatterBatchResult> {
         try {
             // Fetch existing ACL entries and transform to local struct format
             const rawEntries = this.client.nodes[targetNodeId]?.attributes["0/31/0"] as InputType[] | undefined;
@@ -148,15 +149,22 @@ export class NodeBindingDialog extends LitElement {
 
             // Convert to API format (without fabricIndex - server handles it)
             const apiEntries = entries.map(e => this.toAccessControlEntry(e));
-            const result = await this.client.setACLEntry(targetNodeId, apiEntries);
-            // Check first result status if available
-            if (result && result.length > 0) {
-                return result[0].status === 0;
+            const results = await this.client.setACLEntry(targetNodeId, apiEntries);
+
+            const batchResult = analyzeBatchResults(results);
+            if (batchResult.outcome !== "all_success") {
+                console.error(`Set ACL entry: ${batchResult.message}`);
             }
-            return true; // Assume success if no error thrown
+            return batchResult;
         } catch (err) {
-            console.error("add acl error:", err);
-            return false;
+            console.error("Add ACL error:", err);
+            return {
+                outcome: "all_failed",
+                successCount: 0,
+                failureCount: 1,
+                errorCounts: { 1: 1 },
+                message: `Exception: ${err instanceof Error ? err.message : String(err)}`,
+            };
         }
     }
 
@@ -185,21 +193,28 @@ export class NodeBindingDialog extends LitElement {
         };
     }
 
-    private async add_bindings(endpoint: number, bindingEntry: BindingEntryStruct) {
+    private async add_bindings(endpoint: number, bindingEntry: BindingEntryStruct): Promise<MatterBatchResult> {
         const bindings = this.fetchBindingEntry();
         bindings.push(bindingEntry);
         try {
             // Convert to API format (without fabricIndex - server handles it)
             const apiBindings = bindings.map(b => this.toBindingTarget(b));
-            const result = await this.client.setNodeBinding(this.getNodeIdAsNumber(), endpoint, apiBindings);
-            // Check first result status if available
-            if (result && result.length > 0) {
-                return result[0].status === 0;
+            const results = await this.client.setNodeBinding(this.getNodeIdAsNumber(), endpoint, apiBindings);
+
+            const batchResult = analyzeBatchResults(results);
+            if (batchResult.outcome !== "all_success") {
+                console.error(`Set binding: ${batchResult.message}`);
             }
-            return true; // Assume success if no error thrown
+            return batchResult;
         } catch (err) {
-            console.log("add bindings error:", err);
-            return false;
+            console.error("Add bindings error:", err);
+            return {
+                outcome: "all_failed",
+                successCount: 0,
+                failureCount: 1,
+                errorCounts: { 1: 1 },
+                message: `Exception: ${err instanceof Error ? err.message : String(err)}`,
+            };
         }
     }
 
@@ -243,11 +258,15 @@ export class NodeBindingDialog extends LitElement {
             fabricIndex: 0, // Placeholder - server will use correct fabric index
         };
 
-        const result_acl = await this.add_target_acl(targetNodeId, acl_entry);
-        if (!result_acl) {
-            alert("add target acl error!");
+        const aclResult = await this.add_target_acl(targetNodeId, acl_entry);
+        if (aclResult.outcome === "all_failed") {
+            alert(`Failed to add ACL entry:\n${aclResult.message}`);
             return;
         }
+        if (aclResult.outcome === "partial") {
+            alert(`ACL entry partially failed:\n${aclResult.message}`);
+            // Continue with binding attempt since some ACL entries succeeded
+        }
 
         const endpoint = this.endpoint;
         // Note: fabricIndex is assigned by the server based on the device's fabric table
@@ -259,13 +278,18 @@ export class NodeBindingDialog extends LitElement {
             fabricIndex: undefined, // Server will use correct fabric index
         };
 
-        const result_binding = await this.add_bindings(endpoint, bindingEntry);
+        const bindingResult = await this.add_bindings(endpoint, bindingEntry);
 
-        if (result_binding) {
+        if (bindingResult.outcome === "all_success") {
             this._targetNodeId.value = "";
             this._targetEndpoint.value = "";
             this._targetCluster.value = "";
             this.requestUpdate();
+        } else if (bindingResult.outcome === "partial") {
+            alert(`Binding partially failed:\n${bindingResult.message}`);
+            this.requestUpdate(); // Update UI to show what succeeded
+        } else {
+            alert(`Failed to add binding:\n${bindingResult.message}`);
         }
     }
 

package/src/entrypoint/main.ts

@@ -13,7 +13,9 @@ async function main() {
     let url = "";
 
     // Detect if we're running in the (production) webserver included in the matter server or not.
+    // Priority: 1) Server-injected flag (for reverse proxy setups), 2) URL-based detection
     const isProductionServer =
+        (window as unknown as { __MATTERJS_PRODUCTION_MODE__?: boolean }).__MATTERJS_PRODUCTION_MODE__ === true ||
         location.origin.includes(":5580") ||
         location.href.includes("hassio_ingress") ||
         location.href.includes("/api/ingress/");

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

@@ -5,7 +5,7 @@
  */
 
 import type { MatterClient, MatterNode } from "@matter-server/ws-client";
-import { mdiFitToScreen } from "@mdi/js";
+import { mdiFitToScreen, mdiMagnifyMinus, mdiMagnifyPlus, mdiPause, mdiPlay } from "@mdi/js";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import "../components/ha-svg-icon";
@@ -51,6 +51,9 @@ class MatterNetworkView extends LitElement {
     @state()
     private _selectedNodeId: number | string | null = null;
 
+    @state()
+    private _physicsEnabled = true;
+
     private _initialSelectionApplied = false;
     private _selectRetryTimer?: ReturnType<typeof setTimeout>;
 
@@ -127,16 +130,67 @@ class MatterNetworkView extends LitElement {
         }
     }
 
+    private _handleZoomIn(): void {
+        if (this.networkType === "thread") {
+            this._threadGraph?.zoomIn();
+        } else {
+            this._wifiGraph?.zoomIn();
+        }
+    }
+
+    private _handleZoomOut(): void {
+        if (this.networkType === "thread") {
+            this._threadGraph?.zoomOut();
+        } else {
+            this._wifiGraph?.zoomOut();
+        }
+    }
+
+    private _handleTogglePhysics(): void {
+        const newState = !this._physicsEnabled;
+        this._physicsEnabled = newState;
+        // Keep both graphs in sync so switching between Thread and WiFi
+        // does not cause a mismatch between the UI button and graph state
+        this._threadGraph?.setPhysicsEnabled(newState);
+        this._wifiGraph?.setPhysicsEnabled(newState);
+    }
+
+    private _handlePhysicsChanged(event: CustomEvent<{ enabled: boolean }>): void {
+        // Update UI state when graph auto-freezes and keep both graphs in sync
+        this._physicsEnabled = event.detail.enabled;
+        this._threadGraph?.setPhysicsEnabled(event.detail.enabled);
+        this._wifiGraph?.setPhysicsEnabled(event.detail.enabled);
+    }
+
     private _renderThreadView() {
         return html`
             <div class="graph-section">
                 <div class="graph-header">
                     <h2>Thread Network Mesh</h2>
-                    <button class="fit-button" @click=${this._handleFitToScreen} title="Fit to screen">
-                        <ha-svg-icon .path=${mdiFitToScreen}></ha-svg-icon>
-                    </button>
+                    <div class="graph-controls">
+                        <button class="control-button" @click=${this._handleZoomIn} title="Zoom in">
+                            <ha-svg-icon .path=${mdiMagnifyPlus}></ha-svg-icon>
+                        </button>
+                        <button class="control-button" @click=${this._handleZoomOut} title="Zoom out">
+                            <ha-svg-icon .path=${mdiMagnifyMinus}></ha-svg-icon>
+                        </button>
+                        <button class="control-button" @click=${this._handleFitToScreen} title="Fit to screen">
+                            <ha-svg-icon .path=${mdiFitToScreen}></ha-svg-icon>
+                        </button>
+                        <button
+                            class="control-button ${this._physicsEnabled ? "" : "active"}"
+                            @click=${this._handleTogglePhysics}
+                            title="${this._physicsEnabled ? "Freeze layout" : "Unfreeze layout"}"
+                        >
+                            <ha-svg-icon .path=${this._physicsEnabled ? mdiPause : mdiPlay}></ha-svg-icon>
+                        </button>
+                    </div>
                 </div>
-                <thread-graph .nodes=${this.nodes} @node-selected=${this._handleNodeSelected}></thread-graph>
+                <thread-graph
+                    .nodes=${this.nodes}
+                    @node-selected=${this._handleNodeSelected}
+                    @physics-changed=${this._handlePhysicsChanged}
+                ></thread-graph>
             </div>
         `;
     }
@@ -146,11 +200,30 @@ class MatterNetworkView extends LitElement {
             <div class="graph-section">
                 <div class="graph-header">
                     <h2>WiFi Network</h2>
-                    <button class="fit-button" @click=${this._handleFitToScreen} title="Fit to screen">
-                        <ha-svg-icon .path=${mdiFitToScreen}></ha-svg-icon>
-                    </button>
+                    <div class="graph-controls">
+                        <button class="control-button" @click=${this._handleZoomIn} title="Zoom in">
+                            <ha-svg-icon .path=${mdiMagnifyPlus}></ha-svg-icon>
+                        </button>
+                        <button class="control-button" @click=${this._handleZoomOut} title="Zoom out">
+                            <ha-svg-icon .path=${mdiMagnifyMinus}></ha-svg-icon>
+                        </button>
+                        <button class="control-button" @click=${this._handleFitToScreen} title="Fit to screen">
+                            <ha-svg-icon .path=${mdiFitToScreen}></ha-svg-icon>
+                        </button>
+                        <button
+                            class="control-button ${this._physicsEnabled ? "" : "active"}"
+                            @click=${this._handleTogglePhysics}
+                            title="${this._physicsEnabled ? "Freeze layout" : "Unfreeze layout"}"
+                        >
+                            <ha-svg-icon .path=${this._physicsEnabled ? mdiPause : mdiPlay}></ha-svg-icon>
+                        </button>
+                    </div>
                 </div>
-                <wifi-graph .nodes=${this.nodes} @node-selected=${this._handleNodeSelected}></wifi-graph>
+                <wifi-graph
+                    .nodes=${this.nodes}
+                    @node-selected=${this._handleNodeSelected}
+                    @physics-changed=${this._handlePhysicsChanged}
+                ></wifi-graph>
             </div>
         `;
     }
@@ -245,7 +318,12 @@ class MatterNetworkView extends LitElement {
             color: var(--md-sys-color-on-background, #333);
         }
 
-        .fit-button {
+        .graph-controls {
+            display: flex;
+            gap: 4px;
+        }
+
+        .control-button {
             background: none;
             border: 1px solid var(--md-sys-color-outline-variant, #ccc);
             border-radius: 4px;
@@ -254,17 +332,28 @@ class MatterNetworkView extends LitElement {
             display: flex;
             align-items: center;
             justify-content: center;
-            transition: background-color 0.2s;
+            transition:
+                background-color 0.2s,
+                border-color 0.2s;
         }
 
-        .fit-button:hover {
+        .control-button:hover {
             background-color: var(--md-sys-color-surface-container-high, #e8e8e8);
         }
 
-        .fit-button ha-svg-icon {
+        .control-button.active {
+            background-color: var(--md-sys-color-primary-container, #e8def8);
+            border-color: var(--md-sys-color-primary, #6750a4);
+        }
+
+        .control-button ha-svg-icon {
             --icon-primary-color: var(--md-sys-color-on-surface-variant, #666);
         }
 
+        .control-button.active ha-svg-icon {
+            --icon-primary-color: var(--md-sys-color-on-primary-container, #21005d);
+        }
+
         .graph-section thread-graph,
         .graph-section wifi-graph {
             flex: 1 1 0;