How to Setup Stablecoin Monitoring Dashboard: Forta Network Alert System

// forta-stablecoin-monitor/src/agent.js
const { 
  Finding, 
  FindingSeverity, 
  FindingType,
  getEthersProvider,
  createTransactionEvent
} = require('forta-agent');

class StablecoinMonitor {
  constructor() {
    this.provider = getEthersProvider();
    this.stablecoinAddress = process.env.STABLECOIN_ADDRESS;
    this.alertWebhook = process.env.DISCORD_WEBHOOK_URL;
    
    // Monitoring thresholds learned from 2 years of operation
    this.thresholds = {
      LARGE_TRANSFER: 1000000, // $1M threshold
      PRICE_DEVIATION: 0.005,  // 0.5% deviation
      VOLUME_SPIKE: 5.0,       // 5x normal volume
      GOVERNANCE_SPEED: 3600,  // 1 hour minimum for proposals
      LIQUIDITY_DROP: 0.2      // 20% liquidity drop
    };
    
    // Historical data for pattern detection
    this.transferHistory = [];
    this.priceHistory = [];
    this.volumeHistory = [];
    
    // Attack pattern signatures
    this.attackPatterns = {
      FLASH_LOAN_SETUP: /^flashLoan|^executeOperation|^onFlashLoan/,
      GOVERNANCE_RUSH: /^propose|^vote|^execute/,
      ORACLE_MANIPULATION: /^updatePrice|^setPrice|^submit/
    };
  }

  // Main monitoring function called by Forta on each transaction
  async handleTransaction(txEvent) {
    const findings = [];
    
    try {
      // Monitor large transfers
      const transferFindings = await this.monitorTransfers(txEvent);
      findings.push(...transferFindings);
      
      // Monitor price deviations
      const priceFindings = await this.monitorPriceDeviations(txEvent);
      findings.push(...priceFindings);
      
      // Monitor governance activities
      const governanceFindings = await this.monitorGovernance(txEvent);
      findings.push(...governanceFindings);
      
      // Monitor for attack patterns
      const attackFindings = await this.detectAttackPatterns(txEvent);
      findings.push(...attackFindings);
      
      // Monitor smart contract interactions
      const contractFindings = await this.monitorContractInteractions(txEvent);
      findings.push(...contractFindings);
      
      // Send critical alerts immediately
      for (const finding of findings) {
        if (finding.severity === FindingSeverity.Critical) {
          await this.sendImmediateAlert(finding, txEvent);
        }
      }
      
    } catch (error) {
      console.error('Monitoring error:', error);
      // Create error finding
      findings.push(Finding.fromObject({
        name: "Monitoring System Error",
        description: `Error in monitoring system: ${error.message}`,
        alertId: "MONITORING-ERROR",
        severity: FindingSeverity.High,
        type: FindingType.Degraded
      }));
    }
    
    return findings;
  }

  async monitorTransfers(txEvent) {
    const findings = [];
    
    // Parse transfer events
    const transferEvents = txEvent.filterLog(
      'Transfer(address,address,uint256)',
      this.stablecoinAddress
    );
    
    for (const transferEvent of transferEvents) {
      const { from, to, value } = transferEvent.args;
      const amount = parseFloat(value.toString()) / 1e6; // Assuming 6 decimals
      
      // Check for large transfers
      if (amount >= this.thresholds.LARGE_TRANSFER) {
        findings.push(Finding.fromObject({
          name: "Large Stablecoin Transfer Detected",
          description: `Transfer of ${amount.toLocaleString()} tokens from ${from} to ${to}`,
          alertId: "LARGE-TRANSFER",
          severity: amount >= this.thresholds.LARGE_TRANSFER * 5 ? 
                   FindingSeverity.Critical : FindingSeverity.High,
          type: FindingType.Suspicious,
          metadata: {
            from,
            to,
            amount: amount.toString(),
            txHash: txEvent.hash,
            blockNumber: txEvent.blockNumber.toString()
          }
        }));
      }
      
      // Check for suspicious patterns
      const suspiciousPattern = await this.analyzeSuspiciousTransferPattern(
        from, to, amount, txEvent
      );
      
      if (suspiciousPattern) {
        findings.push(suspiciousPattern);
      }
      
      // Update transfer history for pattern analysis
      this.transferHistory.push({
        from, to, amount,
        timestamp: Date.now(),
        blockNumber: txEvent.blockNumber
      });
      
      // Keep only recent history (last 1000 transfers)
      if (this.transferHistory.length > 1000) {
        this.transferHistory.shift();
      }
    }
    
    return findings;
  }

