feat(opsserver): add RADIUS and VPN metrics to combined ops stats and overview dashboards, and stream live log buffer entries in follow mode

ts_web/elements/ops-view-overview.ts

@@ -21,6 +21,8 @@ export class OpsViewOverview extends DeesElement {
     emailStats: null,
     dnsStats: null,
     securityMetrics: null,
+    radiusStats: null,
+    vpnStats: null,
     lastUpdated: 0,
     isLoading: false,
     error: null,
@@ -117,6 +119,10 @@ export class OpsViewOverview extends DeesElement {
 
         ${this.renderDnsStats()}
 
+        ${this.renderRadiusStats()}
+
+        ${this.renderVpnStats()}
+
         <div class="chartGrid">
           <dees-chart-area
             .label=${'Email Traffic (24h)'}
@@ -378,6 +384,97 @@ export class OpsViewOverview extends DeesElement {
     `;
   }
 
+  private renderRadiusStats(): TemplateResult {
+    if (!this.statsState.radiusStats) return html``;
+
+    const stats = this.statsState.radiusStats;
+    const authTotal = stats.authRequests || 0;
+    const acceptRate = authTotal > 0 ? ((stats.authAccepts / authTotal) * 100).toFixed(1) : '0.0';
+
+    const tiles: IStatsTile[] = [
+      {
+        id: 'radiusStatus',
+        title: 'RADIUS Status',
+        value: stats.running ? 'Running' : 'Stopped',
+        type: 'text',
+        icon: 'lucide:ShieldCheck',
+        color: stats.running ? '#22c55e' : '#ef4444',
+        description: stats.running ? `Uptime: ${this.formatUptime(stats.uptime / 1000)}` : undefined,
+      },
+      {
+        id: 'authRequests',
+        title: 'Auth Requests',
+        value: stats.authRequests,
+        type: 'number',
+        icon: 'lucide:KeyRound',
+        color: '#3b82f6',
+        description: `Accept rate: ${acceptRate}% (${stats.authAccepts} / ${stats.authRejects} rejected)`,
+      },
+      {
+        id: 'activeSessions',
+        title: 'Active Sessions',
+        value: stats.activeSessions,
+        type: 'number',
+        icon: 'lucide:Users',
+        color: '#8b5cf6',
+      },
+      {
+        id: 'radiusTraffic',
+        title: 'Data Transfer',
+        value: this.formatBytes(stats.totalInputBytes + stats.totalOutputBytes),
+        type: 'text',
+        icon: 'lucide:ArrowLeftRight',
+        color: '#f59e0b',
+        description: `In: ${this.formatBytes(stats.totalInputBytes)} / Out: ${this.formatBytes(stats.totalOutputBytes)}`,
+      },
+    ];
+
+    return html`
+      <h2>RADIUS Statistics</h2>
+      <dees-statsgrid .tiles=${tiles}></dees-statsgrid>
+    `;
+  }
+
+  private renderVpnStats(): TemplateResult {
+    if (!this.statsState.vpnStats) return html``;
+
+    const stats = this.statsState.vpnStats;
+
+    const tiles: IStatsTile[] = [
+      {
+        id: 'vpnStatus',
+        title: 'VPN Status',
+        value: stats.running ? 'Running' : 'Stopped',
+        type: 'text',
+        icon: 'lucide:Shield',
+        color: stats.running ? '#22c55e' : '#ef4444',
+        description: `Subnet: ${stats.subnet}`,
+      },
+      {
+        id: 'connectedClients',
+        title: 'Connected Clients',
+        value: stats.connectedClients,
+        type: 'number',
+        icon: 'lucide:Wifi',
+        color: '#3b82f6',
+        description: `${stats.registeredClients} registered`,
+      },
+      {
+        id: 'wgPort',
+        title: 'WireGuard Port',
+        value: stats.wgListenPort,
+        type: 'number',
+        icon: 'lucide:Network',
+        color: '#8b5cf6',
+      },
+    ];
+
+    return html`
+      <h2>VPN Statistics</h2>
+      <dees-statsgrid .tiles=${tiles}></dees-statsgrid>
+    `;
+  }
+
   // --- Chart data helpers ---
 
   private getRecentEventEntries(): Array<{ timestamp: string; level: 'debug' | 'info' | 'warn' | 'error' | 'success'; message: string; source?: string }> {

ts_web/elements/ops-view-security.ts

@@ -20,6 +20,8 @@ export class OpsViewSecurity extends DeesElement {
     emailStats: null,
     dnsStats: null,
     securityMetrics: null,
+    radiusStats: null,
+    vpnStats: null,
     lastUpdated: 0,
     isLoading: false,
     error: null,