Real-time process monitoring with CPU & memory tracking.
- Real-time Monitoring - Track CPU and memory usage of any running process
- Session Recording - Record monitoring sessions and review them later
- Interactive Timeline - Visualize resource usage over time with D3.js charts
- Session History - Browse and manage past monitoring sessions
- Live Stats - View current and peak CPU/memory with trend indicators
Frontend:
- React 19 with TypeScript
- Vite for fast development
- Tailwind CSS for styling
- D3.js for data visualization
- Radix UI components
Backend:
- Node.js with Express
- WebSocket for real-time updates
- SQLite for session storage
- Node.js 18+
- npm or yarn
- Clone the repository:
git clone https://github.com/shivsarthak/vigil.git
cd vigil- Install dependencies:
npm install- Start the development server:
npm run devThe client will be available at http://localhost:5173 and the server at http://localhost:3001
- Select a process from the list
- Click "Start Recording" to begin monitoring
- Watch real-time CPU and memory usage in the timeline
- Stop recording to save the session
- Review past sessions from the history panel
vigil/
├── packages/
│ ├── client/ # React frontend (@vigil/client)
│ │ └── src/
│ │ ├── components/ # UI components
│ │ ├── hooks/ # Custom React hooks
│ │ ├── context/ # React context providers
│ │ ├── pages/ # Page components
│ │ ├── lib/ # Utilities
│ │ └── types/ # TypeScript types
│ ├── server/ # Express backend (@vigil/server)
│ │ └── src/
│ │ ├── server.ts # Main server & WebSocket
│ │ ├── monitor.ts # Process monitoring
│ │ ├── processScanner.ts # Process discovery
│ │ └── sessionManager.ts # Session storage
│ └── data/ # SQLite database
└── package.json # Root package with npm workspaces
MIT