@serve.zone/dcrouter 11.11.0 → 11.12.0

package/ts_web/elements/ops-view-network.ts

@@ -47,10 +47,11 @@ export class OpsViewNetwork extends DeesElement {
   // Track if we need to update the chart to avoid unnecessary re-renders
   private lastChartUpdate = 0;
   private chartUpdateThreshold = 1000; // Minimum ms between chart updates
-  
+
   private trafficUpdateTimer: any = null;
   private requestsPerSecHistory: number[] = []; // Track requests/sec over time for trend
   private historyLoaded = false; // Whether server-side throughput history has been loaded
+  private visibilityHandler: (() => void) | null = null;
 
   constructor() {
     super();
@@ -59,28 +60,42 @@ export class OpsViewNetwork extends DeesElement {
     this.updateNetworkData();
     this.startTrafficUpdateTimer();
   }
-  
+
   async connectedCallback() {
     await super.connectedCallback();
-    
+
+    // Pause/resume traffic timer when tab visibility changes
+    this.visibilityHandler = () => {
+      if (document.hidden) {
+        this.stopTrafficUpdateTimer();
+      } else {
+        this.startTrafficUpdateTimer();
+      }
+    };
+    document.addEventListener('visibilitychange', this.visibilityHandler);
+
     // When network view becomes visible, ensure we fetch network data
     await appstate.networkStatePart.dispatchAction(appstate.fetchNetworkStatsAction, null);
   }
-  
+
   async disconnectedCallback() {
     await super.disconnectedCallback();
     this.stopTrafficUpdateTimer();
+    if (this.visibilityHandler) {
+      document.removeEventListener('visibilitychange', this.visibilityHandler);
+      this.visibilityHandler = null;
+    }
   }
 
   private subscribeToStateParts() {
     // Subscribe and track unsubscribe functions
-    const statsUnsubscribe = appstate.statsStatePart.state.subscribe((state) => {
+    const statsUnsubscribe = appstate.statsStatePart.select().subscribe((state) => {
       this.statsState = state;
       this.updateNetworkData();
     });
     this.rxSubscriptions.push(statsUnsubscribe);
     
-    const networkUnsubscribe = appstate.networkStatePart.state.subscribe((state) => {
+    const networkUnsubscribe = appstate.networkStatePart.select().subscribe((state) => {
       this.networkState = state;
       this.updateNetworkData();
     });

package/ts_web/elements/ops-view-remoteingress.ts

@@ -25,7 +25,7 @@ export class OpsViewRemoteIngress extends DeesElement {
 
   constructor() {
     super();
-    const sub = appstate.remoteIngressStatePart.state.subscribe((newState) => {
+    const sub = appstate.remoteIngressStatePart.select().subscribe((newState) => {
       this.riState = newState;
     });
     this.rxSubscriptions.push(sub);

package/ts_web/readme.md

@@ -111,7 +111,7 @@ ts_web/
 
 ### State Management
 
-The app uses `@push.rocks/smartstate` with multiple state parts:
+The app uses `@push.rocks/smartstate` v2.3+ with multiple state parts, scheduled actions with `autoPause: 'visibility'`, and batched updates:
 
 | State Part | Mode | Description |
 |-----------|------|-------------|
@@ -125,6 +125,16 @@ The app uses `@push.rocks/smartstate` with multiple state parts:
 | `certificateStatePart` | Soft | Certificate list, summary, loading state |
 | `remoteIngressStatePart` | Soft | Edge list, statuses, new edge secret |
 
+### Tab Visibility Optimization
+
+The dashboard automatically pauses all background activity when the browser tab is hidden and resumes when visible:
+
+- **Auto-refresh polling** uses `createScheduledAction` with `autoPause: 'visibility'` — stops HTTP requests while the tab is sleeping
+- **In-flight guard** prevents concurrent refresh requests from piling up
+- **WebSocket connection** disconnects when hidden and reconnects when visible, preventing log entry accumulation
+- **Network traffic timer** pauses chart updates when the tab is backgrounded
+- **Log entry batching** — incoming WebSocket log pushes are buffered and flushed once per animation frame to avoid per-entry re-renders
+
 ### Actions
 
 ```typescript

package/ts_web/router.ts

@@ -38,7 +38,7 @@ class AppRouter {
   }
 
   private setupStateSync(): void {
-    appstate.uiStatePart.state.subscribe((uiState) => {
+    appstate.uiStatePart.select().subscribe((uiState) => {
       if (this.suppressStateUpdate) return;
 
       const currentPath = window.location.pathname;