  async monitorPriceDeviations(txEvent) {
    const findings = [];
    
    try {
      // Get current price from multiple sources
      const prices = await this.getCurrentPrices();
      const avgPrice = prices.reduce((a, b) => a + b, 0) / prices.length;
      const targetPrice = 1.0; // $1 target for stablecoin
      
      const deviation = Math.abs(avgPrice - targetPrice) / targetPrice;
      
      if (deviation >= this.thresholds.PRICE_DEVIATION) {
        const severity = deviation >= 0.02 ? FindingSeverity.Critical : 
                        deviation >= 0.01 ? FindingSeverity.High : 
                        FindingSeverity.Medium;
                        
        findings.push(Finding.fromObject({
          name: "Stablecoin Price Deviation Detected",
          description: `Price deviation of ${(deviation * 100).toFixed(2)}% detected. Current price: $${avgPrice.toFixed(4)}`,
          alertId: "PRICE-DEVIATION",
          severity,
          type: FindingType.Suspicious,
          metadata: {
            currentPrice: avgPrice.toString(),
            deviation: deviation.toString(),
            prices: JSON.stringify(prices),
            targetPrice: targetPrice.toString()
          }
        }));
      }
      
      // Store price history for trend analysis
      this.priceHistory.push({
        price: avgPrice,
        timestamp: Date.now(),
        blockNumber: txEvent.blockNumber
      });
      
      // Keep 24 hours of price history
      const cutoff = Date.now() - (24 * 60 * 60 * 1000);
      this.priceHistory = this.priceHistory.filter(p => p.timestamp >= cutoff);
      
    } catch (error) {
      console.error('Price monitoring error:', error);
    }
    
    return findings;
  }

  async detectAttackPatterns(txEvent) {
    const findings = [];
    
    // Analyze transaction for known attack patterns
    const txData = txEvent.transaction.data;
    const functionSignature = txData.slice(0, 10);
    
    // Check for flash loan setup
    if (this.attackPatterns.FLASH_LOAN_SETUP.test(txEvent.transaction.to)) {
      const isFollowedByStablecoinInteraction = await this.checkFollowingTransactions(
        txEvent.hash, 
        this.stablecoinAddress,
        5 // Check next 5 transactions
      );
      
      if (isFollowedByStablecoinInteraction) {
        findings.push(Finding.fromObject({
          name: "Potential Flash Loan Attack Pattern",
          description: "Flash loan followed by stablecoin interactions detected",
          alertId: "FLASH-LOAN-PATTERN",
          severity: FindingSeverity.High,
          type: FindingType.Suspicious,
          metadata: {
            txHash: txEvent.hash,
            suspiciousContract: txEvent.transaction.to,
            pattern: "flash_loan_setup"
          }
        }));
      }
    }
    
    // Check for rapid governance manipulation
    if (this.attackPatterns.GOVERNANCE_RUSH.test(txData)) {
      const recentGovernanceActivity = await this.getRecentGovernanceActivity();
      
      if (recentGovernanceActivity.length > 3) { // More than 3 governance actions recently
        findings.push(Finding.fromObject({
          name: "Rapid Governance Activity Detected", 
          description: "Unusually high governance activity may indicate attack",
          alertId: "GOVERNANCE-RUSH",
          severity: FindingSeverity.High,
          type: FindingType.Suspicious,
          metadata: {
            recentActions: recentGovernanceActivity.length.toString(),
            pattern: "governance_rush"
          }
        }));
      }
    }
    
    return findings;
  }

  async analyzeSuspiciousTransferPattern(from, to, amount, txEvent) {
    // Check for circular transfers (potential wash trading)
    const recentFromTo = this.transferHistory.filter(t => 
      t.from === to && t.to === from && 
      Date.now() - t.timestamp < 600000 // Within 10 minutes
    );
    
    if (recentFromTo.length > 0) {
      return Finding.fromObject({
        name: "Circular Transfer Pattern Detected",
        description: `Potential wash trading: ${amount} tokens transferred between ${from} and ${to}`,
        alertId: "CIRCULAR-TRANSFER",
        severity: FindingSeverity.Medium,
        type: FindingType.Suspicious,
        metadata: {
          from, to,
          amount: amount.toString(),
          recentTransfers: recentFromTo.length.toString()
        }
      });
    }
    
    // Check for rapid sequential transfers (potential automated attack)
    const recentFromSame = this.transferHistory.filter(t =>
      t.from === from &&
      Date.now() - t.timestamp < 60000 // Within 1 minute
    );
    
    if (recentFromSame.length >= 5) {
      return Finding.fromObject({
        name: "Rapid Sequential Transfers Detected",
        description: `${recentFromSame.length} transfers from ${from} in last minute`,
        alertId: "RAPID-TRANSFERS", 
        severity: FindingSeverity.High,
        type: FindingType.Suspicious,
        metadata: {
          from,
          transferCount: recentFromSame.length.toString(),
          timeWindow: "60s"
        }
      });
    }
    
    return null;
  }
}

