website refactor

apps/website/components/errors/ErrorAnalyticsDashboard.tsx

@@ -1,27 +1,34 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
 import { getGlobalApiLogger } from '@/lib/infrastructure/ApiRequestLogger';
-import { ApiError } from '@/lib/api/base/ApiError';
+import { getErrorAnalyticsStats, type ErrorStats } from '@/lib/services/error/ErrorAnalyticsService';
 import { 
   Activity, 
   AlertTriangle, 
   Clock, 
   Copy, 
   RefreshCw, 
-  Terminal, 
-  Database,
-  Zap,
   Bug,
-  Shield,
   Globe,
   Cpu,
   FileText,
   Trash2,
   Download,
-  Search
+  Search,
+  ChevronDown,
+  Zap,
+  Terminal
 } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { IconButton } from '@/ui/IconButton';
+import { Badge } from '@/ui/Badge';
+import { Button } from '@/ui/Button';
+import { Input } from '@/ui/Input';
 
 interface ErrorAnalyticsDashboardProps {
   /**
@@ -34,27 +41,32 @@ interface ErrorAnalyticsDashboardProps {
   showInProduction?: boolean;
 }
 
-interface ErrorStats {
-  totalErrors: number;
-  errorsByType: Record<string, number>;
-  errorsByTime: Array<{ time: string; count: number }>;
-  recentErrors: Array<{
-    timestamp: string;
-    message: string;
-    type: string;
-    context?: unknown;
-  }>;
-  apiStats: {
-    totalRequests: number;
-    successful: number;
-    failed: number;
-    averageDuration: number;
-    slowestRequests: Array<{ url: string; duration: number }>;
+function formatDuration(duration: number): string {
+  return duration.toFixed(2) + 'ms';
+}
+
+function formatPercentage(value: number, total: number): string {
+  if (total === 0) return '0%';
+  return ((value / total) * 100).toFixed(1) + '%';
+}
+
+function formatMemory(bytes: number): string {
+  return (bytes / 1024 / 1024).toFixed(1) + 'MB';
+}
+
+interface PerformanceWithMemory extends Performance {
+  memory?: {
+    usedJSHeapSize: number;
+    totalJSHeapSize: number;
+    jsHeapSizeLimit: number;
   };
-  environment: {
-    mode: string;
-    version?: string;
-    buildTime?: string;
+}
+
+interface NavigatorWithConnection extends Navigator {
+  connection?: {
+    effectiveType: string;
+    downlink: number;
+    rtt: number;
   };
 }
 
@@ -73,77 +85,32 @@ export function ErrorAnalyticsDashboard({
   const [copied, setCopied] = useState(false);
 
   const isDev = process.env.NODE_ENV === 'development';
+  const shouldShow = isDev || showInProduction;
 
-  // Don't show in production unless explicitly enabled
-  if (!isDev && !showInProduction) {
+  const perf = typeof performance !== 'undefined' ? performance as PerformanceWithMemory : null;
+  const nav = typeof navigator !== 'undefined' ? navigator as NavigatorWithConnection : null;
+
+  useEffect(() => {
+    if (!shouldShow) return;
+
+    const update = () => {
+      setStats(getErrorAnalyticsStats());
+    };
+
+    update();
+
+    if (refreshInterval > 0) {
+      const interval = setInterval(update, refreshInterval);
+      return () => clearInterval(interval);
+    }
+  }, [refreshInterval, shouldShow]);
+
+  if (!shouldShow) {
     return null;
   }
 
-  useEffect(() => {
-    updateStats();
-
-    if (refreshInterval > 0) {
-      const interval = setInterval(updateStats, refreshInterval);
-      return () => clearInterval(interval);
-    }
-  }, [refreshInterval]);
-
-  const updateStats = () => {
-    const globalHandler = getGlobalErrorHandler();
-    const apiLogger = getGlobalApiLogger();
-
-    const errorHistory = globalHandler.getErrorHistory();
-    const errorStats = globalHandler.getStats();
-    const apiHistory = apiLogger.getHistory();
-    const apiStats = apiLogger.getStats();
-
-    // Group errors by time (last 10 minutes)
-    const timeGroups = new Map<string, number>();
-    const now = Date.now();
-    const tenMinutesAgo = now - (10 * 60 * 1000);
-
-    errorHistory.forEach(entry => {
-      const entryTime = new Date(entry.timestamp).getTime();
-      if (entryTime >= tenMinutesAgo) {
-        const timeKey = new Date(entry.timestamp).toLocaleTimeString();
-        timeGroups.set(timeKey, (timeGroups.get(timeKey) || 0) + 1);
-      }
-    });
-
-    const errorsByTime = Array.from(timeGroups.entries())
-      .map(([time, count]) => ({ time, count }))
-      .sort((a, b) => a.time.localeCompare(b.time));
-
-    const recentErrors = errorHistory.slice(-10).reverse().map(entry => ({
-      timestamp: entry.timestamp,
-      message: entry.error.message,
-      type: entry.error instanceof ApiError ? entry.error.type : entry.error.name || 'Error',
-      context: entry.context,
-    }));
-
-    const slowestRequests = apiLogger.getSlowestRequests(5).map(log => ({
-      url: log.url,
-      duration: log.response?.duration || 0,
-    }));
-
-    setStats({
-      totalErrors: errorStats.total,
-      errorsByType: errorStats.byType,
-      errorsByTime,
-      recentErrors,
-      apiStats: {
-        totalRequests: apiStats.total,
-        successful: apiStats.successful,
-        failed: apiStats.failed,
-        averageDuration: apiStats.averageDuration,
-        slowestRequests,
-      },
-      environment: {
-        mode: process.env.NODE_ENV || 'unknown',
-        version: process.env.NEXT_PUBLIC_APP_VERSION,
-        buildTime: process.env.NEXT_PUBLIC_BUILD_TIME,
-      },
-    });
+  const updateStatsManual = () => {
+    setStats(getErrorAnalyticsStats());
   };
 
   const copyToClipboard = async (data: unknown) => {
@@ -183,7 +150,7 @@ export function ErrorAnalyticsDashboard({
       
       globalHandler.clearHistory();
       apiLogger.clearHistory();
-      updateStats();
+      updateStatsManual();
     }
   };
 
@@ -195,382 +162,438 @@ export function ErrorAnalyticsDashboard({
 
   if (!isExpanded) {
     return (
-      <button
-        onClick={() => setIsExpanded(true)}
-        className="fixed bottom-4 left-4 z-50 p-3 bg-iron-gray border border-charcoal-outline rounded-full shadow-lg hover:bg-charcoal-outline transition-colors"
-        title="Open Error Analytics"
-      >
-        <Activity className="w-5 h-5 text-red-400" />
-      </button>
+      <Box position="fixed" bottom="4" left="4" zIndex={50}>
+        <IconButton
+          icon={Activity}
+          onClick={() => setIsExpanded(true)}
+          variant="secondary"
+          title="Open Error Analytics"
+          size="lg"
+          color="rgb(239, 68, 68)"
+        />
+      </Box>
     );
   }
 
   return (
-    <div className="fixed bottom-4 left-4 z-50 w-96 max-h-[80vh] bg-deep-graphite border border-charcoal-outline rounded-xl shadow-2xl overflow-hidden flex flex-col">
+    <Box 
+      position="fixed" 
+      bottom="4" 
+      left="4" 
+      zIndex={50} 
+      w="96" 
+      bg="bg-deep-graphite" 
+      border 
+      borderColor="border-charcoal-outline" 
+      rounded="xl" 
+      shadow="2xl" 
+      overflow="hidden" 
+      display="flex" 
+      flexDirection="col"
+      maxHeight="80vh"
+    >
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 bg-iron-gray/50 border-b border-charcoal-outline">
-        <div className="flex items-center gap-2">
-          <Activity className="w-4 h-4 text-red-400" />
-          <span className="text-sm font-semibold text-white">Error Analytics</span>
+      <Box display="flex" alignItems="center" justifyContent="between" px={4} py={3} bg="bg-iron-gray/50" borderBottom borderColor="border-charcoal-outline">
+        <Box display="flex" alignItems="center" gap={2}>
+          <Icon icon={Activity} size={4} color="rgb(239, 68, 68)" />
+          <Text size="sm" weight="semibold" color="text-white">Error Analytics</Text>
           {isDev && (
-            <span className="px-1.5 py-0.5 text-[10px] font-medium bg-red-500/20 text-red-400 rounded">
+            <Badge variant="danger" size="xs">
               DEV
-            </span>
+            </Badge>
           )}
-        </div>
-        <div className="flex items-center gap-1">
-          <button
-            onClick={updateStats}
-            className="p-1.5 hover:bg-charcoal-outline rounded transition-colors"
+        </Box>
+        <Box display="flex" alignItems="center" gap={1}>
+          <IconButton
+            icon={RefreshCw}
+            onClick={updateStatsManual}
+            variant="ghost"
+            size="sm"
             title="Refresh"
-          >
-            <RefreshCw className="w-3 h-3 text-gray-400" />
-          </button>
-          <button
+          />
+          <IconButton
+            icon={ChevronDown}
             onClick={() => setIsExpanded(false)}
-            className="p-1.5 hover:bg-charcoal-outline rounded transition-colors"
+            variant="ghost"
+            size="sm"
             title="Minimize"
-          >
-            <span className="text-gray-400 text-xs font-bold">_</span>
-          </button>
-        </div>
-      </div>
+          />
+        </Box>
+      </Box>
 
       {/* Tabs */}
