@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

package/src/core/performance/performance-monitor.tsx

@@ -1,476 +1,488 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useReducer } from "react"
 // Import type safely with fallback
-type ReportHandler = (metric: { name: string; value: number }) => void;
+type ReportHandler = (metric: { name: string; value: number }) => void
 
 // Performance metrics types
 export interface PerformanceMetrics {
-  // Core Web Vitals
-  lcp?: number; // Largest Contentful Paint
-  fid?: number; // First Input Delay  
-  cls?: number; // Cumulative Layout Shift
-  fcp?: number; // First Contentful Paint
-  ttfb?: number; // Time to First Byte
-  inp?: number; // Interaction to Next Paint
-
-  // Custom metrics
-  componentRenderTime: number;
-  bundleLoadTime: number;
-  mediaLoadTime: number;
-  memoryUsage: number;
-  
-  // Performance scores
-  performanceScore: number;
-  timestamp: number;
+	// Core Web Vitals
+	lcp?: number // Largest Contentful Paint
+	fid?: number // First Input Delay
+	cls?: number // Cumulative Layout Shift
+	fcp?: number // First Contentful Paint
+	ttfb?: number // Time to First Byte
+	inp?: number // Interaction to Next Paint
+
+	// Custom metrics
+	componentRenderTime: number
+	bundleLoadTime: number
+	mediaLoadTime: number
+	memoryUsage: number
+
+	// Performance scores
+	performanceScore: number
+	timestamp: number
 }
 
 export interface PerformanceThresholds {
-  lcp: { good: number; poor: number };
-  fid: { good: number; poor: number };
-  cls: { good: number; poor: number };
-  renderTime: { good: number; poor: number };
-  memoryUsage: { good: number; poor: number };
+	lcp: { good: number; poor: number }
+	fid: { good: number; poor: number }
+	cls: { good: number; poor: number }
+	renderTime: { good: number; poor: number }
+	memoryUsage: { good: number; poor: number }
 }
 
 export const defaultThresholds: PerformanceThresholds = {
-  lcp: { good: 2500, poor: 4000 },
-  fid: { good: 100, poor: 300 },
-  cls: { good: 0.1, poor: 0.25 },
-  renderTime: { good: 16, poor: 100 }, // Target 60fps = 16.67ms per frame
-  memoryUsage: { good: 50 * 1024 * 1024, poor: 100 * 1024 * 1024 } // 50MB good, 100MB poor
-};
+	lcp: { good: 2500, poor: 4000 },
+	fid: { good: 100, poor: 300 },
+	cls: { good: 0.1, poor: 0.25 },
+	renderTime: { good: 16, poor: 100 }, // Target 60fps = 16.67ms per frame
+	memoryUsage: { good: 50 * 1024 * 1024, poor: 100 * 1024 * 1024 } // 50MB good, 100MB poor
+}
 
 // Performance monitoring class
 export class PerformanceMonitor {
-  private metrics: PerformanceMetrics[] = [];
-  private listeners: Set<(metrics: PerformanceMetrics) => void> = new Set();
-  private thresholds: PerformanceThresholds;
-  private observer?: PerformanceObserver;
-  private isMonitoring = false;
-
-  constructor(thresholds: PerformanceThresholds = defaultThresholds) {
-    this.thresholds = thresholds;
-    this.initializeWebVitals();
-    this.initializePerformanceObserver();
-  }
-
-  private async initializeWebVitals() {
-    if (typeof window === 'undefined') return;
-    
-    try {
-      // Try to import web-vitals dynamically and handle different versions
-      const webVitals = await import('web-vitals').catch(() => null);
-      
-      if (!webVitals) {
-        console.warn('web-vitals package not available, Core Web Vitals tracking disabled');
-        return;
-      }
-      
-      const reportHandler: ReportHandler = (metric) => {
-        this.updateMetric(metric.name.toLowerCase() as keyof PerformanceMetrics, metric.value);
-      };
-
-      // Handle different web-vitals versions safely
-      const vitalsAny = webVitals as any;
-      if (vitalsAny.getCLS) vitalsAny.getCLS(reportHandler);
-      if (vitalsAny.getFID) vitalsAny.getFID(reportHandler);
-      if (vitalsAny.getFCP) vitalsAny.getFCP(reportHandler);
-      if (vitalsAny.getLCP) vitalsAny.getLCP(reportHandler);
-      if (vitalsAny.getTTFB) vitalsAny.getTTFB(reportHandler);
-      if (vitalsAny.onINP) vitalsAny.onINP(reportHandler);
-    } catch (error) {
-      console.warn('Web Vitals initialization failed:', error);
-    }
-  }
-
-  private initializePerformanceObserver() {
-    if (typeof window === 'undefined' || !('PerformanceObserver' in window)) return;
-
-    try {
-      this.observer = new PerformanceObserver((list) => {
-        for (const entry of list.getEntries()) {
-          this.handlePerformanceEntry(entry);
-        }
-      });
-
-      this.observer.observe({ entryTypes: ['measure', 'navigation', 'resource', 'paint'] });
-    } catch (error) {
-      console.warn('PerformanceObserver not supported:', error);
-    }
-  }
-
-  private handlePerformanceEntry(entry: PerformanceEntry) {
-    switch (entry.entryType) {
-      case 'measure':
-        if (entry.name.startsWith('baroiplayer-render')) {
-          this.updateMetric('componentRenderTime', entry.duration);
-        }
-        break;
-        
-      case 'resource':
-        if (entry.name.includes('.js') || entry.name.includes('.css')) {
-          this.updateMetric('bundleLoadTime', entry.duration);
-        }
-        break;
-        
-      case 'paint':
-        if (entry.name === 'first-contentful-paint') {
-          this.updateMetric('fcp', entry.startTime);
-        }
-        break;
-    }
-  }
-
-  private updateMetric(key: keyof PerformanceMetrics, value: number) {
-    const currentMetrics = this.getCurrentMetrics();
-    const updatedMetrics = {
-      ...currentMetrics,
-      [key]: value,
-      timestamp: Date.now(),
-      performanceScore: this.calculatePerformanceScore({ ...currentMetrics, [key]: value })
-    };
-
-    this.metrics.push(updatedMetrics);
-    
-    // Keep only last 100 metrics
-    if (this.metrics.length > 100) {
-      this.metrics = this.metrics.slice(-100);
-    }
-
-    this.listeners.forEach(listener => listener(updatedMetrics));
-  }
-
-  private getCurrentMetrics(): PerformanceMetrics {
-    const latest = this.metrics[this.metrics.length - 1];
-    return latest || {
-      componentRenderTime: 0,
-      bundleLoadTime: 0,
-      mediaLoadTime: 0,
-      memoryUsage: this.getMemoryUsage(),
-      performanceScore: 0,
-      timestamp: Date.now()
-    };
-  }
-
-  private getMemoryUsage(): number {
-    if ('memory' in performance) {
-      return (performance as any).memory.usedJSHeapSize || 0;
-    }
-    return 0;
-  }
-
-  private calculatePerformanceScore(metrics: PerformanceMetrics): number {
-    let score = 100;
-    
-    // Penalize based on thresholds
-    if (metrics.lcp && metrics.lcp > this.thresholds.lcp.good) {
-      score -= metrics.lcp > this.thresholds.lcp.poor ? 30 : 15;
-    }
-    
-    if (metrics.fid && metrics.fid > this.thresholds.fid.good) {
-      score -= metrics.fid > this.thresholds.fid.poor ? 25 : 10;
-    }
-    
-    if (metrics.cls && metrics.cls > this.thresholds.cls.good) {
-      score -= metrics.cls > this.thresholds.cls.poor ? 20 : 10;
-    }
-    
-    if (metrics.componentRenderTime > this.thresholds.renderTime.good) {
-      score -= metrics.componentRenderTime > this.thresholds.renderTime.poor ? 20 : 10;
-    }
-    
-    if (metrics.memoryUsage > this.thresholds.memoryUsage.good) {
-      score -= metrics.memoryUsage > this.thresholds.memoryUsage.poor ? 15 : 5;
-    }
-
-    return Math.max(0, score);
-  }
-
-  // Public API
-  public startMonitoring() {
-    this.isMonitoring = true;
-    this.startMemoryMonitoring();
-  }
-
-  public stopMonitoring() {
-    this.isMonitoring = false;
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-  }
-
-  private startMemoryMonitoring() {
-    if (!this.isMonitoring) return;
-    
-    this.updateMetric('memoryUsage', this.getMemoryUsage());
-    setTimeout(() => this.startMemoryMonitoring(), 5000); // Check every 5 seconds
-  }
-
-  public measureComponentRender(componentName: string, renderFn: () => any): any {
-    const startMark = `baroiplayer-render-${componentName}-start`;
-    const endMark = `baroiplayer-render-${componentName}-end`;
-    const measureName = `baroiplayer-render-${componentName}`;
-
-    performance.mark(startMark);
-    const result = renderFn();
-    performance.mark(endMark);
-    
-    try {
-      performance.measure(measureName, startMark, endMark);
-    } catch (error) {
-      console.warn('Performance measurement failed:', error);
-    }
-
-    return result;
-  }
-
-  public subscribe(listener: (metrics: PerformanceMetrics) => void): () => void {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  }
-
-  public getLatestMetrics(): PerformanceMetrics | null {
-    return this.metrics[this.metrics.length - 1] || null;
-  }
-
-  public getAllMetrics(): PerformanceMetrics[] {
-    return [...this.metrics];
-  }
-
-  public getAverageMetrics(count = 10): Partial<PerformanceMetrics> {
-    const recentMetrics = this.metrics.slice(-count);
-    if (recentMetrics.length === 0) return {};
-
-    const averages: Partial<PerformanceMetrics> = {};
-    const keys: Array<keyof PerformanceMetrics> = [
-      'lcp', 'fid', 'cls', 'fcp', 'ttfb', 'inp',
-      'componentRenderTime', 'bundleLoadTime', 'mediaLoadTime',
-      'memoryUsage', 'performanceScore'
-    ];
-
-    keys.forEach(key => {
-      const values = recentMetrics
-        .map(m => m[key] as number)
-        .filter(v => typeof v === 'number' && !isNaN(v));
-      
-      if (values.length > 0) {
-        (averages as any)[key] = values.reduce((sum, v) => sum + v, 0) / values.length;
-      }
-    });
-
-    return averages;
-  }
-
-  public getThresholds(): PerformanceThresholds {
-    return this.thresholds;
-  }
-
-  public updateThresholds(newThresholds: Partial<PerformanceThresholds>) {
-    this.thresholds = { ...this.thresholds, ...newThresholds };
-  }
+	private metrics: PerformanceMetrics[] = []
+	private listeners: Set<(metrics: PerformanceMetrics) => void> = new Set()
+	private thresholds: PerformanceThresholds
+	private observer?: PerformanceObserver
+	private isMonitoring = false
+
+	constructor(thresholds: PerformanceThresholds = defaultThresholds) {
+		this.thresholds = thresholds
+		this.initializeWebVitals()
+		this.initializePerformanceObserver()
+	}
+
+	private async initializeWebVitals() {
+		if (typeof window === "undefined") return
+
+		try {
+			// Try to import web-vitals dynamically and handle different versions
+			const webVitals = await import("web-vitals").catch(() => null)
+
+			if (!webVitals) {
+				console.warn("web-vitals package not available, Core Web Vitals tracking disabled")
+				return
+			}
+
+			const reportHandler: ReportHandler = (metric) => {
+				this.updateMetric(metric.name.toLowerCase() as keyof PerformanceMetrics, metric.value)
+			}
+
+			// Handle different web-vitals versions safely
+			const vitalsAny = webVitals as any
+			if (vitalsAny.getCLS) vitalsAny.getCLS(reportHandler)
+			if (vitalsAny.getFID) vitalsAny.getFID(reportHandler)
+			if (vitalsAny.getFCP) vitalsAny.getFCP(reportHandler)
+			if (vitalsAny.getLCP) vitalsAny.getLCP(reportHandler)
+			if (vitalsAny.getTTFB) vitalsAny.getTTFB(reportHandler)
+			if (vitalsAny.onINP) vitalsAny.onINP(reportHandler)
+		} catch (error) {
+			console.warn("Web Vitals initialization failed:", error)
+		}
+	}
+
+	private initializePerformanceObserver() {
+		if (typeof window === "undefined" || !("PerformanceObserver" in window)) return
+
+		try {
+			this.observer = new PerformanceObserver((list) => {
+				for (const entry of list.getEntries()) {
+					this.handlePerformanceEntry(entry)
+				}
+			})
+
+			this.observer.observe({ entryTypes: ["measure", "navigation", "resource", "paint"] })
+		} catch (error) {
+			console.warn("PerformanceObserver not supported:", error)
+		}
+	}
+
+	private handlePerformanceEntry(entry: PerformanceEntry) {
+		switch (entry.entryType) {
+			case "measure":
+				if (entry.name.startsWith("baroiplayer-render")) {
+					this.updateMetric("componentRenderTime", entry.duration)
+				}
+				break
+
+			case "resource":
+				if (entry.name.includes(".js") || entry.name.includes(".css")) {
+					this.updateMetric("bundleLoadTime", entry.duration)
+				}
+				break
+
+			case "paint":
+				if (entry.name === "first-contentful-paint") {
+					this.updateMetric("fcp", entry.startTime)
+				}
+				break
+		}
+	}
+
+	private updateMetric(key: keyof PerformanceMetrics, value: number) {
+		const currentMetrics = this.getCurrentMetrics()
+		const updatedMetrics = {
+			...currentMetrics,
+			[key]: value,
+			timestamp: Date.now(),
+			performanceScore: this.calculatePerformanceScore({ ...currentMetrics, [key]: value })
+		}
+
+		this.metrics.push(updatedMetrics)
+
+		// Keep only last 100 metrics
+		if (this.metrics.length > 100) {
+			this.metrics = this.metrics.slice(-100)
+		}
+
+		this.listeners.forEach((listener) => listener(updatedMetrics))
+	}
+
+	private getCurrentMetrics(): PerformanceMetrics {
+		const latest = this.metrics[this.metrics.length - 1]
+		return (
+			latest || {
+				componentRenderTime: 0,
+				bundleLoadTime: 0,
+				mediaLoadTime: 0,
+				memoryUsage: this.getMemoryUsage(),
+				performanceScore: 0,
+				timestamp: Date.now()
+			}
+		)
+	}
+
+	private getMemoryUsage(): number {
+		if ("memory" in performance) {
+			return (performance as any).memory.usedJSHeapSize || 0
+		}
+		return 0
+	}
+
+	private calculatePerformanceScore(metrics: PerformanceMetrics): number {
+		let score = 100
+
+		// Penalize based on thresholds
+		if (metrics.lcp && metrics.lcp > this.thresholds.lcp.good) {
+			score -= metrics.lcp > this.thresholds.lcp.poor ? 30 : 15
+		}
+
+		if (metrics.fid && metrics.fid > this.thresholds.fid.good) {
+			score -= metrics.fid > this.thresholds.fid.poor ? 25 : 10
+		}
+
+		if (metrics.cls && metrics.cls > this.thresholds.cls.good) {
+			score -= metrics.cls > this.thresholds.cls.poor ? 20 : 10
+		}
+
+		if (metrics.componentRenderTime > this.thresholds.renderTime.good) {
+			score -= metrics.componentRenderTime > this.thresholds.renderTime.poor ? 20 : 10
+		}
+
+		if (metrics.memoryUsage > this.thresholds.memoryUsage.good) {
+			score -= metrics.memoryUsage > this.thresholds.memoryUsage.poor ? 15 : 5
+		}
+
+		return Math.max(0, score)
+	}
+
+	// Public API
+	public startMonitoring() {
+		this.isMonitoring = true
+		this.startMemoryMonitoring()
+	}
+
+	public stopMonitoring() {
+		this.isMonitoring = false
+		if (this.observer) {
+			this.observer.disconnect()
+		}
+	}
+
+	private startMemoryMonitoring() {
+		if (!this.isMonitoring) return
+
+		this.updateMetric("memoryUsage", this.getMemoryUsage())
+		setTimeout(() => this.startMemoryMonitoring(), 5000) // Check every 5 seconds
+	}
+
+	public measureComponentRender(componentName: string, renderFn: () => any): any {
+		const startMark = `baroiplayer-render-${componentName}-start`
+		const endMark = `baroiplayer-render-${componentName}-end`
+		const measureName = `baroiplayer-render-${componentName}`
+
+		performance.mark(startMark)
+		const result = renderFn()
+		performance.mark(endMark)
+
+		try {
+			performance.measure(measureName, startMark, endMark)
+		} catch (error) {
+			console.warn("Performance measurement failed:", error)
+		}
+
+		return result
+	}
+
+	public subscribe(listener: (metrics: PerformanceMetrics) => void): () => void {
+		this.listeners.add(listener)
+		return () => this.listeners.delete(listener)
+	}
+
+	public getLatestMetrics(): PerformanceMetrics | null {
+		return this.metrics[this.metrics.length - 1] || null
+	}
+
+	public getAllMetrics(): PerformanceMetrics[] {
+		return [...this.metrics]
+	}
+
+	public getAverageMetrics(count = 10): Partial<PerformanceMetrics> {
+		const recentMetrics = this.metrics.slice(-count)
+		if (recentMetrics.length === 0) return {}
+
+		const averages: Partial<PerformanceMetrics> = {}
+		const keys: Array<keyof PerformanceMetrics> = [
+			"lcp",
+			"fid",
+			"cls",
+			"fcp",
+			"ttfb",
+			"inp",
+			"componentRenderTime",
+			"bundleLoadTime",
+			"mediaLoadTime",
+			"memoryUsage",
+			"performanceScore"
+		]
+
+		keys.forEach((key) => {
+			const values = recentMetrics
+				.map((m) => m[key] as number)
+				.filter((v) => typeof v === "number" && !isNaN(v))
+
+			if (values.length > 0) {
+				;(averages as any)[key] = values.reduce((sum, v) => sum + v, 0) / values.length
+			}
+		})
+
+		return averages
+	}
+
+	public getThresholds(): PerformanceThresholds {
+		return this.thresholds
+	}
+
+	public updateThresholds(newThresholds: Partial<PerformanceThresholds>) {
+		this.thresholds = { ...this.thresholds, ...newThresholds }
+	}
 }
 
 // Global performance monitor instance