// Export the monitoring agent
module.exports = {
  handleTransaction: async (txEvent) => {
    const monitor = new StablecoinMonitor();
    return await monitor.handleTransaction(txEvent);
  }
};

// pattern-detection/advanced-patterns.js
class AdvancedPatternDetector {
  constructor() {
    this.historicalData = new Map();
    this.anomalyDetector = new AnomalyDetector();
  }

  /**
   * Detect sophisticated attack patterns using machine learning
   */
  async detectSophisticatedPatterns(txEvent, historicalContext) {
    const patterns = [];
    
    // MEV sandwich attack detection
    const sandwichPattern = await this.detectSandwichAttack(txEvent);
    if (sandwichPattern) patterns.push(sandwichPattern);
    
    // Oracle manipulation detection
    const oraclePattern = await this.detectOracleManipulation(txEvent);
    if (oraclePattern) patterns.push(oraclePattern);
    
    // Governance attack detection
    const governancePattern = await this.detectGovernanceAttack(txEvent);
    if (governancePattern) patterns.push(governancePattern);
    
    // Time-based attack detection
    const timingPattern = await this.detectTimingAttack(txEvent);
    if (timingPattern) patterns.push(timingPattern);
    
    return patterns;
  }

  async detectSandwichAttack(txEvent) {
    // Look for the sandwich pattern: front-run -> victim -> back-run
    const blockTransactions = await this.getBlockTransactions(txEvent.blockNumber);
    const txIndex = blockTransactions.findIndex(tx => tx.hash === txEvent.hash);
    
    if (txIndex === -1 || txIndex === 0 || txIndex === blockTransactions.length - 1) {
      return null; // Not in sandwich position
    }
    
    const prevTx = blockTransactions[txIndex - 1];
    const nextTx = blockTransactions[txIndex + 1];
    
    // Check if prev and next transactions are from same address
    if (prevTx.from === nextTx.from && prevTx.from !== txEvent.from) {
      const prevGasPrice = BigInt(prevTx.gasPrice);
      const victimGasPrice = BigInt(txEvent.gasPrice);
      const nextGasPrice = BigInt(nextTx.gasPrice);
      
      // Sandwich pattern: higher gas before, lower gas after
      if (prevGasPrice > victimGasPrice && nextGasPrice < victimGasPrice) {
        return {
          type: 'SANDWICH_ATTACK',
          severity: FindingSeverity.High,
          description: `Potential sandwich attack detected on transaction ${txEvent.hash}`,
          metadata: {
            frontRunTx: prevTx.hash,
            victimTx: txEvent.hash,
            backRunTx: nextTx.hash,
            attacker: prevTx.from
          }
        };
      }
    }
    
    return null;
  }

  async detectOracleManipulation(txEvent) {
    // Check for oracle price updates followed by large trades
    const oracleUpdates = txEvent.filterLog('PriceUpdated(uint256,uint256)');
    
    if (oracleUpdates.length > 0) {
      // Check if there are large trades immediately after
      const subsequentTrades = await this.getSubsequentTransactions(
        txEvent.hash, 
        5 // Check next 5 transactions
      );
      
      const largeTrades = subsequentTrades.filter(tx => 
        this.isLargeStablecoinTrade(tx)
      );
      
      if (largeTrades.length > 0) {
        return {
          type: 'ORACLE_MANIPULATION',
          severity: FindingSeverity.Critical,
          description: 'Oracle price update followed by large trades',
          metadata: {
            oracleUpdateTx: txEvent.hash,
            suspiciousTradeCount: largeTrades.length.toString(),
            trades: largeTrades.map(tx => tx.hash)
          }
        };
      }
    }
    
    return null;
  }

