mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-03-10 22:21:44 +00:00
949 lines
33 KiB
TypeScript
949 lines
33 KiB
TypeScript
import React, { useEffect, useState, useRef, useCallback } from 'react';
|
|
import { classNames } from '~/utils/classNames';
|
|
import { Line } from 'react-chartjs-2';
|
|
import {
|
|
Chart as ChartJS,
|
|
CategoryScale,
|
|
LinearScale,
|
|
PointElement,
|
|
LineElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend,
|
|
} from 'chart.js';
|
|
import { toast } from 'react-toastify'; // Import toast
|
|
|
|
// Register ChartJS components
|
|
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
|
|
|
|
interface BatteryManager extends EventTarget {
|
|
charging: boolean;
|
|
chargingTime: number;
|
|
dischargingTime: number;
|
|
level: number;
|
|
}
|
|
|
|
type ProcessStatus = 'active' | 'idle' | 'suspended';
|
|
type ProcessImpact = 'high' | 'medium' | 'low';
|
|
|
|
interface ProcessInfo {
|
|
name: string;
|
|
type: 'API' | 'Animation' | 'Background' | 'Network' | 'Storage';
|
|
cpuUsage: number;
|
|
memoryUsage: number;
|
|
status: ProcessStatus;
|
|
lastUpdate: string;
|
|
impact: ProcessImpact;
|
|
}
|
|
|
|
interface SystemMetrics {
|
|
cpu: number;
|
|
memory: {
|
|
used: number;
|
|
total: number;
|
|
percentage: number;
|
|
};
|
|
activeProcesses: number;
|
|
uptime: number;
|
|
battery?: {
|
|
level: number;
|
|
charging: boolean;
|
|
timeRemaining?: number;
|
|
};
|
|
network: {
|
|
downlink: number;
|
|
latency: number;
|
|
type: string;
|
|
};
|
|
}
|
|
|
|
interface MetricsHistory {
|
|
timestamps: string[];
|
|
cpu: number[];
|
|
memory: number[];
|
|
battery: number[];
|
|
network: number[];
|
|
}
|
|
|
|
interface EnergySavings {
|
|
updatesReduced: number;
|
|
timeInSaverMode: number;
|
|
estimatedEnergySaved: number; // in mWh (milliwatt-hours)
|
|
}
|
|
|
|
declare global {
|
|
interface Navigator {
|
|
getBattery(): Promise<BatteryManager>;
|
|
}
|
|
interface Performance {
|
|
memory?: {
|
|
jsHeapSizeLimit: number;
|
|
totalJSHeapSize: number;
|
|
usedJSHeapSize: number;
|
|
};
|
|
}
|
|
}
|
|
|
|
const MAX_HISTORY_POINTS = 60; // 1 minute of history at 1s intervals
|
|
const BATTERY_THRESHOLD = 20; // Enable energy saver when battery below 20%
|
|
const UPDATE_INTERVALS = {
|
|
normal: {
|
|
metrics: 1000, // 1s
|
|
processes: 2000, // 2s
|
|
},
|
|
energySaver: {
|
|
metrics: 5000, // 5s
|
|
processes: 10000, // 10s
|
|
},
|
|
};
|
|
|
|
// Energy consumption estimates (milliwatts)
|
|
const ENERGY_COSTS = {
|
|
update: 2, // mW per update
|
|
apiCall: 5, // mW per API call
|
|
rendering: 1, // mW per render
|
|
};
|
|
|
|
export default function TaskManagerTab() {
|
|
const [processes, setProcesses] = useState<ProcessInfo[]>([]);
|
|
const [metrics, setMetrics] = useState<SystemMetrics>({
|
|
cpu: 0,
|
|
memory: { used: 0, total: 0, percentage: 0 },
|
|
activeProcesses: 0,
|
|
uptime: 0,
|
|
network: { downlink: 0, latency: 0, type: 'unknown' },
|
|
});
|
|
const [metricsHistory, setMetricsHistory] = useState<MetricsHistory>({
|
|
timestamps: [],
|
|
cpu: [],
|
|
memory: [],
|
|
battery: [],
|
|
network: [],
|
|
});
|
|
const [loading, setLoading] = useState({
|
|
metrics: false,
|
|
processes: false,
|
|
});
|
|
const [energySaverMode, setEnergySaverMode] = useState<boolean>(() => {
|
|
// Initialize from localStorage, default to false
|
|
const saved = localStorage.getItem('energySaverMode');
|
|
return saved ? JSON.parse(saved) : false;
|
|
});
|
|
|
|
const [autoEnergySaver, setAutoEnergySaver] = useState<boolean>(() => {
|
|
// Initialize from localStorage, default to false
|
|
const saved = localStorage.getItem('autoEnergySaver');
|
|
return saved ? JSON.parse(saved) : false;
|
|
});
|
|
|
|
const [energySavings, setEnergySavings] = useState<EnergySavings>({
|
|
updatesReduced: 0,
|
|
timeInSaverMode: 0,
|
|
estimatedEnergySaved: 0,
|
|
});
|
|
|
|
const saverModeStartTime = useRef<number | null>(null);
|
|
|
|
const [performanceObserver, setPerformanceObserver] = useState<PerformanceObserver | null>(null);
|
|
|
|
// Handle energy saver mode changes
|
|
const handleEnergySaverChange = (checked: boolean) => {
|
|
setEnergySaverMode(checked);
|
|
localStorage.setItem('energySaverMode', JSON.stringify(checked));
|
|
toast.success(checked ? 'Energy Saver mode enabled' : 'Energy Saver mode disabled');
|
|
};
|
|
|
|
// Handle auto energy saver changes
|
|
const handleAutoEnergySaverChange = (checked: boolean) => {
|
|
setAutoEnergySaver(checked);
|
|
localStorage.setItem('autoEnergySaver', JSON.stringify(checked));
|
|
toast.success(checked ? 'Auto Energy Saver enabled' : 'Auto Energy Saver disabled');
|
|
|
|
if (!checked) {
|
|
// When disabling auto mode, also disable energy saver mode
|
|
setEnergySaverMode(false);
|
|
localStorage.setItem('energySaverMode', 'false');
|
|
}
|
|
};
|
|
|
|
// Add this helper function at the top level of the component
|
|
function isNetworkRequest(entry: PerformanceEntry): boolean {
|
|
const resourceTiming = entry as PerformanceResourceTiming;
|
|
return resourceTiming.initiatorType === 'fetch' && entry.duration === 0;
|
|
}
|
|
|
|
// Update getActiveProcessCount
|
|
const getActiveProcessCount = async (): Promise<number> => {
|
|
try {
|
|
const networkCount = (navigator as any)?.connections?.length || 0;
|
|
const swCount = (await navigator.serviceWorker?.getRegistrations().then((regs) => regs.length)) || 0;
|
|
const animationCount = document.getAnimations().length;
|
|
const fetchCount = performance.getEntriesByType('resource').filter(isNetworkRequest).length;
|
|
|
|
return networkCount + swCount + animationCount + fetchCount;
|
|
} catch (error) {
|
|
console.error('Failed to get active process count:', error);
|
|
return 0;
|
|
}
|
|
};
|
|
|
|
// Update process cleanup
|
|
const cleanupOldProcesses = useCallback(() => {
|
|
const MAX_PROCESS_AGE = 30000; // 30 seconds
|
|
|
|
setProcesses((currentProcesses) => {
|
|
const now = Date.now();
|
|
return currentProcesses.filter((process) => {
|
|
const processTime = new Date(process.lastUpdate).getTime();
|
|
const age = now - processTime;
|
|
|
|
/*
|
|
* Keep processes that are:
|
|
* 1. Less than MAX_PROCESS_AGE old, or
|
|
* 2. Currently active, or
|
|
* 3. Service workers (they're managed separately)
|
|
*/
|
|
return age < MAX_PROCESS_AGE || process.status === 'active' || process.type === 'Background';
|
|
});
|
|
});
|
|
}, []);
|
|
|
|
// Add cleanup interval
|
|
useEffect(() => {
|
|
const interval = setInterval(cleanupOldProcesses, 5000);
|
|
return () => clearInterval(interval);
|
|
}, [cleanupOldProcesses]);
|
|
|
|
// Update energy savings calculation
|
|
const updateEnergySavings = useCallback(() => {
|
|
if (!energySaverMode) {
|
|
saverModeStartTime.current = null;
|
|
setEnergySavings({
|
|
updatesReduced: 0,
|
|
timeInSaverMode: 0,
|
|
estimatedEnergySaved: 0,
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
if (!saverModeStartTime.current) {
|
|
saverModeStartTime.current = Date.now();
|
|
}
|
|
|
|
const timeInSaverMode = Math.max(0, (Date.now() - (saverModeStartTime.current || Date.now())) / 1000);
|
|
|
|
const normalUpdatesPerMinute = 60 / (UPDATE_INTERVALS.normal.metrics / 1000);
|
|
const saverUpdatesPerMinute = 60 / (UPDATE_INTERVALS.energySaver.metrics / 1000);
|
|
const updatesReduced = Math.floor((normalUpdatesPerMinute - saverUpdatesPerMinute) * (timeInSaverMode / 60));
|
|
|
|
const processCount = processes.length;
|
|
const energyPerUpdate = ENERGY_COSTS.update + processCount * ENERGY_COSTS.rendering;
|
|
const energySaved = (updatesReduced * energyPerUpdate) / 3600;
|
|
|
|
setEnergySavings({
|
|
updatesReduced,
|
|
timeInSaverMode,
|
|
estimatedEnergySaved: energySaved,
|
|
});
|
|
}, [energySaverMode, processes.length]);
|
|
|
|
// Add interval for energy savings updates
|
|
useEffect(() => {
|
|
const interval = setInterval(updateEnergySavings, 1000);
|
|
return () => clearInterval(interval);
|
|
}, [updateEnergySavings]);
|
|
|
|
// Improve process monitoring by adding unique IDs and timestamps
|
|
const createProcess = (
|
|
name: string,
|
|
type: ProcessInfo['type'],
|
|
cpuUsage: number,
|
|
memoryUsage: number,
|
|
status: ProcessStatus,
|
|
impact: ProcessImpact,
|
|
): ProcessInfo => ({
|
|
name,
|
|
type,
|
|
cpuUsage,
|
|
memoryUsage,
|
|
status,
|
|
lastUpdate: new Date().toISOString(),
|
|
impact,
|
|
});
|
|
|
|
// Update animation monitoring to track changes better
|
|
const updateAnimations = useCallback(() => {
|
|
const animations = document.getAnimations();
|
|
|
|
setProcesses((currentProcesses) => {
|
|
const nonAnimationProcesses = currentProcesses.filter((p) => !p.name.startsWith('Animation:'));
|
|
const newAnimations = animations
|
|
.slice(0, 5)
|
|
.map((animation) =>
|
|
createProcess(
|
|
`Animation: ${animation.id || 'Unnamed'}`,
|
|
'Animation',
|
|
animation.playState === 'running' ? 2 : 0,
|
|
1,
|
|
animation.playState === 'running' ? 'active' : 'idle',
|
|
'low',
|
|
),
|
|
);
|
|
|
|
return [...nonAnimationProcesses, ...newAnimations];
|
|
});
|
|
}, []);
|
|
|
|
// Add animation monitoring interval
|
|
useEffect(() => {
|
|
const interval = setInterval(updateAnimations, energySaverMode ? 5000 : 1000);
|
|
return () => clearInterval(interval);
|
|
}, [updateAnimations, energySaverMode]);
|
|
|
|
useEffect((): (() => void) | undefined => {
|
|
if (!autoEnergySaver) {
|
|
// If auto mode is disabled, clear any forced energy saver state
|
|
setEnergySaverMode(false);
|
|
return undefined;
|
|
}
|
|
|
|
const checkBatteryStatus = async () => {
|
|
try {
|
|
const battery = await navigator.getBattery();
|
|
const shouldEnableSaver = !battery.charging && battery.level * 100 <= BATTERY_THRESHOLD;
|
|
setEnergySaverMode(shouldEnableSaver);
|
|
} catch {
|
|
console.log('Battery API not available');
|
|
}
|
|
};
|
|
|
|
checkBatteryStatus();
|
|
|
|
const batteryCheckInterval = setInterval(checkBatteryStatus, 60000);
|
|
|
|
return () => clearInterval(batteryCheckInterval);
|
|
}, [autoEnergySaver]);
|
|
|
|
const getUsageColor = (usage: number): string => {
|
|
if (usage > 80) {
|
|
return 'text-red-500';
|
|
}
|
|
|
|
if (usage > 50) {
|
|
return 'text-yellow-500';
|
|
}
|
|
|
|
return 'text-gray-500';
|
|
};
|
|
|
|
const getImpactColor = (impact: ProcessImpact): string => {
|
|
if (impact === 'high') {
|
|
return 'text-red-500';
|
|
}
|
|
|
|
if (impact === 'medium') {
|
|
return 'text-yellow-500';
|
|
}
|
|
|
|
return 'text-gray-500';
|
|
};
|
|
|
|
const renderUsageGraph = (data: number[], label: string, color: string) => {
|
|
const chartData = {
|
|
labels: metricsHistory.timestamps,
|
|
datasets: [
|
|
{
|
|
label,
|
|
data,
|
|
borderColor: color,
|
|
fill: false,
|
|
tension: 0.4,
|
|
},
|
|
],
|
|
};
|
|
|
|
const options = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100,
|
|
grid: {
|
|
color: 'rgba(255, 255, 255, 0.1)',
|
|
},
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false,
|
|
},
|
|
},
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
},
|
|
animation: {
|
|
duration: 0,
|
|
} as const,
|
|
};
|
|
|
|
return (
|
|
<div className="h-32">
|
|
<Line data={chartData} options={options} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const updateMetrics = async () => {
|
|
try {
|
|
setLoading((prev) => ({ ...prev, metrics: true }));
|
|
|
|
// Get memory info using Performance API
|
|
const memory = performance.memory || {
|
|
jsHeapSizeLimit: 0,
|
|
totalJSHeapSize: 0,
|
|
usedJSHeapSize: 0,
|
|
};
|
|
const totalMem = memory.totalJSHeapSize / (1024 * 1024);
|
|
const usedMem = memory.usedJSHeapSize / (1024 * 1024);
|
|
const memPercentage = (usedMem / totalMem) * 100;
|
|
|
|
// Get CPU usage using Performance API
|
|
const cpuUsage = await getCPUUsage();
|
|
|
|
// Get battery info
|
|
let batteryInfo: SystemMetrics['battery'] | undefined;
|
|
|
|
try {
|
|
const battery = await navigator.getBattery();
|
|
batteryInfo = {
|
|
level: battery.level * 100,
|
|
charging: battery.charging,
|
|
timeRemaining: battery.charging ? battery.chargingTime : battery.dischargingTime,
|
|
};
|
|
} catch {
|
|
console.log('Battery API not available');
|
|
}
|
|
|
|
// Get network info using Network Information API
|
|
const connection =
|
|
(navigator as any).connection || (navigator as any).mozConnection || (navigator as any).webkitConnection;
|
|
const networkInfo = {
|
|
downlink: connection?.downlink || 0,
|
|
latency: connection?.rtt || 0,
|
|
type: connection?.type || 'unknown',
|
|
};
|
|
|
|
const newMetrics = {
|
|
cpu: cpuUsage,
|
|
memory: {
|
|
used: Math.round(usedMem),
|
|
total: Math.round(totalMem),
|
|
percentage: Math.round(memPercentage),
|
|
},
|
|
activeProcesses: await getActiveProcessCount(),
|
|
uptime: performance.now() / 1000,
|
|
battery: batteryInfo,
|
|
network: networkInfo,
|
|
};
|
|
|
|
setMetrics(newMetrics);
|
|
|
|
// Update metrics history
|
|
const now = new Date().toLocaleTimeString();
|
|
setMetricsHistory((prev) => {
|
|
const timestamps = [...prev.timestamps, now].slice(-MAX_HISTORY_POINTS);
|
|
const cpu = [...prev.cpu, newMetrics.cpu].slice(-MAX_HISTORY_POINTS);
|
|
const memory = [...prev.memory, newMetrics.memory.percentage].slice(-MAX_HISTORY_POINTS);
|
|
const battery = [...prev.battery, batteryInfo?.level || 0].slice(-MAX_HISTORY_POINTS);
|
|
const network = [...prev.network, networkInfo.downlink].slice(-MAX_HISTORY_POINTS);
|
|
|
|
return { timestamps, cpu, memory, battery, network };
|
|
});
|
|
} catch (error: unknown) {
|
|
console.error('Failed to update system metrics:', error);
|
|
} finally {
|
|
setLoading((prev) => ({ ...prev, metrics: false }));
|
|
}
|
|
};
|
|
|
|
// Get real CPU usage using Performance API
|
|
const getCPUUsage = async (): Promise<number> => {
|
|
try {
|
|
const t0 = performance.now();
|
|
|
|
// Create some actual work to measure and use the result
|
|
let result = 0;
|
|
|
|
for (let i = 0; i < 10000; i++) {
|
|
result += Math.random();
|
|
}
|
|
|
|
// Use result to prevent optimization
|
|
if (result < 0) {
|
|
console.log('Unexpected negative result');
|
|
}
|
|
|
|
const t1 = performance.now();
|
|
const timeTaken = t1 - t0;
|
|
|
|
/*
|
|
* Normalize to percentage (0-100)
|
|
* Lower time = higher CPU availability
|
|
*/
|
|
const maxExpectedTime = 50; // baseline in ms
|
|
const cpuAvailability = Math.max(0, Math.min(100, ((maxExpectedTime - timeTaken) / maxExpectedTime) * 100));
|
|
|
|
return 100 - cpuAvailability; // Convert availability to usage
|
|
} catch (error) {
|
|
console.error('Failed to get CPU usage:', error);
|
|
return 0;
|
|
}
|
|
};
|
|
|
|
// Add network change listener
|
|
useEffect(() => {
|
|
const connection =
|
|
(navigator as any).connection || (navigator as any).mozConnection || (navigator as any).webkitConnection;
|
|
|
|
if (!connection) {
|
|
return;
|
|
}
|
|
|
|
const updateNetworkInfo = () => {
|
|
setMetrics((prev) => ({
|
|
...prev,
|
|
network: {
|
|
downlink: connection.downlink || 0,
|
|
latency: connection.rtt || 0,
|
|
type: connection.type || 'unknown',
|
|
},
|
|
}));
|
|
};
|
|
|
|
connection.addEventListener('change', updateNetworkInfo);
|
|
|
|
// eslint-disable-next-line consistent-return
|
|
return () => connection.removeEventListener('change', updateNetworkInfo);
|
|
}, []);
|
|
|
|
// Add this effect for live process monitoring
|
|
useEffect(() => {
|
|
// Clean up previous observer if exists
|
|
performanceObserver?.disconnect();
|
|
|
|
// Create new performance observer for network requests
|
|
const observer = new PerformanceObserver((list) => {
|
|
const entries = list.getEntries();
|
|
const newNetworkEntries = entries
|
|
.filter((entry: PerformanceEntry): boolean => {
|
|
const resourceTiming = entry as PerformanceResourceTiming;
|
|
return entry.entryType === 'resource' && resourceTiming.initiatorType === 'fetch';
|
|
})
|
|
.slice(-5);
|
|
|
|
if (newNetworkEntries.length > 0) {
|
|
setProcesses((currentProcesses) => {
|
|
// Remove old network processes
|
|
const filteredProcesses = currentProcesses.filter((p) => !p.name.startsWith('Network Request:'));
|
|
|
|
// Add new network processes
|
|
const newProcesses = newNetworkEntries.map((entry) => ({
|
|
name: `Network Request: ${new URL((entry as PerformanceResourceTiming).name).pathname}`,
|
|
type: 'Network' as const,
|
|
cpuUsage: entry.duration > 0 ? entry.duration / 100 : 0,
|
|
memoryUsage: (entry as PerformanceResourceTiming).encodedBodySize / (1024 * 1024),
|
|
status: (entry.duration === 0 ? 'active' : 'idle') as ProcessStatus,
|
|
lastUpdate: new Date().toISOString(),
|
|
impact: (entry.duration > 1000 ? 'high' : entry.duration > 500 ? 'medium' : 'low') as ProcessImpact,
|
|
})) as ProcessInfo[];
|
|
|
|
return [...filteredProcesses, ...newProcesses];
|
|
});
|
|
}
|
|
});
|
|
|
|
// Start observing resource timing entries
|
|
observer.observe({ entryTypes: ['resource'] });
|
|
setPerformanceObserver(observer);
|
|
|
|
// Set up animation observer
|
|
const animationObserver = new MutationObserver(() => {
|
|
const animations = document.getAnimations();
|
|
|
|
setProcesses((currentProcesses) => {
|
|
// Remove old animation processes
|
|
const filteredProcesses = currentProcesses.filter((p) => !p.name.startsWith('Animation:'));
|
|
|
|
// Add current animations
|
|
const animationProcesses = animations.slice(0, 5).map((animation) => ({
|
|
name: `Animation: ${animation.id || 'Unnamed'}`,
|
|
type: 'Animation' as const,
|
|
cpuUsage: animation.playState === 'running' ? 2 : 0,
|
|
memoryUsage: 1,
|
|
status: (animation.playState === 'running' ? 'active' : 'idle') as ProcessStatus,
|
|
lastUpdate: new Date().toISOString(),
|
|
impact: 'low' as ProcessImpact,
|
|
})) as ProcessInfo[];
|
|
|
|
return [...filteredProcesses, ...animationProcesses];
|
|
});
|
|
});
|
|
|
|
// Observe DOM changes that might trigger animations
|
|
animationObserver.observe(document.body, {
|
|
childList: true,
|
|
subtree: true,
|
|
attributes: true,
|
|
});
|
|
|
|
// Set up service worker observer
|
|
const checkServiceWorkers = async () => {
|
|
const serviceWorkers = (await navigator.serviceWorker?.getRegistrations()) || [];
|
|
|
|
setProcesses((currentProcesses) => {
|
|
// Remove old service worker processes
|
|
const filteredProcesses = currentProcesses.filter((p) => !p.name.startsWith('Service Worker:'));
|
|
|
|
// Add current service workers
|
|
const swProcesses = serviceWorkers.map((sw) => ({
|
|
name: `Service Worker: ${sw.scope}`,
|
|
type: 'Background' as const,
|
|
cpuUsage: sw.active ? 1 : 0,
|
|
memoryUsage: 5,
|
|
status: (sw.active ? 'active' : 'idle') as ProcessStatus,
|
|
lastUpdate: new Date().toISOString(),
|
|
impact: 'low' as ProcessImpact,
|
|
})) as ProcessInfo[];
|
|
|
|
return [...filteredProcesses, ...swProcesses];
|
|
});
|
|
};
|
|
|
|
// Check service workers periodically
|
|
const swInterval = setInterval(checkServiceWorkers, 5000);
|
|
|
|
// Clean up
|
|
return () => {
|
|
performanceObserver?.disconnect();
|
|
animationObserver.disconnect();
|
|
clearInterval(swInterval);
|
|
};
|
|
}, []);
|
|
|
|
// Update the updateProcesses function
|
|
const updateProcesses = async () => {
|
|
try {
|
|
setLoading((prev) => ({ ...prev, processes: true }));
|
|
|
|
// Get initial process information
|
|
const processes: ProcessInfo[] = [];
|
|
|
|
// Add initial network processes
|
|
const networkEntries = performance
|
|
.getEntriesByType('resource')
|
|
.filter((entry: PerformanceEntry): boolean => {
|
|
const resourceTiming = entry as PerformanceResourceTiming;
|
|
return entry.entryType === 'resource' && resourceTiming.initiatorType === 'fetch';
|
|
})
|
|
.slice(-5);
|
|
|
|
networkEntries.forEach((entry) => {
|
|
processes.push({
|
|
name: `Network Request: ${new URL((entry as PerformanceResourceTiming).name).pathname}`,
|
|
type: 'Network',
|
|
cpuUsage: entry.duration > 0 ? entry.duration / 100 : 0,
|
|
memoryUsage: (entry as PerformanceResourceTiming).encodedBodySize / (1024 * 1024),
|
|
status: (entry.duration === 0 ? 'active' : 'idle') as ProcessStatus,
|
|
lastUpdate: new Date().toISOString(),
|
|
impact: (entry.duration > 1000 ? 'high' : entry.duration > 500 ? 'medium' : 'low') as ProcessImpact,
|
|
});
|
|
});
|
|
|
|
// Add initial animations
|
|
document
|
|
.getAnimations()
|
|
.slice(0, 5)
|
|
.forEach((animation) => {
|
|
processes.push({
|
|
name: `Animation: ${animation.id || 'Unnamed'}`,
|
|
type: 'Animation',
|
|
cpuUsage: animation.playState === 'running' ? 2 : 0,
|
|
memoryUsage: 1,
|
|
status: (animation.playState === 'running' ? 'active' : 'idle') as ProcessStatus,
|
|
lastUpdate: new Date().toISOString(),
|
|
impact: 'low' as ProcessImpact,
|
|
});
|
|
});
|
|
|
|
// Add initial service workers
|
|
const serviceWorkers = (await navigator.serviceWorker?.getRegistrations()) || [];
|
|
serviceWorkers.forEach((sw) => {
|
|
processes.push({
|
|
name: `Service Worker: ${sw.scope}`,
|
|
type: 'Background',
|
|
cpuUsage: sw.active ? 1 : 0,
|
|
memoryUsage: 5,
|
|
status: (sw.active ? 'active' : 'idle') as ProcessStatus,
|
|
lastUpdate: new Date().toISOString(),
|
|
impact: 'low' as ProcessImpact,
|
|
});
|
|
});
|
|
|
|
setProcesses(processes);
|
|
} catch (error) {
|
|
console.error('Failed to update process list:', error);
|
|
} finally {
|
|
setLoading((prev) => ({ ...prev, processes: false }));
|
|
}
|
|
};
|
|
|
|
// Initial update effect
|
|
useEffect((): (() => void) => {
|
|
// Initial update
|
|
updateMetrics();
|
|
updateProcesses();
|
|
|
|
// Set up intervals for live updates
|
|
const metricsInterval = setInterval(
|
|
updateMetrics,
|
|
energySaverMode ? UPDATE_INTERVALS.energySaver.metrics : UPDATE_INTERVALS.normal.metrics,
|
|
);
|
|
const processesInterval = setInterval(
|
|
updateProcesses,
|
|
energySaverMode ? UPDATE_INTERVALS.energySaver.processes : UPDATE_INTERVALS.normal.processes,
|
|
);
|
|
|
|
// Cleanup on unmount
|
|
return () => {
|
|
clearInterval(metricsInterval);
|
|
clearInterval(processesInterval);
|
|
};
|
|
}, [energySaverMode]); // Re-create intervals when energy saver mode changes
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* System Overview */}
|
|
<div className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-lg font-medium text-bolt-elements-textPrimary">System Overview</h2>
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
id="autoEnergySaver"
|
|
checked={autoEnergySaver}
|
|
onChange={(e) => handleAutoEnergySaverChange(e.target.checked)}
|
|
className="form-checkbox h-4 w-4 text-purple-600 rounded border-gray-300 dark:border-gray-700"
|
|
/>
|
|
<label htmlFor="autoEnergySaver" className="text-sm text-bolt-elements-textSecondary">
|
|
Auto Energy Saver
|
|
</label>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
id="energySaver"
|
|
checked={energySaverMode}
|
|
onChange={(e) => !autoEnergySaver && handleEnergySaverChange(e.target.checked)}
|
|
disabled={autoEnergySaver}
|
|
className="form-checkbox h-4 w-4 text-purple-600 rounded border-gray-300 dark:border-gray-700 disabled:opacity-50"
|
|
/>
|
|
<label
|
|
htmlFor="energySaver"
|
|
className={classNames('text-sm text-bolt-elements-textSecondary', { 'opacity-50': autoEnergySaver })}
|
|
>
|
|
Energy Saver
|
|
{energySaverMode && <span className="ml-2 text-xs text-bolt-elements-textSecondary">Active</span>}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#141414]">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="i-ph:cpu text-gray-500 dark:text-gray-400 w-4 h-4" />
|
|
<span className="text-sm text-bolt-elements-textSecondary">CPU Usage</span>
|
|
</div>
|
|
<p className={classNames('text-lg font-medium', getUsageColor(metrics.cpu))}>{Math.round(metrics.cpu)}%</p>
|
|
{renderUsageGraph(metricsHistory.cpu, 'CPU', '#9333ea')}
|
|
</div>
|
|
|
|
<div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#141414]">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="i-ph:database text-gray-500 dark:text-gray-400 w-4 h-4" />
|
|
<span className="text-sm text-bolt-elements-textSecondary">Memory Usage</span>
|
|
</div>
|
|
<p className={classNames('text-lg font-medium', getUsageColor(metrics.memory.percentage))}>
|
|
{metrics.memory.used}MB / {metrics.memory.total}MB
|
|
</p>
|
|
{renderUsageGraph(metricsHistory.memory, 'Memory', '#2563eb')}
|
|
</div>
|
|
|
|
<div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#141414]">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="i-ph:battery text-gray-500 dark:text-gray-400 w-4 h-4" />
|
|
<span className="text-sm text-bolt-elements-textSecondary">Battery</span>
|
|
</div>
|
|
{metrics.battery ? (
|
|
<div>
|
|
<p className="text-lg font-medium text-bolt-elements-textPrimary">
|
|
{Math.round(metrics.battery.level)}%
|
|
{metrics.battery.charging && (
|
|
<span className="ml-2 text-bolt-elements-textSecondary">
|
|
<div className="i-ph:lightning-fill w-4 h-4 inline-block" />
|
|
</span>
|
|
)}
|
|
</p>
|
|
{metrics.battery.timeRemaining && metrics.battery.timeRemaining !== Infinity && (
|
|
<p className="text-xs text-bolt-elements-textSecondary mt-1">
|
|
{metrics.battery.charging ? 'Full in: ' : 'Remaining: '}
|
|
{Math.round(metrics.battery.timeRemaining / 60)}m
|
|
</p>
|
|
)}
|
|
{renderUsageGraph(metricsHistory.battery, 'Battery', '#22c55e')}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-bolt-elements-textSecondary">Not available</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#141414]">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="i-ph:wifi text-gray-500 dark:text-gray-400 w-4 h-4" />
|
|
<span className="text-sm text-bolt-elements-textSecondary">Network</span>
|
|
</div>
|
|
<p className="text-lg font-medium text-bolt-elements-textPrimary">{metrics.network.downlink} Mbps</p>
|
|
<p className="text-xs text-bolt-elements-textSecondary mt-1">Latency: {metrics.network.latency}ms</p>
|
|
{renderUsageGraph(metricsHistory.network, 'Network', '#f59e0b')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Process List */}
|
|
<div className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="i-ph:list-bullets text-purple-500 w-5 h-5" />
|
|
<h3 className="text-base font-medium text-bolt-elements-textPrimary">Active Processes</h3>
|
|
</div>
|
|
<button
|
|
onClick={updateProcesses}
|
|
className={classNames(
|
|
'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
|
|
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
|
|
'hover:bg-purple-500/10 hover:text-purple-500',
|
|
'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
|
|
'text-bolt-elements-textPrimary',
|
|
'transition-colors duration-200',
|
|
{ 'opacity-50 cursor-not-allowed': loading.processes },
|
|
)}
|
|
disabled={loading.processes}
|
|
>
|
|
<div className={classNames('i-ph:arrows-clockwise w-4 h-4', loading.processes ? 'animate-spin' : '')} />
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-[#E5E5E5] dark:border-[#1A1A1A]">
|
|
<th className="py-2 px-4 text-left text-sm font-medium text-bolt-elements-textSecondary">Process</th>
|
|
<th className="py-2 px-4 text-left text-sm font-medium text-bolt-elements-textSecondary">Type</th>
|
|
<th className="py-2 px-4 text-left text-sm font-medium text-bolt-elements-textSecondary">CPU</th>
|
|
<th className="py-2 px-4 text-left text-sm font-medium text-bolt-elements-textSecondary">Memory</th>
|
|
<th className="py-2 px-4 text-left text-sm font-medium text-bolt-elements-textSecondary">Status</th>
|
|
<th className="py-2 px-4 text-left text-sm font-medium text-bolt-elements-textSecondary">Impact</th>
|
|
<th className="py-2 px-4 text-left text-sm font-medium text-bolt-elements-textSecondary">
|
|
Last Update
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{processes.map((process, index) => (
|
|
<tr
|
|
key={index}
|
|
data-process={process.name}
|
|
className="border-b border-[#E5E5E5] dark:border-[#1A1A1A] last:border-0"
|
|
>
|
|
<td className="py-3 px-4">
|
|
<div className="flex items-center gap-2">
|
|
<div className="i-ph:cube text-gray-500 dark:text-gray-400 w-4 h-4" />
|
|
<span className="text-sm text-bolt-elements-textPrimary">{process.name}</span>
|
|
</div>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<span className="text-sm text-bolt-elements-textSecondary">{process.type}</span>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<span className={classNames('text-sm', getUsageColor(process.cpuUsage))}>
|
|
{process.cpuUsage.toFixed(1)}%
|
|
</span>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<span className={classNames('text-sm', getUsageColor(process.memoryUsage))}>
|
|
{process.memoryUsage.toFixed(1)} MB
|
|
</span>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<span className={classNames('text-sm text-bolt-elements-textSecondary capitalize')}>
|
|
{process.status}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<span className={classNames('text-sm', getImpactColor(process.impact))}>{process.impact}</span>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<span className="text-sm text-bolt-elements-textSecondary">
|
|
{new Date(process.lastUpdate).toLocaleTimeString()}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Energy Savings */}
|
|
<div className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
|
|
<h3 className="text-base font-medium text-bolt-elements-textPrimary">Energy Savings</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
|
|
<div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#141414]">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="i-ph:clock text-gray-500 dark:text-gray-400 w-4 h-4" />
|
|
<span className="text-sm text-bolt-elements-textSecondary">Time in Saver Mode</span>
|
|
</div>
|
|
<p className="text-lg font-medium text-bolt-elements-textPrimary">
|
|
{Math.floor(energySavings.timeInSaverMode / 60)}m {Math.floor(energySavings.timeInSaverMode % 60)}s
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#141414]">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="i-ph:chart-line text-gray-500 dark:text-gray-400 w-4 h-4" />
|
|
<span className="text-sm text-bolt-elements-textSecondary">Updates Reduced</span>
|
|
</div>
|
|
<p className="text-lg font-medium text-bolt-elements-textPrimary">{energySavings.updatesReduced}</p>
|
|
</div>
|
|
|
|
<div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#141414]">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="i-ph:battery text-gray-500 dark:text-gray-400 w-4 h-4" />
|
|
<span className="text-sm text-bolt-elements-textSecondary">Estimated Energy Saved</span>
|
|
</div>
|
|
<p className="text-lg font-medium text-bolt-elements-textPrimary">
|
|
{energySavings.estimatedEnergySaved.toFixed(2)} mWh
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|