-export const performanceMonitor = new PerformanceMonitor();
+export const performanceMonitor = new PerformanceMonitor()
 
 // React hook for performance monitoring
 export function usePerformanceMonitor() {
-  const [metrics, setMetrics] = useState<PerformanceMetrics | null>(null);
-  const [isSupported, setIsSupported] = useState(true);
-
-  useEffect(() => {
-    setIsSupported(typeof window !== 'undefined' && 'performance' in window);
-    
-    if (!isSupported) return;
-
-    performanceMonitor.startMonitoring();
-    const unsubscribe = performanceMonitor.subscribe(setMetrics);
-
-    return () => {
-      unsubscribe();
-      performanceMonitor.stopMonitoring();
-    };
-  }, [isSupported]);
-
-  const measureRender = useCallback(
-    (componentName: string, renderFn: () => any): any => {
-      return performanceMonitor.measureComponentRender(componentName, renderFn);
-    },
-    []
-  );
-
-  return {
-    metrics,
-    isSupported,
-    measureRender,
-    averageMetrics: performanceMonitor.getAverageMetrics(),
-    allMetrics: performanceMonitor.getAllMetrics(),
-    thresholds: performanceMonitor.getThresholds()
-  };
+	const [metrics, setMetrics] = useState<PerformanceMetrics | null>(null)
+	const [isSupported, setIsSupported] = useState(true)
+
+	useEffect(() => {
+		setIsSupported(typeof window !== "undefined" && "performance" in window)
+
+		if (!isSupported) return
+
+		performanceMonitor.startMonitoring()
+		const unsubscribe = performanceMonitor.subscribe(setMetrics)
+
+		return () => {
+			unsubscribe()
+			performanceMonitor.stopMonitoring()
+		}
+	}, [isSupported])
+
+	const measureRender = useCallback((componentName: string, renderFn: () => any): any => {
+		return performanceMonitor.measureComponentRender(componentName, renderFn)
+	}, [])
+
+	return {
+		metrics,
+		isSupported,
+		measureRender,
+		averageMetrics: performanceMonitor.getAverageMetrics(),
+		allMetrics: performanceMonitor.getAllMetrics(),
+		thresholds: performanceMonitor.getThresholds()
+	}
 }
 
 // HOC for performance monitoring
 export function withPerformanceMonitoring(
-  WrappedComponent: React.ComponentType<any>,
-  componentName?: string
+	WrappedComponent: React.ComponentType<any>,
+	componentName?: string
 ) {
-  const displayName = componentName || WrappedComponent.displayName || WrappedComponent.name || 'Component';
-  
-  function PerformanceMonitoredComponent(props: any) {
-    const renderRef = useRef(0);
-    const { measureRender } = usePerformanceMonitor();
-
-    return measureRender(`${displayName}-${renderRef.current++}`, () => (
-      <WrappedComponent {...props} />
-    ));
-  }
-
-  PerformanceMonitoredComponent.displayName = `withPerformanceMonitoring(${displayName})`;
-  return PerformanceMonitoredComponent;
+	const displayName =
+		componentName || WrappedComponent.displayName || WrappedComponent.name || "Component"
+
+	function PerformanceMonitoredComponent(props: any) {
+		const renderRef = useRef(0)
+		const { measureRender } = usePerformanceMonitor()
+
+		// Use a simple counter that increments during render but doesn't access the ref value
+		const renderKey = useState(() => Math.random())[0]
+
+		// Update ref in effect to track count without accessing during render
+		useEffect(() => {
+			renderRef.current += 1
+		})
+
+		return measureRender(`${displayName}-${renderKey}`, () => <WrappedComponent {...props} />)
+	}
+
+	PerformanceMonitoredComponent.displayName = `withPerformanceMonitoring(${displayName})`
+	return PerformanceMonitoredComponent
 }
 
 // Performance regression detector
 export class PerformanceRegressionDetector {
-  private baselineMetrics: PerformanceMetrics | null = null;
-  private regressionThreshold = 0.2; // 20% degradation threshold
-
-  setBaseline(metrics: PerformanceMetrics) {
-    this.baselineMetrics = metrics;
-  }
-
-  detectRegression(currentMetrics: PerformanceMetrics): Array<{
-    metric: keyof PerformanceMetrics;
-    baseline: number;
-    current: number;
-    degradation: number;
-  }> {
-    if (!this.baselineMetrics) return [];
-
-    const regressions: Array<{
-      metric: keyof PerformanceMetrics;
-      baseline: number;
-      current: number;
-      degradation: number;
-    }> = [];
-
-    const metricsToCheck: Array<keyof PerformanceMetrics> = [
-      'componentRenderTime', 'bundleLoadTime', 'mediaLoadTime', 'memoryUsage'
-    ];
-
-    metricsToCheck.forEach(metric => {
-      const baseline = this.baselineMetrics![metric] as number;
-      const current = currentMetrics[metric] as number;
-      
-      if (baseline && current && baseline > 0) {
-        const degradation = (current - baseline) / baseline;
-        if (degradation > this.regressionThreshold) {
-          regressions.push({ metric, baseline, current, degradation });
-        }
-      }
-    });
-
-    return regressions;
-  }
-
-  setRegressionThreshold(threshold: number) {
-    this.regressionThreshold = Math.max(0, Math.min(1, threshold));
-  }
+	private baselineMetrics: PerformanceMetrics | null = null
+	private regressionThreshold = 0.2 // 20% degradation threshold
+
+	setBaseline(metrics: PerformanceMetrics) {
+		this.baselineMetrics = metrics
+	}
+
+	detectRegression(currentMetrics: PerformanceMetrics): Array<{
+		metric: keyof PerformanceMetrics
+		baseline: number
+		current: number
+		degradation: number
+	}> {
+		if (!this.baselineMetrics) return []
+
+		const regressions: Array<{
+			metric: keyof PerformanceMetrics
+			baseline: number
+			current: number
+			degradation: number
+		}> = []
+
+		const metricsToCheck: Array<keyof PerformanceMetrics> = [
+			"componentRenderTime",
+			"bundleLoadTime",
+			"mediaLoadTime",
+			"memoryUsage"
+		]
+
+		metricsToCheck.forEach((metric) => {
+			const baseline = this.baselineMetrics![metric] as number
+			const current = currentMetrics[metric] as number
+
+			if (baseline && current && baseline > 0) {
+				const degradation = (current - baseline) / baseline
+				if (degradation > this.regressionThreshold) {
+					regressions.push({ metric, baseline, current, degradation })
+				}
+			}
+		})
+
+		return regressions
+	}
+
+	setRegressionThreshold(threshold: number) {
+		this.regressionThreshold = Math.max(0, Math.min(1, threshold))
+	}
 }
 
 // Development dashboard component
 export interface PerformanceDashboardProps {
-  className?: string;
-  showAdvanced?: boolean;
+	className?: string
+	showAdvanced?: boolean
 }
 
