@moontra/moonui-pro 2.20.1 → 2.20.3

package/src/components/performance-monitor/index.tsx

@@ -1,794 +0,0 @@
-"use client"
-
-import React, { useState, useEffect, useRef, useCallback } from "react"
-import { motion, AnimatePresence } from "framer-motion"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
-import { Button } from "../ui/button"
-import { MoonUIBadgePro as Badge } from "../ui/badge"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
-import { cn } from "../../lib/utils"
-import { 
-  Activity, 
-  Monitor, 
-  Cpu, 
-  MemoryStick, 
-  Network, 
-  HardDrive,
-  Zap,
-  Eye,
-  EyeOff,
-  BarChart3,
-  TrendingUp,
-  TrendingDown,
-  AlertTriangle,
-  CheckCircle,
-  RefreshCw,
-  Download,
-  Lock,
-  Sparkles,
-  Timer,
-  Gauge
-} from "lucide-react"
-import { useSubscription } from "../../hooks/use-subscription"
-
-interface PerformanceMetrics {
-  cpu: {
-    usage: number
-    cores: number
-    temperature?: number
-  }
-  memory: {
-    used: number
-    total: number
-    available: number
-    percentage: number
-  }
-  disk: {
-    used: number
-    total: number
-    free: number
-    percentage: number
-  }
-  network: {
-    download: number
-    upload: number
-    latency: number
-  }
-  system: {
-    uptime: number
-    loadAverage: number[]
-    processes: number
-  }
-  browser?: {
-    jsHeapUsed: number
-    jsHeapTotal: number
-    jsHeapLimit: number
-  }
-}
-
-interface PerformanceAlert {
-  id: string
-  type: "warning" | "critical" | "info"
-  metric: string
-  message: string
-  value: number
-  threshold: number
-  timestamp: Date
-}
-
-interface PerformanceMonitorProps {
-  autoRefresh?: boolean
-  refreshInterval?: number
-  showAlerts?: boolean
-  alertThresholds?: {
-    cpu: number
-    memory: number
-    disk: number
-    network: number
-  }
-  showCharts?: boolean
-  chartDuration?: number
-  maxDataPoints?: number
-  onAlert?: (alert: PerformanceAlert) => void
-  onMetricsUpdate?: (metrics: PerformanceMetrics) => void
-  className?: string
-}
-
-const PerformanceMonitorInternal: React.FC<PerformanceMonitorProps> = ({
-  autoRefresh = true,
-  refreshInterval = 5000,
-  showAlerts = true,
-  alertThresholds = {
-    cpu: 80,
-    memory: 85,
-    disk: 90,
-    network: 1000
-  },
-  showCharts = true,
-  chartDuration = 300000, // 5 minutes
-  maxDataPoints = 60,
-  onAlert,
-  onMetricsUpdate,
-  className
-}) => {
-  const [metrics, setMetrics] = useState<PerformanceMetrics | null>(null)
-  const [history, setHistory] = useState<{ timestamp: number; metrics: PerformanceMetrics }[]>([])
-  const [alerts, setAlerts] = useState<PerformanceAlert[]>([])
-  const [isVisible, setIsVisible] = useState(true)
-  const [isRefreshing, setIsRefreshing] = useState(false)
-  const intervalRef = useRef<NodeJS.Timeout | undefined>(undefined)
-
-  const generateMockMetrics = useCallback((): PerformanceMetrics => {
-    const baseMetrics = metrics || {
-      cpu: { usage: 25, cores: 8 },
-      memory: { used: 4.2, total: 16, available: 11.8, percentage: 26 },
-      disk: { used: 250, total: 500, free: 250, percentage: 50 },
-      network: { download: 50, upload: 20, latency: 25 },
-      system: { uptime: 86400, loadAverage: [1.2, 1.5, 1.8], processes: 120 }
-    }
-
-    // Simulate realistic variations
-    const variance = 0.1
-    return {
-      cpu: {
-        usage: Math.max(0, Math.min(100, baseMetrics.cpu.usage + (Math.random() - 0.5) * 20)),
-        cores: baseMetrics.cpu.cores,
-        temperature: 45 + Math.random() * 15
-      },
-      memory: {
-        used: Math.max(0, baseMetrics.memory.used + (Math.random() - 0.5) * 2),
-        total: baseMetrics.memory.total,
-        available: baseMetrics.memory.total - baseMetrics.memory.used,
-        percentage: Math.max(0, Math.min(100, baseMetrics.memory.percentage + (Math.random() - 0.5) * 10))
-      },
-      disk: {
-        used: baseMetrics.disk.used + (Math.random() - 0.5) * 10,
-        total: baseMetrics.disk.total,
-        free: baseMetrics.disk.total - baseMetrics.disk.used,
-        percentage: Math.max(0, Math.min(100, baseMetrics.disk.percentage + (Math.random() - 0.5) * 5))
-      },
-      network: {
-        download: Math.max(0, baseMetrics.network.download + (Math.random() - 0.5) * 30),
-        upload: Math.max(0, baseMetrics.network.upload + (Math.random() - 0.5) * 15),
-        latency: Math.max(1, baseMetrics.network.latency + (Math.random() - 0.5) * 10)
-      },
-      system: {
-        uptime: baseMetrics.system.uptime + refreshInterval / 1000,
-        loadAverage: baseMetrics.system.loadAverage.map(load => 
-          Math.max(0, load + (Math.random() - 0.5) * 0.2)
-        ),
-        processes: Math.max(50, baseMetrics.system.processes + Math.floor((Math.random() - 0.5) * 10))
-      },
-      browser: typeof window !== 'undefined' && 'memory' in performance ? {
-        jsHeapUsed: (performance as any).memory.usedJSHeapSize / 1024 / 1024,
-        jsHeapTotal: (performance as any).memory.totalJSHeapSize / 1024 / 1024,
-        jsHeapLimit: (performance as any).memory.jsHeapSizeLimit / 1024 / 1024
-      } : undefined
-    }
-  }, [metrics, refreshInterval])
-
-  const checkAlerts = useCallback((newMetrics: PerformanceMetrics) => {
-    const newAlerts: PerformanceAlert[] = []
-    const now = new Date()
-
-    // CPU Alert
-    if (newMetrics.cpu.usage > alertThresholds.cpu) {
-      newAlerts.push({
-        id: `cpu-${Date.now()}`,
-        type: newMetrics.cpu.usage > 95 ? "critical" : "warning",
-        metric: "CPU",
-        message: `CPU usage is ${newMetrics.cpu.usage.toFixed(1)}%`,
-        value: newMetrics.cpu.usage,
-        threshold: alertThresholds.cpu,
-        timestamp: now
-      })
-    }
-
-    // Memory Alert
-    if (newMetrics.memory.percentage > alertThresholds.memory) {
-      newAlerts.push({
-        id: `memory-${Date.now()}`,
-        type: newMetrics.memory.percentage > 95 ? "critical" : "warning",
-        metric: "Memory",
-        message: `Memory usage is ${newMetrics.memory.percentage.toFixed(1)}%`,
-        value: newMetrics.memory.percentage,
-        threshold: alertThresholds.memory,
-        timestamp: now
-      })
-    }
-
-    // Disk Alert
-    if (newMetrics.disk.percentage > alertThresholds.disk) {
-      newAlerts.push({
-        id: `disk-${Date.now()}`,
-        type: newMetrics.disk.percentage > 98 ? "critical" : "warning",
-        metric: "Disk",
-        message: `Disk usage is ${newMetrics.disk.percentage.toFixed(1)}%`,
-        value: newMetrics.disk.percentage,
-        threshold: alertThresholds.disk,
-        timestamp: now
-      })
-    }
-
-    // Network Latency Alert
-    if (newMetrics.network.latency > alertThresholds.network) {
-      newAlerts.push({
-        id: `network-${Date.now()}`,
-        type: "warning",
-        metric: "Network",
-        message: `High network latency: ${newMetrics.network.latency.toFixed(0)}ms`,
-        value: newMetrics.network.latency,
-        threshold: alertThresholds.network,
-        timestamp: now
-      })
-    }
-
-    if (newAlerts.length > 0) {
-      setAlerts(prev => [...newAlerts, ...prev].slice(0, 20))
-      newAlerts.forEach(alert => onAlert?.(alert))
-    }
-  }, [alertThresholds, onAlert])
-
-  const updateMetrics = useCallback(async () => {
-    setIsRefreshing(true)
-    
-    try {
-      const newMetrics = generateMockMetrics()
-      setMetrics(newMetrics)
-      
-      // Update history
-      setHistory(prev => {
-        const newHistory = [
-          { timestamp: Date.now(), metrics: newMetrics },
-          ...prev.slice(0, maxDataPoints - 1)
-        ]
-        return newHistory
-      })
-
-      // Check for alerts
-      if (showAlerts) {
-        checkAlerts(newMetrics)
-      }
-
-      onMetricsUpdate?.(newMetrics)
-    } catch (error) {
-      console.error("Failed to update metrics:", error)
-    } finally {
-      setIsRefreshing(false)
-    }
-  }, [generateMockMetrics, maxDataPoints, showAlerts, checkAlerts, onMetricsUpdate])
-
-  // Initial load
-  useEffect(() => {
-    updateMetrics()
-  }, [])
-
-  // Auto refresh
-  useEffect(() => {
-    if (!autoRefresh) return
-
-    intervalRef.current = setInterval(updateMetrics, refreshInterval)
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current)
-      }
-    }
-  }, [autoRefresh, refreshInterval, updateMetrics])
-
-  const formatBytes = (bytes: number, decimals = 1): string => {
-    if (bytes === 0) return '0 B'
-    const k = 1024
-    const dm = decimals < 0 ? 0 : decimals
-    const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
-    const i = Math.floor(Math.log(bytes) / Math.log(k))
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
-  }
-
-  const formatUptime = (seconds: number): string => {
-    const days = Math.floor(seconds / 86400)
-    const hours = Math.floor((seconds % 86400) / 3600)
-    const minutes = Math.floor((seconds % 3600) / 60)
-    
-    if (days > 0) return `${days}d ${hours}h ${minutes}m`
-    if (hours > 0) return `${hours}h ${minutes}m`
-    return `${minutes}m`
-  }
-
-  const getStatusColor = (percentage: number, thresholds = [70, 85]): string => {
-    if (percentage >= thresholds[1]) return "text-red-500"
-    if (percentage >= thresholds[0]) return "text-yellow-500"
-    return "text-green-500"
-  }
-
-  const exportMetrics = () => {
-    const data = {
-      timestamp: new Date().toISOString(),
-      currentMetrics: metrics,
-      history: history.slice(0, 20),
-      alerts: alerts.slice(0, 10)
-    }
-    
-    const blob = new Blob([JSON.stringify(data, null, 2)], { 
-      type: 'application/json' 
-    })
-    
-    const url = URL.createObjectURL(blob)
-    const link = document.createElement('a')
-    link.href = url
-    link.download = `performance-metrics-${Date.now()}.json`
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-    URL.revokeObjectURL(url)
-  }
-
-  if (!isVisible) {
-    return (
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={() => setIsVisible(true)}
-        className="fixed bottom-4 left-4 z-50"
-      >
-        <Monitor className="h-4 w-4 mr-2" />
-        Performance
-      </Button>
-    )
-  }
-
-  if (!metrics) {
-    return (
-      <Card className={cn("w-full max-w-6xl", className)}>
-        <CardContent className="p-6">
-          <div className="text-center">
-            <Activity className="h-12 w-12 animate-pulse mx-auto mb-4 text-muted-foreground" />
-            <p className="text-muted-foreground">Loading performance metrics...</p>
-          </div>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  return (
-    <Card className={cn("w-full max-w-6xl", className)}>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle className="flex items-center gap-2">
-              <Monitor className="h-5 w-5" />
-              Performance Monitor
-            </CardTitle>
-            <CardDescription>
-              Real-time system performance monitoring and alerts
-            </CardDescription>
-          </div>
-          
-          <div className="flex items-center gap-2">
-            <Badge variant={autoRefresh ? "outline" : "secondary"} className="gap-1">
-              {autoRefresh ? <Activity className="h-3 w-3 animate-pulse" /> : <Timer className="h-3 w-3" />}
-              {autoRefresh ? "Live" : "Paused"}
-            </Badge>
-            
-            {showAlerts && alerts.length > 0 && (
-              <Badge variant="destructive" className="gap-1">
-                <AlertTriangle className="h-3 w-3" />
-                {alerts.length}
-              </Badge>
-            )}
-            
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={updateMetrics}
-              disabled={isRefreshing}
-            >
-              <RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} />
-            </Button>
-            
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={exportMetrics}
-            >
-              <Download className="h-4 w-4" />
-            </Button>
-            
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => setIsVisible(false)}
-            >
-              <EyeOff className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-      </CardHeader>
-
-      <CardContent>
-        <Tabs defaultValue="overview" className="w-full">
-          <TabsList className="grid w-full grid-cols-4">
-            <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="details">Details</TabsTrigger>
-            <TabsTrigger value="alerts">Alerts</TabsTrigger>
-            <TabsTrigger value="history">History</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="overview" className="space-y-6">
-            {/* Key Metrics Grid */}
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              <Card>
-                <CardContent className="p-4">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <Cpu className="h-4 w-4 text-blue-500" />
-                      <span className="text-sm font-medium">CPU</span>
-                    </div>
-                    <span className={cn("font-bold", getStatusColor(metrics.cpu.usage))}>
-                      {metrics.cpu.usage.toFixed(1)}%
-                    </span>
-                  </div>
-                  <div className="h-2 mt-2 bg-secondary rounded-full overflow-hidden">
-                    <div 
-                      className="h-full bg-primary transition-all duration-300 ease-out"
-                      style={{ width: `${metrics.cpu.usage}%` }}
-                    />
-                  </div>
-                  <div className="text-xs text-muted-foreground mt-1">
-                    {metrics.cpu.cores} cores {metrics.cpu.temperature && `• ${metrics.cpu.temperature.toFixed(0)}°C`}
-                  </div>
-                </CardContent>
-              </Card>
-
-              <Card>
-                <CardContent className="p-4">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <MemoryStick className="h-4 w-4 text-green-500" />
-                      <span className="text-sm font-medium">Memory</span>
-                    </div>
-                    <span className={cn("font-bold", getStatusColor(metrics.memory.percentage))}>
-                      {metrics.memory.percentage.toFixed(1)}%
-                    </span>
-                  </div>
-                  <div className="h-2 mt-2 bg-secondary rounded-full overflow-hidden">
-                    <div 
-                      className="h-full bg-primary transition-all duration-300 ease-out"
-                      style={{ width: `${metrics.memory.percentage}%` }}
-                    />
-                  </div>
-                  <div className="text-xs text-muted-foreground mt-1">
-                    {formatBytes(metrics.memory.used * 1024 * 1024 * 1024)} / {formatBytes(metrics.memory.total * 1024 * 1024 * 1024)}
-                  </div>
-                </CardContent>
-              </Card>
-
-              <Card>
-                <CardContent className="p-4">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <HardDrive className="h-4 w-4 text-purple-500" />
-                      <span className="text-sm font-medium">Disk</span>
-                    </div>
-                    <span className={cn("font-bold", getStatusColor(metrics.disk.percentage, [80, 90]))}>
-                      {metrics.disk.percentage.toFixed(1)}%
-                    </span>
-                  </div>
-                  <div className="h-2 mt-2 bg-secondary rounded-full overflow-hidden">
-                    <div 
-                      className="h-full bg-primary transition-all duration-300 ease-out"
-                      style={{ width: `${metrics.disk.percentage}%` }}
-                    />
-                  </div>
-                  <div className="text-xs text-muted-foreground mt-1">
-                    {formatBytes(metrics.disk.used * 1024 * 1024 * 1024)} / {formatBytes(metrics.disk.total * 1024 * 1024 * 1024)}
-                  </div>
-                </CardContent>
-              </Card>
-
-              <Card>
-                <CardContent className="p-4">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <Network className="h-4 w-4 text-orange-500" />
-                      <span className="text-sm font-medium">Network</span>
-                    </div>
-                    <span className={cn("font-bold", getStatusColor(metrics.network.latency, [50, 100]))}>
-                      {metrics.network.latency.toFixed(0)}ms
-                    </span>
-                  </div>
-                  <div className="text-xs text-muted-foreground mt-2">
-                    ↓ {metrics.network.download.toFixed(0)} MB/s • ↑ {metrics.network.upload.toFixed(0)} MB/s
-                  </div>
-                </CardContent>
-              </Card>
-            </div>
-
-            {/* System Info */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <Card>
-                <CardHeader>
-                  <CardTitle className="text-base">System Information</CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-3">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">Uptime:</span>
-                    <span className="font-medium">{formatUptime(metrics.system.uptime)}</span>
-                  </div>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">Processes:</span>
-                    <span className="font-medium">{metrics.system.processes}</span>
-                  </div>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">Load Average:</span>
-                    <span className="font-medium">
-                      {metrics.system.loadAverage.map(load => load.toFixed(2)).join(", ")}
-                    </span>
-                  </div>
-                </CardContent>
-              </Card>
-
-              {metrics.browser && (
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="text-base">Browser Memory</CardTitle>
-                  </CardHeader>
-                  <CardContent className="space-y-3">
-                    <div className="flex justify-between text-sm">
-                      <span className="text-muted-foreground">JS Heap Used:</span>
-                      <span className="font-medium">{formatBytes(metrics.browser.jsHeapUsed * 1024 * 1024)}</span>
-                    </div>
-                    <div className="flex justify-between text-sm">
-                      <span className="text-muted-foreground">JS Heap Total:</span>
-                      <span className="font-medium">{formatBytes(metrics.browser.jsHeapTotal * 1024 * 1024)}</span>
-                    </div>
-                    <div className="flex justify-between text-sm">
-                      <span className="text-muted-foreground">JS Heap Limit:</span>
-                      <span className="font-medium">{formatBytes(metrics.browser.jsHeapLimit * 1024 * 1024)}</span>
-                    </div>
-                  </CardContent>
-                </Card>
-              )}
-            </div>
-          </TabsContent>
-
-          <TabsContent value="details" className="space-y-4">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              {/* Detailed CPU Info */}
-              <Card>
-                <CardHeader>
-                  <CardTitle className="text-base flex items-center gap-2">
-                    <Cpu className="h-4 w-4" />
-                    CPU Details
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div>
-                    <div className="flex justify-between text-sm mb-2">
-                      <span>Usage</span>
-                      <span className={getStatusColor(metrics.cpu.usage)}>{metrics.cpu.usage.toFixed(1)}%</span>
-                    </div>
-                    <div className="h-2 bg-secondary rounded-full overflow-hidden">
-                      <div 
-                        className="h-full bg-primary transition-all duration-300 ease-out"
-                        style={{ width: `${metrics.cpu.usage}%` }}
-                      />
-                    </div>
-                  </div>
-                  <div className="grid grid-cols-2 gap-4 text-sm">
-                    <div>
-                      <span className="text-muted-foreground">Cores:</span>
-                      <span className="ml-2 font-medium">{metrics.cpu.cores}</span>
-                    </div>
-                    {metrics.cpu.temperature && (
-                      <div>
-                        <span className="text-muted-foreground">Temperature:</span>
-                        <span className="ml-2 font-medium">{metrics.cpu.temperature.toFixed(0)}°C</span>
-                      </div>
-                    )}
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Detailed Memory Info */}
-              <Card>
-                <CardHeader>
-                  <CardTitle className="text-base flex items-center gap-2">
-                    <MemoryStick className="h-4 w-4" />
-                    Memory Details
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div>
-                    <div className="flex justify-between text-sm mb-2">
-                      <span>Usage</span>
-                      <span className={getStatusColor(metrics.memory.percentage)}>{metrics.memory.percentage.toFixed(1)}%</span>
-                    </div>
-                    <div className="h-2 bg-secondary rounded-full overflow-hidden">
-                      <div 
-                        className="h-full bg-primary transition-all duration-300 ease-out"
-                        style={{ width: `${metrics.memory.percentage}%` }}
-                      />
-                    </div>
-                  </div>
-                  <div className="space-y-2 text-sm">
-                    <div className="flex justify-between">
-                      <span className="text-muted-foreground">Used:</span>
-                      <span className="font-medium">{formatBytes(metrics.memory.used * 1024 * 1024 * 1024)}</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-muted-foreground">Available:</span>
-                      <span className="font-medium">{formatBytes(metrics.memory.available * 1024 * 1024 * 1024)}</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-muted-foreground">Total:</span>
-                      <span className="font-medium">{formatBytes(metrics.memory.total * 1024 * 1024 * 1024)}</span>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="alerts" className="space-y-4">
-            <div className="flex items-center justify-between">
-              <div className="text-sm text-muted-foreground">
-                {alerts.length} alerts
-              </div>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setAlerts([])}
-                disabled={alerts.length === 0}
-              >
-                Clear All
-              </Button>
-            </div>
-
-            <div className="space-y-2 max-h-96 overflow-y-auto">
-              <AnimatePresence>
-                {alerts.map((alert, index) => (
-                  <motion.div
-                    key={alert.id}
-                    initial={{ opacity: 0, x: -20 }}
-                    animate={{ opacity: 1, x: 0 }}
-                    exit={{ opacity: 0, x: 20 }}
-                    transition={{ delay: index * 0.05 }}
-                  >
-                    <Card>
-                      <CardContent className="p-4">
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center gap-3">
-                            {alert.type === "critical" ? (
-                              <AlertTriangle className="h-4 w-4 text-red-500" />
-                            ) : alert.type === "warning" ? (
-                              <AlertTriangle className="h-4 w-4 text-yellow-500" />
-                            ) : (
-                              <CheckCircle className="h-4 w-4 text-blue-500" />
-                            )}
-                            <div>
-                              <div className="font-medium text-sm">{alert.metric}</div>
-                              <div className="text-sm text-muted-foreground">{alert.message}</div>
-                            </div>
-                          </div>
-                          <div className="text-right text-sm">
-                            <div className="font-medium">
-                              {alert.value.toFixed(1)}{alert.metric === "Network" ? "ms" : "%"}
-                            </div>
-                            <div className="text-xs text-muted-foreground">
-                              {alert.timestamp.toLocaleTimeString()}
-                            </div>
-                          </div>
-                        </div>
-                      </CardContent>
-                    </Card>
-                  </motion.div>
-                ))}
-              </AnimatePresence>
-            </div>
-
-            {alerts.length === 0 && (
-              <div className="text-center py-8">
-                <CheckCircle className="h-12 w-12 mx-auto mb-4 text-green-500" />
-                <p className="text-muted-foreground">No alerts - System is running smoothly</p>
-              </div>
-            )}
-          </TabsContent>
-
-          <TabsContent value="history" className="space-y-4">
-            <div className="text-sm text-muted-foreground">
-              Last {history.length} data points ({Math.round(chartDuration / 60000)} minutes)
-            </div>
-
-            {showCharts && history.length > 1 && (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                {/* Simple CPU History Chart */}
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="text-base">CPU Usage Trend</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="h-32 flex items-end justify-between gap-1">
-                      {history.slice(-20).reverse().map((point, index) => (
-                        <div
-                          key={index}
-                          className="bg-blue-500 rounded-t min-w-[4px] flex-1 transition-all"
-                          style={{ height: `${(point.metrics.cpu.usage / 100) * 128}px` }}
-                        />
-                      ))}
-                    </div>
-                    <div className="text-xs text-muted-foreground mt-2 text-center">
-                      Last 20 readings
-                    </div>
-                  </CardContent>
-                </Card>
-
-                {/* Simple Memory History Chart */}
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="text-base">Memory Usage Trend</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="h-32 flex items-end justify-between gap-1">
-                      {history.slice(-20).reverse().map((point, index) => (
-                        <div
-                          key={index}
-                          className="bg-green-500 rounded-t min-w-[4px] flex-1 transition-all"
-                          style={{ height: `${(point.metrics.memory.percentage / 100) * 128}px` }}
-                        />
-                      ))}
-                    </div>
-                    <div className="text-xs text-muted-foreground mt-2 text-center">
-                      Last 20 readings
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-            )}
-
-            {history.length === 0 && (
-              <div className="text-center py-8">
-                <BarChart3 className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
-                <p className="text-muted-foreground">No historical data available</p>
-              </div>
-            )}
-          </TabsContent>
-        </Tabs>
-      </CardContent>
-    </Card>
-  )
-}
-
-export const PerformanceMonitor: React.FC<PerformanceMonitorProps> = ({ className, ...props }) => {
-  const { hasProAccess, isLoading } = useSubscription()
-  
-  // If no pro access, show upgrade prompt
-  if (!isLoading && !hasProAccess) {
-    return (
-      <Card className={cn("w-fit", className)}>
-        <CardContent className="py-6 text-center">
-          <div className="space-y-4">
-            <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
-              <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-            </div>
-            <div>
-              <h3 className="font-semibold text-sm mb-2">Pro Feature</h3>
-              <p className="text-muted-foreground text-xs mb-4">
-                Performance Monitor is available exclusively to MoonUI Pro subscribers.
-              </p>
-              <a href="/pricing">
-                <Button size="sm">
-                  <Sparkles className="mr-2 h-4 w-4" />
-                  Upgrade to Pro
-                </Button>
-              </a>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  return <PerformanceMonitorInternal className={className} {...props} />
-}
-
-export type { PerformanceMetrics, PerformanceAlert, PerformanceMonitorProps }