-
Component Metrics
-
-
Total Renders: {summary.totalComponentRenders}
-
Average Time: {summary.averageComponentRenderTime.toFixed(2)}ms
-
Slow Renders: {summary.slowComponentsCount}
+
Rendering
+
+
+ Total Renders:
+ {summary.totalComponentRenders}
+
+
+ Avg Render Time:
+ {summary.averageComponentRenderTime.toFixed(2)}ms
+
+
+ Slow Components:
+ {summary.slowComponentsCount}
+
-
+
+
+
API Calls
+
+
+ Total Calls:
+ {summary.totalApiCalls}
+
+
+ Avg Response Time:
+ {summary.averageApiCallTime.toFixed(2)}ms
+
+
+ Success Rate:
+ {summary.apiSuccessRate.toFixed(1)}%
+
+
+
+
+
+
User Interactions
+
+
+ Total Interactions:
+ {summary.totalInteractions}
+
+
+ Performance Alerts:
+ {summary.performanceAlertsCount}
+
+
+
+
-
API Metrics
-
-
Total Calls: {summary.totalApiCalls}
-
Average Time: {summary.averageApiCallTime.toFixed(2)}ms
-
Slow Calls: {summary.slowApiCallsCount}
+
Bundle Analysis
+
+
+ Total Size:
+ {formatBytes(summary.bundles.totalSize)}
+
+
+ Bundle Count:
+ {summary.bundles.count}
+
+
+ Avg Load Time:
+ {summary.bundles.averageLoadTime.toFixed(2)}ms
+
diff --git a/client/src/components/PerformanceWidget.tsx b/client/src/components/PerformanceWidget.tsx
new file mode 100644
index 0000000..9dc91e6
--- /dev/null
+++ b/client/src/components/PerformanceWidget.tsx
@@ -0,0 +1,292 @@
+import React, { useState, useEffect } from 'react';
+import {
+ Activity,
+ AlertTriangle,
+ Monitor,
+ Download,
+ RefreshCw,
+ Eye,
+ EyeOff,
+ Settings
+} from 'lucide-react';
+import { useAdvancedPerformance } from '../hooks/useAdvancedPerformance';
+
+interface PerformanceWidgetProps {
+ componentName?: string;
+ minimal?: boolean;
+ showOnlyAlerts?: boolean;
+ position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+}
+
+export const PerformanceWidget: React.FC
= ({
+ componentName = 'App',
+ minimal = false,
+ showOnlyAlerts = false,
+ position = 'top-right'
+}) => {
+ const [isVisible, setIsVisible] = useState(true);
+ const [isExpanded, setIsExpanded] = useState(false);
+ const [realTimeMode, setRealTimeMode] = useState(true);
+
+ const {
+ performanceData,
+ startTracking,
+ stopTracking,
+ getRecommendations,
+ exportData,
+ clearData
+ } = useAdvancedPerformance(componentName, {
+ trackComponentRenders: true,
+ trackInteractions: true,
+ enableAlerts: true,
+ });
+
+ useEffect(() => {
+ startTracking();
+ return () => stopTracking();
+ }, [startTracking, stopTracking]);
+
+ const positionClasses = {
+ 'top-right': 'fixed top-4 right-4',
+ 'top-left': 'fixed top-4 left-4',
+ 'bottom-right': 'fixed bottom-4 right-4',
+ 'bottom-left': 'fixed bottom-4 left-4',
+ };
+
+ const getPerformanceScore = () => {
+ const { webVitals, memoryUsage, averageRenderTime } = performanceData;
+
+ let score = 100;
+
+ // Web Vitals scoring
+ if (webVitals.lcp > 2500) score -= 20;
+ else if (webVitals.lcp > 1800) score -= 10;
+
+ if (webVitals.fid > 100) score -= 20;
+ else if (webVitals.fid > 50) score -= 10;
+
+ if (webVitals.cls > 0.25) score -= 20;
+ else if (webVitals.cls > 0.1) score -= 10;
+
+ if (webVitals.fcp > 3000) score -= 15;
+ else if (webVitals.fcp > 1800) score -= 8;
+
+ // Memory scoring
+ if (memoryUsage > 0.9) score -= 20;
+ else if (memoryUsage > 0.7) score -= 10;
+
+ // Render time scoring
+ if (averageRenderTime > 33) score -= 20;
+ else if (averageRenderTime > 16) score -= 10;
+
+ return Math.max(0, score);
+ };
+
+ const getScoreColor = (score: number) => {
+ if (score >= 90) return 'text-green-600';
+ if (score >= 70) return 'text-yellow-600';
+ return 'text-red-600';
+ };
+
+ const getScoreBackground = (score: number) => {
+ if (score >= 90) return 'bg-green-100 dark:bg-green-900/20';
+ if (score >= 70) return 'bg-yellow-100 dark:bg-yellow-900/20';
+ return 'bg-red-100 dark:bg-red-900/20';
+ };
+
+ const performanceScore = getPerformanceScore();
+ const criticalAlerts = performanceData.alerts.filter(alert => alert.severity === 'high');
+ const recommendations = getRecommendations();
+
+ if (!isVisible) {
+ return (
+
+
+
+ );
+ }
+
+ if (minimal) {
+ return (
+
+
+
+
+
+ {performanceScore}
+
+ {criticalAlerts.length > 0 && (
+
+ )}
+
+
+
+
+
+ {/* Header */}
+
+
+
+
+
+ Performance
+
+
+ {performanceScore}
+
+
+
+
+
+
+
+
+
+
+ {/* Critical Alerts */}
+ {criticalAlerts.length > 0 && (
+
+
+
+
+ {criticalAlerts.length} Critical Alert{criticalAlerts.length > 1 ? 's' : ''}
+
+
+
+ {criticalAlerts.slice(0, 3).map(alert => (
+
+ {alert.message}
+
+ ))}
+
+
+ )}
+
+ {/* Quick Stats */}
+
+
+
+
Renders
+
+ {performanceData.componentRenders}
+
+
+
+
Avg Time
+
+ {performanceData.averageRenderTime.toFixed(1)}ms
+
+
+
+
Memory
+
+ {(performanceData.memoryUsage * 100).toFixed(1)}%
+
+
+
+
Bundle
+
+ {(performanceData.bundleSize / 1024).toFixed(0)}KB
+
+
+
+
+
+ {/* Expanded Content */}
+ {isExpanded && (
+
+ {/* Web Vitals */}
+
+
Core Web Vitals
+
+
+ LCP:
+ {performanceData.webVitals.lcp.toFixed(0)}ms
+
+
+ FID:
+ {performanceData.webVitals.fid.toFixed(0)}ms
+
+
+ CLS:
+ {performanceData.webVitals.cls.toFixed(3)}
+
+
+ FCP:
+ {performanceData.webVitals.fcp.toFixed(0)}ms
+
+
+
+
+ {/* Recommendations */}
+ {recommendations.length > 0 && (
+
+
Recommendations
+
+ {recommendations.slice(0, 3).map((rec, index) => (
+
+ • {rec}
+
+ ))}
+
+
+ )}
+
+ )}
+
+ {/* Actions */}
+
+
+
+
+
+
);
};
+
+export default TelegramMiniApp;
diff --git a/client/src/pages/TelegramSettingsPage.tsx b/client/src/pages/TelegramSettingsPage.tsx
index 8ed4f36..87b4fe6 100644
--- a/client/src/pages/TelegramSettingsPage.tsx
+++ b/client/src/pages/TelegramSettingsPage.tsx
@@ -301,3 +301,5 @@ export const TelegramSettingsPage: React.FC = () => {