Function PerformanceOverlay

apps/desktop/src/routes/editor/PerformanceOverlay.tsx:30–271

(_props: PerformanceOverlayProps)

const MAX_TIMESTAMPS = 120;

export function PerformanceOverlay(_props: PerformanceOverlayProps) {
	const { performanceMode, latestFrame, editorState } = useEditorContext();

	let frameTimestamps: number[] = [];
	let lastFrameTime = 0;
	let frameIntervals: number[] = [];
	let droppedFrameCount = 0;
	let totalFrameCount = 0;

	const [stats, setStats] = createSignal<FrameStats>({
		fps: 0,
		avgFrameMs: 0,
		minFrameMs: 0,
		maxFrameMs: 0,
		jitter: 0,
		droppedFrames: 0,
		totalFrames: 0,
	});

	const calculateStats = (): FrameStats => {
		const now = performance.now();

		while (
			frameTimestamps.length > 0 &&
			now - frameTimestamps[0] > STATS_WINDOW_MS
		) {
			frameTimestamps.shift();
		}

		while (frameIntervals.length > MAX_TIMESTAMPS) {
			frameIntervals.shift();
		}

		if (frameTimestamps.length < 2) {
			return {
				fps: 0,
				avgFrameMs: 0,
				minFrameMs: 0,
				maxFrameMs: 0,
				jitter: 0,
				droppedFrames: droppedFrameCount,
				totalFrames: totalFrameCount,
			};
		}

		const windowMs = now - frameTimestamps[0];
		const fps =
			windowMs > 0 ? ((frameTimestamps.length - 1) / windowMs) * 1000 : 0;

		let avgFrameMs = 0;
		let minFrameMs = Number.MAX_VALUE;
		let maxFrameMs = 0;

		if (frameIntervals.length > 0) {
			let sum = 0;
			for (const interval of frameIntervals) {
				sum += interval;
				minFrameMs = Math.min(minFrameMs, interval);