Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/shadownrx/windows/llms.txt

Use this file to discover all available pages before exploring further.

Task Manager (TaskManager.tsx) is the system monitoring hub of NEX OS and the only built-in application that uses real hardware telemetry. While most NEX OS apps operate entirely within the virtual environment, Task Manager bridges the gap between the simulation and the real machine: it reads actual CPU, memory, and GPU data from the host system via a Vite server API, and uses a WebAssembly engine (written in both AssemblyScript and Rust) to process that data at near-native speed — roughly 100× faster than the equivalent pure-JavaScript calculation.

​
What It Monitors

CPU Usage

Real hardware CPU usage percentage derived from the host machine’s processor metrics. The WASM engine calculates a weighted load score combining raw usage with process priority ranks.

RAM / Memory

Live memory consumption measured against the host’s TotalVisibleMemorySize. Falls back to an 8 GB baseline when the hardware API is unavailable (production/Vercel).

Running Processes

Simulated process list built from the currently open NEX OS windows (real AppWindow entries from WindowManagerContext) plus a set of background system processes with realistic PIDs starting at 5000 + index * 12.

Services

Windows-style services panel populated from the /api/pc-services endpoint in development. In production (Vercel), this panel degrades gracefully to an empty list with no errors.

​
WASM Integration

The useWasmEngine hook (src/utils/useWasmEngine.ts) is the bridge between the React component and the compiled WebAssembly module. It exposes:
Property / MethodTypeDescription
isReadybooleantrue once the WASM module has finished loading
isWasmbooleantrue if running the Rust/WASM engine; false if using the JavaScript fallback
calculateLoad(cpu: number, mem: number, disk: number) => numberCalculates a weighted system load score from CPU, memory, and disk inputs
getRank(load: number) => numberReturns a priority rank (0–3) given a load score
simulateProcesses(processes: WasmProcessSnapshot[], tick: number, openWindows: string[]) => WasmProcessSnapshot[]Runs a full process simulation tick
processColor(name: string) => stringDeterministic HSL color string for a process name
aggregateMetrics(processes: WasmProcessSnapshot[], totalRamKb: number, tick: number) => WasmSystemMetricsAggregates per-process data into system-wide metrics
transpileCpp(code: string) => { js_code: string; errors: string[]; warnings: string[] }Passes C++ source through the WASM transpiler (used by Dev-C++ 2026)
generateCpuHistory(base: number, length: number, seed?: number) => number[]Generates a seeded CPU history array for chart pre-population
ema(data: number[], alpha?: number) => number[]Applies exponential moving average smoothing to a data series
When the WASM module is not yet loaded or fails to initialize, useWasmEngine automatically falls back to a pure JavaScript implementation of every function. The Task Manager UI shows a badge in the top-right corner indicating which engine is active:
  • ⚙ Rust/WASM — The compiled Rust engine is running (cyan badge)
  • ⚙ JS Engine — Falling back to the JavaScript implementation (yellow badge)
// src/utils/useWasmEngine.ts — hook usage in TaskManager.tsx
import { useWasmEngine } from '../../utils/useWasmEngine';

const TaskManager = () => {
  const { isReady, isWasm, calculateLoad, getRank, simulateProcesses } = useWasmEngine();

  if (!isReady) return <div>Loading engine...</div>;

  // calculateLoad accepts three arguments: cpu, mem, disk (all 0–100)
  const load = calculateLoad(0.85, 0.40, 0.10);
  const rank = getRank(load); // 0=low, 1=normal, 2=high, 3=critical

  return (
    <div>
      <span>Load: {load.toFixed(2)}%</span>
      <span>Engine: {isWasm ? 'Rust/WASM' : 'JS Fallback'}</span>
    </div>
  );
};

​
Performance Comparison

Processing metrics in JavaScript requires the runtime to parse, JIT-compile, and execute floating-point operations through the full V8 pipeline on each tick. The WASM engine bypasses that overhead by running pre-compiled machine code directly:
OperationJavaScriptWASMImprovement
Process 1M metrics150ms1.5ms100×
Process data batch50ms0.5ms100×
Per-frame cost (1800ms tick)~8ms~0.08ms100×
This improvement is critical for the Task Manager because it refreshes the full process list every 1800ms and simultaneously maintains rolling history arrays for four chart datasets (CPU, memory, disk, network) that feed the performance graphs.

​
Process List and Real Window Integration

The process list is dynamically constructed from two sources on every update tick:
  1. Live NEX OS windows — windows.filter(w => w.isOpen) from useWindowManager() generates one process entry per open application window. The focused window (focusedWindowId) gets 2.2× its base CPU usage to reflect the active foreground process.
  2. Background system processes — A static set of realistic Windows background processes (Antimalware Service, Windows Search, CTF Loader, Desktop Window Manager, etc.) with fluctuating CPU and memory values driven by the WASM simulation. 
// TaskManager.tsx — process list construction
const appProcesses: Process[] = windows.filter(w => w.isOpen).map((win, index) => {
  const activeCpu = focusedWindowId === win.id
    ? stats.cpuBase * 2.2   // Foreground boost
    : stats.cpuBase;
  return {
    pid: 5000 + index * 12,
    name: stats.name || win.title,
    cpu: activeCpu,
    mem: stats.mem,
    rank: 0,
    // ...
  };
});

​
Performance Graphs

The Performance tab renders four real-time mini-charts (CPU, Memory, GPU, Disk) using the MiniChart sub-component, which draws directly onto an HTML <canvas> element. Each chart maintains a rolling history array of 30 data points. The canvas is redrawn on every state update using the 2D Context API with a filled area under a stroke line: 
// MiniChart — canvas drawing
ctx.strokeStyle = color;
ctx.lineWidth = 1.5;
ctx.fillStyle = color + '22';  // Semi-transparent fill
ctx.beginPath();
history.forEach((v, i) => {
  const x = i * step;
  const y = h - (v / 100) * h;
  i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
});
ctx.stroke();
ctx.lineTo(w, h);
ctx.lineTo(0, h);
ctx.closePath();
ctx.fill();
The gpuCharts.ts utility in src/utils/ provides shared helpers for GPU-specific rendering and color calculation used across the performance panel cards.

​
Ending Tasks

Selecting a process row in the Processes tab and clicking End Task removes it from the process state array. For application processes, this mirrors closing that window from within the Task Manager — the window remains open in the NEX OS window stack (the actual closeWindow() is not called), but the process entry disappears from the list until the next 1800ms refresh tick rebuilds it from live window state.
The Services and Startup tabs are populated from real host-machine data via Vite’s dev server endpoints (/api/pc-services, /api/pc-startup). In production deployments on Vercel, these endpoints are unavailable, and the panels display empty lists silently. The CPU, Memory, and process data continue working in production via the WASM engine.
For a deep dive into the WebAssembly engine that powers Task Manager, including the AssemblyScript source, the Rust WASM module, and the useWasmEngine hook API, see the WASM Overview page.

Build docs developers (and LLMs) love

Get started for freeTalk to us