feat: add live process monitor window for running Fiddles

[itshakemd]

#2012

Summary
Currently, users lack visibility into the underlying process tree and resource consumption of their Fiddles while they are running. There is no easy way to monitor the CPU or Memory impact of the Main process, Renderer processes, or GPU helpers directly from the editor.

This PR introduces a new Process Monitor feature. When enabled via the Execution Settings, it automatically opens a dedicated, frameless utility window during a Fiddle run. This window displays a live, polling feed of all spawned processes and their resource usage, and cleanly closes itself when the Fiddle terminates.

Changes
src/renderer/components/settings-execution.tsx

Add a toggle checkbox for users to enable or disable the Process Monitor.
src/main/fiddle-core.ts

Spawn the new process monitor window when a Fiddle starts if the setting is enabled.
Implement a non-blocking setInterval loop to poll process metrics.
Resolve the descendant process tree using pidtree.
Calculate CPU and Memory usage for all related PIDs using pidusage.
Broadcast the PROCESS_METRICS_UPDATE IPC event to the dedicated monitor window.
Clean up the interval and close the monitor window when the Fiddle terminates.
forge.config.ts

Add process_monitor_window as a new Webpack entry point to keep the UI decoupled from the main editor layout.
src/main/process-monitor-window.ts

Manage the creation and lifecycle of the new frameless, draggable utility window.
Set skipTaskbar and alwaysOnTop to ensure it acts as a lightweight overlay.
src/renderer/process-monitor-entry.tsx

Bootstrap the React root for the new window.
Request the current Fiddle theme on startup and inject the CSS variables.
Listen for theme-loaded events to dynamically update styles if the user changes the theme.
src/renderer/components/process-monitor.tsx

Build the React UI to display the live metrics table.
Handle state locally based on incoming IPC data payloads.
src/less/components/process-monitor.less

Add styles for the frameless window layout and the data table.
Consume Fiddle's existing CSS variables (@background-2, @text-color-1, etc.) to perfectly match the active design language.
Implement a draggable header region (-webkit-app-region: drag).

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​types/​pidusage@​2.0.5
	pidusage@​4.0.1
	pidtree@​1.0.0

View full report