  async detectGovernanceAttack(txEvent) {
    // Look for rapid proposal creation and voting
    const governanceEvents = txEvent.filterLog([
      'ProposalCreated(uint256,address,address[],uint256[],string[],bytes[],uint256,uint256,string)',
      'VoteCast(address,uint256,uint8,uint256,string)'
    ]);
    
    if (governanceEvents.length > 0) {
      const recentProposals = await this.getRecentProposals(24); // Last 24 hours
      
      // Check for unusually fast proposal lifecycle
      const fastProposals = recentProposals.filter(proposal => {
        const creationToVote = proposal.firstVoteTime - proposal.creationTime;
        return creationToVote < 3600; // Less than 1 hour
      });
      
      if (fastProposals.length > 0) {
        return {
          type: 'GOVERNANCE_ATTACK',
          severity: FindingSeverity.High,
          description: 'Unusually fast governance proposal lifecycle detected',
          metadata: {
            fastProposalCount: fastProposals.length.toString(),
            averageTime: this.calculateAverageTime(fastProposals).toString()
          }
        };
      }
    }
    
    return null;
  }

  async detectTimingAttack(txEvent) {
    // Check for transactions that exploit time-sensitive functions
    const timeBasedFunctions = [
      'updatePrice', 'rebase', 'liquidate', 'harvest'
    ];
    
    const txData = txEvent.transaction.data;
    const functionName = this.decodeFunctionName(txData);
    
    if (timeBasedFunctions.includes(functionName)) {
      const blockTimestamp = await this.getBlockTimestamp(txEvent.blockNumber);
      const expectedTiming = await this.getExpectedTiming(functionName);
      
      const timingDeviation = Math.abs(blockTimestamp - expectedTiming);
      
      // If function called significantly off schedule
      if (timingDeviation > 3600) { // More than 1 hour off
        return {
          type: 'TIMING_ATTACK',
          severity: FindingSeverity.Medium,
          description: `Time-sensitive function ${functionName} called off schedule`,
          metadata: {
            functionName,
            expectedTime: expectedTiming.toString(),
            actualTime: blockTimestamp.toString(),
            deviation: timingDeviation.toString()
          }
        };
      }
    }
    
    return null;
  }
}

// dashboard/monitoring-dashboard.js
const express = require('express');
const WebSocket = require('ws');
const cors = require('cors');

class MonitoringDashboard {
  constructor() {
    this.app = express();
    this.wss = new WebSocket.Server({ port: 8080 });
    this.alerts = [];
    this.metrics = {
      totalTransactions: 0,
      alertsTriggered: 0,
      criticalAlerts: 0,
      averageResponseTime: 0
    };
    
    this.setupRoutes();
    this.setupWebSocket();
    this.startMetricsCollection();
  }

  setupRoutes() {
    this.app.use(cors());
    this.app.use(express.json());
    
    // Get current metrics
    this.app.get('/api/metrics', (req, res) => {
      res.json({
        ...this.metrics,
        recentAlerts: this.alerts.slice(-10),
        timestamp: Date.now()
      });
    });
    
    // Get alert history
    this.app.get('/api/alerts', (req, res) => {
      const { limit = 50, severity } = req.query;
      
      let filteredAlerts = this.alerts;
      if (severity) {
        filteredAlerts = this.alerts.filter(a => a.severity === severity);
      }
      
      res.json(filteredAlerts.slice(-limit));
    });
    
    // Manual alert endpoint
    this.app.post('/api/alerts', (req, res) => {
      const { name, description, severity, metadata } = req.body;
      
      const alert = {
        id: Date.now().toString(),
        name,
        description,
        severity,
        metadata,
        timestamp: Date.now(),
        source: 'manual'
      };
      
      this.addAlert(alert);
      res.json({ success: true, alert });
    });
    
    // Health check
    this.app.get('/health', (req, res) => {
      res.json({ 
        status: 'healthy', 
        uptime: process.uptime(),
        alertsActive: this.alerts.filter(a => !a.resolved).length
      });
    });
  }

  setupWebSocket() {
    this.wss.on('connection', (ws) => {
      console.log('Dashboard client connected');
      
      // Send current state to new client
      ws.send(JSON.stringify({
        type: 'initial_state',
        metrics: this.metrics,
        recentAlerts: this.alerts.slice(-10)
      }));
      
      ws.on('close', () => {
        console.log('Dashboard client disconnected');
      });
    });
  }

