Michel Roegl-Brunner 4faa74b4c5 feat: Server Color Coding System (#103)
* feat: implement server color coding feature

- Add color column to servers table with migration
- Add SERVER_COLOR_CODING_ENABLED environment variable
- Create API route for color coding toggle settings
- Add color field to Server and CreateServerData types
- Update database CRUD operations to handle color field
- Update server API routes to handle color field
- Create colorUtils.ts with contrast calculation function
- Add color coding toggle to GeneralSettingsModal
- Add color picker to ServerForm component (only shown when enabled)
- Apply colors to InstalledScriptsTab (borders and server column)
- Apply colors to ScriptInstallationCard component
- Apply colors to ServerList component
- Fix 'Local' display issue in installed scripts table

* fix: resolve TypeScript errors in color coding implementation

- Fix unsafe argument type errors in GeneralSettingsModal and ServerForm
- Remove unused import in ServerList component

* feat: add color-coded dropdown for server selection

- Create ColorCodedDropdown component with server color indicators
- Replace HTML select with custom dropdown in ExecutionModeModal
- Add color dots next to server names in dropdown options
- Maintain all existing functionality with improved visual design

* fix: generate new execution ID for each script run

- Change executionId from useState to allow updates
- Generate new execution ID in startScript function for each run
- Fixes issue where scripts couldn't be run multiple times without page reload
- Resolves 'Script execution already running' error on subsequent runs

* fix: improve whiptail handling and execution ID generation

- Remove premature terminal clearing for whiptail sessions
- Let whiptail handle its own display without interference
- Generate new execution ID for both initial and manual script runs
- Fix whiptail session state management
- Should resolve blank screen and script restart issues

* fix: revert problematic whiptail changes that broke terminal display

- Remove complex whiptail session handling that caused blank screen
- Simplify output handling to just write data directly to terminal
- Keep execution ID generation fix for multiple script runs
- Remove unused inWhiptailSession state variable
- Terminal should now display output normally again

* fix: remove remaining inWhiptailSession reference

- Remove inWhiptailSession from useEffect dependency array
- Fixes ReferenceError: inWhiptailSession is not defined
- Terminal should now work without JavaScript errors

* debug: add console logging to terminal message handling

- Add debug logs to see what messages are being received
- Help diagnose why terminal shows blank screen
- Will remove debug logs once issue is identified

* fix: prevent WebSocket reconnection loop

- Remove executionId from useEffect dependency arrays
- Fixes terminal constantly reconnecting and showing blank screen
- WebSocket now maintains stable connection during script execution
- Removes debug console logs

* fix: prevent WebSocket reconnection on second script run

- Remove handleMessage from useEffect dependency array
- Fixes loop of START messages and connection blinking on subsequent runs
- WebSocket connection now stable for multiple script executions
- handleMessage recreation no longer triggers WebSocket reconnection

* debug: add logging to identify WebSocket reconnection cause

- Add console logs to useEffect and startScript
- Track what dependencies are changing
- Identify why WebSocket reconnects on second run

* fix: remove isRunning from WebSocket useEffect dependencies

- isRunning state change was causing WebSocket reconnection loop
- Each script start changed isRunning from false to true
- This triggered useEffect to reconnect WebSocket
- Removing isRunning from dependencies breaks the loop
- WebSocket connection now stable during script execution

* feat: preselect SSH mode in execution modal and clean up debug logs

- Preselect SSH execution mode by default since it's the only available option
- Remove debug console logs from Terminal component
- Clean up code for production readiness

* fix: resolve build errors and warnings

- Add missing SettingsModal import to ExecutionModeModal
- Remove unused selectedMode and handleModeChange variables
- Add ESLint disable comments for intentional useEffect dependency exclusions
- Build now passes successfully with no errors or warnings
2025-10-10 14:30:28 +02:00
2025-09-09 14:04:07 +02:00
2025-09-09 14:04:07 +02:00
2025-10-09 07:54:19 +00:00

PVE Scripts Local 🚀

A modern web-based management interface for Proxmox VE (PVE) helper scripts. This tool provides a user-friendly way to discover, download, and execute community-sourced Proxmox scripts locally with real-time terminal output streaming. No more need for curl -> bash calls, it all happens in your enviroment.

image

🎯 Deployment Options

This application can be deployed in multiple ways to suit different environments:

  • 📦 Debian LXC Container: Deploy inside a Debian LXC container for better isolation
  • 🔧 Helper Script: Use the automated helper script for easy setup

All deployment methods provide the same functionality and web interface.

🌟 Features

  • Web-based Interface: Modern React/Next.js frontend with real-time terminal emulation
  • Script Discovery: Browse and search through community Proxmox scripts from GitHub
  • One-Click Execution: Run scripts directly from the web interface with live output
  • Real-time Terminal: Full terminal emulation with xterm.js for interactive script execution
  • Script Management: Download, update, and manage local script collections
  • Security: Sandboxed script execution with path validation and time limits
  • Database Integration: PostgreSQL backend for script metadata and execution history
  • WebSocket Communication: Real-time bidirectional communication for script execution

🏗️ Architecture

Frontend

  • Next.js 15 with React 19
  • TypeScript for type safety
  • Tailwind CSS for styling
  • xterm.js for terminal emulation
  • tRPC for type-safe API communication

Backend

  • Node.js server with WebSocket support
  • WebSocket Server for real-time script execution
  • Script Downloader Service for GitHub integration

Scripts

  • Core Functions: Shared utilities and build functions
  • Container Scripts: Pre-configured LXC container setups
  • Installation Scripts: System setup and configuration tools

Database

  • SQLite Database: Local database stored at data/settings.db
  • Server Management: Stores Proxmox server configurations and credentials
  • Automatic Setup: Database and tables are created automatically on first run
  • Data Persistence: Settings persist across application restarts

📋 Prerequisites

For All Deployment Methods

  • Node.js 22+ and npm
  • Git for cloning the repository
  • Proxmox VE environment (host or access to Proxmox cluster)
  • SQLite (included with Node.js better-sqlite3 package)

For Debian LXC Container Installation

  • Debian LXC container (Debian 11+ recommended)
  • build-essentials: apt install build-essential
  • Container with sufficient resources (2GB RAM, 4GB storage minimum)
  • Network access from container to Proxmox host
  • Optional: Privileged container for full Proxmox integration

🚀 Installation

Choose the installation method that best fits your environment:

Option 1: Debian LXC Container Installation

For better isolation and security, you can run PVE Scripts Local inside a Debian LXC container:

Step 1: Create Debian LXC Container

bash -c "$(curl -fsSL https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main/ct/debian.sh)"

Step 2: Install Dependencies in Container

# Enter the container
pct enter 100

# Update and install dependencies
apt update && apt install -y build-essential git curl

# Install Node.js 24.x
curl -fsSL https://deb.nodesource.com/setup_24.x | bash -
apt install -y nodejs

Step 3: Clone and Setup Application

# Clone the repository
git clone https://github.com/community-scripts/ProxmoxVE-Local.git /opt/PVESciptslocal
cd PVESciptslocal

# Install dependencies and build
npm install
cp .env.example .env
npm run build

# Create database directory
mkdir -p data
chmod 755 data

Step 4: Start the Application

# Start in production mode
npm start

# Or create a systemd service (optional)
# Create systemd service for easy management

Access the application:

  • 🌐 Container IP: http://<CONTAINER_IP>:3000
  • 🔧 Container management: pct start 100, pct stop 100, pct status 100

Option 2: Use the helper script

This creates the LXC and installs the APP for you.

bash -c "$(curl -fsSL https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main/ct/pve-scripts-local.sh)"

🎯 Usage

1. Access the Web Interface

The web interface is accessible regardless of your deployment method:

  • LXC Container Installation: http://<CONTAINER_IP>:3000
  • Custom Installation: http://<YOUR_IP>:3000

2. Service Management

For helper-script installations (systemd service):

# Start the service
systemctl start pvescriptslocal

# Stop the service
systemctl stop pvescriptslocal

# Check service status
systemctl status pvescriptslocal

# Enable auto-start on boot
systemctl enable pvescriptslocal

# View service logs
journalctl -u pvescriptslocal -f

For manual installations:

# Start application
npm start

# Development mode
npm run dev:server

# Build for production
npm run build

3. Browse Available Scripts

  • The main page displays a grid of available Proxmox scripts
  • Use the search functionality to find specific scripts
  • Scripts are categorized by type (containers, installations, etc.)

4. Download Scripts

  • Click on any script card to view details
  • Use the "Download" button to fetch scripts from the ProxmoxVE GitHub
  • Downloaded scripts are stored locally in the scripts/ directory

5. Execute Scripts

  • Click "Run Script" on any downloaded script
  • A terminal window will open with real-time output
  • Interact with the script through the web terminal
  • Use the close button to stop execution

6. Script Management

  • View script execution history
  • Update scripts to latest versions
  • Manage local script collections

7. Database Management

The application uses SQLite for storing server configurations:

  • Database Location: data/settings.db
  • Automatic Creation: Database and tables are created on first run
  • Server Storage: Proxmox server credentials and configurations
  • Backup: Copy data/settings.db to backup your server configurations
  • Reset: Delete data/settings.db to reset all server configurations

📁 Project Structure

PVESciptslocal/
├── scripts/                  # Script collection
│   ├── core/                 # Core utility functions
│   │   ├── build.func        # Build system functions
│   │   ├── tools.func        # Tool installation functions
│   │   └── create_lxc.sh     # LXC container creation
│   ├── ct/                   # Container templates 
│   └── install/              # Installation scripts
├── src/                      # Source code
│   ├── app/                  # Next.js app directory
│   │   ├── _components/      # React components
│   │   └── page.tsx          # Main page
│   └── server/               # Server-side code
│       ├── database.js       # SQLite database service
│       └── services/         # Business logic services
├── data/                     # Database storage
│   └── settings.db           # SQLite database file
├── public/                   # Static assets
├── server.js                 # Main server file
└── package.json              # Dependencies and scripts

🚀 Development

Prerequisites for Development

  • Node.js 22+
  • Git

Development Commands

# Install dependencies
npm install

Start development server

npm run dev:server

Project Structure for Developers

  • Frontend: React components in src/app/_components/
  • Backend: Server logic in src/server/
  • API: tRPC routers for type-safe API communication
  • Scripts: Bash scripts in scripts/ directory

🤝 Contributing

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

📝 License

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


Note: This is beta software. Use with caution in production environments and always backup your Proxmox configuration before running scripts.

Description
Local version of the ProxmoxVE Repostory
Readme 4.2 MiB
Languages
TypeScript 63.2%
Shell 26.1%
JavaScript 10.2%
CSS 0.5%