-      <div className="flex border-b border-charcoal-outline bg-iron-gray/30">
+      <Box display="flex" borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/30">
         {[
           { id: 'errors', label: 'Errors', icon: AlertTriangle },
           { id: 'api', label: 'API', icon: Globe },
           { id: 'environment', label: 'Env', icon: Cpu },
           { id: 'raw', label: 'Raw', icon: FileText },
         ].map(tab => (
-          <button
+          <Box
             key={tab.id}
-            onClick={() => setSelectedTab(tab.id as any)}
-            className={`flex-1 flex items-center justify-center gap-1 px-2 py-2 text-xs font-medium transition-colors ${
-              selectedTab === tab.id
-                ? 'bg-deep-graphite text-white border-b-2 border-red-400'
-                : 'text-gray-400 hover:bg-charcoal-outline hover:text-gray-200'
-            }`}
+            as="button"
+            type="button"
+            onClick={() => setSelectedTab(tab.id as 'errors' | 'api' | 'environment' | 'raw')}
+            display="flex"
+            flexGrow={1}
+            alignItems="center"
+            justifyContent="center"
+            gap={1}
+            px={2}
+            py={2}
+            cursor="pointer"
+            transition
+            bg={selectedTab === tab.id ? 'bg-deep-graphite' : ''}
+            borderBottom={selectedTab === tab.id}
+            borderColor={selectedTab === tab.id ? 'border-red-400' : ''}
+            borderWidth={selectedTab === tab.id ? '2px' : '0'}
           >
-            <tab.icon className="w-3 h-3" />
-            {tab.label}
-          </button>
+            <Icon icon={tab.icon} size={3} color={selectedTab === tab.id ? 'text-white' : 'text-gray-400'} />
+            <Text 
+              size="xs" 
+              weight="medium" 
+              color={selectedTab === tab.id ? 'text-white' : 'text-gray-400'}
+            >
+              {tab.label}
+            </Text>
+          </Box>
         ))}
