sammykumar-ComfyUI-SwissArmyKnife/docs/web-js/RESOURCE_MONITOR_TESTING.md

Resource Monitor Testing Guide

Phase 2 Frontend Implementation - Testing Plan

Prerequisites

1. Backend monitoring service is running (auto-starts with ComfyUI).
2. Python dependencies installed: psutil, pynvml, py-cpuinfo, torch (VRAM fallback).
3. ComfyUI server restarted to load backend changes.
4. Browser cache cleared (hard refresh: Ctrl+Shift+R or Cmd+Shift+R).
5. SwissArmyKnife.debug_mode enabled when you need verbose console logs.

Test Checklist

1. Visual Placement & Layout

• Floating glass bar renders ~50px below the main toolbar and remains centered on scroll.
• Wrapper has rounded corners, blur backdrop, and sits above other UI elements (z-index: 9999).
• Monitor tiles appear to the left, Restart button appears on the right with a divider.
• Hover and active states animate smoothly on both the monitors and the restart button.

2. Backend Connection Test

Open browser console (F12) and check:

• No JavaScript errors on page load.
• Debug log shows "Resource Monitor extension setup started" and "inserted as floating bar" when debug mode is on.
• Initial fetch /swissarmyknife/monitor/status succeeds; failures must surface as console errors.
• Listener registered for swissarmyknife.monitor events (watch for Monitor update received logs when data arrives).

3. Monitor Display Test

Expected tiles are driven entirely by backend capabilities:

If psutil is available:

• CPU tile shows percentage (0-100%).
• RAM tile shows GB used with a decimal (e.g., 12.4 GB).
• Temp tile appears only if CPU temperature is reported.

If torch or pynvml is available:

• VRAM {index} (Model) tile appears for each detected GPU.
• GPU {index} (Model) utilization tile appears when pynvml exposes utilization stats.
• TEMP {index} (Model) appears when GPU temperature is reported.

For multi-GPU systems:

• Additional sets render for GPU 1, GPU 2, etc. Labels include compact model identifiers (e.g., 3090Ti).

4. Real-Time Update Test

• Tiles update roughly every two seconds without manual refresh.
• Debug logs show Monitor update received payloads at the same cadence in debug mode.
• Induce load (e.g., start a workflow) and confirm the numbers change accordingly.

5. Gradient Fill & Threshold Test

Trigger different load levels and verify the gradient color + fill percentage logic:

Usage Level	Expected Color (Linear Gradient)
0-49%	Green rgba(34, 197, 94, 0.25)
50-69%	Yellow rgba(234, 179, 8, 0.25)
70-89%	Orange rgba(249, 115, 22, 0.25)
90%+	Red rgba(239, 68, 68, 0.25)

• Fill width matches the numeric percentage (use dev tools to inspect the inline background style if needed).
• When no percentage is available, tiles revert to the default translucent background.

6. Restart Button Flow

• Default state shows Restart with ComfyUI button styling.
• On click, button disables + label changes to Restarting... and a toast appears (severity: warn, detail "Waiting for ComfyUI to become available...").
• /swissarmyknife/restart POST fires (confirm via network tab) and errors are ignored silently if the server drops.
• Button remains disabled while /system_stats polling runs; debug logs show health check attempts every 5 seconds.
• When the server responds OK, a success toast appears and the page hard-reloads.
• If the timeout (60 attempts) expires, a warning toast appears and the button re-enables with the original label.
• Any caught error shows an error toast with the message body.

7. API Endpoint Smoke Test

# Get current status
curl http://localhost:8188/swissarmyknife/monitor/status | jq

# Get GPU 0 info
curl http://localhost:8188/swissarmyknife/monitor/gpu/0 | jq

# Clear VRAM (all devices)
curl -X POST http://localhost:8188/swissarmyknife/monitor/clear-vram | jq

# Update monitoring interval to 5 seconds
curl -X PATCH http://localhost:8188/swissarmyknife/monitor/settings \
  -H "Content-Type: application/json" \
  -d '{"interval": 5}' | jq

Expected responses:

• /status returns success: true plus hardware + gpu payloads used by the UI.
• /gpu/0 returns a detailed entry for the requested device.
• /clear-vram responds with success: true and performs the backend cleanup.
• /settings echoes current_settings.interval with the updated value.

8. Graceful Degradation

Missing Dependency	Expected UI Behavior
psutil	No CPU/RAM/CPU Temp tiles render, restart button still works.
pynvml	GPU utilization + GPU temps are hidden, VRAM tiles render if torch is available.
torch + pynvml	No GPU/VRAM tiles render; only CPU tiles (if psutil exists) plus restart.
Backend offline	Tiles stay blank (--) and console logs errors, but page continues functioning.

9. Browser Compatibility

• Chrome / Chromium.
• Firefox.
• Safari.
• Edge.

Confirm that the floating bar respects viewport width (no clipping on smaller windows) and that the restart toasts display across browsers.

10. Styling Regression Pass

• 16px border radius and blur remain consistent.
• Letter spacing on labels is subtle but readable; values use 14px semi-bold font.
• Restart button uses the same red palette as defined in CSS (#dc3545 hover -> #c82333).
• Divider pseudo-element (::before) appears only on the restart button and aligns vertically.
• Wrapper maintains drop shadow depth without overlapping default ComfyUI dialogs.

Common Issues & Fix Paths

Monitors never appear

1. Check browser console for failed /status calls.
2. Verify backend monitor service is running (server logs).
3. Hit /swissarmyknife/monitor/status manually to ensure JSON is returned.
4. Clear the browser cache and hard refresh.

Tiles show -- indefinitely

1. Confirm backend dependencies (psutil/pynvml/torch) are installed inside the Docker environment.
2. Inspect backend logs for sensor access errors.
3. In debug mode ensure Monitor update received logs are flowing.
4. Validate REST endpoints above return actual numeric values.

Gradient colors never change

1. Inspect element and confirm inline style.background updates as percentages change.
2. Ensure the backend is sending non-null percent fields (inspect REST payload).
3. Force a workload that crosses multiple thresholds (e.g., launch a heavy workflow or GPU benchmark).

Restart button stays disabled

1. Watch the Network tab to ensure /system_stats is eventually reachable.
2. Check Docker/container logs to make sure ComfyUI actually restarted.
3. Verify toast message (should warn about manual refresh) and re-enable behavior.
4. Reload manually, then reproduce with debug logs enabled to capture attempts.

Performance Expectations

• Initial status fetch + DOM build: < 500ms on modern browsers.
• Update cadence: ~2s (matches backend interval, configurable through /settings).
• CPU overhead: < 1% in Chrome DevTools performance captures.
• Memory overhead: < 10 MB total (DOM + JS state).

Wrap-Up / Follow-Up Items

1. Capture screenshots of the floating HUD for docs/web-js/RESOURCE_MONITOR.md (include GPU + CPU heavy scenarios).
2. Document any backend sensor anomalies in docs/infrastructure/debug/ if issues persist.
3. File issues for Phase 3 items (Clear VRAM button, visibility toggles, interval slider) as separate tickets once baseline testing passes.