@moontra/moonui-pro 2.0.22 → 2.1.0

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

@@ -0,0 +1,775 @@
+"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 { Badge } from "../ui/badge"
+import { Progress } from "@moontra/moonui"
+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"
+
+export 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
+  }
+}
+
+export interface PerformanceAlert {
+  id: string
+  type: "warning" | "critical" | "info"
+  metric: string
+  message: string
+  value: number
+  threshold: number
+  timestamp: Date
+}
+
+export 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>()
+
+  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 ? "default" : "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>
+                  <Progress value={metrics.cpu.usage} className="h-2 mt-2" />
+                  <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>
+                  <Progress value={metrics.memory.percentage} className="h-2 mt-2" />
+                  <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>
+                  <Progress value={metrics.disk.percentage} className="h-2 mt-2" />
+                  <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>
+                    <Progress value={metrics.cpu.usage} className="h-2" />
+                  </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>
+                    <Progress value={metrics.memory.percentage} className="h-2" />
+                  </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 }) => {
+  // Check if we're in docs mode or have pro access
+  const docsProAccess = { hasAccess: true } // Pro access assumed in package
+  const { hasProAccess, isLoading } = useSubscription()
+  
+  // In docs mode, always show the component
+  const canShowComponent = docsProAccess.isDocsMode || hasProAccess
+  
+  // If not in docs mode and no pro access, show upgrade prompt
+  if (!docsProAccess.isDocsMode && !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 }