-export function PerformanceDashboard({ 
-  className = '', 
-  showAdvanced = false 
+export function PerformanceDashboard({
+	className = "",
+	showAdvanced = false
 }: PerformanceDashboardProps) {
-  const { metrics, averageMetrics, thresholds, isSupported } = usePerformanceMonitor();
-
-  if (!isSupported || !metrics) {
-    return (
-      <div className={`performance-dashboard ${className}`}>
-        <p>Performance monitoring not supported in this environment</p>
-      </div>
-    );
-  }
-
-  const getScoreColor = (score: number) => {
-    if (score >= 90) return 'text-green-600';
-    if (score >= 70) return 'text-yellow-600';
-    return 'text-red-600';
-  };
-
-  const formatBytes = (bytes: number) => {
-    return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
-  };
-
-  return (
-    <div className={`performance-dashboard rounded-lg bg-white p-4 shadow ${className}`}>
-      <h3 className="mb-4 font-semibold text-lg">Performance Dashboard</h3>
-      
-      {/* Performance Score */}
-      <div className="mb-4">
-        <div className="flex items-center justify-between">
-          <span>Performance Score</span>
-          <span className={`font-bold ${getScoreColor(metrics.performanceScore)}`}>
-            {metrics.performanceScore.toFixed(0)}
-          </span>
-        </div>
-        <div className="mt-1 h-2 w-full rounded-full bg-gray-200">
-          <div 
-            className={`h-2 rounded-full transition-all duration-300 ${
-              metrics.performanceScore >= 90 ? 'bg-green-500' :
-              metrics.performanceScore >= 70 ? 'bg-yellow-500' : 'bg-red-500'
-            }`}
-            style={{ width: `${metrics.performanceScore}%` }}
-          />
-        </div>
-      </div>
-
-      {/* Core Web Vitals */}
-      <div className="mb-4 grid grid-cols-2 gap-4">
-        <div>
-          <h4 className="mb-2 font-medium">Core Web Vitals</h4>
-          <div className="space-y-1 text-sm">
-            {metrics.lcp && (
-              <div>LCP: {metrics.lcp.toFixed(0)}ms</div>
-            )}
-            {metrics.fid && (
-              <div>FID: {metrics.fid.toFixed(0)}ms</div>
-            )}
-            {metrics.cls && (
-              <div>CLS: {metrics.cls.toFixed(3)}</div>
-            )}
-          </div>
-        </div>
-        
-        <div>
-          <h4 className="mb-2 font-medium">Custom Metrics</h4>
-          <div className="space-y-1 text-sm">
-            <div>Render: {metrics.componentRenderTime.toFixed(2)}ms</div>
-            <div>Memory: {formatBytes(metrics.memoryUsage)}</div>
-            {metrics.bundleLoadTime > 0 && (
-              <div>Bundle: {metrics.bundleLoadTime.toFixed(0)}ms</div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Advanced metrics */}
-      {showAdvanced && (
-        <div>
-          <h4 className="mb-2 font-medium">Advanced Metrics</h4>
-          <div className="space-y-1 text-sm">
-            <div>Average Render Time: {(averageMetrics.componentRenderTime || 0).toFixed(2)}ms</div>
-            <div>Average Memory: {formatBytes(averageMetrics.memoryUsage || 0)}</div>
-            <div>Average Score: {(averageMetrics.performanceScore || 0).toFixed(0)}</div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
+	const { metrics, averageMetrics, thresholds, isSupported } = usePerformanceMonitor()
+
+	if (!isSupported || !metrics) {
+		return (
+			<div className={`performance-dashboard ${className}`}>
+				<p>Performance monitoring not supported in this environment</p>
+			</div>
+		)
+	}
+
+	const getScoreColor = (score: number) => {
+		if (score >= 90) return "text-green-600"
+		if (score >= 70) return "text-yellow-600"
+		return "text-red-600"
+	}
+
+	const formatBytes = (bytes: number) => {
+		return `${(bytes / 1024 / 1024).toFixed(2)} MB`
+	}
+
+	return (
+		<div className={`performance-dashboard rounded-lg bg-white p-4 shadow ${className}`}>
+			<h3 className="mb-4 font-semibold text-lg">Performance Dashboard</h3>
+
+			{/* Performance Score */}
+			<div className="mb-4">
+				<div className="flex items-center justify-between">
+					<span>Performance Score</span>
+					<span className={`font-bold ${getScoreColor(metrics.performanceScore)}`}>
+						{metrics.performanceScore.toFixed(0)}
+					</span>
+				</div>
+				<div className="mt-1 h-2 w-full rounded-full bg-gray-200">
+					<div
+						className={`h-2 rounded-full transition-all duration-300 ${
+							metrics.performanceScore >= 90
+								? "bg-green-500"
+								: metrics.performanceScore >= 70
+									? "bg-yellow-500"
+									: "bg-red-500"
+						}`}
+						style={{ width: `${metrics.performanceScore}%` }}
+					/>
+				</div>
+			</div>
+
+			{/* Core Web Vitals */}
+			<div className="mb-4 grid grid-cols-2 gap-4">
+				<div>
+					<h4 className="mb-2 font-medium">Core Web Vitals</h4>
+					<div className="space-y-1 text-sm">
+						{metrics.lcp && <div>LCP: {metrics.lcp.toFixed(0)}ms</div>}
+						{metrics.fid && <div>FID: {metrics.fid.toFixed(0)}ms</div>}
+						{metrics.cls && <div>CLS: {metrics.cls.toFixed(3)}</div>}
+					</div>
+				</div>
+
+				<div>
+					<h4 className="mb-2 font-medium">Custom Metrics</h4>
+					<div className="space-y-1 text-sm">
+						<div>Render: {metrics.componentRenderTime.toFixed(2)}ms</div>
+						<div>Memory: {formatBytes(metrics.memoryUsage)}</div>
+						{metrics.bundleLoadTime > 0 && <div>Bundle: {metrics.bundleLoadTime.toFixed(0)}ms</div>}
+					</div>
+				</div>
+			</div>
+
+			{/* Advanced metrics */}
+			{showAdvanced && (
+				<div>
+					<h4 className="mb-2 font-medium">Advanced Metrics</h4>
+					<div className="space-y-1 text-sm">
+						<div>Average Render Time: {(averageMetrics.componentRenderTime || 0).toFixed(2)}ms</div>
+						<div>Average Memory: {formatBytes(averageMetrics.memoryUsage || 0)}</div>
+						<div>Average Score: {(averageMetrics.performanceScore || 0).toFixed(0)}</div>
+					</div>
+				</div>
+			)}
+		</div>
+	)
 }
 
-export default PerformanceMonitor;
+export default PerformanceMonitor