  addAlert(alert) {
    this.alerts.push(alert);
    this.metrics.alertsTriggered++;
    
    if (alert.severity === 'Critical') {
      this.metrics.criticalAlerts++;
    }
    
    // Broadcast to all connected clients
    this.broadcastUpdate('new_alert', alert);
    
    // Keep only last 1000 alerts
    if (this.alerts.length > 1000) {
      this.alerts.shift();
    }
    
    // Send external notifications for critical alerts
    if (alert.severity === 'Critical') {
      this.sendExternalNotification(alert);
    }
  }

  broadcastUpdate(type, data) {
    const message = JSON.stringify({ type, data, timestamp: Date.now() });
    
    this.wss.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  }

  async sendExternalNotification(alert) {
    // Discord webhook notification
    if (process.env.DISCORD_WEBHOOK_URL) {
      try {
        await fetch(process.env.DISCORD_WEBHOOK_URL, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            embeds: [{
              title: `🚨 CRITICAL ALERT: ${alert.name}`,
              description: alert.description,
              color: 0xff0000,
              fields: Object.entries(alert.metadata || {}).map(([key, value]) => ({
                name: key,
                value: value.toString(),
                inline: true
              })),
              timestamp: new Date(alert.timestamp).toISOString()
            }]
          })
        });
      } catch (error) {
        console.error('Discord notification failed:', error);
      }
    }
    
    // Slack notification
    if (process.env.SLACK_WEBHOOK_URL) {
      try {
        await fetch(process.env.SLACK_WEBHOOK_URL, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            text: `🚨 CRITICAL ALERT: ${alert.name}`,
            attachments: [{
              color: 'danger',
              fields: [{
                title: 'Description',
                value: alert.description,
                short: false
              }]
            }]
          })
        });
      } catch (error) {
        console.error('Slack notification failed:', error);
      }
    }
  }

  startMetricsCollection() {
    // Update metrics every minute
    setInterval(() => {
      this.updateMetrics();
      this.broadcastUpdate('metrics_update', this.metrics);
    }, 60000);
  }

  updateMetrics() {
    const now = Date.now();
    const oneHourAgo = now - (60 * 60 * 1000);
    
    const recentAlerts = this.alerts.filter(a => a.timestamp >= oneHourAgo);
    
    this.metrics = {
      ...this.metrics,
      recentAlertsCount: recentAlerts.length,
      criticalAlertsLastHour: recentAlerts.filter(a => a.severity === 'Critical').length,
      lastUpdate: now
    };
  }

  start() {
    const port = process.env.DASHBOARD_PORT || 3000;
    this.app.listen(port, () => {
      console.log(`Monitoring dashboard running on port ${port}`);
    });
  }
}

