Mission Center Web

Python 3.10+ psutil Chart.js 4 Vanilla JS No Electron CLS ~0.00

GitHub: stevenvo780/LectorDeUsoAvanzadoPC

---

What it is

Mission Center Web is a system resource monitor inspired by Windows Mission Center / Task Manager, rebuilt entirely as a pure web application. Backend: Python 3.10+ + psutil. Frontend: vanilla JS + Chart.js 4 — no Electron, no npm dependency on the monitored machine.

Open http://127.0.0.1:8080 in any browser and get live CPU cores, memory, GPU, disks, network, sensors, fans, and a process table — all updating in real time.

The original PySide6 desktop app was retired in favour of this web version. All collectors live in mission_center.data and are shared between the web version and any future clients.

---

Feature panels

Panel	What you see
Overview	CPU %, memory, disk, network — each as a card + sliding history chart
Performance	Per-core mini-graphs (32 cores with stable layout); GPU summary (NVML)
Analytics	Multi-series chart for all cores; independent read/write disk series
Processes	Top-N table sorted by CPU, with memory and user columns; 2 s minimum sampling interval
Sensors	Grouped temperatures (lm-sensors), fan RPM, battery and power supply state
System	Hardware, firmware, uptime, full PCIe link table

---

Permission tiers

The app detects capabilities at startup and shows a real-time permission indicator in the UI:

Status	Condition	Notes
Full access	Running as root or with polkit grant	All metrics available — recommended
Good access	Normal user, 80%+ metrics available	Temperatures may be missing
Partial access	Restricted user	Basic CPU/memory/network only
Limited access	No sensors / hardware access	Core metrics still work

Use ./launch-privileged.sh to request elevated permissions automatically via PolicyKit or sudo.

---

Architecture

mission_center/
  core/               config, themes, update utilities
  data/               psutil-based collectors (shared layer)
  models/             dataclass snapshots (typed data contracts)
  web/
    collector.py      background acquisition thread + sliding history store
    server.py         stdlib http.server — REST endpoints + static asset serving
    templates/
      index.html      SPA shell
    static/
      css/styles.css  Fluent dark theme (Windows 11 inspired)
      js/app.js       main orchestrator: Chart.js, panel navigation
      js/api.js       thin client for /api/current + /api/history
      js/utils.js     unit conversion and format helpers

REST API

Endpoint	Returns
GET /	SPA shell (index.html)
GET /static/*	CSS, JS, and asset files
GET /api/current	Full system snapshot as JSON
GET /api/history	Sliding-window history (configurable length)

---

Stability optimizations

The UI was engineered specifically to avoid layout shifts (CLS ≈ 0.00):

I/O device grid stability: A Set() maintains the device list across updates. Devices without current activity show zero values instead of disappearing from the grid, preventing layout reflow.

CPU core cards: Grid uses minmax(200px, 1fr) (up from 160px). Numeric values use font-variant-numeric: tabular-nums + min-width: 60px so changing numbers never resize their container.

Verified with 32-core + 8 I/O device configurations under continuous update cycles.

---

Installation

Quick start

git clone https://github.com/stevenvo780/LectorDeUsoAvanzadoPC.git
cd LectorDeUsoAvanzadoPC
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
./launch-privileged.sh    # requests polkit/sudo for full hardware access
# Alternative: python main.py  (or: python -m mission_center.web.server)
# Open http://127.0.0.1:8080

Optional extras

# NVIDIA GPU metrics (NVML)
pip install pynvml

# USB device enumeration
pip install pyudev

# Hardware sensors (also requires system packages)
sudo apt install lm-sensors smartmontools

Validate install

# Parse-check all modules without starting the server
python -m compileall mission_center

---

Configuration

mission_center/core/config.py exposes security controls for shared-network deployments:

SECURITY = {
    "allowed_origins": ["http://localhost:8080"],   # CORS whitelist
    "auth_enabled": False,                          # HTTP Basic Auth
    "auth_user": "admin",
    "auth_password": "changeme",
    "rate_limit_window": 60,                        # seconds
    "rate_limit_max": 120,                          # requests per IP per window
}

Shared network deployment

Enable HTTP Basic Auth and tighten the CORS whitelist before exposing this server on a LAN. The default config binds to 127.0.0.1 only.

---

Requirements

• Python 3.10+
• psutil (only required dependency)
• Optional for extended metrics: pynvml (GPU), pyudev (USB), lm-sensors, smartmontools, NVML drivers

No Node.js, no build step, no Electron.

---

Stack

Layer	Technology
Backend	Python 3.10+, psutil, stdlib http.server
Frontend	Vanilla JS, Chart.js 4
Styling	Custom CSS, Fluent / Windows 11 dark theme
GPU metrics	pynvml (optional, NVIDIA only)
USB detection	pyudev (optional)
Sensor data	lm-sensors, smartmontools (optional system packages)
Permission grant	PolicyKit (polkit) or sudo via launch-privileged.sh