System Performance Monitor

📊 Real-time system performance monitoring with animated CPU, memory, and resource usage graphs in VS Code

Demo

📊 Monitor Your System Performance Instantly

⚡ Essential for developers who want to monitor system resources without leaving VS Code ⚡

This extension is your system performance dashboard right inside VS Code. It provides real-time monitoring of CPU, memory, and system resources with beautiful animated graphs, ensuring you stay aware of your system's health while coding.

📑 Table of Contents

✨ Why You'll Love This Extension
- 📊 Real-time System Monitoring
- ⚡ Zero Configuration
- 🔧 Developer Friendly
- 🎨 Beautiful Visual Interface
🚀 Quick Start
- 📦 Installation
- 🎯 How to Use
📋 Features & Metrics
- 🔍 Monitored Resources
⚙️ Configuration
🛠️ Development & Contributing
- 🚀 Local Development Setup
- 🤝 How to Contribute
💝 Support
📄 License

✨ Why You'll Love This Extension

📊 Real-time System Monitoring

Keep track of your system's health without leaving VS Code:

CPU Usage - Real-time CPU utilization monitoring
Memory Usage - System and VS Code memory consumption
VS Code Performance - Specific VS Code CPU and memory usage
Network I/O - Network activity monitoring

⚡ Zero Configuration

Just install and go! Works seamlessly with:

Any Operating System - Windows, macOS, and Linux support
All VS Code Workspaces - Automatic activation on startup
Lightweight Monitoring - Minimal performance impact
Customizable Updates - Adjustable refresh intervals

🔧 Developer Friendly

Status Bar Integration - Quick glance at system metrics
Visual Graphs - Beautiful animated charts in the sidebar
Configurable Display - Show/hide specific metrics
Performance Optimized - Efficient resource usage

🎨 Beautiful Visual Interface

Designed for modern development workflows:

📊 Animated Charts - Real-time visual feedback
🎯 Clean Design - Integrates seamlessly with VS Code
📱 Responsive Layout - Works in any sidebar size
🎨 Color-coded Metrics - Easy to read at a glance

🚀 Quick Start

📦 Installation (Click to expand)

Method 1: VS Code Marketplace (Recommended)

Open VS Code
Press Ctrl+Shift+X (or Cmd+Shift+X on macOS)
Search for "System Performance"
Click Install ✨

Method 2: Command Line

code --install-extension bubablue00.system-performance

Method 3: VSIX File

Download the latest .vsix file from releases and install manually.

🎯 How to Use

Install the extension from the VS Code Marketplace
Open any workspace in VS Code
View system metrics in the status bar at the bottom
Open the System Resources panel in the Explorer sidebar for detailed graphs
Configure settings via VS Code preferences to customize what metrics to show

Pro Tip: Click on any status bar item to quickly open the detailed system resources panel!

📋 Features & Metrics

Metric	Status Bar	Graph View	Configurable
System CPU	✅	✅	✅
System Memory	✅	✅	✅
VS Code CPU	✅	✅	✅
VS Code Memory	✅	✅	✅
Network I/O	✅	✅	✅
Disk I/O	✅	➖	✅
System Uptime	✅	➖	✅

📊 Monitored Resources

System CPU Usage - Overall system CPU utilization percentage
System Memory - Total system memory usage with available/used breakdown
VS Code CPU - CPU usage specifically by the VS Code process
VS Code Memory - Memory consumption by VS Code and its extensions
Network Activity - Upload/download network I/O statistics

⚙️ Available Commands

System Performance: Show System Graph - Open the system resources panel
System Performance: Toggle System Graph - Toggle the panel visibility
System Performance: Refresh - Manually refresh all metrics
System Performance: Toggle Monitoring - Enable/disable real-time monitoring

⚙️ Configuration

Customize the extension behavior through VS Code settings:

{
  "systemGraph.showCpu": true,                    // Show CPU graph bar in the sidebar panel
  "systemGraph.showMemory": true,                 // Show memory graph bar in the sidebar panel
  "systemGraph.showVscodeCpu": true,              // Show VS Code CPU graph bar in the sidebar panel
  "systemGraph.showVscodeMemory": true,           // Show VS Code memory graph bar in the sidebar panel
  "systemGraph.showNetwork": true,                // Show network I/O graph bar in the sidebar panel
  "systemGraph.statusBarEnabled": true,           // Enable/disable all status bar monitoring
  "systemGraph.updateInterval": 2000,             // Update interval in milliseconds (500-10000)

  "systemGraph.statusBar.showCpu": true,          // Show system CPU in the status bar
  "systemGraph.statusBar.showMemory": true,       // Show system memory in the status bar
  "systemGraph.statusBar.showVscodeCpu": true,    // Show VS Code CPU in the status bar
  "systemGraph.statusBar.showVscodeMemory": true, // Show VS Code memory in the status bar
  "systemGraph.statusBar.showNetwork": true,      // Show network I/O in the status bar
  "systemGraph.statusBar.showDisk": true,         // Show disk I/O in the status bar
  "systemGraph.statusBar.showUptime": true        // Show system uptime in the status bar
}

🎛️ Configuration Options

Sidebar Panel Metrics - Toggle which graph bars appear in the System Resources panel (systemGraph.showCpu, etc.)
Status Bar Items - Toggle individual status bar items via systemGraph.statusBar.* settings
Status Bar Display - Enable/disable all status bar monitoring at once (systemGraph.statusBarEnabled)
Update Frequency - Customize refresh interval (0.5-10 seconds)

🛠️ Development & Contributing

🚀 Local Development Setup

Prerequisites

Node.js 16+, npm and VS Code 1.60+

Getting Started

# Clone the repository
git clone https://github.com/bubablue/system-performance-extension.git
cd system-performance-extension

# Install dependencies
npm install

# Open in VS Code
code .

# Start development
npm run watch

Running Tests

# Run all tests
npm test

Debugging

Press F5 to launch the Extension Development Host
Open a test project in the new window
Test the extension functionality

Building for Release

npm run package

🤝 How to Contribute

We welcome contributions! Here's how you can help:

🐛 Report Bugs - Found an issue? Open an issue
💡 Suggest Features - Have an idea? We'd love to hear it!
📝 Improve Documentation - Help make the docs even better
🔧 Submit Code - Fix bugs or add features with a PR

Contribution Guidelines

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📊 Core Features

� System CPU monitoring - Real-time tracking
🧠 Memory usage tracking - System & VS Code
� Animated graphs - Beautiful visualizations
� Status bar integration - Quick metrics view

🔮 Future Enhancements

🔥 Disk I/O monitoring - Coming soon
🌡️ Temperature sensors - Under consideration
📱 Mobile development metrics - Planned
🚀 Performance alerts - In development

💡 Have an idea? Suggest a feature • 🐛 Found a bug? Report it

💝 Support

Love this extension? Help us grow!

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Made with ❤️ by developers, for developers

_{Monitor your system resources without leaving your favorite editor}