<!-- dashboard/public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stablecoin Monitoring Dashboard</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .dashboard-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .metric-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .metric-value {
            font-size: 2.5em;
            font-weight: bold;
            color: #333;
        }
        
        .metric-label {
            color: #666;
            font-size: 0.9em;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .alerts-section {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .alert-item {
            border-left: 4px solid #ddd;
            padding: 15px;
            margin: 10px 0;
            background: #f9f9f9;
            border-radius: 0 5px 5px 0;
        }
        
        .alert-critical {
            border-left-color: #e74c3c;
            background-color: #fdf2f2;
        }
        
        .alert-high {
            border-left-color: #f39c12;
            background-color: #fef9e7;
        }
        
        .alert-medium {
            border-left-color: #f1c40f;
            background-color: #fffef0;
        }
        
        .alert-title {
            font-weight: bold;
            color: #333;
        }
        
        .alert-description {
            color: #666;
            margin: 5px 0;
        }
        
        .alert-time {
            font-size: 0.8em;
            color: #999;
        }
        
        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
        }
        
        .status-healthy {
            background-color: #27ae60;
        }
        
        .status-warning {
            background-color: #f39c12;
        }
        
        .status-critical {
            background-color: #e74c3c;
        }
    </style>
</head>
<body>
    <div class="dashboard-header">
        <h1>🛡️ Stablecoin Security Monitor</h1>
        <p>Real-time monitoring and threat detection system</p>
        <div id="connection-status">
            <span id="status-indicator" class="status-indicator status-healthy"></span>
            <span id="status-text">Connected</span>
        </div>
    </div>

    <div class="metrics-grid">
        <div class="metric-card">
            <div class="metric-value" id="total-transactions">0</div>
            <div class="metric-label">Total Transactions</div>
        </div>
        
        <div class="metric-card">
            <div class="metric-value" id="alerts-triggered">0</div>
            <div class="metric-label">Alerts Triggered</div>
        </div>
        
        <div class="metric-card">
            <div class="metric-value" id="critical-alerts">0</div>
            <div class="metric-label">Critical Alerts</div>
        </div>
        
        <div class="metric-card">
            <div class="metric-value" id="response-time">0ms</div>
            <div class="metric-label">Avg Response Time</div>
        </div>
    </div>

    <div class="alerts-section">
        <h2>🚨 Recent Alerts</h2>
        <div id="alerts-container">
            <!-- Alerts will be populated by JavaScript -->
        </div>
    </div>

    <script>
        class DashboardClient {
            constructor() {
                this.ws = null;
                this.reconnectAttempts = 0;
                this.maxReconnectAttempts = 5;
                this.connect();
            }

            connect() {
                const wsUrl = `ws://${window.location.hostname}:8080`;
                this.ws = new WebSocket(wsUrl);

                this.ws.onopen = () => {
                    console.log('Connected to monitoring system');
                    this.updateConnectionStatus('Connected', 'healthy');
                    this.reconnectAttempts = 0;
                };

                this.ws.onmessage = (event) => {
                    const message = JSON.parse(event.data);
                    this.handleMessage(message);
                };

                this.ws.onclose = () => {
                    console.log('Disconnected from monitoring system');
                    this.updateConnectionStatus('Disconnected', 'critical');
                    this.attemptReconnect();
                };

                this.ws.onerror = (error) => {
                    console.error('WebSocket error:', error);
                    this.updateConnectionStatus('Connection Error', 'critical');
                };
            }

            handleMessage(message) {
                switch (message.type) {
                    case 'initial_state':
                        this.updateMetrics(message.metrics);
                        this.updateAlerts(message.recentAlerts);
                        break;
                    
                    case 'new_alert':
                        this.addAlert(message.data);
                        break;
                    
                    case 'metrics_update':
                        this.updateMetrics(message.data);
                        break;
                }
            }

            updateMetrics(metrics) {
                document.getElementById('total-transactions').textContent = 
                    metrics.totalTransactions?.toLocaleString() || '0';
                document.getElementById('alerts-triggered').textContent = 
                    metrics.alertsTriggered?.toLocaleString() || '0';
                document.getElementById('critical-alerts').textContent = 
                    metrics.criticalAlerts?.toLocaleString() || '0';
                document.getElementById('response-time').textContent = 
                    `${metrics.averageResponseTime || 0}ms`;
            }

            updateAlerts(alerts) {
                const container = document.getElementById('alerts-container');
                container.innerHTML = '';
                
                if (!alerts || alerts.length === 0) {
                    container.innerHTML = '<p>No recent alerts</p>';
                    return;
                }

                alerts.reverse().forEach(alert => {
                    this.addAlert(alert);
                });
            }

            addAlert(alert) {
                const container = document.getElementById('alerts-container');
                const alertElement = document.createElement('div');
                alertElement.className = `alert-item alert-${alert.severity.toLowerCase()}`;
                
                const timestamp = new Date(alert.timestamp).toLocaleString();
                
                alertElement.innerHTML = `
                    <div class="alert-title">${alert.name}</div>
                    <div class="alert-description">${alert.description}</div>
                    <div class="alert-time">${timestamp}</div>
                `;
                
                container.insertBefore(alertElement, container.firstChild);
                
                // Keep only last 20 alerts in DOM
                while (container.children.length > 20) {
                    container.removeChild(container.lastChild);
                }
                
                // Flash effect for new alerts
                alertElement.style.animation = 'flash 1s ease-out';
            }

            updateConnectionStatus(text, status) {
                document.getElementById('status-text').textContent = text;
                const indicator = document.getElementById('status-indicator');
                indicator.className = `status-indicator status-${status}`;
            }

            attemptReconnect() {
                if (this.reconnectAttempts < this.maxReconnectAttempts) {
                    this.reconnectAttempts++;
                    const delay = Math.pow(2, this.reconnectAttempts) * 1000;
                    
                    this.updateConnectionStatus(
                        `Reconnecting in ${delay/1000}s...`, 
                        'warning'
                    );
                    
                    setTimeout(() => this.connect(), delay);
                }
            }
        }

        // Initialize dashboard
        document.addEventListener('DOMContentLoaded', () => {
            new DashboardClient();
        });
    </script>
</body>
</html>