-      </div>
+      </Box>
 
       {/* Content */}
-      <div className="flex-1 overflow-auto p-4 space-y-4">
-        {/* Search Bar */}
-        {selectedTab === 'errors' && (
-          <div className="relative">
-            <input
+      <Box flexGrow={1} overflow="auto" p={4}>
+        <Stack gap={4}>
+          {/* Search Bar */}
+          {selectedTab === 'errors' && (
+            <Input
               type="text"
               placeholder="Search errors..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full bg-iron-gray border border-charcoal-outline rounded px-3 py-2 pl-8 text-xs text-white placeholder-gray-500 focus:outline-none focus:border-red-400"
+              icon={<Icon icon={Search} size={3} color="rgb(107, 114, 128)" />}
             />
-            <Search className="w-3 h-3 text-gray-500 absolute left-2.5 top-2.5" />
-          </div>
-        )}
+          )}
 
-        {/* Errors Tab */}
-        {selectedTab === 'errors' && stats && (
-          <div className="space-y-4">
-            {/* Error Summary */}
-            <div className="grid grid-cols-2 gap-2">
-              <div className="bg-iron-gray border border-charcoal-outline rounded p-3">
-                <div className="text-xs text-gray-500">Total Errors</div>
-                <div className="text-xl font-bold text-red-400">{stats.totalErrors}</div>
-              </div>
-              <div className="bg-iron-gray border border-charcoal-outline rounded p-3">
-                <div className="text-xs text-gray-500">Error Types</div>
-                <div className="text-xl font-bold text-yellow-400">
-                  {Object.keys(stats.errorsByType).length}
-                </div>
-              </div>
-            </div>
+          {/* Errors Tab */}
+          {selectedTab === 'errors' && stats && (
+            <Stack gap={4}>
+              {/* Error Summary */}
+              <Box display="grid" gridCols={2} gap={2}>
+                <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
+                  <Text size="xs" color="text-gray-500" block>Total Errors</Text>
+                  <Text size="xl" weight="bold" color="text-red-400">{stats.totalErrors}</Text>
+                </Box>
+                <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
+                  <Text size="xs" color="text-gray-500" block>Error Types</Text>
+                  <Text size="xl" weight="bold" color="text-warning-amber">
+                    {Object.keys(stats.errorsByType).length}
+                  </Text>
+                </Box>
+              </Box>
 
-            {/* Error Types Breakdown */}
-            {Object.keys(stats.errorsByType).length > 0 && (
-              <div className="bg-iron-gray border border-charcoal-outline rounded p-3">
-                <div className="text-xs font-semibold text-gray-400 mb-2 flex items-center gap-2">
-                  <Bug className="w-3 h-3" /> Error Types
-                </div>
-                <div className="space-y-1 max-h-32 overflow-auto">
-                  {Object.entries(stats.errorsByType).map(([type, count]) => (
-                    <div key={type} className="flex justify-between text-xs">
-                      <span className="text-gray-300">{type}</span>
-                      <span className="text-red-400 font-mono">{count}</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
+              {/* Error Types Breakdown */}
+              {Object.keys(stats.errorsByType).length > 0 && (
+                <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
+                  <Box display="flex" alignItems="center" gap={2} mb={2}>
+                    <Icon icon={Bug} size={3} color="rgb(156, 163, 175)" />
+                    <Text size="xs" weight="semibold" color="text-gray-400">Error Types</Text>
+                  </Box>
+                  <Stack gap={1} maxHeight="8rem" overflow="auto">
+                    {Object.entries(stats.errorsByType).map(([type, count]) => (
+                      <Box key={type} display="flex" justifyContent="between">
+                        <Text size="xs" color="text-gray-300">{type}</Text>
+                        <Text size="xs" color="text-red-400" font="mono">{count}</Text>
+                      </Box>
+                    ))}
+                  </Stack>
+                </Box>
+              )}
 
-            {/* Recent Errors */}
-            {filteredRecentErrors.length > 0 && (
-              <div className="bg-iron-gray border border-charcoal-outline rounded p-3">
-                <div className="text-xs font-semibold text-gray-400 mb-2 flex items-center gap-2">
-                  <AlertTriangle className="w-3 h-3" /> Recent Errors
-                </div>
-                <div className="space-y-2 max-h-64 overflow-auto">
-                  {filteredRecentErrors.map((error, idx) => (
-                    <div key={idx} className="bg-deep-graphite border border-charcoal-outline rounded p-2 text-xs">
-                      <div className="flex justify-between items-start gap-2 mb-1">
-                        <span className="font-mono text-red-400 font-bold">{error.type}</span>
-                        <span className="text-gray-500 text-[10px]">
-                          {new Date(error.timestamp).toLocaleTimeString()}
-                        </span>
-                      </div>
-                      <div className="text-gray-300 break-words mb-1">{error.message}</div>
-                      <button
-                        onClick={() => copyToClipboard(error)}
-                        className="text-[10px] text-gray-500 hover:text-gray-300 flex items-center gap-1"
-                      >
-                        <Copy className="w-3 h-3" /> Copy Details
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
+              {/* Recent Errors */}
+              {filteredRecentErrors.length > 0 && (
+                <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
+                  <Box display="flex" alignItems="center" gap={2} mb={2}>
+                    <Icon icon={AlertTriangle} size={3} color="rgb(156, 163, 175)" />
+                    <Text size="xs" weight="semibold" color="text-gray-400">Recent Errors</Text>
+                  </Box>
+                  <Stack gap={2} maxHeight="16rem" overflow="auto">
+                    {filteredRecentErrors.map((error, idx) => (
+                      <Box key={idx} bg="bg-deep-graphite" border borderColor="border-charcoal-outline" rounded="md" p={2}>
+                        <Box display="flex" justifyContent="between" alignItems="start" gap={2} mb={1}>
+                          <Text size="xs" font="mono" weight="bold" color="text-red-400" truncate>{error.type}</Text>
+                          <Text size="xs" color="text-gray-500" fontSize="10px">
+                            {new Date(error.timestamp).toLocaleTimeString()}
+                          </Text>
+                        </Box>
+                        <Text size="xs" color="text-gray-300" block mb={1}>{error.message}</Text>
+                        <Button
+                          variant="ghost"
+                          onClick={() => copyToClipboard(error)}
+                          size="sm"
+                          p={0}
+                          minHeight="0"
+                          icon={<Icon icon={Copy} size={3} />}
+                        >
+                          <Text size="xs" color="text-gray-500" fontSize="10px">Copy Details</Text>
+                        </Button>
+                      </Box>
+                    ))}
+                  </Stack>
+                </Box>
+              )}
 
-            {/* Error Timeline */}
-            {stats.errorsByTime.length > 0 && (
-              <div className="bg-iron-gray border border-charcoal-outline rounded p-3">
-                <div className="text-xs font-semibold text-gray-400 mb-2 flex items-center gap-2">
-                  <Clock className="w-3 h-3" /> Last 10 Minutes
-                </div>
-                <div className="space-y-1 max-h-32 overflow-auto">
-                  {stats.errorsByTime.map((point, idx) => (
-                    <div key={idx} className="flex justify-between text-xs">
-                      <span className="text-gray-500">{point.time}</span>
-                      <span className="text-red-400 font-mono">{point.count} errors</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
+              {/* Error Timeline */}
+              {stats.errorsByTime.length > 0 && (
+                <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
+                  <Box display="flex" alignItems="center" gap={2} mb={2}>
+                    <Icon icon={Clock} size={3} color="rgb(156, 163, 175)" />
+                    <Text size="xs" weight="semibold" color="text-gray-400">Last 10 Minutes</Text>
+                  </Box>
+                  <Stack gap={1} maxHeight="8rem" overflow="auto">
+                    {stats.errorsByTime.map((point, idx) => (
+                      <Box key={idx} display="flex" justifyContent="between">
+                        <Text size="xs" color="text-gray-500">{point.time}</Text>
+                        <Text size="xs" color="text-red-400" font="mono">{point.count} errors</Text>
+                      </Box>
+                    ))}
+                  </Stack>
+                </Box>
+              )}
+            </Stack>
+          )}
 
-        {/* API Tab */}
-        {selectedTab === 'api' && stats && (
-          <div className="space-y-4">
-            {/* API Summary */}
-            <div className="grid grid-cols-2 gap-2">
-              <div className="bg-iron-gray border border-charcoal-outline rounded p-3">
-                <div className="text-xs text-gray-500">Total Requests</div>
-                <div className="text-xl font-bold text-blue-400">{stats.apiStats.totalRequests}</div>
-              </div>
-              <div className="bg-iron-gray border border-charcoal-outline rounded p-3">
-                <div className="text-xs text-gray-500">Success Rate</div>
-                <div className="text-xl font-bold text-green-400">
-                  {stats.apiStats.totalRequests > 0 
-                    ? ((stats.apiStats.successful / stats.apiStats.totalRequests) * 100).toFixed(1)
-                    : 0}%
-                </div>
-              </div>
-            </div>
+          {/* API Tab */}
+          {selectedTab === 'api' && stats && (
+            <Stack gap={4}>
+              {/* API Summary */}
+              <Box display="grid" gridCols={2} gap={2}>
+                <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
+                  <Text size="xs" color="text-gray-500" block>Total Requests</Text>
+                  <Text size="xl" weight="bold" color="text-primary-blue">{stats.apiStats.totalRequests}</Text>
+                </Box>
+                <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
+                  <Text size="xs" color="text-gray-500" block>Success Rate</Text>
+                  <Text size="xl" weight="bold" color="text-performance-green">
+                    {formatPercentage(stats.apiStats.successful, stats.apiStats.totalRequests)}
+                  </Text>
+                </Box>
+              </Box>
 
-            {/* API Stats */}
-            <div className="bg-iron-gray border border-charcoal-outline rounded p-3">
-              <div className="text-xs font-semibold text-gray-400 mb-2 flex items-center gap-2">
-                <Globe className="w-3 h-3" /> API Metrics
-              </div>
-              <div className="space-y-1 text-xs">
-                <div className="flex justify-between">
-                  <span className="text-gray-500">Successful</span>
-                  <span className="text-green-400 font-mono">{stats.apiStats.successful}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-500">Failed</span>
-                  <span className="text-red-400 font-mono">{stats.apiStats.failed}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-500">Avg Duration</span>
-                  <span className="text-yellow-400 font-mono">{stats.apiStats.averageDuration.toFixed(2)}ms</span>
-                </div>
-              </div>
-            </div>
+              {/* API Stats */}
+              <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
+                <Box display="flex" alignItems="center" gap={2} mb={2}>
+                  <Icon icon={Globe} size={3} color="rgb(156, 163, 175)" />
+                  <Text size="xs" weight="semibold" color="text-gray-400">API Metrics</Text>
+                </Box>
+                <Stack gap={1}>
+                  <Box display="flex" justifyContent="between">
+                    <Text size="xs" color="text-gray-500">Successful</Text>
+                    <Text size="xs" color="text-performance-green" font="mono">{stats.apiStats.successful}</Text>
+                  </Box>
+                  <Box display="flex" justifyContent="between">
+                    <Text size="xs" color="text-gray-500">Failed</Text>
+                    <Text size="xs" color="text-red-400" font="mono">{stats.apiStats.failed}</Text>
+                  </Box>
+                  <Box display="flex" justifyContent="between">
+                    <Text size="xs" color="text-gray-500">Avg Duration</Text>
+                    <Text size="xs" color="text-warning-amber" font="mono">{formatDuration(stats.apiStats.averageDuration)}</Text>
+                  </Box>
+                </Stack>
+              </Box>
 
-            {/* Slowest Requests */}
-            {stats.apiStats.slowestRequests.length > 0 && (
-              <div className="bg-iron-gray border border-charcoal-outline rounded p-3">
-                <div className="text-xs font-semibold text-gray-400 mb-2 flex items-center gap-2">
-                  <Zap className="w-3 h-3" /> Slowest Requests
-                </div>
-                <div className="space-y-1 max-h-40 overflow-auto">
-                  {stats.apiStats.slowestRequests.map((req, idx) => (
-                    <div key={idx} className="flex justify-between text-xs bg-deep-graphite p-1.5 rounded border border-charcoal-outline">
-                      <span className="text-gray-300 truncate flex-1">{req.url}</span>
-                      <span className="text-red-400 font-mono ml-2">{req.duration.toFixed(2)}ms</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
+              {/* Slowest Requests */}
+              {stats.apiStats.slowestRequests.length > 0 && (
+                <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
+                  <Box display="flex" alignItems="center" gap={2} mb={2}>
+                    <Icon icon={Zap} size={3} color="rgb(156, 163, 175)" />
+                    <Text size="xs" weight="semibold" color="text-gray-400">Slowest Requests</Text>
+                  </Box>
+                  <Stack gap={1} maxHeight="10rem" overflow="auto">
+                    {stats.apiStats.slowestRequests.map((req, idx) => (
+                      <Box key={idx} display="flex" justifyContent="between" bg="bg-deep-graphite" p={1.5} rounded="sm" border borderColor="border-charcoal-outline">
+                        <Text size="xs" color="text-gray-300" truncate flexGrow={1}>{req.url}</Text>
+                        <Text size="xs" color="text-red-400" font="mono" ml={2}>{formatDuration(req.duration)}</Text>
+                      </Box>
+                    ))}
+                  </Stack>
+                </Box>
+              )}
+            </Stack>
+          )}
 
-        {/* Environment Tab */}
-        {selectedTab === 'environment' && stats && (
-          <div className="space-y-4">
-            {/* Environment Info */}
-            <div className="bg-iron-gray border border-charcoal-outline rounded p-3">
-              <div className="text-xs font-semibold text-gray-400 mb-2 flex items-center gap-2">
-                <Cpu className="w-3 h-3" /> Environment
-              </div>
-              <div className="space-y-1 text-xs">
-                <div className="flex justify-between">
-                  <span className="text-gray-500">Node Environment</span>
-                  <span className={`font-mono font-bold ${
-                    stats.environment.mode === 'development' ? 'text-green-400' : 'text-yellow-400'
-                  }`}>{stats.environment.mode}</span>
-                </div>
-                {stats.environment.version && (
-                  <div className="flex justify-between">
-                    <span className="text-gray-500">Version</span>
-                    <span className="text-gray-300 font-mono">{stats.environment.version}</span>
-                  </div>
-                )}
-                {stats.environment.buildTime && (
-                  <div className="flex justify-between">
-                    <span className="text-gray-500">Build Time</span>
-                    <span className="text-gray-500 font-mono text-[10px]">{stats.environment.buildTime}</span>
-                  </div>
-                )}
-              </div>
-            </div>
+          {/* Environment Tab */}
+          {selectedTab === 'environment' && stats && (
+            <Stack gap={4}>
+              {/* Environment Info */}
+              <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
+                <Box display="flex" alignItems="center" gap={2} mb={2}>
+                  <Icon icon={Cpu} size={3} color="rgb(156, 163, 175)" />
+                  <Text size="xs" weight="semibold" color="text-gray-400">Environment</Text>
+                </Box>
+                <Stack gap={1}>
+                  <Box display="flex" justifyContent="between">
+                    <Text size="xs" color="text-gray-500">Node Environment</Text>
+                    <Text size="xs" font="mono" weight="bold" color={stats.environment.mode === 'development' ? 'text-performance-green' : 'text-warning-amber'}>
+                      {stats.environment.mode}
+                    </Text>
+                  </Box>
+                  {stats.environment.version && (
+                    <Box display="flex" justifyContent="between">
+                      <Text size="xs" color="text-gray-500">Version</Text>
+                      <Text size="xs" color="text-gray-300" font="mono">{stats.environment.version}</Text>
+                    </Box>
+                  )}
+                  {stats.environment.buildTime && (
+                    <Box display="flex" justifyContent="between">
+                      <Text size="xs" color="text-gray-500">Build Time</Text>
+                      <Text size="xs" color="text-gray-500" font="mono" fontSize="10px">{stats.environment.buildTime}</Text>
+                    </Box>
+                  )}
+                </Stack>
+              </Box>
 
-            {/* Browser Info */}
-            <div className="bg-iron-gray border border-charcoal-outline rounded p-3">
-              <div className="text-xs font-semibold text-gray-400 mb-2 flex items-center gap-2">
-                <Globe className="w-3 h-3" /> Browser
-              </div>
-              <div className="space-y-1 text-xs">
-                <div className="flex justify-between">
-                  <span className="text-gray-500">User Agent</span>
-                  <span className="text-gray-300 text-[9px] truncate max-w-[150px]">{navigator.userAgent}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-500">Language</span>
-                  <span className="text-gray-300 font-mono">{navigator.language}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-500">Platform</span>
-                  <span className="text-gray-300 font-mono">{navigator.platform}</span>
-                </div>
-              </div>
-            </div>
+              {/* Browser Info */}
+              <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
+                <Box display="flex" alignItems="center" gap={2} mb={2}>
+                  <Icon icon={Globe} size={3} color="rgb(156, 163, 175)" />
+                  <Text size="xs" weight="semibold" color="text-gray-400">Browser</Text>
+                </Box>
+                <Stack gap={1}>
+                  <Box display="flex" justifyContent="between">
+                    <Text size="xs" color="text-gray-500">User Agent</Text>
+                    <Text size="xs" color="text-gray-300" truncate maxWidth="150px">{navigator.userAgent}</Text>
+                  </Box>
+                  <Box display="flex" justifyContent="between">
+                    <Text size="xs" color="text-gray-500">Language</Text>
+                    <Text size="xs" color="text-gray-300" font="mono">{navigator.language}</Text>
+                  </Box>
+                  <Box display="flex" justifyContent="between">
+                    <Text size="xs" color="text-gray-500">Platform</Text>
+                    <Text size="xs" color="text-gray-300" font="mono">{navigator.platform}</Text>
+                  </Box>
+                </Stack>
+              </Box>
 
-            {/* Performance */}
-            <div className="bg-iron-gray border border-charcoal-outline rounded p-3">
-              <div className="text-xs font-semibold text-gray-400 mb-2 flex items-center gap-2">
-                <Activity className="w-3 h-3" /> Performance
-              </div>
-              <div className="space-y-1 text-xs">
-                <div className="flex justify-between">
-                  <span className="text-gray-500">Viewport</span>
-                  <span className="text-gray-300 font-mono">{window.innerWidth}x{window.innerHeight}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-500">Screen</span>
-                  <span className="text-gray-300 font-mono">{window.screen.width}x{window.screen.height}</span>
-                </div>
-                {(performance as any).memory && (
-                  <div className="flex justify-between">
-                    <span className="text-gray-500">JS Heap</span>
-                    <span className="text-gray-300 font-mono">
-                      {((performance as any).memory.usedJSHeapSize / 1024 / 1024).toFixed(1)}MB
-                    </span>
-                  </div>
-                )}
-              </div>
-            </div>
+              {/* Performance */}
+              <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
+                <Box display="flex" alignItems="center" gap={2} mb={2}>
+                  <Icon icon={Activity} size={3} color="rgb(156, 163, 175)" />
+                  <Text size="xs" weight="semibold" color="text-gray-400">Performance</Text>
+                </Box>
+                <Stack gap={1}>
+                  <Box display="flex" justifyContent="between">
+                    <Text size="xs" color="text-gray-500">Viewport</Text>
+                    <Text size="xs" color="text-gray-300" font="mono">{window.innerWidth}x{window.innerHeight}</Text>
+                  </Box>
+                  <Box display="flex" justifyContent="between">
+                    <Text size="xs" color="text-gray-500">Screen</Text>
+                    <Text size="xs" color="text-gray-300" font="mono">{window.screen.width}x{window.screen.height}</Text>
+                  </Box>
+                  {perf?.memory && (
+                    <Box display="flex" justifyContent="between">
+                      <Text size="xs" color="text-gray-500">JS Heap</Text>
+                      <Text size="xs" color="text-gray-300" font="mono">
+                        {formatMemory(perf.memory.usedJSHeapSize)}
+                      </Text>
+                    </Box>
+                  )}
+                </Stack>
+              </Box>
 
-            {/* Connection */}
-            {(navigator as any).connection && (
-              <div className="bg-iron-gray border border-charcoal-outline rounded p-3">
-                <div className="text-xs font-semibold text-gray-400 mb-2 flex items-center gap-2">
-                  <Zap className="w-3 h-3" /> Network
-                </div>
-                <div className="space-y-1 text-xs">
-                  <div className="flex justify-between">
-                    <span className="text-gray-500">Type</span>
-                    <span className="text-gray-300 font-mono">{(navigator as any).connection.effectiveType}</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-gray-500">Downlink</span>
-                    <span className="text-gray-300 font-mono">{(navigator as any).connection.downlink}Mbps</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-gray-500">RTT</span>
-                    <span className="text-gray-300 font-mono">{(navigator as any).connection.rtt}ms</span>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        )}
+              {/* Connection */}
+              {nav?.connection && (
+                <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
+                  <Box display="flex" alignItems="center" gap={2} mb={2}>
+                    <Icon icon={Zap} size={3} color="rgb(156, 163, 175)" />
+                    <Text size="xs" weight="semibold" color="text-gray-400">Network</Text>
+                  </Box>
+                  <Stack gap={1}>
+                    <Box display="flex" justifyContent="between">
+                      <Text size="xs" color="text-gray-500">Type</Text>
+                      <Text size="xs" color="text-gray-300" font="mono">{nav.connection.effectiveType}</Text>
+                    </Box>
+                    <Box display="flex" justifyContent="between">
+                      <Text size="xs" color="text-gray-500">Downlink</Text>
+                      <Text size="xs" color="text-gray-300" font="mono">{nav.connection.downlink}Mbps</Text>
+                    </Box>
+                    <Box display="flex" justifyContent="between">
+                      <Text size="xs" color="text-gray-500">RTT</Text>
+                      <Text size="xs" color="text-gray-300" font="mono">{nav.connection.rtt}ms</Text>
+                    </Box>
+                  </Stack>
+                </Box>
+              )}
+            </Stack>
+          )}
 
-        {/* Raw Data Tab */}
-        {selectedTab === 'raw' && stats && (
-          <div className="space-y-3">
-            <div className="bg-iron-gray border border-charcoal-outline rounded p-3">
-              <div className="text-xs font-semibold text-gray-400 mb-2 flex items-center gap-2">
-                <FileText className="w-3 h-3" /> Export Options
-              </div>
-              <div className="flex gap-2">
-                <button
-                  onClick={exportAllData}
-                  className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-xs"
+          {/* Raw Data Tab */}
+          {selectedTab === 'raw' && stats && (
+            <Stack gap={3}>
+              <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
+                <Box display="flex" alignItems="center" gap={2} mb={2}>
+                  <Icon icon={FileText} size={3} color="rgb(156, 163, 175)" />
+                  <Text size="xs" weight="semibold" color="text-gray-400">Export Options</Text>
+                </Box>
+                <Box display="flex" gap={2}>
+                  <Button
+                    variant="primary"
+                    onClick={exportAllData}
+                    fullWidth
+                    size="sm"
+                    icon={<Icon icon={Download} size={3} />}
+                  >
+                    Export JSON
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    onClick={() => copyToClipboard(stats)}
+                    fullWidth
+                    size="sm"
+                    icon={<Icon icon={Copy} size={3} />}
+                  >
+                    Copy Stats
+                  </Button>
+                </Box>
+              </Box>
+
+              <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
+                <Box display="flex" alignItems="center" gap={2} mb={2}>
+                  <Icon icon={Trash2} size={3} color="rgb(156, 163, 175)" />
+                  <Text size="xs" weight="semibold" color="text-gray-400">Maintenance</Text>
+                </Box>
+                <Button
+                  variant="danger"
+                  onClick={clearAllData}
+                  fullWidth
+                  size="sm"
+                  icon={<Icon icon={Trash2} size={3} />}
                 >
-                  <Download className="w-3 h-3" /> Export JSON
-                </button>
-                <button
-                  onClick={() => copyToClipboard(stats)}
-                  className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-iron-gray hover:bg-charcoal-outline text-gray-300 rounded text-xs border border-charcoal-outline"
-                >
-                  <Copy className="w-3 h-3" /> Copy Stats
-                </button>
-              </div>
-            </div>
+                  Clear All Logs
+                </Button>
+              </Box>
 
-            <div className="bg-iron-gray border border-charcoal-outline rounded p-3">
-              <div className="text-xs font-semibold text-gray-400 mb-2 flex items-center gap-2">
-                <Trash2 className="w-3 h-3" /> Maintenance
-              </div>
-              <button
-                onClick={clearAllData}
-                className="w-full flex items-center justify-center gap-1 px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded text-xs"
-              >
-                <Trash2 className="w-3 h-3" /> Clear All Logs
-              </button>
-            </div>
-
-            <div className="bg-iron-gray border border-charcoal-outline rounded p-3">
-              <div className="text-xs font-semibold text-gray-400 mb-2 flex items-center gap-2">
-                <Terminal className="w-3 h-3" /> Console Commands
-              </div>
-              <div className="space-y-1 text-[10px] font-mono text-gray-400">
-                <div>• window.__GRIDPILOT_GLOBAL_HANDLER__</div>
-                <div>• window.__GRIDPILOT_API_LOGGER__</div>
-                <div>• window.__GRIDPILOT_REACT_ERRORS__</div>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
+              <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
+                <Box display="flex" alignItems="center" gap={2} mb={2}>
+                  <Icon icon={Terminal} size={3} color="rgb(156, 163, 175)" />
+                  <Text size="xs" weight="semibold" color="text-gray-400">Console Commands</Text>
+                </Box>
+                <Stack gap={1} fontSize="10px">
+                  <Text color="text-gray-400" font="mono">• window.__GRIDPILOT_GLOBAL_HANDLER__</Text>
+                  <Text color="text-gray-400" font="mono">• window.__GRIDPILOT_API_LOGGER__</Text>
+                  <Text color="text-gray-400" font="mono">• window.__GRIDPILOT_REACT_ERRORS__</Text>
+                </Stack>
+              </Box>
+            </Stack>
+          )}
+        </Stack>
+      </Box>
 
       {/* Footer */}
-      <div className="px-4 py-2 bg-iron-gray/30 border-t border-charcoal-outline text-[10px] text-gray-500 flex justify-between items-center">
-        <span>Auto-refresh: {refreshInterval}ms</span>
-        {copied && <span className="text-green-400">Copied!</span>}
-      </div>
-    </div>
+      <Box px={4} py={2} bg="bg-iron-gray/30" borderTop borderColor="border-charcoal-outline" display="flex" justifyContent="between" alignItems="center">
+        <Text size="xs" color="text-gray-500" fontSize="10px">Auto-refresh: {refreshInterval}ms</Text>
+        {copied && <Text size="xs" color="text-performance-green" fontSize="10px">Copied!</Text>}
+      </Box>
+    </Box>
   );
 }
 
@@ -608,4 +631,4 @@ export function useErrorAnalytics() {
       apiLogger.clearHistory();
     },
   };
-}
+}