@serve.zone/dcrouter 7.3.0 → 7.4.1

package/ts_web/appstate.ts

@@ -1075,6 +1075,55 @@ export const toggleRemoteIngressAction = remoteIngressStatePart.createAction<{
   }
 });
 
+// ============================================================================
+// TypedSocket Client for Real-time Log Streaming
+// ============================================================================
+
+let socketClient: plugins.typedsocket.TypedSocket | null = null;
+const socketRouter = new plugins.domtools.plugins.typedrequest.TypedRouter();
+
+// Register handler for pushed log entries from the server
+socketRouter.addTypedHandler(
+  new plugins.domtools.plugins.typedrequest.TypedHandler<interfaces.requests.IReq_PushLogEntry>(
+    'pushLogEntry',
+    async (dataArg) => {
+      const current = logStatePart.getState();
+      const updated = [...current.recentLogs, dataArg.entry];
+      // Cap at 2000 entries
+      if (updated.length > 2000) {
+        updated.splice(0, updated.length - 2000);
+      }
+      logStatePart.setState({ ...current, recentLogs: updated });
+      return {};
+    }
+  )
+);
+
+async function connectSocket() {
+  if (socketClient) return;
+  try {
+    socketClient = await plugins.typedsocket.TypedSocket.createClient(
+      socketRouter,
+      plugins.typedsocket.TypedSocket.useWindowLocationOriginUrl(),
+    );
+    await socketClient.setTag('role', 'ops_dashboard');
+  } catch (err) {
+    console.error('TypedSocket connection failed:', err);
+    socketClient = null;
+  }
+}
+
+async function disconnectSocket() {
+  if (socketClient) {
+    try {
+      await socketClient.stop();
+    } catch {
+      // ignore disconnect errors
+    }
+    socketClient = null;
+  }
+}
+
 // Combined refresh action for efficient polling
 async function dispatchCombinedRefreshAction() {
   const context = getActionContext();
@@ -1237,9 +1286,21 @@ let currentRefreshRate = 1000; // Track current refresh rate to avoid unnecessar
     if (state.isLoggedIn !== previousIsLoggedIn) {
       previousIsLoggedIn = state.isLoggedIn;
       startAutoRefresh();
+
+      // Connect/disconnect TypedSocket based on login state
+      if (state.isLoggedIn) {
+        connectSocket();
+      } else {
+        disconnectSocket();
+      }
     }
   });
 
   // Initial start
   startAutoRefresh();
+
+  // Connect TypedSocket if already logged in (e.g., persistent session)
+  if (loginStatePart.getState().isLoggedIn) {
+    connectSocket();
+  }
 })();

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

@@ -29,6 +29,8 @@ export class OpsViewLogs extends DeesElement {
   @state()
   accessor filterLimit: number = 100;
 
+  private lastPushedCount = 0;
+
   constructor() {
     super();
     const subscription = appstate.logStatePart
@@ -110,7 +112,11 @@ export class OpsViewLogs extends DeesElement {
 
   async connectedCallback() {
     super.connectedCallback();
-    this.fetchLogs();
+    this.lastPushedCount = 0;
+    // Only fetch if state is empty (streaming will handle new entries)
+    if (this.logState.recentLogs.length === 0) {
+      this.fetchLogs();
+    }
   }
 
   async updated(changedProperties: Map<string, any>) {
@@ -127,10 +133,27 @@ export class OpsViewLogs extends DeesElement {
     // Ensure the chart element has finished its own initialization
     await chartLog.updateComplete;
 
-    chartLog.clearLogs();
-    const entries = this.getMappedLogEntries();
-    if (entries.length > 0) {
-      chartLog.updateLog(entries);
+    // Wait for xterm terminal to finish initializing (CDN load)
+    if (!chartLog.terminalReady) {
+      await new Promise<void>((resolve) => {
+        const check = () => {
+          if (chartLog.terminalReady) { resolve(); return; }
+          setTimeout(check, 50);
+        };
+        check();
+      });
+    }
+
+    const allEntries = this.getMappedLogEntries();
+    if (this.lastPushedCount === 0 && allEntries.length > 0) {
+      // Initial load: push all entries
+      chartLog.updateLog(allEntries);
+      this.lastPushedCount = allEntries.length;
+    } else if (allEntries.length > this.lastPushedCount) {
+      // Incremental: only push new entries
+      const newEntries = allEntries.slice(this.lastPushedCount);
+      chartLog.updateLog(newEntries);
+      this.lastPushedCount = allEntries.length;
     }
   }
 

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

@@ -133,8 +133,8 @@ export class OpsViewOverview extends DeesElement {
             .logEntries=${this.getRecentEventEntries()}
           ></dees-chart-log>
           <dees-chart-log
-            .label=${'Security Alerts'}
-            .logEntries=${this.getSecurityAlertEntries()}
+            .label=${'DNS Queries'}
+            .logEntries=${this.getDnsQueryEntries()}
           ></dees-chart-log>
         </div>
       `}
@@ -395,6 +395,16 @@ export class OpsViewOverview extends DeesElement {
     }));
   }
 
+  private getDnsQueryEntries(): Array<{ timestamp: string; level: 'debug' | 'info' | 'warn' | 'error' | 'success'; message: string; source?: string }> {
+    const queries: any[] = (this.statsState.dnsStats as any)?.recentQueries || [];
+    return queries.map((q: any) => ({
+      timestamp: new Date(q.timestamp).toISOString(),
+      level: q.answered ? 'info' as const : 'warn' as const,
+      message: `${q.type} ${q.domain} (${q.responseTimeMs}ms)`,
+      source: 'dns',
+    }));
+  }
+
   private getEmailTrafficSeries(): Array<{ name: string; color: string; data: Array<{ x: number; y: number }> }> {
     const ts = this.statsState.emailStats?.timeSeries;
     if (!ts) return [];

package/ts_web/plugins.ts

@@ -2,9 +2,13 @@
 import * as deesElement from '@design.estate/dees-element';
 import * as deesCatalog from '@design.estate/dees-catalog';
 
+// TypedSocket for real-time push communication
+import * as typedsocket from '@api.global/typedsocket';
+
 export {
   deesElement,
-  deesCatalog
+  deesCatalog,
+  typedsocket,
 }
 
 // domtools gives us TypedRequest and other utilities