fix: improve SSH key handling and public key modal UX

- Fix SSH key import to automatically trim trailing whitespace and empty lines
- Add 'View Public Key' button in ServerForm for generated key pairs
- Reduce public key textarea size from 120px to 60px min-height
- Add quick command section with pre-filled echo command for authorized_keys
- Improve user experience with one-click copy functionality for both key and command

.env.example

@@ -25,4 +25,5 @@ AUTH_USERNAME=
 AUTH_PASSWORD_HASH= 
 AUTH_ENABLED=false
 AUTH_SETUP_COMPLETED=false
-JWT_SECRET=
+JWT_SECRET=
+DATABASE_URL="file:./data/database.sqlite"

.github/release-drafter.yml

@@ -1,12 +1,15 @@
 # Template for release drafts
-name-template: 'v$NEXT_MINOR_VERSION'   # You can switch to $NEXT_MINOR_VERSION or $NEXT_MAJOR_VERSION
-tag-template: 'v$NEXT_MINOR_VERSION'
+name-template: 'v$NEXT_PATCH_VERSION'   # You can switch to $NEXT_MINOR_VERSION or $NEXT_MAJOR_VERSION
+tag-template: 'v$NEXT_PATCH_VERSION'
 
 # Exclude PRs with this label from release notes
 exclude-labels:
   - automated
 
 categories:
+  - title: "Breaking Changes"
+    labels:
+      - breaking
   - title: "🚀 Features"
     labels:
       - feature

.gitignore

@@ -16,6 +16,9 @@
 db.sqlite
 data/settings.db
 
+# ssh keys (sensitive)
+data/ssh-keys/
+
 # next.js
 /.next/
 /out/
@@ -46,4 +49,5 @@ yarn-error.log*
 *.tsbuildinfo
 
 # idea files
-.idea
+.idea
+/generated/prisma

README.md

@@ -210,6 +210,249 @@ The application uses SQLite for storing server configurations:
 - **Backup**: Copy `data/settings.db` to backup your server configurations
 - **Reset**: Delete `data/settings.db` to reset all server configurations
 
+## 📖 Feature Guide
+
+This section provides detailed information about the application's key features and how to use them effectively.
+
+### Server Settings
+
+Manage your Proxmox VE servers and configure connection settings.
+
+**Adding PVE Servers:**
+- **Server Name**: A friendly name to identify your server
+- **IP Address**: The IP address or hostname of your PVE server
+- **Username**: PVE user account (usually root or a dedicated user)
+- **SSH Port**: Default is 22, change if your server uses a different port
+
+**Authentication Types:**
+- **Password**: Use username and password authentication
+- **SSH Key**: Use SSH key pair for secure authentication
+- **Both**: Try SSH key first, fallback to password if needed
+
+**Server Color Coding:**
+Assign colors to servers for visual distinction throughout the application. This helps identify which server you're working with when managing scripts. This needs to be enabled in the General Settings.
+
+### General Settings
+
+Configure application preferences and behavior.
+
+**Save Filters:**
+When enabled, your script filter preferences (search terms, categories, sorting) will be automatically saved and restored when you return to the application:
+- Search queries are preserved
+- Selected script types are remembered
+- Sort preferences are maintained
+- Category selections are saved
+
+**Server Color Coding:**
+Enable visual color coding for servers throughout the application. This makes it easier to identify which server you're working with.
+
+**GitHub Integration:**
+Add a GitHub Personal Access Token to increase API rate limits and improve performance:
+- Bypasses GitHub's rate limiting for unauthenticated requests
+- Improves script loading and syncing performance
+- Token is stored securely and only used for API calls
+
+**Authentication:**
+Secure your application with username and password authentication:
+- Set up username and password for app access
+- Enable/disable authentication as needed
+- Credentials are stored securely
+
+### Sync Button
+
+Synchronize script metadata from the ProxmoxVE GitHub repository.
+
+**What Does Syncing Do?**
+- **Updates Script Metadata**: Downloads the latest script information (JSON files)
+- **Refreshes Available Scripts**: Updates the list of scripts you can download
+- **Updates Categories**: Refreshes script categories and organization
+- **Checks for Updates**: Identifies which downloaded scripts have newer versions
+
+**Important Notes:**
+- **Metadata Only**: Syncing only updates script information, not the actual script files
+- **No Downloads**: Script files are downloaded separately when you choose to install them
+- **Last Sync Time**: Shows when the last successful sync occurred
+- **Rate Limits**: GitHub API limits may apply without a personal access token
+
+**When to Sync:**
+- When you want to see the latest available scripts
+- To check for updates to your downloaded scripts
+- If you notice scripts are missing or outdated
+- After the ProxmoxVE repository has been updated
+
+### Available Scripts
+
+Browse and discover scripts from the ProxmoxVE repository.
+
+**Browsing Scripts:**
+- **Category Sidebar**: Filter scripts by category (Storage, Network, Security, etc.)
+- **Search**: Find scripts by name or description
+- **View Modes**: Switch between card and list view
+- **Sorting**: Sort by name or creation date
+
+**Filtering Options:**
+- **Script Types**: Filter by CT (Container) or other script types
+- **Update Status**: Show only scripts with available updates
+- **Search Query**: Search within script names and descriptions
+- **Categories**: Filter by specific script categories
+
+**Script Actions:**
+- **View Details**: Click on a script to see full information and documentation
+- **Download**: Download script files to your local system
+- **Install**: Run scripts directly on your PVE servers
+- **Preview**: View script content before downloading
+
+### Downloaded Scripts
+
+Manage scripts that have been downloaded to your local system.
+
+**What Are Downloaded Scripts?**
+These are scripts that you've downloaded from the repository and are stored locally on your system:
+- Script files are stored in your local scripts directory
+- You can run these scripts on your PVE servers
+- Scripts can be updated when newer versions are available
+
+**Update Detection:**
+The system automatically checks if newer versions of your downloaded scripts are available:
+- Scripts with updates available are marked with an update indicator
+- You can filter to show only scripts with available updates
+- Update detection happens when you sync with the repository
+
+**Managing Downloaded Scripts:**
+- **Update Scripts**: Download the latest version of a script
+- **View Details**: See script information and documentation
+- **Install/Run**: Execute scripts on your PVE servers
+- **Filter & Search**: Use the same filtering options as Available Scripts
+
+### Installed Scripts
+
+Track and manage scripts that are installed on your PVE servers.
+
+**Auto-Detection (Primary Feature):**
+The system can automatically detect LXC containers that have community-script tags on your PVE servers:
+- **Automatic Discovery**: Scans your PVE servers for containers with community-script tags
+- **Container Detection**: Identifies LXC containers running Proxmox helper scripts
+- **Server Association**: Links detected scripts to the specific PVE server
+- **Bulk Import**: Automatically creates records for all detected scripts
+
+**How Auto-Detection Works:**
+1. Connects to your configured PVE servers
+2. Scans LXC container configurations
+3. Looks for containers with community-script tags
+4. Creates installed script records automatically
+
+**Manual Script Management:**
+- **Add Scripts Manually**: Create records for scripts not auto-detected
+- **Edit Script Details**: Update script names and container IDs
+- **Delete Scripts**: Remove scripts from tracking
+- **Bulk Operations**: Clean up old or invalid script records
+
+**Script Tracking Features:**
+- **Installation Status**: Track success, failure, or in-progress installations
+- **Server Association**: Know which server each script is installed on
+- **Container ID**: Link scripts to specific LXC containers
+- **Web UI Access**: Track and access Web UI IP addresses and ports
+- **Execution Logs**: View output and logs from script installations
+- **Filtering**: Filter by server, status, or search terms
+
+**Managing Installed Scripts:**
+- **View All Scripts**: See all tracked scripts across all servers
+- **Filter by Server**: Show scripts for a specific PVE server
+- **Filter by Status**: Show successful, failed, or in-progress installations
+- **Sort Options**: Sort by name, container ID, server, status, or date
+- **Update Scripts**: Re-run or update existing script installations
+
+**Web UI Access:**
+Automatically detect and access Web UI interfaces for your installed scripts:
+- **Auto-Detection**: Automatically detects Web UI URLs from script installation output
+- **IP & Port Tracking**: Stores and displays Web UI IP addresses and ports
+- **One-Click Access**: Click IP:port to open Web UI in new tab
+- **Manual Detection**: Re-detect IP using `hostname -I` inside container
+- **Port Detection**: Uses script metadata to get correct port (e.g., actualbudget:5006)
+- **Editable Fields**: Manually edit IP and port values as needed
+
+**Actions Dropdown:**
+Clean interface with all actions organized in a dropdown menu:
+- **Edit Button**: Always visible for quick script editing
+- **Actions Dropdown**: Contains Update, Shell, Open UI, Start/Stop, Destroy, Delete
+- **Smart Visibility**: Dropdown only appears when actions are available
+- **Auto-Close**: Dropdown closes after clicking any action
+- **Disabled States**: Actions are disabled when container is stopped
+
+**Container Control:**
+Directly control LXC containers from the installed scripts page via SSH:
+- **Start/Stop Button**: Control container state with `pct start/stop <ID>`
+- **Container Status**: Real-time status indicator (running/stopped/unknown)
+- **Destroy Button**: Permanently remove LXC container with `pct destroy <ID>`
+- **Confirmation Modals**: Simple OK/Cancel for start/stop, type container ID to confirm destroy
+- **SSH Execution**: All commands executed remotely via configured SSH connections
+
+**Safety Features:**
+- Start/Stop actions require simple confirmation
+- Destroy action requires typing the container ID to confirm
+- All actions show loading states and error handling
+- Only works with SSH scripts that have valid container IDs
+
+### Update System
+
+Keep your PVE Scripts Management application up to date with the latest features and improvements.
+
+**What Does Updating Do?**
+- **Downloads Latest Version**: Fetches the newest release from the GitHub repository
+- **Updates Application Files**: Replaces current files with the latest version
+- **Installs Dependencies**: Updates Node.js packages and dependencies
+- **Rebuilds Application**: Compiles the application with latest changes
+- **Restarts Server**: Automatically restarts the application server
+
+**How to Update:**
+
+**Automatic Update (Recommended):**
+- Click the "Update Now" button when an update is available
+- The system will handle everything automatically
+- You'll see a progress overlay with update logs
+- The page will reload automatically when complete
+
+**Manual Update (Advanced):**
+If automatic update fails, you can update manually:
+```bash
+# Navigate to the application directory
+cd $PVESCRIPTLOCAL_DIR
+
+# Pull latest changes
+git pull
+
+# Install dependencies
+npm install
+
+# Build the application
+npm run build
+
+# Start the application
+npm start
+```
+
+**Update Process:**
+1. **Check for Updates**: System automatically checks GitHub for new releases
+2. **Download Update**: Downloads the latest release files
+3. **Backup Current Version**: Creates backup of current installation
+4. **Install New Version**: Replaces files and updates dependencies
+5. **Build Application**: Compiles the updated code
+6. **Restart Server**: Stops old server and starts new version
+7. **Reload Page**: Automatically refreshes the browser
+
+**Release Notes:**
+Click the external link icon next to the update button to view detailed release notes on GitHub:
+- See what's new in each version
+- Read about bug fixes and improvements
+- Check for any breaking changes
+- View installation requirements
+
+**Important Notes:**
+- **Backup**: Your data and settings are preserved during updates
+- **Downtime**: Brief downtime occurs during the update process
+- **Compatibility**: Updates maintain backward compatibility with your data
+- **Rollback**: If issues occur, you can manually revert to previous version
+
 ## 📁 Project Structure
 
 ```

VERSION

@@ -1 +1 @@
-0.3.0
+0.4.4

package.json

@@ -22,9 +22,12 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@prisma/client": "^6.17.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.3",
     "@t3-oss/env-nextjs": "^0.13.8",
-    "@tanstack/react-query": "^5.87.4",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tanstack/react-query": "^5.90.5",
     "@trpc/client": "^11.6.0",
     "@trpc/react-query": "^11.6.0",
     "@trpc/server": "^11.6.0",
@@ -34,17 +37,18 @@
     "@xterm/addon-web-links": "^0.11.0",
     "@xterm/xterm": "^5.5.0",
     "bcryptjs": "^3.0.2",
-    "better-sqlite3": "^12.4.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "jsonwebtoken": "^9.0.2",
-    "lucide-react": "^0.545.0",
-    "next": "^15.5.3",
+    "lucide-react": "^0.546.0",
+    "next": "^15.5.5",
     "node-pty": "^1.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.6",
     "refractor": "^5.0.0",
+    "remark-gfm": "^4.0.1",
     "server-only": "^0.0.1",
     "strip-ansi": "^7.1.2",
     "superjson": "^2.2.1",
@@ -58,24 +62,25 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/bcryptjs": "^2.4.6",
+    "@types/bcryptjs": "^3.0.0",
     "@types/better-sqlite3": "^7.6.8",
     "@types/jsonwebtoken": "^9.0.10",
-    "@types/node": "^24.7.1",
+    "@types/node": "^24.8.0",
     "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
+    "@types/react-dom": "^19.2.2",
     "@vitejs/plugin-react": "^5.0.2",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "eslint": "^9.23.0",
-    "eslint-config-next": "^15.5.4",
+    "eslint-config-next": "^15.5.5",
     "jsdom": "^27.0.0",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prettier-plugin-tailwindcss": "^0.7.0",
+    "prisma": "^6.17.1",
     "tailwindcss": "^4.1.14",
     "typescript": "^5.8.2",
-    "typescript-eslint": "^8.27.0",
+    "typescript-eslint": "^8.46.1",
     "vitest": "^3.2.4"
   },
   "ct3aMetadata": {

prisma/migrations/20251017092130_init/migration.sql

@@ -0,0 +1,74 @@
+-- CreateTable
+CREATE TABLE "installed_scripts" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "script_name" TEXT NOT NULL,
+    "script_path" TEXT NOT NULL,
+    "container_id" TEXT,
+    "server_id" INTEGER,
+    "execution_mode" TEXT NOT NULL,
+    "installation_date" DATETIME DEFAULT CURRENT_TIMESTAMP,
+    "status" TEXT NOT NULL,
+    "output_log" TEXT,
+    "web_ui_ip" TEXT,
+    "web_ui_port" INTEGER,
+    CONSTRAINT "installed_scripts_server_id_fkey" FOREIGN KEY ("server_id") REFERENCES "servers" ("id") ON DELETE SET NULL ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "servers" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "name" TEXT NOT NULL,
+    "ip" TEXT NOT NULL,
+    "user" TEXT NOT NULL,
+    "password" TEXT,
+    "auth_type" TEXT DEFAULT 'password',
+    "ssh_key" TEXT,
+    "ssh_key_passphrase" TEXT,
+    "ssh_port" INTEGER DEFAULT 22,
+    "color" TEXT,
+    "created_at" DATETIME DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" DATETIME,
+    "ssh_key_path" TEXT,
+    "key_generated" BOOLEAN DEFAULT false
+);
+
+-- CreateTable
+CREATE TABLE "lxc_configs" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "installed_script_id" INTEGER NOT NULL,
+    "arch" TEXT,
+    "cores" INTEGER,
+    "memory" INTEGER,
+    "hostname" TEXT,
+    "swap" INTEGER,
+    "onboot" INTEGER,
+    "ostype" TEXT,
+    "unprivileged" INTEGER,
+    "net_name" TEXT,
+    "net_bridge" TEXT,
+    "net_hwaddr" TEXT,
+    "net_ip_type" TEXT,
+    "net_ip" TEXT,
+    "net_gateway" TEXT,
+    "net_type" TEXT,
+    "net_vlan" INTEGER,
+    "rootfs_storage" TEXT,
+    "rootfs_size" TEXT,
+    "feature_keyctl" INTEGER,
+    "feature_nesting" INTEGER,
+    "feature_fuse" INTEGER,
+    "feature_mount" TEXT,
+    "tags" TEXT,
+    "advanced_config" TEXT,
+    "synced_at" DATETIME,
+    "config_hash" TEXT,
+    "created_at" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" DATETIME NOT NULL,
+    CONSTRAINT "lxc_configs_installed_script_id_fkey" FOREIGN KEY ("installed_script_id") REFERENCES "installed_scripts" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "servers_name_key" ON "servers"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "lxc_configs_installed_script_id_key" ON "lxc_configs"("installed_script_id");

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (e.g., Git)
+provider = "sqlite"

prisma/schema.prisma

@@ -0,0 +1,97 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+model InstalledScript {
+  id                Int       @id @default(autoincrement())
+  script_name       String
+  script_path       String
+  container_id      String?
+  server_id         Int?
+  execution_mode    String
+  installation_date DateTime? @default(now())
+  status            String
+  output_log        String?
+  web_ui_ip         String?
+  web_ui_port       Int?
+  server            Server?   @relation(fields: [server_id], references: [id], onDelete: SetNull)
+  lxc_config        LXCConfig?
+  
+  @@map("installed_scripts")
+}
+
+model Server {
+  id                 Int                @id @default(autoincrement())
+  name               String             @unique
+  ip                 String
+  user               String
+  password           String?
+  auth_type          String?            @default("password")
+  ssh_key            String?
+  ssh_key_passphrase String?
+  ssh_port           Int?               @default(22)
+  color              String?
+  created_at         DateTime?          @default(now())
+  updated_at         DateTime?          @updatedAt
+  ssh_key_path       String?
+  key_generated      Boolean?           @default(false)
+  installed_scripts  InstalledScript[]
+  
+  @@map("servers")
+}
+
+model LXCConfig {
+  id                    Int              @id @default(autoincrement())
+  installed_script_id   Int              @unique
+  installed_script      InstalledScript  @relation(fields: [installed_script_id], references: [id], onDelete: Cascade)
+  
+  // Basic settings
+  arch                  String?
+  cores                 Int?
+  memory                Int?
+  hostname              String?
+  swap                  Int?
+  onboot                Int?            // 0 or 1
+  ostype                String?
+  unprivileged          Int?            // 0 or 1
+  
+  // Network settings (net0)
+  net_name              String?
+  net_bridge            String?
+  net_hwaddr            String?
+  net_ip_type           String?         // 'dhcp' or 'static'
+  net_ip                String?         // IP with CIDR for static
+  net_gateway           String?
+  net_type              String?         // usually 'veth'
+  net_vlan              Int?
+  
+  // Storage
+  rootfs_storage        String?
+  rootfs_size           String?
+  
+  // Features
+  feature_keyctl        Int?            // 0 or 1
+  feature_nesting       Int?            // 0 or 1
+  feature_fuse          Int?            // 0 or 1
+  feature_mount         String?         // other mount features
+  
+  // Tags
+  tags                  String?
+  
+  // Advanced/raw settings (lxc.* entries and other uncommon settings)
+  advanced_config       String?         // Text blob for advanced settings
+  
+  // Metadata
+  synced_at             DateTime?
+  config_hash           String?         // Hash of server config for diff detection
+  
+  created_at            DateTime         @default(now())
+  updated_at            DateTime         @updatedAt
+  
+  @@map("lxc_configs")
+}

scripts/ct/debian.sh

@@ -1,43 +0,0 @@
-#!/usr/bin/env bash
-SCRIPT_DIR="$(dirname "$0")" 
-source "$SCRIPT_DIR/../core/build.func"
-# Copyright (c) 2021-2025 tteck
-# Author: tteck (tteckster)
-# License: MIT | https://github.com/community-scripts/ProxmoxVE/raw/main/LICENSE
-# Source: https://www.debian.org/
-
-APP="Debian"
-var_tags="${var_tags:-os}"
-var_cpu="${var_cpu:-1}"
-var_ram="${var_ram:-512}"
-var_disk="${var_disk:-2}"
-var_os="${var_os:-debian}"
-var_version="${var_version:-13}"
-var_unprivileged="${var_unprivileged:-1}"
-
-header_info "$APP"
-variables
-color
-catch_errors
-
-function update_script() {
-  header_info
-  check_container_storage
-  check_container_resources
-  if [[ ! -d /var ]]; then
-    msg_error "No ${APP} Installation Found!"
-    exit
-  fi
-  msg_info "Updating $APP LXC"
-  $STD apt update
-  $STD apt -y upgrade
-  msg_ok "Updated $APP LXC"
-  exit
-}
-
-start
-build_container
-description
-
-msg_ok "Completed Successfully!\n"
-echo -e "${CREATING}${GN}${APP} setup has been successfully initialized!${CL}"

scripts/install/debian-install.sh

@@ -1,24 +0,0 @@
-#!/usr/bin/env bash
-
-# Copyright (c) 2021-2025 tteck
-# Author: tteck (tteckster)
-# License: MIT | https://github.com/community-scripts/ProxmoxVE/raw/main/LICENSE
-# Source: https://www.debian.org/
-
-source /dev/stdin <<<"$FUNCTIONS_FILE_PATH"
-color
-verb_ip6
-catch_errors
-setting_up_container
-network_check
-update_os
-
-motd_ssh
-customize
-
-msg_info "Cleaning up"
-$STD apt -y autoremove
-$STD apt -y autoclean
-$STD apt -y clean
-msg_ok "Cleaned"
-

scripts/json/openwrt.json

@@ -1,41 +0,0 @@
-{
-  "name": "OpenWrt",
-  "slug": "openwrt",
-  "categories": [
-    4,
-    2
-  ],
-  "date_created": "2024-05-02",
-  "type": "vm",
-  "updateable": true,
-  "privileged": false,
-  "interface_port": null,
-  "documentation": "https://openwrt.org/docs/start",
-  "website": "https://openwrt.org/",
-  "logo": "https://cdn.jsdelivr.net/gh/selfhst/icons/webp/openwrt.webp",
-  "config_path": "",
-  "description": "OpenWrt is a powerful open-source firmware that can transform a wide range of networking devices into highly customizable and feature-rich routers, providing users with greater control and flexibility over their network infrastructure.",
-  "install_methods": [
-    {
-      "type": "default",
-      "script": "vm/openwrt.sh",
-      "resources": {
-        "cpu": 1,
-        "ram": 256,
-        "hdd": 0.5,
-        "os": null,
-        "version": null
-      }
-    }
-  ],
-  "default_credentials": {
-    "username": null,
-    "password": null
-  },
-  "notes": [
-    {
-      "text": "If you use VLANs (default LAN is set to VLAN 999), make sure the Proxmox Linux Bridge is configured as VLAN-aware, otherwise the VM may fail to start.",
-      "type": "info"
-    }
-  ]
-}

scripts/json/petio.json

@@ -1,35 +0,0 @@
-{
-  "name": "Petio",
-  "slug": "petio",
-  "categories": [
-    13
-  ],
-  "date_created": "2024-06-12",
-  "type": "ct",
-  "updateable": true,
-  "privileged": false,
-  "interface_port": 7777,
-  "documentation": "https://docs.petio.tv/",
-  "website": "https://petio.tv/",
-  "logo": "https://cdn.jsdelivr.net/gh/selfhst/icons/webp/petio.webp",
-  "config_path": "",
-  "description": "Petio is a third party companion app available to Plex server owners to allow their users to request, review and discover content.",
-  "install_methods": [
-    {
-      "type": "default",
-      "script": "ct/petio.sh",
-      "resources": {
-        "cpu": 2,
-        "ram": 1024,
-        "hdd": 4,
-        "os": "ubuntu",
-        "version": "20.04"
-      }
-    }
-  ],
-  "default_credentials": {
-    "username": null,
-    "password": null
-  },
-  "notes": []
-}

server.js

@@ -7,7 +7,7 @@ import { join, resolve } from 'path';
 import stripAnsi from 'strip-ansi';
 import { spawn as ptySpawn } from 'node-pty';
 import { getSSHExecutionService } from './src/server/ssh-execution-service.js';
-import { getDatabase } from './src/server/database.js';
+import { getDatabase } from './src/server/database-prisma.js';
 
 const dev = process.env.NODE_ENV !== 'production';
 const hostname = '0.0.0.0';
@@ -51,6 +51,7 @@ const handle = app.getRequestHandler();
  * @property {string} [mode]
  * @property {ServerInfo} [server]
  * @property {boolean} [isUpdate]
+ * @property {boolean} [isShell]
  * @property {string} [containerId]
  */
 
@@ -130,17 +131,66 @@ class ScriptExecutionHandler {
     return null;
   }
 
+  /**
+   * Parse Web UI URL from terminal output
+   * @param {string} output - Terminal output to parse
+   * @returns {{ip: string, port: number}|null} - Object with ip and port if found, null otherwise
+   */
+  parseWebUIUrl(output) {
+    // First, strip ANSI color codes to make pattern matching more reliable
+    const cleanOutput = output.replace(/\x1b\[[0-9;]*m/g, '');
+    
+    // Look for URL patterns with any valid IP address (private or public)
+    const patterns = [
+      // HTTP/HTTPS URLs with IP and port
+      /https?:\/\/(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}):(\d+)/gi,
+      // URLs without explicit port (assume default ports)
+      /https?:\/\/(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(?:\/|$|\s)/gi,
+      // URLs with trailing slash and port
+      /https?:\/\/(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}):(\d+)\//gi,
+      // URLs with just IP and port (no protocol)
+      /(?:^|\s)(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}):(\d+)(?:\s|$)/gi,
+      // URLs with just IP (no protocol, no port)
+      /(?:^|\s)(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(?:\s|$)/gi,
+    ];
+
+    // Try patterns on both original and cleaned output
+    const outputsToTry = [output, cleanOutput];
+    
+    for (const testOutput of outputsToTry) {
+      for (const pattern of patterns) {
+        const matches = [...testOutput.matchAll(pattern)];
+        for (const match of matches) {
+          if (match[1]) {
+            const ip = match[1];
+            const port = match[2] || (match[0].startsWith('https') ? '443' : '80');
+            
+            // Validate IP address format
+            if (ip.match(/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/)) {
+              return {
+                ip: ip,
+                port: parseInt(port, 10)
+              };
+            }
+          }
+        }
+      }
+    }
+    
+    return null;
+  }
+
   /**
    * Create installation record
    * @param {string} scriptName - Name of the script
    * @param {string} scriptPath - Path to the script
    * @param {string} executionMode - 'local' or 'ssh'
    * @param {number|null} serverId - Server ID for SSH executions
-   * @returns {number|null} - Installation record ID
+   * @returns {Promise<number|null>} - Installation record ID
    */
-  createInstallationRecord(scriptName, scriptPath, executionMode, serverId = null) {
+  async createInstallationRecord(scriptName, scriptPath, executionMode, serverId = null) {
     try {
-      const result = this.db.createInstalledScript({
+      const result = await this.db.createInstalledScript({
         script_name: scriptName,
         script_path: scriptPath,
         container_id: undefined,
@@ -149,7 +199,7 @@ class ScriptExecutionHandler {
         status: 'in_progress',
         output_log: ''
       });
-      return Number(result.lastInsertRowid);
+      return Number(result.id);
     } catch (error) {
       console.error('Error creating installation record:', error);
       return null;
@@ -161,9 +211,9 @@ class ScriptExecutionHandler {
    * @param {number} installationId - Installation record ID
    * @param {Object} updateData - Data to update
    */
-  updateInstallationRecord(installationId, updateData) {
+  async updateInstallationRecord(installationId, updateData) {
     try {
-      this.db.updateInstalledScript(installationId, updateData);
+      await this.db.updateInstalledScript(installationId, updateData);
     } catch (error) {
       console.error('Error updating installation record:', error);
     }
@@ -207,13 +257,15 @@ class ScriptExecutionHandler {
    * @param {WebSocketMessage} message
    */
   async handleMessage(ws, message) {
-    const { action, scriptPath, executionId, input, mode, server, isUpdate, containerId } = message;
+    const { action, scriptPath, executionId, input, mode, server, isUpdate, isShell, containerId } = message;
 
     switch (action) {
       case 'start':
         if (scriptPath && executionId) {
           if (isUpdate && containerId) {
             await this.startUpdateExecution(ws, containerId, executionId, mode, server);
+          } else if (isShell && containerId) {
+            await this.startShellExecution(ws, containerId, executionId, mode, server);
           } else {
             await this.startScriptExecution(ws, scriptPath, executionId, mode, server);
           }
@@ -275,7 +327,7 @@ class ScriptExecutionHandler {
       
       // Create installation record
       const serverId = server ? (server.id ?? null) : null;
-      installationId = this.createInstallationRecord(scriptName, scriptPath, mode, serverId);
+      installationId = await this.createInstallationRecord(scriptName, scriptPath, mode, serverId);
       
       if (!installationId) {
         console.error('Failed to create installation record');
@@ -304,7 +356,7 @@ class ScriptExecutionHandler {
         
         // Update installation record with failure
         if (installationId) {
-          this.updateInstallationRecord(installationId, { status: 'failed' });
+          await this.updateInstallationRecord(installationId, { status: 'failed' });
         }
         return;
       }
@@ -342,7 +394,7 @@ class ScriptExecutionHandler {
       });
 
       // Handle pty data (both stdout and stderr combined)
-      childProcess.onData((data) => {
+      childProcess.onData(async (data) => {
         const output = data.toString();
         
         // Store output in buffer for logging
@@ -358,7 +410,19 @@ class ScriptExecutionHandler {
         // Parse for Container ID
         const containerId = this.parseContainerId(output);
         if (containerId && installationId) {
-          this.updateInstallationRecord(installationId, { container_id: containerId });
+          await this.updateInstallationRecord(installationId, { container_id: containerId });
+        }
+        
+        // Parse for Web UI URL
+        const webUIUrl = this.parseWebUIUrl(output);
+        if (webUIUrl && installationId) {
+          const { ip, port } = webUIUrl;
+          if (ip && port) {
+            await this.updateInstallationRecord(installationId, { 
+              web_ui_ip: ip, 
+              web_ui_port: port 
+            });
+          }
         }
         
         this.sendMessage(ws, {
@@ -400,7 +464,7 @@ class ScriptExecutionHandler {
       
       // Update installation record with failure
       if (installationId) {
-        this.updateInstallationRecord(installationId, { status: 'failed' });
+        await this.updateInstallationRecord(installationId, { status: 'failed' });
       }
     }
   }
@@ -427,7 +491,7 @@ class ScriptExecutionHandler {
       const execution = /** @type {ExecutionResult} */ (await sshService.executeScript(
         server,
         scriptPath,
-        /** @param {string} data */ (data) => {
+        /** @param {string} data */ async (data) => {
           // Store output in buffer for logging
           const exec = this.activeExecutions.get(executionId);
           if (exec) {
@@ -441,7 +505,19 @@ class ScriptExecutionHandler {
           // Parse for Container ID
           const containerId = this.parseContainerId(data);
           if (containerId && installationId) {
-            this.updateInstallationRecord(installationId, { container_id: containerId });
+            await this.updateInstallationRecord(installationId, { container_id: containerId });
+          }
+          
+          // Parse for Web UI URL
+          const webUIUrl = this.parseWebUIUrl(data);
+          if (webUIUrl && installationId) {
+            const { ip, port } = webUIUrl;
+            if (ip && port) {
+              await this.updateInstallationRecord(installationId, { 
+                web_ui_ip: ip, 
+                web_ui_port: port 
+              });
+            }
           }
           
           // Handle data output
@@ -469,13 +545,13 @@ class ScriptExecutionHandler {
             timestamp: Date.now()
           });
         },
-        /** @param {number} code */ (code) => {
+        /** @param {number} code */ async (code) => {
           const exec = this.activeExecutions.get(executionId);
           const isSuccess = code === 0;
           
           // Update installation record with final status and output
           if (installationId && exec) {
-            this.updateInstallationRecord(installationId, {
+            await this.updateInstallationRecord(installationId, {
               status: isSuccess ? 'success' : 'failed',
               output_log: exec.outputBuffer
             });
@@ -510,7 +586,7 @@ class ScriptExecutionHandler {
       
       // Update installation record with failure
       if (installationId) {
-        this.updateInstallationRecord(installationId, { status: 'failed' });
+        await this.updateInstallationRecord(installationId, { status: 'failed' });
       }
     }
   }
@@ -709,6 +785,145 @@ class ScriptExecutionHandler {
       });
     }
   }
+
+  /**
+   * Start shell execution
+   * @param {ExtendedWebSocket} ws
+   * @param {string} containerId
+   * @param {string} executionId
+   * @param {string} mode
+   * @param {ServerInfo|null} server
+   */
+  async startShellExecution(ws, containerId, executionId, mode = 'local', server = null) {
+    try {
+      
+      // Send start message
+      this.sendMessage(ws, {
+        type: 'start',
+        data: `Starting shell session for container ${containerId}...`,
+        timestamp: Date.now()
+      });
+
+      if (mode === 'ssh' && server) {
+        await this.startSSHShellExecution(ws, containerId, executionId, server);
+      } else {
+        await this.startLocalShellExecution(ws, containerId, executionId);
+      }
+
+    } catch (error) {
+      this.sendMessage(ws, {
+        type: 'error',
+        data: `Failed to start shell: ${error instanceof Error ? error.message : String(error)}`,
+        timestamp: Date.now()
+      });
+    }
+  }
+
+  /**
+   * Start local shell execution
+   * @param {ExtendedWebSocket} ws
+   * @param {string} containerId
+   * @param {string} executionId
+   */
+  async startLocalShellExecution(ws, containerId, executionId) {
+    const { spawn } = await import('node-pty');
+    
+    // Create a shell process that will run pct enter
+    const childProcess = spawn('bash', ['-c', `pct enter ${containerId}`], {
+      name: 'xterm-color',
+      cols: 80,
+      rows: 24,
+      cwd: process.cwd(),
+      env: process.env
+    });
+
+    // Store the execution
+    this.activeExecutions.set(executionId, { 
+      process: childProcess, 
+      ws
+    });
+
+    // Handle pty data
+    childProcess.onData((data) => {
+      this.sendMessage(ws, {
+        type: 'output',
+        data: data.toString(),
+        timestamp: Date.now()
+      });
+    });
+
+    // Note: No automatic command is sent - user can type commands interactively
+
+    // Handle process exit
+    childProcess.onExit((e) => {
+      this.sendMessage(ws, {
+        type: 'end',
+        data: `Shell session ended with exit code: ${e.exitCode}`,
+        timestamp: Date.now()
+      });
+      
+      this.activeExecutions.delete(executionId);
+    });
+  }
+
+  /**
+   * Start SSH shell execution
+   * @param {ExtendedWebSocket} ws
+   * @param {string} containerId
+   * @param {string} executionId
+   * @param {ServerInfo} server
+   */
+  async startSSHShellExecution(ws, containerId, executionId, server) {
+    const sshService = getSSHExecutionService();
+    
+    try {
+      const execution = await sshService.executeCommand(
+        server,
+        `pct enter ${containerId}`,
+        /** @param {string} data */
+        (data) => {
+          this.sendMessage(ws, {
+            type: 'output',
+            data: data,
+            timestamp: Date.now()
+          });
+        },
+        /** @param {string} error */
+        (error) => {
+          this.sendMessage(ws, {
+            type: 'error',
+            data: error,
+            timestamp: Date.now()
+          });
+        },
+        /** @param {number} code */
+        (code) => {
+          this.sendMessage(ws, {
+            type: 'end',
+            data: `Shell session ended with exit code: ${code}`,
+            timestamp: Date.now()
+          });
+          
+          this.activeExecutions.delete(executionId);
+        }
+      );
+
+      // Store the execution
+      this.activeExecutions.set(executionId, { 
+        process: /** @type {any} */ (execution).process, 
+        ws
+      });
+
+      // Note: No automatic command is sent - user can type commands interactively
+
+    } catch (error) {
+      this.sendMessage(ws, {
+        type: 'error',
+        data: `SSH shell execution failed: ${error instanceof Error ? error.message : String(error)}`,
+        timestamp: Date.now()
+      });
+    }
+  }
 }
 
 // TerminalHandler removed - not used by current application

src/app/_components/CategorySidebar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { ContextualHelpIcon } from './ContextualHelpIcon';
 
 interface CategorySidebarProps {
   categories: string[];
@@ -201,9 +202,12 @@ export function CategorySidebar({
       {/* Header */}
       <div className="flex items-center justify-between p-4 border-b border-border">
         {!isCollapsed && (
-          <div>
-            <h3 className="text-lg font-semibold text-foreground">Categories</h3>
-            <p className="text-sm text-muted-foreground">{totalScripts} Total scripts</p>
+          <div className="flex items-center justify-between w-full">
+            <div>
+              <h3 className="text-lg font-semibold text-foreground">Categories</h3>
+              <p className="text-sm text-muted-foreground">{totalScripts} Total scripts</p>
+            </div>
+            <ContextualHelpIcon section="available-scripts" tooltip="Help with categories" />
           </div>
         )}
         <button

src/app/_components/ConfirmationModal.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from './ui/button';
+import { AlertTriangle, Info } from 'lucide-react';
+
+interface ConfirmationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+  variant: 'simple' | 'danger';
+  confirmText?: string; // What the user must type for danger variant
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+}
+
+export function ConfirmationModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  variant,
+  confirmText,
+  confirmButtonText = 'Confirm',
+  cancelButtonText = 'Cancel'
+}: ConfirmationModalProps) {
+  const [typedText, setTypedText] = useState('');
+
+  if (!isOpen) return null;
+
+  const isDanger = variant === 'danger';
+  const isConfirmEnabled = isDanger ? typedText === confirmText : true;
+
+  const handleConfirm = () => {
+    if (isConfirmEnabled) {
+      onConfirm();
+      setTypedText(''); // Reset for next time
+    }
+  };
+
+  const handleClose = () => {
+    onClose();
+    setTypedText(''); // Reset when closing
+  };
+
+  return (
+    <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-card rounded-lg shadow-xl max-w-md w-full border border-border">
+        {/* Header */}
+        <div className="flex items-center justify-center p-6 border-b border-border">
+          <div className="flex items-center gap-3">
+            {isDanger ? (
+              <AlertTriangle className="h-8 w-8 text-red-600" />
+            ) : (
+              <Info className="h-8 w-8 text-blue-600" />
+            )}
+            <h2 className="text-2xl font-bold text-card-foreground">{title}</h2>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-6">
+          <p className="text-sm text-muted-foreground mb-6">
+            {message}
+          </p>
+
+          {/* Type-to-confirm input for danger variant */}
+          {isDanger && confirmText && (
+            <div className="mb-6">
+              <label className="block text-sm font-medium text-foreground mb-2">
+                Type <code className="bg-muted px-2 py-1 rounded text-sm">{confirmText}</code> to confirm:
+              </label>
+              <input
+                type="text"
+                value={typedText}
+                onChange={(e) => setTypedText(e.target.value)}
+                className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring"
+                placeholder={`Type "${confirmText}" here`}
+                autoComplete="off"
+              />
+            </div>
+          )}
+
+          {/* Action Buttons */}
+          <div className="flex flex-col sm:flex-row justify-end gap-3">
+            <Button
+              onClick={handleClose}
+              variant="outline"
+              size="default"
+              className="w-full sm:w-auto"
+            >
+              {cancelButtonText}
+            </Button>
+            <Button
+              onClick={handleConfirm}
+              disabled={!isConfirmEnabled}
+              variant={isDanger ? "destructive" : "default"}
+              size="default"
+              className="w-full sm:w-auto"
+            >
+              {confirmButtonText}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/_components/ContextualHelpIcon.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { useState } from 'react';
+import { HelpModal } from './HelpModal';
+import { HelpCircle } from 'lucide-react';
+
+interface ContextualHelpIconProps {
+  section: string;
+  className?: string;
+  size?: 'sm' | 'default';
+  tooltip?: string;
+}
+
+export function ContextualHelpIcon({ 
+  section, 
+  className = '', 
+  size = 'sm',
+  tooltip = 'Help'
+}: ContextualHelpIconProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const sizeClasses = size === 'sm' 
+    ? 'h-7 w-7 p-1.5' 
+    : 'h-9 w-9 p-2';
+
+  return (
+    <>
+      <div
+        onClick={() => setIsOpen(true)}
+        className={`${sizeClasses} text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer inline-flex items-center justify-center rounded-md transition-colors ${className}`}
+        title={tooltip}
+      >
+        <HelpCircle className="w-4 h-4" />
+      </div>
+
+      <HelpModal 
+        isOpen={isOpen} 
+        onClose={() => setIsOpen(false)} 
+        initialSection={section}
+      />
+    </>
+  );
+}

src/app/_components/DownloadedScriptsTab.tsx

@@ -37,7 +37,7 @@ export function DownloadedScriptsTab({ onInstallScript }: DownloadedScriptsTabPr
   const gridRef = useRef<HTMLDivElement>(null);
 
   const { data: scriptCardsData, isLoading: githubLoading, error: githubError, refetch } = api.scripts.getScriptCardsWithCategories.useQuery();
-  const { data: localScriptsData, isLoading: localLoading, error: localError } = api.scripts.getCtScripts.useQuery();
+  const { data: localScriptsData, isLoading: localLoading, error: localError } = api.scripts.getAllDownloadedScripts.useQuery();
   const { data: scriptData } = api.scripts.getScriptBySlug.useQuery(
     { slug: selectedSlug ?? '' },
     { enabled: !!selectedSlug }
@@ -385,7 +385,7 @@ export function DownloadedScriptsTab({ onInstallScript }: DownloadedScriptsTabPr
     );
   }
 
-  if (!downloadedScripts || downloadedScripts.length === 0) {
+  if (!downloadedScripts?.length) {
     return (
       <div className="text-center py-12">
         <div className="text-muted-foreground">

src/app/_components/ErrorModal.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { useEffect } from 'react';
+import { Button } from './ui/button';
+import { AlertCircle, CheckCircle } from 'lucide-react';
+
+interface ErrorModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  message: string;
+  details?: string;
+  type?: 'error' | 'success';
+}
+
+export function ErrorModal({
+  isOpen,
+  onClose,
+  title,
+  message,
+  details,
+  type = 'error'
+}: ErrorModalProps) {
+  // Auto-close after 10 seconds
+  useEffect(() => {
+    if (isOpen) {
+      const timer = setTimeout(() => {
+        onClose();
+      }, 10000);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-card rounded-lg shadow-xl max-w-lg w-full border border-border">
+        {/* Header */}
+        <div className="flex items-center justify-center p-6 border-b border-border">
+          <div className="flex items-center gap-3">
+            {type === 'success' ? (
+              <CheckCircle className="h-8 w-8 text-green-600 dark:text-green-400" />
+            ) : (
+              <AlertCircle className="h-8 w-8 text-red-600 dark:text-red-400" />
+            )}
+            <h2 className="text-xl font-semibold text-foreground">{title}</h2>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-6">
+          <p className="text-sm text-foreground mb-4">{message}</p>
+          {details && (
+            <div className={`rounded-lg p-3 ${
+              type === 'success'
+                ? 'bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-800'
+                : 'bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-800'
+            }`}>
+              <p className={`text-xs font-medium mb-1 ${
+                type === 'success'
+                  ? 'text-green-800 dark:text-green-200'
+                  : 'text-red-800 dark:text-red-200'
+              }`}>
+                {type === 'success' ? 'Details:' : 'Error Details:'}
+              </p>
+              <pre className={`text-xs whitespace-pre-wrap break-words ${
+                type === 'success'
+                  ? 'text-green-700 dark:text-green-300'
+                  : 'text-red-700 dark:text-red-300'
+              }`}>
+                {details}
+              </pre>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex justify-end gap-3 p-6 border-t border-border">
+          <Button variant="outline" onClick={onClose}>
+            Close
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/_components/FilterBar.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState } from "react";
 import { Button } from "./ui/button";
+import { ContextualHelpIcon } from "./ContextualHelpIcon";
 import { Package, Monitor, Wrench, Server, FileText, Calendar, RefreshCw, Filter } from "lucide-react";
 
 export interface FilterState {
@@ -92,15 +93,12 @@ export function FilterBar({
         </div>
       )}
 
-      {/* Filter Persistence Status */}
-      {!isLoadingFilters && saveFiltersEnabled && (
-        <div className="mb-4 flex items-center justify-center py-1">
-          <div className="flex items-center space-x-2 text-xs text-green-600">
-            <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
-              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-            </svg>
-            <span>Filters are being saved automatically</span>
-          </div>
+
+      {/* Filter Header */}
+      {!isLoadingFilters && (
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="text-lg font-medium text-foreground">Filter Scripts</h3>
+          <ContextualHelpIcon section="available-scripts" tooltip="Help with filtering and searching" />
         </div>
       )}
 
@@ -382,18 +380,30 @@ export function FilterBar({
 
       {/* Filter Summary and Clear All */}
       <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
-        <div className="text-sm text-muted-foreground">
-          {filteredCount === totalScripts ? (
-            <span>Showing all {totalScripts} scripts</span>
-          ) : (
-            <span>
-              {filteredCount} of {totalScripts} scripts{" "}
-              {hasActiveFilters && (
-                <span className="font-medium text-blue-600">
-                  (filtered)
-                </span>
-              )}
-            </span>
+        <div className="flex items-center gap-4">
+          <div className="text-sm text-muted-foreground">
+            {filteredCount === totalScripts ? (
+              <span>Showing all {totalScripts} scripts</span>
+            ) : (
+              <span>
+                {filteredCount} of {totalScripts} scripts{" "}
+                {hasActiveFilters && (
+                  <span className="font-medium text-blue-600">
+                    (filtered)
+                  </span>
+                )}
+              </span>
+            )}
+          </div>
+          
+          {/* Filter Persistence Status */}
+          {!isLoadingFilters && saveFiltersEnabled && (
+            <div className="flex items-center space-x-1 text-xs text-green-600">
+              <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+              </svg>
+              <span>Filters are being saved automatically</span>
+            </div>
           )}
         </div>
 

src/app/_components/Footer.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { api } from '~/trpc/react';
+import { Button } from './ui/button';
+import { ExternalLink, FileText } from 'lucide-react';
+
+interface FooterProps {
+  onOpenReleaseNotes: () => void;
+}
+
+export function Footer({ onOpenReleaseNotes }: FooterProps) {
+  const { data: versionData } = api.version.getCurrentVersion.useQuery();
+
+  return (
+    <footer className="sticky bottom-0 mt-auto border-t border-border bg-muted/30 py-3 backdrop-blur-sm">
+      <div className="container mx-auto px-4">
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-muted-foreground">
+          <div className="flex items-center gap-2">
+            <span>© 2024 PVE Scripts Local</span>
+            {versionData?.success && versionData.version && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onOpenReleaseNotes}
+                className="h-auto p-1 text-xs hover:text-foreground"
+              >
+                v{versionData.version}
+              </Button>
+            )}
+          </div>
+          
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onOpenReleaseNotes}
+              className="h-auto p-2 text-xs hover:text-foreground"
+            >
+              <FileText className="h-3 w-3 mr-1" />
+              Release Notes
+            </Button>
+            
+            <Button
+              variant="ghost"
+              size="sm"
+              asChild
+              className="h-auto p-2 text-xs hover:text-foreground"
+            >
+              <a
+                href="https://github.com/community-scripts/ProxmoxVE-Local"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1"
+              >
+                <ExternalLink className="h-3 w-3" />
+                GitHub
+              </a>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/app/_components/GeneralSettingsModal.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { Toggle } from './ui/toggle';
+import { ContextualHelpIcon } from './ContextualHelpIcon';
 
 interface GeneralSettingsModalProps {
   isOpen: boolean;
@@ -280,7 +281,10 @@ export function GeneralSettingsModal({ isOpen, onClose }: GeneralSettingsModalPr
       <div className="bg-card rounded-lg shadow-xl max-w-4xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden">
         {/* Header */}
         <div className="flex items-center justify-between p-4 sm:p-6 border-b border-border">
-          <h2 className="text-xl sm:text-2xl font-bold text-card-foreground">Settings</h2>
+          <div className="flex items-center gap-2">
+            <h2 className="text-xl sm:text-2xl font-bold text-card-foreground">Settings</h2>
+            <ContextualHelpIcon section="general-settings" tooltip="Help with General Settings" />
+          </div>
           <Button
             onClick={onClose}
             variant="ghost"

src/app/_components/HelpButton.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useState } from 'react';
+import { HelpModal } from './HelpModal';
+import { Button } from './ui/button';
+import { HelpCircle } from 'lucide-react';
+
+interface HelpButtonProps {
+  initialSection?: string;
+}
+
+export function HelpButton({ initialSection }: HelpButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+        <div className="text-sm text-muted-foreground font-medium">
+          Need help? 
+        </div>
+        <Button
+          onClick={() => setIsOpen(true)}
+          variant="outline"
+          size="default"
+          className="inline-flex items-center"
+          title="Open Help"
+        >
+          <HelpCircle className="w-5 h-5 mr-2" />
+          Help
+        </Button>
+      </div>
+
+      <HelpModal 
+        isOpen={isOpen} 
+        onClose={() => setIsOpen(false)} 
+        initialSection={initialSection}
+      />
+    </>
+  );
+}

src/app/_components/HelpModal.tsx

@@ -0,0 +1,688 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from './ui/button';
+import { HelpCircle, Server, Settings, RefreshCw, Package, HardDrive, FolderOpen, Search, Download } from 'lucide-react';
+
+interface HelpModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialSection?: string;
+}
+
+type HelpSection = 'server-settings' | 'general-settings' | 'sync-button' | 'available-scripts' | 'downloaded-scripts' | 'installed-scripts' | 'lxc-settings' | 'update-system';
+
+export function HelpModal({ isOpen, onClose, initialSection = 'server-settings' }: HelpModalProps) {
+  const [activeSection, setActiveSection] = useState<HelpSection>(initialSection as HelpSection);
+
+  if (!isOpen) return null;
+
+  const sections = [
+    { id: 'server-settings' as HelpSection, label: 'Server Settings', icon: Server },
+    { id: 'general-settings' as HelpSection, label: 'General Settings', icon: Settings },
+    { id: 'sync-button' as HelpSection, label: 'Sync Button', icon: RefreshCw },
+    { id: 'available-scripts' as HelpSection, label: 'Available Scripts', icon: Package },
+    { id: 'downloaded-scripts' as HelpSection, label: 'Downloaded Scripts', icon: HardDrive },
+    { id: 'installed-scripts' as HelpSection, label: 'Installed Scripts', icon: FolderOpen },
+    { id: 'lxc-settings' as HelpSection, label: 'LXC Settings', icon: Settings },
+    { id: 'update-system' as HelpSection, label: 'Update System', icon: Download },
+  ];
+
+  const renderContent = () => {
+    switch (activeSection) {
+      case 'server-settings':
+        return (
+          <div className="space-y-6">
+            <div>
+              <h3 className="text-xl font-semibold text-foreground mb-4">Server Settings</h3>
+              <p className="text-muted-foreground mb-6">
+                Manage your Proxmox VE servers and configure connection settings.
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Adding PVE Servers</h4>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Server Name:</strong> A friendly name to identify your server</li>
+                  <li>• <strong>IP Address:</strong> The IP address or hostname of your PVE server</li>
+                  <li>• <strong>Username:</strong> PVE user account (usually root or a dedicated user)</li>
+                  <li>• <strong>SSH Port:</strong> Default is 22, change if your server uses a different port</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Authentication Types</h4>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Password:</strong> Use username and password authentication</li>
+                  <li>• <strong>SSH Key:</strong> Use SSH key pair for secure authentication</li>
+                </ul>
+                <div className="mt-3 p-3 bg-blue-50 dark:bg-blue-950/20 rounded-md">
+                  <h5 className="font-medium text-blue-900 dark:text-blue-100 mb-2">SSH Key Features:</h5>
+                  <ul className="text-xs text-blue-800 dark:text-blue-200 space-y-1">
+                    <li>• <strong>Generate Key Pair:</strong> Create new SSH keys automatically</li>
+                    <li>• <strong>View Public Key:</strong> Copy public key for server setup</li>
+                    <li>• <strong>Persistent Storage:</strong> Keys are stored securely on disk</li>
+                  </ul>
+                </div>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Server Color Coding</h4>
+                <p className="text-sm text-muted-foreground">
+                  Assign colors to servers for visual distinction throughout the application. 
+                  This helps identify which server you&apos;re working with when managing scripts.
+                  This needs to be enabled in the General Settings.
+                </p>
+              </div>
+            </div>
+          </div>
+        );
+
+      case 'general-settings':
+        return (
+          <div className="space-y-6">
+            <div>
+              <h3 className="text-xl font-semibold text-foreground mb-4">General Settings</h3>
+              <p className="text-muted-foreground mb-6">
+                Configure application preferences and behavior.
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Save Filters</h4>
+                <p className="text-sm text-muted-foreground mb-2">
+                  When enabled, your script filter preferences (search terms, categories, sorting) 
+                  will be automatically saved and restored when you return to the application.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li>• Search queries are preserved</li>
+                  <li>• Selected script types are remembered</li>
+                  <li>• Sort preferences are maintained</li>
+                  <li>• Category selections are saved</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Server Color Coding</h4>
+                <p className="text-sm text-muted-foreground">
+                  Enable visual color coding for servers throughout the application. 
+                  This makes it easier to identify which server you&apos;re working with.
+                </p>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">GitHub Integration</h4>
+                <p className="text-sm text-muted-foreground mb-2">
+                  Add a GitHub Personal Access Token to increase API rate limits and improve performance.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li>• Bypasses GitHub&apos;s rate limiting for unauthenticated requests</li>
+                  <li>• Improves script loading and syncing performance</li>
+                  <li>• Token is stored securely and only used for API calls</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Authentication</h4>
+                <p className="text-sm text-muted-foreground mb-2">
+                  Secure your application with username and password authentication.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li>• Set up username and password for app access</li>
+                  <li>• Enable/disable authentication as needed</li>
+                  <li>• Credentials are stored securely</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        );
+
+      case 'sync-button':
+        return (
+          <div className="space-y-6">
+            <div>
+              <h3 className="text-xl font-semibold text-foreground mb-4">Sync Button</h3>
+              <p className="text-muted-foreground mb-6">
+                Synchronize script metadata from the ProxmoxVE GitHub repository.
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">What Does Syncing Do?</h4>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Updates Script Metadata:</strong> Downloads the latest script information (JSON files)</li>
+                  <li>• <strong>Refreshes Available Scripts:</strong> Updates the list of scripts you can download</li>
+                  <li>• <strong>Updates Categories:</strong> Refreshes script categories and organization</li>
+                  <li>• <strong>Checks for Updates:</strong> Identifies which downloaded scripts have newer versions</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Important Notes</h4>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Metadata Only:</strong> Syncing only updates script information, not the actual script files</li>
+                  <li>• <strong>No Downloads:</strong> Script files are downloaded separately when you choose to install them</li>
+                  <li>• <strong>Last Sync Time:</strong> Shows when the last successful sync occurred</li>
+                  <li>• <strong>Rate Limits:</strong> GitHub API limits may apply without a personal access token</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">When to Sync</h4>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li>• When you want to see the latest available scripts</li>
+                  <li>• To check for updates to your downloaded scripts</li>
+                  <li>• If you notice scripts are missing or outdated</li>
+                  <li>• After the ProxmoxVE repository has been updated</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        );
+
+      case 'available-scripts':
+        return (
+          <div className="space-y-6">
+            <div>
+              <h3 className="text-xl font-semibold text-foreground mb-4">Available Scripts</h3>
+              <p className="text-muted-foreground mb-6">
+                Browse and discover scripts from the ProxmoxVE repository.
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Browsing Scripts</h4>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Category Sidebar:</strong> Filter scripts by category (Storage, Network, Security, etc.)</li>
+                  <li>• <strong>Search:</strong> Find scripts by name or description</li>
+                  <li>• <strong>View Modes:</strong> Switch between card and list view</li>
+                  <li>• <strong>Sorting:</strong> Sort by name or creation date</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Filtering Options</h4>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Script Types:</strong> Filter by CT (Container) or other script types</li>
+                  <li>• <strong>Update Status:</strong> Show only scripts with available updates</li>
+                  <li>• <strong>Search Query:</strong> Search within script names and descriptions</li>
+                  <li>• <strong>Categories:</strong> Filter by specific script categories</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Script Actions</h4>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>View Details:</strong> Click on a script to see full information and documentation</li>
+                  <li>• <strong>Download:</strong> Download script files to your local system</li>
+                  <li>• <strong>Install:</strong> Run scripts directly on your PVE servers</li>
+                  <li>• <strong>Preview:</strong> View script content before downloading</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        );
+
+      case 'downloaded-scripts':
+        return (
+          <div className="space-y-6">
+            <div>
+              <h3 className="text-xl font-semibold text-foreground mb-4">Downloaded Scripts</h3>
+              <p className="text-muted-foreground mb-6">
+                Manage scripts that have been downloaded to your local system.
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">What Are Downloaded Scripts?</h4>
+                <p className="text-sm text-muted-foreground mb-2">
+                  These are scripts that you&apos;ve downloaded from the repository and are stored locally on your system.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li>• Script files are stored in your local scripts directory</li>
+                  <li>• You can run these scripts on your PVE servers</li>
+                  <li>• Scripts can be updated when newer versions are available</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Update Detection</h4>
+                <p className="text-sm text-muted-foreground mb-2">
+                  The system automatically checks if newer versions of your downloaded scripts are available.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li>• Scripts with updates available are marked with an update indicator</li>
+                  <li>• You can filter to show only scripts with available updates</li>
+                  <li>• Update detection happens when you sync with the repository</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Managing Downloaded Scripts</h4>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Update Scripts:</strong> Download the latest version of a script</li>
+                  <li>• <strong>View Details:</strong> See script information and documentation</li>
+                  <li>• <strong>Install/Run:</strong> Execute scripts on your PVE servers</li>
+                  <li>• <strong>Filter & Search:</strong> Use the same filtering options as Available Scripts</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        );
+
+      case 'installed-scripts':
+        return (
+          <div className="space-y-6">
+            <div>
+              <h3 className="text-xl font-semibold text-foreground mb-4">Installed Scripts</h3>
+              <p className="text-muted-foreground mb-6">
+                Track and manage scripts that are installed on your PVE servers.
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div className="p-4 border border-border rounded-lg bg-muted/50 border-primary/20">
+                <h4 className="font-medium text-foreground mb-2 flex items-center gap-2">
+                  <Search className="w-4 h-4" />
+                  Auto-Detection (Primary Feature)
+                </h4>
+                <p className="text-sm text-muted-foreground mb-3">
+                  The system can automatically detect LXC containers that have community-script tags on your PVE servers.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Automatic Discovery:</strong> Scans your PVE servers for containers with community-script tags</li>
+                  <li>• <strong>Container Detection:</strong> Identifies LXC containers running Proxmox helper scripts</li>
+                  <li>• <strong>Server Association:</strong> Links detected scripts to the specific PVE server</li>
+                  <li>• <strong>Bulk Import:</strong> Automatically creates records for all detected scripts</li>
+                </ul>
+                <div className="mt-3 p-3 bg-primary/10 rounded-lg border border-primary/20">
+                  <p className="text-sm font-medium text-primary">How Auto-Detection Works:</p>
+                  <ol className="text-sm text-muted-foreground mt-1 space-y-1">
+                    <li>1. Connects to your configured PVE servers</li>
+                    <li>2. Scans LXC container configurations</li>
+                    <li>3. Looks for containers with community-script tags</li>
+                    <li>4. Creates installed script records automatically</li>
+                  </ol>
+                </div>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Manual Script Management</h4>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Add Scripts Manually:</strong> Create records for scripts not auto-detected</li>
+                  <li>• <strong>Edit Script Details:</strong> Update script names and container IDs</li>
+                  <li>• <strong>Delete Scripts:</strong> Remove scripts from tracking</li>
+                  <li>• <strong>Bulk Operations:</strong> Clean up old or invalid script records</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Script Tracking Features</h4>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Installation Status:</strong> Track success, failure, or in-progress installations</li>
+                  <li>• <strong>Server Association:</strong> Know which server each script is installed on</li>
+                  <li>• <strong>Container ID:</strong> Link scripts to specific LXC containers</li>
+                  <li>• <strong>Web UI Access:</strong> Track and access Web UI IP addresses and ports</li>
+                  <li>• <strong>Execution Logs:</strong> View output and logs from script installations</li>
+                  <li>• <strong>Filtering:</strong> Filter by server, status, or search terms</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Managing Installed Scripts</h4>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>View All Scripts:</strong> See all tracked scripts across all servers</li>
+                  <li>• <strong>Filter by Server:</strong> Show scripts for a specific PVE server</li>
+                  <li>• <strong>Filter by Status:</strong> Show successful, failed, or in-progress installations</li>
+                  <li>• <strong>Sort Options:</strong> Sort by name, container ID, server, status, or date</li>
+                  <li>• <strong>Update Scripts:</strong> Re-run or update existing script installations</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg bg-blue-900/20 border-blue-700/50">
+                <h4 className="font-medium text-foreground mb-2">Web UI Access </h4>
+                <p className="text-sm text-muted-foreground mb-3">
+                  Automatically detect and access Web UI interfaces for your installed scripts.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Auto-Detection:</strong> Automatically detects Web UI URLs from script installation output</li>
+                  <li>• <strong>IP & Port Tracking:</strong> Stores and displays Web UI IP addresses and ports</li>
+                  <li>• <strong>One-Click Access:</strong> Click IP:port to open Web UI in new tab</li>
+                  <li>• <strong>Manual Detection:</strong> Re-detect IP using <code>hostname -I</code> inside container</li>
+                  <li>• <strong>Port Detection:</strong> Uses script metadata to get correct port (e.g., actualbudget:5006)</li>
+                  <li>• <strong>Editable Fields:</strong> Manually edit IP and port values as needed</li>
+                </ul>
+                <div className="mt-3 p-3 bg-blue-900/30 rounded-lg border border-blue-700/30">
+                  <p className="text-sm font-medium text-blue-300">💡 How it works:</p>
+                  <ul className="text-sm text-muted-foreground mt-1 space-y-1">
+                    <li>• Scripts automatically detect URLs like <code>http://10.10.10.1:3000</code> during installation</li>
+                    <li>• Re-detect button runs <code>hostname -I</code> inside the container via SSH</li>
+                    <li>• Port defaults to 80, but uses script metadata when available</li>
+                    <li>• Web UI buttons are disabled when container is stopped</li>
+                  </ul>
+                </div>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg bg-accent/50 dark:bg-accent/20">
+                <h4 className="font-medium text-foreground mb-2">Actions Dropdown </h4>
+                <p className="text-sm text-muted-foreground mb-3">
+                  Clean interface with all actions organized in a dropdown menu.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Edit Button:</strong> Always visible for quick script editing</li>
+                  <li>• <strong>Actions Dropdown:</strong> Contains Update, Shell, Open UI, Start/Stop, Destroy, Delete</li>
+                  <li>• <strong>Smart Visibility:</strong> Dropdown only appears when actions are available</li>
+                  <li>• <strong>Color Coding:</strong> Start (green), Stop (red), Update (cyan), Shell (gray), Open UI (blue)</li>
+                  <li>• <strong>Auto-Close:</strong> Dropdown closes after clicking any action</li>
+                  <li>• <strong>Disabled States:</strong> Actions are disabled when container is stopped</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg bg-accent/50 dark:bg-accent/20">
+                <h4 className="font-medium text-foreground mb-2">Container Control</h4>
+                <p className="text-sm text-muted-foreground mb-3">
+                  Directly control LXC containers from the installed scripts page via SSH.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Start/Stop Button:</strong> Control container state with <code>pct start/stop &lt;ID&gt;</code></li>
+                  <li>• <strong>Container Status:</strong> Real-time status indicator (running/stopped/unknown)</li>
+                  <li>• <strong>Destroy Button:</strong> Permanently remove LXC container with <code>pct destroy &lt;ID&gt;</code></li>
+                  <li>• <strong>Confirmation Modals:</strong> Simple OK/Cancel for start/stop, type container ID to confirm destroy</li>
+                  <li>• <strong>SSH Execution:</strong> All commands executed remotely via configured SSH connections</li>
+                </ul>
+                <div className="mt-3 p-3 bg-muted/30 dark:bg-muted/20 rounded-lg border border-border">
+                  <p className="text-sm font-medium text-foreground">⚠️ Safety Features:</p>
+                  <ul className="text-sm text-muted-foreground mt-1 space-y-1">
+                    <li>• Start/Stop actions require simple confirmation</li>
+                    <li>• Destroy action requires typing the container ID to confirm</li>
+                    <li>• All actions show loading states and error handling</li>
+                    <li>• Only works with SSH scripts that have valid container IDs</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+
+      case 'update-system':
+        return (
+          <div className="space-y-6">
+            <div>
+              <h3 className="text-xl font-semibold text-foreground mb-4">Update System</h3>
+              <p className="text-muted-foreground mb-6">
+                Keep your PVE Scripts Management application up to date with the latest features and improvements.
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">What Does Updating Do?</h4>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Downloads Latest Version:</strong> Fetches the newest release from the GitHub repository</li>
+                  <li>• <strong>Updates Application Files:</strong> Replaces current files with the latest version</li>
+                  <li>• <strong>Installs Dependencies:</strong> Updates Node.js packages and dependencies</li>
+                  <li>• <strong>Rebuilds Application:</strong> Compiles the application with latest changes</li>
+                  <li>• <strong>Restarts Server:</strong> Automatically restarts the application server</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">How to Update</h4>
+                <div className="space-y-3">
+                  <div>
+                    <h5 className="font-medium text-foreground mb-2">Automatic Update (Recommended)</h5>
+                    <ul className="text-sm text-muted-foreground space-y-1">
+                      <li>• Click the &quot;Update Now&quot; button when an update is available</li>
+                      <li>• The system will handle everything automatically</li>
+                      <li>• You&apos;ll see a progress overlay with update logs</li>
+                      <li>• The page will reload automatically when complete</li>
+                    </ul>
+                  </div>
+                  
+                  <div>
+                    <h5 className="font-medium text-foreground mb-2">Manual Update (Advanced)</h5>
+                    <p className="text-sm text-muted-foreground mb-2">If automatic update fails, you can update manually:</p>
+                    <div className="bg-muted p-3 rounded-lg font-mono text-sm">
+                      <div className="text-muted-foreground"># Navigate to the application directory</div>
+                      <div>cd $PVESCRIPTLOCAL_DIR</div>
+                      <div className="text-muted-foreground"># Pull latest changes</div>
+                      <div>git pull</div>
+                      <div className="text-muted-foreground"># Install dependencies</div>
+                      <div>npm install</div>
+                      <div className="text-muted-foreground"># Build the application</div>
+                      <div>npm run build</div>
+                      <div className="text-muted-foreground"># Start the application</div>
+                      <div>npm start</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Update Process</h4>
+                <ol className="text-sm text-muted-foreground space-y-2">
+                  <li><strong>1. Check for Updates:</strong> System automatically checks GitHub for new releases</li>
+                  <li><strong>2. Download Update:</strong> Downloads the latest release files</li>
+                  <li><strong>3. Backup Current Version:</strong> Creates backup of current installation</li>
+                  <li><strong>4. Install New Version:</strong> Replaces files and updates dependencies</li>
+                  <li><strong>5. Build Application:</strong> Compiles the updated code</li>
+                  <li><strong>6. Restart Server:</strong> Stops old server and starts new version</li>
+                  <li><strong>7. Reload Page:</strong> Automatically refreshes the browser</li>
+                </ol>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Release Notes</h4>
+                <p className="text-sm text-muted-foreground mb-2">
+                  Click the external link icon next to the update button to view detailed release notes on GitHub.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li>• See what&apos;s new in each version</li>
+                  <li>• Read about bug fixes and improvements</li>
+                  <li>• Check for any breaking changes</li>
+                  <li>• View installation requirements</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg bg-muted/50">
+                <h4 className="font-medium text-foreground mb-2">Important Notes</h4>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Backup:</strong> Your data and settings are preserved during updates</li>
+                  <li>• <strong>Downtime:</strong> Brief downtime occurs during the update process</li>
+                  <li>• <strong>Compatibility:</strong> Updates maintain backward compatibility with your data</li>
+                  <li>• <strong>Rollback:</strong> If issues occur, you can manually revert to previous version</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        );
+
+      case 'lxc-settings':
+        return (
+          <div className="space-y-6">
+            <div>
+              <h3 className="text-xl font-semibold text-foreground mb-4">LXC Settings</h3>
+              <p className="text-muted-foreground mb-6">
+                Edit LXC container configuration files directly from the installed scripts interface. This feature allows you to modify container settings without manually accessing the Proxmox VE server.
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Overview</h4>
+                <p className="text-sm text-muted-foreground mb-3">
+                  The LXC Settings modal provides a user-friendly interface to edit container configuration files. It parses common settings into editable fields while preserving advanced configurations.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li>• <strong>Common Settings:</strong> Edit basic container parameters like cores, memory, network, and storage</li>
+                  <li>• <strong>Advanced Settings:</strong> Raw text editing for lxc.* entries and other advanced configurations</li>
+                  <li>• <strong>Database Caching:</strong> Configurations are cached locally for faster access</li>
+                  <li>• <strong>Change Detection:</strong> Warns when cached config differs from server version</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Common Settings Tab</h4>
+                <div className="space-y-3">
+                  <div>
+                    <h5 className="font-medium text-sm text-foreground mb-1">Basic Configuration</h5>
+                    <ul className="text-sm text-muted-foreground space-y-1">
+                      <li>• <strong>Architecture:</strong> Container architecture (usually amd64)</li>
+                      <li>• <strong>Cores:</strong> Number of CPU cores allocated to the container</li>
+                      <li>• <strong>Memory:</strong> RAM allocation in megabytes</li>
+                      <li>• <strong>Swap:</strong> Swap space allocation in megabytes</li>
+                      <li>• <strong>Hostname:</strong> Container hostname</li>
+                      <li>• <strong>OS Type:</strong> Operating system type (e.g., debian, ubuntu)</li>
+                      <li>• <strong>Start on Boot:</strong> Whether to start container automatically on host boot</li>
+                      <li>• <strong>Unprivileged:</strong> Whether the container runs in unprivileged mode</li>
+                    </ul>
+                  </div>
+                  
+                  <div>
+                    <h5 className="font-medium text-sm text-foreground mb-1">Network Configuration</h5>
+                    <ul className="text-sm text-muted-foreground space-y-1">
+                      <li>• <strong>IP Configuration:</strong> Choose between DHCP or static IP assignment</li>
+                      <li>• <strong>IP Address:</strong> Static IP with CIDR notation (e.g., 10.10.10.164/24)</li>
+                      <li>• <strong>Gateway:</strong> Network gateway for static IP configuration</li>
+                      <li>• <strong>Bridge:</strong> Network bridge interface (usually vmbr0)</li>
+                      <li>• <strong>MAC Address:</strong> Hardware address for the network interface</li>
+                      <li>• <strong>VLAN Tag:</strong> Optional VLAN tag for network segmentation</li>
+                    </ul>
+                  </div>
+
+                  <div>
+                    <h5 className="font-medium text-sm text-foreground mb-1">Storage & Features</h5>
+                    <ul className="text-sm text-muted-foreground space-y-1">
+                      <li>• <strong>Root Filesystem:</strong> Storage location and disk identifier</li>
+                      <li>• <strong>Size:</strong> Disk size allocation (e.g., 4G, 8G)</li>
+                      <li>• <strong>Features:</strong> Container capabilities (keyctl, nesting, fuse)</li>
+                      <li>• <strong>Tags:</strong> Comma-separated tags for organization</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Advanced Settings Tab</h4>
+                <p className="text-sm text-muted-foreground mb-3">
+                  The Advanced Settings tab provides raw text editing for configurations not covered in the Common Settings tab.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li>• <strong>lxc.* entries:</strong> Low-level LXC configuration options</li>
+                  <li>• <strong>Comments:</strong> Configuration file comments and documentation</li>
+                  <li>• <strong>Custom settings:</strong> Any other configuration parameters</li>
+                  <li>• <strong>Preservation:</strong> All content is preserved when switching between tabs</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Saving Changes</h4>
+                <div className="space-y-3">
+                  <p className="text-sm text-muted-foreground">
+                    To save configuration changes, you must type the container ID exactly as shown to confirm your changes.
+                  </p>
+                  <div className="bg-yellow-50 dark:bg-yellow-950/20 border border-yellow-200 dark:border-yellow-800 rounded-md p-3">
+                    <h5 className="font-medium text-yellow-800 dark:text-yellow-200 mb-2">⚠️ Important Warnings</h5>
+                    <ul className="text-sm text-yellow-700 dark:text-yellow-300 space-y-1">
+                      <li>• Modifying LXC configuration can break your container</li>
+                      <li>• Some changes may require container restart to take effect</li>
+                      <li>• Always backup your configuration before making changes</li>
+                      <li>• Test changes in a non-production environment first</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Sync from Server</h4>
+                <p className="text-sm text-muted-foreground mb-3">
+                  The &quot;Sync from Server&quot; button allows you to refresh the configuration from the actual server file, useful when:
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li>• Configuration was modified outside of this interface</li>
+                  <li>• You want to discard local changes and get the latest server version</li>
+                  <li>• The warning banner indicates the cached config differs from server</li>
+                  <li>• You want to ensure you&apos;re working with the most current configuration</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg">
+                <h4 className="font-medium text-foreground mb-2">Database Caching</h4>
+                <p className="text-sm text-muted-foreground mb-3">
+                  LXC configurations are cached in the database for improved performance and offline access.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li>• <strong>Automatic caching:</strong> Configs are cached during auto-detection and after saves</li>
+                  <li>• <strong>Cache expiration:</strong> Cached configs expire after 5 minutes for freshness</li>
+                  <li>• <strong>Change detection:</strong> Hash comparison detects external modifications</li>
+                  <li>• <strong>Manual sync:</strong> Always available via the &quot;Sync from Server&quot; button</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-2 sm:p-4">
+      <div className="bg-card rounded-lg shadow-xl max-w-6xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 sm:p-6 border-b border-border">
+          <h2 className="text-xl sm:text-2xl font-bold text-card-foreground flex items-center gap-2">
+            <HelpCircle className="w-6 h-6" />
+            Help & Documentation
+          </h2>
+          <Button
+            onClick={onClose}
+            variant="ghost"
+            size="icon"
+            className="text-muted-foreground hover:text-foreground"
+          >
+            <svg className="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </Button>
+        </div>
+
+        <div className="flex h-[calc(95vh-120px)] sm:h-[calc(90vh-140px)]">
+          {/* Sidebar Navigation */}
+          <div className="w-64 border-r border-border bg-muted/30 overflow-y-auto">
+            <nav className="p-4 space-y-2">
+              {sections.map((section) => {
+                const Icon = section.icon;
+                return (
+                  <Button
+                    key={section.id}
+                    onClick={() => setActiveSection(section.id)}
+                    variant={activeSection === section.id ? "default" : "ghost"}
+                    size="sm"
+                    className="w-full justify-start gap-2 text-left"
+                  >
+                    <Icon className="w-4 h-4" />
+                    {section.label}
+                  </Button>
+                );
+              })}
+            </nav>
+          </div>
+
+          {/* Content Area */}
+          <div className="flex-1 overflow-y-auto">
+            <div className="p-4 sm:p-6">
+              {renderContent()}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/_components/LXCSettingsModal.tsx

@@ -0,0 +1,725 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { api } from '~/trpc/react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Badge } from './ui/badge';
+import { ContextualHelpIcon } from './ContextualHelpIcon';
+import { LoadingModal } from './LoadingModal';
+import { ConfirmationModal } from './ConfirmationModal';
+import { RefreshCw, AlertTriangle, CheckCircle } from 'lucide-react';
+
+interface InstalledScript {
+  id: number;
+  script_name: string;
+  container_id: string | null;
+  server_id: number | null;
+  server_name: string | null;
+  server_ip: string | null;
+  server_user: string | null;
+  server_password: string | null;
+  server_auth_type: string | null;
+  server_ssh_key: string | null;
+  server_ssh_key_passphrase: string | null;
+  server_ssh_port: number | null;
+  server_color: string | null;
+  installation_date: string;
+  status: 'in_progress' | 'success' | 'failed';
+  output_log: string | null;
+  execution_mode: 'local' | 'ssh';
+  container_status?: 'running' | 'stopped' | 'unknown';
+  web_ui_ip: string | null;
+  web_ui_port: number | null;
+}
+
+interface LXCSettingsModalProps {
+  isOpen: boolean;
+  script: InstalledScript | null;
+  onClose: () => void;
+  onSave: () => void;
+}
+
+export function LXCSettingsModal({ isOpen, script, onClose, onSave }: LXCSettingsModalProps) {
+  const [activeTab, setActiveTab] = useState<string>('common');
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const [showResultModal, setShowResultModal] = useState(false);
+  const [resultType, setResultType] = useState<'success' | 'error' | null>(null);
+  const [resultMessage, setResultMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [forceSync] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const [formData, setFormData] = useState<any>({
+    arch: '',
+    cores: 0,
+    memory: 0,
+    hostname: '',
+    swap: 0,
+    onboot: false,
+    ostype: '',
+    unprivileged: false,
+    net_name: '',
+    net_bridge: '',
+    net_hwaddr: '',
+    net_ip_type: 'dhcp',
+    net_ip: '',
+    net_gateway: '',
+    net_type: '',
+    net_vlan: 0,
+    rootfs_storage: '',
+    rootfs_size: '',
+    feature_keyctl: false,
+    feature_nesting: false,
+    feature_fuse: false,
+    feature_mount: '',
+    tags: '',
+    advanced_config: ''
+  });
+
+  // tRPC hooks
+  const { data: configData, isLoading, refetch } = api.installedScripts.getLXCConfig.useQuery(
+    { scriptId: script?.id ?? 0, forceSync },
+    { enabled: !!script && isOpen }
+  );
+
+  const saveMutation = api.installedScripts.saveLXCConfig.useMutation({
+    onSuccess: (data) => {
+      console.log('Save mutation success data:', data);
+      setIsSaving(false);
+      setShowConfirmation(false);
+      
+      if (data.success) {
+        setResultType('success');
+        setResultMessage(data.message ?? 'LXC configuration saved successfully');
+        setHasChanges(false);
+      } else {
+        console.log('Backend returned error:', data.error);
+        setResultType('error');
+        setResultMessage(data.error ?? 'Failed to save configuration');
+      }
+      setShowResultModal(true);
+    },
+    onError: (err) => {
+      console.log('Save mutation error:', err);
+      setIsSaving(false);
+      setShowConfirmation(false);
+      setResultType('error');
+      setResultMessage(`Failed to save configuration: ${err.message}`);
+      setShowResultModal(true);
+    }
+  });
+
+  const syncMutation = api.installedScripts.syncLXCConfig.useMutation({
+    onSuccess: (result) => {
+      populateFormData(result);
+      setHasChanges(false);
+    },
+    onError: (err) => {
+      setError(`Failed to sync configuration: ${err.message}`);
+    }
+  });
+
+  // Populate form data helper
+  const populateFormData = (result: any) => {
+    if (!result?.success) return;
+    const config = result.config;
+    setFormData({
+      arch: config.arch ?? '',
+      cores: config.cores ?? 0,
+      memory: config.memory ?? 0,
+      hostname: config.hostname ?? '',
+      swap: config.swap ?? 0,
+      onboot: config.onboot === 1,
+      ostype: config.ostype ?? '',
+      unprivileged: config.unprivileged === 1,
+      net_name: config.net_name ?? '',
+      net_bridge: config.net_bridge ?? '',
+      net_hwaddr: config.net_hwaddr ?? '',
+      net_ip_type: config.net_ip_type ?? 'dhcp',
+      net_ip: config.net_ip ?? '',
+      net_gateway: config.net_gateway ?? '',
+      net_type: config.net_type ?? '',
+      net_vlan: config.net_vlan ?? 0,
+      rootfs_storage: config.rootfs_storage ?? '',
+      rootfs_size: config.rootfs_size ?? '',
+      feature_keyctl: config.feature_keyctl === 1,
+      feature_nesting: config.feature_nesting === 1,
+      feature_fuse: config.feature_fuse === 1,
+      feature_mount: config.feature_mount ?? '',
+      tags: config.tags ?? '',
+      advanced_config: config.advanced_config ?? ''
+    });
+  };
+
+  // Load config when data arrives
+  useEffect(() => {
+    if (configData?.success) {
+      populateFormData(configData);
+      setHasChanges(false);
+    } else if (configData && !configData.success) {
+      setError(String(configData.error ?? 'Failed to load configuration'));
+    }
+  }, [configData]);
+
+  const handleInputChange = (field: string, value: any): void => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    setFormData((prev: any) => ({ ...prev, [field]: value }));
+    setHasChanges(true);
+  };
+
+  const handleSyncFromServer = () => {
+    if (!script) return;
+    setError(null);
+    syncMutation.mutate({ scriptId: script.id });
+  };
+
+  const validateForm = () => {
+    // Check required fields
+    if (!formData.arch?.trim()) {
+      setError('Architecture is required');
+      return false;
+    }
+    if (!formData.cores || formData.cores < 1) {
+      setError('Cores must be at least 1');
+      return false;
+    }
+    if (!formData.memory || formData.memory < 128) {
+      setError('Memory must be at least 128 MB');
+      return false;
+    }
+    if (!formData.hostname?.trim()) {
+      setError('Hostname is required');
+      return false;
+    }
+    if (!formData.ostype?.trim()) {
+      setError('OS Type is required');
+      return false;
+    }
+    if (!formData.rootfs_storage?.trim()) {
+      setError('Root filesystem storage is required');
+      return false;
+    }
+    
+    // Check if trying to decrease disk size
+    const currentSize = configData?.config?.rootfs_size ?? '0G';
+    const newSize = formData.rootfs_size ?? '0G';
+    const currentSizeGB = parseFloat(String(currentSize));
+    const newSizeGB = parseFloat(String(newSize));
+    
+    if (newSizeGB < currentSizeGB) {
+      setError('Disk size cannot be decreased. Only increases are allowed for safety.');
+      return false;
+    }
+    
+    return true;
+  };
+
+  const handleSave = () => {
+    setError(null);
+    
+    // Validate form - only show confirmation modal if no errors
+    if (validateForm()) {
+      setShowConfirmation(true);
+    }
+  };
+
+  const handleConfirmSave = () => {
+    if (!script) return;
+    setError(null);
+    setIsSaving(true);
+    setShowConfirmation(false);
+    
+    saveMutation.mutate({
+      scriptId: script.id,
+      config: {
+        ...formData,
+        onboot: formData.onboot ? 1 : 0,
+        unprivileged: formData.unprivileged ? 1 : 0,
+        feature_keyctl: formData.feature_keyctl ? 1 : 0,
+        feature_nesting: formData.feature_nesting ? 1 : 0,
+        feature_fuse: formData.feature_fuse ? 1 : 0
+      }
+    });
+  };
+
+  const handleResultModalClose = () => {
+    setShowResultModal(false);
+    setResultType(null);
+    setResultMessage(null);
+    // Refresh the data to show updated values
+    void refetch();
+  };
+
+  if (!isOpen || !script) return null;
+
+  return (
+    <>
+      <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
+        <div className="bg-card rounded-lg shadow-xl max-w-6xl w-full max-h-[95vh] overflow-hidden flex flex-col">
+          {/* Header */}
+          <div className="flex items-center justify-between p-4 sm:p-6 border-b border-border">
+            <div className="flex items-center gap-3">
+              <h2 className="text-2xl font-bold text-foreground">LXC Settings</h2>
+              <Badge variant="outline">{script.container_id}</Badge>
+              <ContextualHelpIcon section="lxc-settings" tooltip="Help with LXC Settings" />
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                onClick={handleSyncFromServer}
+                disabled={syncMutation.isPending ?? isLoading ?? saveMutation.isPending}
+                variant="outline"
+                size="sm"
+              >
+                <RefreshCw className={`h-4 w-4 mr-2 ${syncMutation.isPending ? 'animate-spin' : ''}`} />
+                Sync from Server
+              </Button>
+              <Button
+                onClick={onClose}
+                variant="ghost"
+                size="sm"
+              >
+                ✕
+              </Button>
+            </div>
+          </div>
+
+          {/* Warning Banner */}
+          {configData?.has_changes && (
+            <div className="bg-yellow-50 dark:bg-yellow-950/20 border-b border-yellow-200 dark:border-yellow-800 p-4">
+              <div className="flex items-start gap-3">
+                <AlertTriangle className="h-5 w-5 text-yellow-600 dark:text-yellow-500 flex-shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
+                    Configuration Mismatch Detected
+                  </p>
+                  <p className="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
+                    The cached configuration differs from the server. Click &quot;Sync from Server&quot; to get the latest version.
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+
+          {/* Error Message */}
+          {error && (
+            <div className="bg-red-50 dark:bg-red-950/20 border-b border-red-200 dark:border-red-800 p-4">
+              <div className="flex items-start gap-3">
+                <AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-500 flex-shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-red-800 dark:text-red-200">Error</p>
+                  <p className="text-sm text-red-700 dark:text-red-300 mt-1">{error}</p>
+                </div>
+                <button
+                  onClick={() => setError(null)}
+                  className="text-red-600 dark:text-red-500 hover:text-red-700 dark:hover:text-red-400"
+                >
+                  ✕
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Content */}
+          <div className="flex-1 overflow-y-auto p-4 sm:p-6">
+            {/* Tab Navigation */}
+            <div className="border-b border-border mb-6">
+              <nav className="flex space-x-8">
+                <button
+                  onClick={() => setActiveTab('common')}
+                  className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                    activeTab === 'common'
+                      ? 'border-blue-500 text-blue-600'
+                      : 'border-transparent text-muted-foreground hover:text-foreground hover:border-gray-300'
+                  }`}
+                >
+                  Common Settings
+                </button>
+                <button
+                  onClick={() => setActiveTab('advanced')}
+                  className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                    activeTab === 'advanced'
+                      ? 'border-blue-500 text-blue-600'
+                      : 'border-transparent text-muted-foreground hover:text-foreground hover:border-gray-300'
+                  }`}
+                >
+                  Advanced Settings
+                </button>
+              </nav>
+            </div>
+
+            {/* Common Settings Tab */}
+            {activeTab === 'common' && (
+              <div className="space-y-6">
+                {/* Basic Configuration */}
+                <div className="space-y-4">
+                  <h3 className="text-lg font-semibold text-foreground">Basic Configuration</h3>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <label htmlFor="arch" className="block text-sm font-medium text-foreground">Architecture *</label>
+                      <Input
+                        id="arch"
+                        value={formData.arch}
+                        onChange={(e) => handleInputChange('arch', e.target.value)}
+                        placeholder="amd64"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <label htmlFor="cores" className="block text-sm font-medium text-foreground">Cores *</label>
+                      <Input
+                        id="cores"
+                        type="number"
+                        value={formData.cores}
+                        onChange={(e) => handleInputChange('cores', parseInt(e.target.value) || 0)}
+                        min="1"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <label htmlFor="memory" className="block text-sm font-medium text-foreground">Memory (MB) *</label>
+                      <Input
+                        id="memory"
+                        type="number"
+                        value={formData.memory}
+                        onChange={(e) => handleInputChange('memory', parseInt(e.target.value) || 0)}
+                        min="128"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <label htmlFor="swap" className="block text-sm font-medium text-foreground">Swap (MB)</label>
+                      <Input
+                        id="swap"
+                        type="number"
+                        value={formData.swap}
+                        onChange={(e) => handleInputChange('swap', parseInt(e.target.value) || 0)}
+                        min="0"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <label htmlFor="hostname" className="block text-sm font-medium text-foreground">Hostname *</label>
+                      <Input
+                        id="hostname"
+                        value={formData.hostname}
+                        onChange={(e) => handleInputChange('hostname', e.target.value)}
+                        placeholder="container-hostname"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <label htmlFor="ostype" className="block text-sm font-medium text-foreground">OS Type *</label>
+                      <Input
+                        id="ostype"
+                        value={formData.ostype}
+                        onChange={(e) => handleInputChange('ostype', e.target.value)}
+                        placeholder="debian"
+                      />
+                    </div>
+                  </div>
+                  
+                  <div className="flex items-center space-x-4">
+                    <div className="flex items-center space-x-2">
+                      <input
+                        type="checkbox"
+                        id="onboot"
+                        checked={formData.onboot}
+                        onChange={(e) => handleInputChange('onboot', e.target.checked)}
+                        className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                      />
+                      <label htmlFor="onboot" className="text-sm font-medium text-foreground">Start on Boot</label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <input
+                        type="checkbox"
+                        id="unprivileged"
+                        checked={formData.unprivileged}
+                        onChange={(e) => handleInputChange('unprivileged', e.target.checked)}
+                        className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                      />
+                      <label htmlFor="unprivileged" className="text-sm font-medium text-foreground">Unprivileged Container</label>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Network Configuration */}
+                <div className="space-y-4">
+                  <h3 className="text-lg font-semibold text-foreground">Network Configuration</h3>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <label htmlFor="net_name" className="block text-sm font-medium text-foreground">Interface Name</label>
+                      <Input
+                        id="net_name"
+                        value={formData.net_name}
+                        onChange={(e) => handleInputChange('net_name', e.target.value)}
+                        placeholder="eth0"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <label htmlFor="net_bridge" className="block text-sm font-medium text-foreground">Bridge</label>
+                      <Input
+                        id="net_bridge"
+                        value={formData.net_bridge}
+                        onChange={(e) => handleInputChange('net_bridge', e.target.value)}
+                        placeholder="vmbr0"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <label htmlFor="net_hwaddr" className="block text-sm font-medium text-foreground">MAC Address</label>
+                      <Input
+                        id="net_hwaddr"
+                        value={formData.net_hwaddr}
+                        onChange={(e) => handleInputChange('net_hwaddr', e.target.value)}
+                        placeholder="BC:24:11:2D:2D:AB"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <label htmlFor="net_type" className="block text-sm font-medium text-foreground">Type</label>
+                      <Input
+                        id="net_type"
+                        value={formData.net_type}
+                        onChange={(e) => handleInputChange('net_type', e.target.value)}
+                        placeholder="veth"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <label htmlFor="net_ip_type" className="block text-sm font-medium text-foreground">IP Configuration</label>
+                      <select
+                        id="net_ip_type"
+                        value={formData.net_ip_type}
+                        onChange={(e) => handleInputChange('net_ip_type', e.target.value)}
+                        className="w-full px-3 py-2 border border-input bg-background rounded-md"
+                      >
+                        <option value="dhcp">DHCP</option>
+                        <option value="static">Static IP</option>
+                      </select>
+                    </div>
+                    {formData.net_ip_type === 'static' && (
+                      <>
+                        <div className="space-y-2">
+                          <label htmlFor="net_ip" className="block text-sm font-medium text-foreground">IP Address with CIDR *</label>
+                          <Input
+                            id="net_ip"
+                            value={formData.net_ip}
+                            onChange={(e) => handleInputChange('net_ip', e.target.value)}
+                            placeholder="10.10.10.164/24"
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <label htmlFor="net_gateway" className="block text-sm font-medium text-foreground">Gateway</label>
+                          <Input
+                            id="net_gateway"
+                            value={formData.net_gateway}
+                            onChange={(e) => handleInputChange('net_gateway', e.target.value)}
+                            placeholder="10.10.10.254"
+                          />
+                        </div>
+                      </>
+                    )}
+                    <div className="space-y-2">
+                      <label htmlFor="net_vlan" className="block text-sm font-medium text-foreground">VLAN Tag</label>
+                      <Input
+                        id="net_vlan"
+                        type="number"
+                        value={formData.net_vlan}
+                        onChange={(e) => handleInputChange('net_vlan', parseInt(e.target.value) || 0)}
+                        placeholder="Optional"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Storage */}
+                <div className="space-y-4">
+                  <h3 className="text-lg font-semibold text-foreground">Storage</h3>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <label htmlFor="rootfs_storage" className="block text-sm font-medium text-foreground">Root Filesystem *</label>
+                      <Input
+                        id="rootfs_storage"
+                        value={formData.rootfs_storage}
+                        onChange={(e) => handleInputChange('rootfs_storage', e.target.value)}
+                        placeholder="PROX2-STORAGE2:vm-109-disk-0"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <label htmlFor="rootfs_size" className="block text-sm font-medium text-foreground">
+                        Size
+                        <span className="text-xs text-muted-foreground ml-2">(can only be increased)</span>
+                      </label>
+                      <Input
+                        id="rootfs_size"
+                        value={formData.rootfs_size}
+                        onChange={(e) => handleInputChange('rootfs_size', e.target.value)}
+                        placeholder="4G"
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        Disk size can only be increased for safety. Format: 4G, 8G, 16G, etc.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Features */}
+                <div className="space-y-4">
+                  <h3 className="text-lg font-semibold text-foreground">Features</h3>
+                  <div className="flex items-center space-x-4">
+                    <div className="flex items-center space-x-2">
+                      <input
+                        type="checkbox"
+                        id="feature_keyctl"
+                        checked={formData.feature_keyctl}
+                        onChange={(e) => handleInputChange('feature_keyctl', e.target.checked)}
+                        className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                      />
+                      <label htmlFor="feature_keyctl" className="text-sm font-medium text-foreground">Keyctl</label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <input
+                        type="checkbox"
+                        id="feature_nesting"
+                        checked={formData.feature_nesting}
+                        onChange={(e) => handleInputChange('feature_nesting', e.target.checked)}
+                        className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                      />
+                      <label htmlFor="feature_nesting" className="text-sm font-medium text-foreground">Nesting</label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <input
+                        type="checkbox"
+                        id="feature_fuse"
+                        checked={formData.feature_fuse}
+                        onChange={(e) => handleInputChange('feature_fuse', e.target.checked)}
+                        className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                      />
+                      <label htmlFor="feature_fuse" className="text-sm font-medium text-foreground">FUSE</label>
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <label htmlFor="feature_mount" className="block text-sm font-medium text-foreground">Additional Mount Features</label>
+                    <Input
+                      id="feature_mount"
+                      value={formData.feature_mount}
+                      onChange={(e) => handleInputChange('feature_mount', e.target.value)}
+                      placeholder="Additional features (comma-separated)"
+                    />
+                  </div>
+                </div>
+
+                {/* Tags */}
+                <div className="space-y-4">
+                  <h3 className="text-lg font-semibold text-foreground">Tags</h3>
+                  <div className="space-y-2">
+                    <label htmlFor="tags" className="block text-sm font-medium text-foreground">Tags</label>
+                    <Input
+                      id="tags"
+                      value={formData.tags}
+                      onChange={(e) => handleInputChange('tags', e.target.value)}
+                      placeholder="community-script;pve-scripts-local"
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Advanced Settings Tab */}
+            {activeTab === 'advanced' && (
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <label htmlFor="advanced_config" className="block text-sm font-medium text-foreground">Advanced Configuration</label>
+                  <textarea
+                    id="advanced_config"
+                    value={formData.advanced_config}
+                    onChange={(e) => handleInputChange('advanced_config', e.target.value)}
+                    placeholder="lxc.* entries, comments, and other advanced settings..."
+                    className="w-full min-h-[400px] px-3 py-2 border border-input bg-background rounded-md font-mono text-sm resize-vertical"
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    This section contains lxc.* entries, comments, and other advanced settings that are not covered in the Common Settings tab.
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-end p-4 sm:p-6 border-t border-border bg-muted/30">
+            <div className="flex gap-3">
+              <Button
+                onClick={onClose}
+                variant="outline"
+                disabled={saveMutation.isPending}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleSave}
+                disabled={isSaving || saveMutation.isPending || !hasChanges}
+                variant="default"
+              >
+                {isSaving ? 'Saving & Resizing...' : saveMutation.isPending ? 'Saving...' : 'Save Configuration'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Confirmation Modal */}
+      <ConfirmationModal
+        isOpen={showConfirmation}
+        onClose={() => {
+          setShowConfirmation(false);
+        }}
+        onConfirm={handleConfirmSave}
+        title="Confirm LXC Configuration Changes"
+        message={`Modifying LXC configuration can break your container and may require manual recovery. Ensure you understand these changes before proceeding.${
+          formData.rootfs_size && configData?.config?.rootfs_size && 
+          parseFloat(String(formData.rootfs_size)) > parseFloat(String(configData.config.rootfs_size ?? '0'))
+            ? `\n\n⚠️ DISK RESIZE DETECTED: The disk size will be increased from ${configData.config.rootfs_size} to ${formData.rootfs_size}. This operation will automatically resize the underlying storage and filesystem.`
+            : ''
+        }\n\nThe container may need to be restarted for changes to take effect.`}
+        variant="danger"
+        confirmText={script.container_id ?? ''}
+        confirmButtonText={formData.rootfs_size && configData?.config?.rootfs_size && 
+          parseFloat(String(formData.rootfs_size)) > parseFloat(String(configData.config.rootfs_size ?? '0'))
+          ? "Save & Resize Disk" : "Save Configuration"}
+      />
+
+      {/* Loading Modal */}
+      <LoadingModal
+        isOpen={isLoading || isSaving}
+        action={isSaving ? "Saving configuration and resizing disk..." : "Loading LXC configuration..."}
+      />
+
+      {/* Result Modal */}
+      {showResultModal && resultType && resultMessage && (
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
+          <div className="bg-card text-card-foreground rounded-lg shadow-xl max-w-md w-full mx-4 border border-border">
+            <div className="p-6">
+              <div className="flex items-center gap-3 mb-4">
+                {resultType === 'success' ? (
+                  <CheckCircle className="h-6 w-6 text-green-600 dark:text-green-500" />
+                ) : (
+                  <AlertTriangle className="h-6 w-6 text-red-600 dark:text-red-500" />
+                )}
+                <h3 className="text-lg font-semibold text-card-foreground">
+                  {resultType === 'success' ? 'Success' : 'Error'}
+                </h3>
+              </div>
+              <p className="text-muted-foreground mb-6">
+                {resultMessage}
+              </p>
+              <div className="flex justify-end">
+                <button
+                  onClick={handleResultModalClose}
+                  className="px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 rounded-md transition-colors"
+                >
+                  Close
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+

src/app/_components/LoadingModal.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { Loader2 } from 'lucide-react';
+
+interface LoadingModalProps {
+  isOpen: boolean;
+  action: string;
+}
+
+export function LoadingModal({ isOpen, action }: LoadingModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-card rounded-lg shadow-xl max-w-md w-full border border-border p-8">
+        <div className="flex flex-col items-center space-y-4">
+          <div className="relative">
+            <Loader2 className="h-12 w-12 animate-spin text-primary" />
+            <div className="absolute inset-0 rounded-full border-2 border-primary/20 animate-pulse"></div>
+          </div>
+          <div className="text-center">
+            <h3 className="text-lg font-semibold text-card-foreground mb-2">
+              Processing
+            </h3>
+            <p className="text-sm text-muted-foreground">
+              {action}
+            </p>
+            <p className="text-xs text-muted-foreground mt-2">
+              Please wait...
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

src/app/_components/PublicKeyModal.tsx

@@ -0,0 +1,217 @@
+'use client';
+
+import { useState } from 'react';
+import { X, Copy, Check, Server, Globe } from 'lucide-react';
+import { Button } from './ui/button';
+
+interface PublicKeyModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  publicKey: string;
+  serverName: string;
+  serverIp: string;
+}
+
+export function PublicKeyModal({ isOpen, onClose, publicKey, serverName, serverIp }: PublicKeyModalProps) {
+  const [copied, setCopied] = useState(false);
+  const [commandCopied, setCommandCopied] = useState(false);
+
+  if (!isOpen) return null;
+
+  const handleCopy = async () => {
+    try {
+      // Try modern clipboard API first
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(publicKey);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      } else {
+        // Fallback for older browsers or non-HTTPS
+        const textArea = document.createElement('textarea');
+        textArea.value = publicKey;
+        textArea.style.position = 'fixed';
+        textArea.style.left = '-999999px';
+        textArea.style.top = '-999999px';
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        
+        try {
+          document.execCommand('copy');
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2000);
+        } catch (fallbackError) {
+          console.error('Fallback copy failed:', fallbackError);
+          // If all else fails, show the key in an alert
+          alert('Please manually copy this key:\n\n' + publicKey);
+        }
+        
+        document.body.removeChild(textArea);
+      }
+    } catch (error) {
+      console.error('Failed to copy to clipboard:', error);
+      // Fallback: show the key in an alert
+      alert('Please manually copy this key:\n\n' + publicKey);
+    }
+  };
+
+  const handleCopyCommand = async () => {
+    const command = `echo "${publicKey}" >> ~/.ssh/authorized_keys`;
+    try {
+      // Try modern clipboard API first
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(command);
+        setCommandCopied(true);
+        setTimeout(() => setCommandCopied(false), 2000);
+      } else {
+        // Fallback for older browsers or non-HTTPS
+        const textArea = document.createElement('textarea');
+        textArea.value = command;
+        textArea.style.position = 'fixed';
+        textArea.style.left = '-999999px';
+        textArea.style.top = '-999999px';
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        
+        try {
+          document.execCommand('copy');
+          setCommandCopied(true);
+          setTimeout(() => setCommandCopied(false), 2000);
+        } catch (fallbackError) {
+          console.error('Fallback copy failed:', fallbackError);
+          alert('Please manually copy this command:\n\n' + command);
+        }
+        
+        document.body.removeChild(textArea);
+      }
+    } catch (error) {
+      console.error('Failed to copy command to clipboard:', error);
+      alert('Please manually copy this command:\n\n' + command);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-card rounded-lg shadow-xl max-w-2xl w-full border border-border">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-blue-100 rounded-lg">
+              <Server className="h-6 w-6 text-blue-600" />
+            </div>
+            <div>
+              <h2 className="text-xl font-semibold text-card-foreground">SSH Public Key</h2>
+              <p className="text-sm text-muted-foreground">Add this key to your server&apos;s authorized_keys</p>
+            </div>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onClose}
+            className="h-8 w-8"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 space-y-6">
+          {/* Server Info */}
+          <div className="flex items-center gap-4 p-4 bg-muted/50 rounded-lg">
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <Server className="h-4 w-4" />
+              <span className="font-medium">{serverName}</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <Globe className="h-4 w-4" />
+              <span>{serverIp}</span>
+            </div>
+          </div>
+
+          {/* Instructions */}
+          <div className="space-y-2">
+            <h3 className="font-medium text-foreground">Instructions:</h3>
+            <ol className="text-sm text-muted-foreground space-y-1 list-decimal list-inside">
+              <li>Copy the public key below</li>
+              <li>SSH into your server: <code className="bg-muted px-1 rounded">ssh root@{serverIp}</code></li>
+              <li>Add the key to authorized_keys: <code className="bg-muted px-1 rounded">echo &quot;&lt;paste-key&gt;&quot; &gt;&gt; ~/.ssh/authorized_keys</code></li>
+              <li>Set proper permissions: <code className="bg-muted px-1 rounded">chmod 600 ~/.ssh/authorized_keys</code></li>
+            </ol>
+          </div>
+
+          {/* Public Key */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <label className="text-sm font-medium text-foreground">Public Key:</label>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleCopy}
+                className="gap-2"
+              >
+                {copied ? (
+                  <>
+                    <Check className="h-4 w-4" />
+                    Copied!
+                  </>
+                ) : (
+                  <>
+                    <Copy className="h-4 w-4" />
+                    Copy
+                  </>
+                )}
+              </Button>
+            </div>
+            <textarea
+              value={publicKey}
+              readOnly
+              className="w-full px-3 py-2 border rounded-md shadow-sm bg-card text-foreground font-mono text-xs min-h-[60px] resize-none border-border focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring"
+              placeholder="Public key will appear here..."
+            />
+          </div>
+
+          {/* Quick Command */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <label className="text-sm font-medium text-foreground">Quick Add Command:</label>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleCopyCommand}
+                className="gap-2"
+              >
+                {commandCopied ? (
+                  <>
+                    <Check className="h-4 w-4" />
+                    Copied!
+                  </>
+                ) : (
+                  <>
+                    <Copy className="h-4 w-4" />
+                    Copy Command
+                  </>
+                )}
+              </Button>
+            </div>
+            <div className="p-3 bg-muted/50 rounded-md border border-border">
+              <code className="text-sm font-mono text-foreground break-all">
+                echo &quot;{publicKey}&quot; &gt;&gt; ~/.ssh/authorized_keys
+              </code>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Copy and paste this command directly into your server terminal to add the key to authorized_keys
+            </p>
+          </div>
+
+          {/* Footer */}
+          <div className="flex justify-end gap-3 pt-4 border-t border-border">
+            <Button variant="outline" onClick={onClose}>
+              Close
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/_components/ReleaseNotesModal.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { api } from '~/trpc/react';
+import { Button } from './ui/button';
+import { Badge } from './ui/badge';
+import { X, ExternalLink, Calendar, Tag, Loader2 } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+interface ReleaseNotesModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  highlightVersion?: string;
+}
+
+interface Release {
+  tagName: string;
+  name: string;
+  publishedAt: string;
+  htmlUrl: string;
+  body: string;
+}
+
+// Helper functions for localStorage
+const getLastSeenVersion = (): string | null => {
+  if (typeof window === 'undefined') return null;
+  return localStorage.getItem('LAST_SEEN_RELEASE_VERSION');
+};
+
+const markVersionAsSeen = (version: string): void => {
+  if (typeof window === 'undefined') return;
+  localStorage.setItem('LAST_SEEN_RELEASE_VERSION', version);
+};
+
+export function ReleaseNotesModal({ isOpen, onClose, highlightVersion }: ReleaseNotesModalProps) {
+  const [currentVersion, setCurrentVersion] = useState<string | null>(null);
+  const { data: releasesData, isLoading, error } = api.version.getAllReleases.useQuery(undefined, {
+    enabled: isOpen
+  });
+  const { data: versionData } = api.version.getCurrentVersion.useQuery(undefined, {
+    enabled: isOpen
+  });
+
+  // Get current version when modal opens
+  useEffect(() => {
+    if (isOpen && versionData?.success && versionData.version) {
+      setCurrentVersion(versionData.version);
+    }
+  }, [isOpen, versionData]);
+
+  // Mark version as seen when modal closes
+  const handleClose = () => {
+    if (currentVersion) {
+      markVersionAsSeen(currentVersion);
+    }
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  const releases: Release[] = releasesData?.success ? releasesData.releases ?? [] : [];
+
+  return (
+    <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-card rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] flex flex-col border border-border">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border">
+          <div className="flex items-center gap-3">
+            <Tag className="h-6 w-6 text-blue-600" />
+            <h2 className="text-2xl font-bold text-card-foreground">Release Notes</h2>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleClose}
+            className="h-8 w-8 p-0"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-hidden flex flex-col">
+          {isLoading ? (
+            <div className="flex items-center justify-center p-8">
+              <div className="flex items-center gap-3">
+                <Loader2 className="h-6 w-6 animate-spin text-primary" />
+                <span className="text-muted-foreground">Loading release notes...</span>
+              </div>
+            </div>
+          ) : error || !releasesData?.success ? (
+            <div className="flex items-center justify-center p-8">
+              <div className="text-center">
+                <p className="text-destructive mb-2">Failed to load release notes</p>
+                <p className="text-sm text-muted-foreground">
+                  {releasesData?.error ?? 'Please try again later'}
+                </p>
+              </div>
+            </div>
+          ) : releases.length === 0 ? (
+            <div className="flex items-center justify-center p-8">
+              <p className="text-muted-foreground">No releases found</p>
+            </div>
+          ) : (
+            <div className="flex-1 overflow-y-auto p-6 space-y-6">
+              {releases.map((release, index) => {
+                const isHighlighted = highlightVersion && release.tagName.replace('v', '') === highlightVersion;
+                const isLatest = index === 0;
+                
+                return (
+                  <div
+                    key={release.tagName}
+                    className={`border rounded-lg p-6 ${
+                      isHighlighted 
+                        ? 'border-blue-500 bg-blue-50/10 dark:bg-blue-950/10' 
+                        : 'border-border bg-card'
+                    } ${isLatest ? 'ring-2 ring-primary/20' : ''}`}
+                  >
+                    {/* Release Header */}
+                    <div className="flex items-start justify-between mb-4">
+                      <div className="flex-1">
+                        <div className="flex items-center gap-3 mb-2">
+                          <h3 className="text-xl font-semibold text-card-foreground">
+                            {release.name || release.tagName}
+                          </h3>
+                          {isLatest && (
+                            <Badge variant="default" className="text-xs">
+                              Latest
+                            </Badge>
+                          )}
+                          {isHighlighted && (
+                            <Badge variant="secondary" className="text-xs bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+                              New
+                            </Badge>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                          <div className="flex items-center gap-1">
+                            <Tag className="h-4 w-4" />
+                            <span>{release.tagName}</span>
+                          </div>
+                          <div className="flex items-center gap-1">
+                            <Calendar className="h-4 w-4" />
+                            <span>
+                              {new Date(release.publishedAt).toLocaleDateString('en-US', {
+                                year: 'numeric',
+                                month: 'long',
+                                day: 'numeric'
+                              })}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        asChild
+                        className="h-8 w-8 p-0"
+                      >
+                        <a
+                          href={release.htmlUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          title="View on GitHub"
+                        >
+                          <ExternalLink className="h-4 w-4" />
+                        </a>
+                      </Button>
+                    </div>
+
+                    {/* Release Body */}
+                    {release.body && (
+                      <div className="prose prose-sm max-w-none dark:prose-invert">
+                        <ReactMarkdown 
+                          remarkPlugins={[remarkGfm]}
+                          components={{
+                            h1: ({children}) => <h1 className="text-2xl font-bold text-card-foreground mb-4 mt-6">{children}</h1>,
+                            h2: ({children}) => <h2 className="text-xl font-semibold text-card-foreground mb-3 mt-5">{children}</h2>,
+                            h3: ({children}) => <h3 className="text-lg font-medium text-card-foreground mb-2 mt-4">{children}</h3>,
+                            p: ({children}) => <p className="text-card-foreground mb-3 leading-relaxed">{children}</p>,
+                            ul: ({children}) => <ul className="list-disc list-inside text-card-foreground mb-3 space-y-1">{children}</ul>,
+                            ol: ({children}) => <ol className="list-decimal list-inside text-card-foreground mb-3 space-y-1">{children}</ol>,
+                            li: ({children}) => <li className="text-card-foreground">{children}</li>,
+                            a: ({href, children}) => <a href={href} className="text-blue-500 hover:text-blue-400 underline" target="_blank" rel="noopener noreferrer">{children}</a>,
+                            strong: ({children}) => <strong className="font-semibold text-card-foreground">{children}</strong>,
+                            em: ({children}) => <em className="italic text-card-foreground">{children}</em>,
+                          }}
+                        >
+                          {release.body}
+                        </ReactMarkdown>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between p-6 border-t border-border bg-muted/30">
+          <div className="text-sm text-muted-foreground">
+            {currentVersion && (
+              <span>Current version: <span className="font-medium text-card-foreground">v{currentVersion}</span></span>
+            )}
+          </div>
+          <Button onClick={handleClose} variant="default">
+            Close
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Export helper functions for use in other components
+export { getLastSeenVersion, markVersionAsSeen };

src/app/_components/ResyncButton.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import { api } from '~/trpc/react';
 import { Button } from './ui/button';
+import { ContextualHelpIcon } from './ContextualHelpIcon';
 
 export function ResyncButton() {
   const [isResyncing, setIsResyncing] = useState(false);
@@ -44,27 +45,30 @@ export function ResyncButton() {
         Sync scripts with ProxmoxVE repo
       </div>
       <div className="flex flex-col sm:flex-row sm:items-center gap-3">
-        <Button
-          onClick={handleResync}
-          disabled={isResyncing}
-          variant="outline"
-          size="default"
-          className="inline-flex items-center"
-        >
-          {isResyncing ? (
-            <>
-              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
-              <span>Syncing...</span>
-            </>
-          ) : (
-            <>
-              <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-              </svg>
-              <span>Sync Json Files</span>
-            </>
-          )}
-        </Button>
+        <div className="flex items-center gap-2">
+          <Button
+            onClick={handleResync}
+            disabled={isResyncing}
+            variant="outline"
+            size="default"
+            className="inline-flex items-center"
+          >
+            {isResyncing ? (
+              <>
+                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
+                <span>Syncing...</span>
+              </>
+            ) : (
+              <>
+                <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+                <span>Sync Json Files</span>
+              </>
+            )}
+          </Button>
+          <ContextualHelpIcon section="sync-button" tooltip="Help with Sync Button" />
+        </div>
 
         {lastSync && (
           <div className="text-xs text-muted-foreground">

src/app/_components/SSHKeyInput.tsx

@@ -30,7 +30,11 @@ export function SSHKeyInput({ value, onChange, onError, disabled = false }: SSHK
 
     const reader = new FileReader();
     reader.onload = (e) => {
-      const content = e.target?.result as string;
+      let content = e.target?.result as string;
+      
+      // Auto-trim trailing whitespace and empty lines to fix import issues
+      content = content.replace(/\n\s*$/, '').trimEnd();
+      
       if (validateSSHKey(content)) {
         onChange(content);
         onError?.('');
@@ -72,7 +76,12 @@ export function SSHKeyInput({ value, onChange, onError, disabled = false }: SSHK
   };
 
   const handlePasteChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const content = event.target.value;
+    let content = event.target.value;
+    
+    // Auto-trim trailing whitespace and empty lines to fix import issues
+    // This addresses the common problem where pasted SSH keys have extra whitespace
+    content = content.replace(/\n\s*$/, '').trimEnd();
+    
     onChange(content);
     
     if (content.trim() && !validateSSHKey(content)) {
@@ -93,9 +102,22 @@ export function SSHKeyInput({ value, onChange, onError, disabled = false }: SSHK
     );
     
     if (keyLine) {
-      const keyType = keyLine.includes('RSA') ? 'RSA' : 
-                     keyLine.includes('ED25519') ? 'ED25519' : 
-                     keyLine.includes('ECDSA') ? 'ECDSA' : 'Unknown';
+      let keyType = 'Unknown';
+      
+      // Check for traditional PEM format keys
+      if (keyLine.includes('RSA')) {
+        keyType = 'RSA';
+      } else if (keyLine.includes('ED25519')) {
+        keyType = 'ED25519';
+      } else if (keyLine.includes('ECDSA')) {
+        keyType = 'ECDSA';
+      } else if (keyLine.includes('OPENSSH PRIVATE KEY')) {
+        // For OpenSSH format keys, try to detect type from the key content
+        // This is a heuristic - OpenSSH ED25519 keys typically start with specific patterns
+        // We'll default to "OpenSSH" for now since we can't reliably detect the type
+        keyType = 'OpenSSH';
+      }
+      
       return `${keyType} key (${keyContent.length} characters)`;
     }
     
@@ -142,7 +164,7 @@ export function SSHKeyInput({ value, onChange, onError, disabled = false }: SSHK
           <input
             ref={fileInputRef}
             type="file"
-            accept=".pem,.key,.id_rsa,.id_ed25519,.id_ecdsa"
+            accept=".pem,.key,.id_rsa,.id_ed25519,.id_ecdsa,ed25519,id_rsa,id_ed25519,id_ecdsa,*"
             onChange={handleFileSelect}
             className="hidden"
             disabled={disabled}
@@ -153,7 +175,7 @@ export function SSHKeyInput({ value, onChange, onError, disabled = false }: SSHK
               Drag and drop your SSH private key here, or click to browse
             </p>
             <p className="text-xs text-muted-foreground">
-              Supported formats: RSA, ED25519, ECDSA (.pem, .key, .id_rsa, etc.)
+              Supported formats: RSA, ED25519, ECDSA (.pem, .key, .id_rsa, ed25519, etc.)
             </p>
           </div>
         </div>

src/app/_components/ScriptCard.tsx

@@ -8,20 +8,49 @@ import { TypeBadge, UpdateableBadge } from './Badge';
 interface ScriptCardProps {
   script: ScriptCard;
   onClick: (script: ScriptCard) => void;
+  isSelected?: boolean;
+  onToggleSelect?: (slug: string) => void;
 }
 
-export function ScriptCard({ script, onClick }: ScriptCardProps) {
+export function ScriptCard({ script, onClick, isSelected = false, onToggleSelect }: ScriptCardProps) {
   const [imageError, setImageError] = useState(false);
 
   const handleImageError = () => {
     setImageError(true);
   };
 
+  const handleCheckboxClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onToggleSelect && script.slug) {
+      onToggleSelect(script.slug);
+    }
+  };
+
   return (
     <div
-      className="bg-card rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer border border-border hover:border-primary h-full flex flex-col"
+      className="bg-card rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer border border-border hover:border-primary h-full flex flex-col relative"
       onClick={() => onClick(script)}
     >
+      {/* Checkbox in top-left corner */}
+      {onToggleSelect && (
+        <div className="absolute top-2 left-2 z-10">
+          <div 
+            className={`w-4 h-4 border-2 rounded cursor-pointer transition-all duration-200 flex items-center justify-center ${
+              isSelected 
+                ? 'bg-primary border-primary text-primary-foreground' 
+                : 'bg-card border-border hover:border-primary/60 hover:bg-accent'
+            }`}
+            onClick={handleCheckboxClick}
+          >
+            {isSelected && (
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+              </svg>
+            )}
+          </div>
+        </div>
+      )}
+      
       <div className="p-6 flex-1 flex flex-col">
         {/* Header with logo and name */}
         <div className="flex items-start space-x-4 mb-4">
@@ -49,7 +78,7 @@ export function ScriptCard({ script, onClick }: ScriptCardProps) {
             </h3>
             <div className="mt-2 space-y-2">
               {/* Type and Updateable status on first row */}
-              <div className="flex items-center space-x-2">
+              <div className="flex items-center space-x-2 flex-wrap gap-1">
                 <TypeBadge type={script.type ?? 'unknown'} />
                 {script.updateable && <UpdateableBadge />}
               </div>

src/app/_components/ScriptCardList.tsx

@@ -8,15 +8,24 @@ import { TypeBadge, UpdateableBadge } from './Badge';
 interface ScriptCardListProps {
   script: ScriptCard;
   onClick: (script: ScriptCard) => void;
+  isSelected?: boolean;
+  onToggleSelect?: (slug: string) => void;
 }
 
-export function ScriptCardList({ script, onClick }: ScriptCardListProps) {
+export function ScriptCardList({ script, onClick, isSelected = false, onToggleSelect }: ScriptCardListProps) {
   const [imageError, setImageError] = useState(false);
 
   const handleImageError = () => {
     setImageError(true);
   };
 
+  const handleCheckboxClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onToggleSelect && script.slug) {
+      onToggleSelect(script.slug);
+    }
+  };
+
   const formatDate = (dateString?: string) => {
     if (!dateString) return 'Unknown';
     try {
@@ -37,10 +46,30 @@ export function ScriptCardList({ script, onClick }: ScriptCardListProps) {
 
   return (
     <div
-      className="bg-card rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 cursor-pointer border border-border hover:border-primary"
+      className="bg-card rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 cursor-pointer border border-border hover:border-primary relative"
       onClick={() => onClick(script)}
     >
-      <div className="p-6">
+      {/* Checkbox */}
+      {onToggleSelect && (
+        <div className="absolute top-4 left-4 z-10">
+          <div 
+            className={`w-4 h-4 border-2 rounded cursor-pointer transition-all duration-200 flex items-center justify-center ${
+              isSelected 
+                ? 'bg-primary border-primary text-primary-foreground' 
+                : 'bg-card border-border hover:border-primary/60 hover:bg-accent'
+            }`}
+            onClick={handleCheckboxClick}
+          >
+            {isSelected && (
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+              </svg>
+            )}
+          </div>
+        </div>
+      )}
+      
+      <div className={`p-6 ${onToggleSelect ? 'pl-12' : ''}`}>
         <div className="flex items-start space-x-4">
           {/* Logo */}
           <div className="flex-shrink-0">
@@ -70,7 +99,7 @@ export function ScriptCardList({ script, onClick }: ScriptCardListProps) {
                 <h3 className="text-xl font-semibold text-foreground truncate mb-2">
                   {script.name || 'Unnamed Script'}
                 </h3>
-                <div className="flex items-center space-x-3">
+                <div className="flex items-center space-x-3 flex-wrap gap-2">
                   <TypeBadge type={script.type ?? 'unknown'} />
                   {script.updateable && <UpdateableBadge />}
                   <div className="flex items-center space-x-1">

src/app/_components/ScriptDetailModal.tsx

@@ -359,91 +359,91 @@ export function ScriptDetailModal({
             })()}
         </div>
 
-        {/* Load Message */}
-        {loadMessage && (
-          <div className="mx-4 sm:mx-6 mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
-            {loadMessage}
-          </div>
-        )}
-
-        {/* Script Files Status */}
-        {(scriptFilesLoading || comparisonLoading) && (
-          <div className="mx-4 sm:mx-6 mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
-            <div className="flex items-center space-x-2">
-              <div className="h-4 w-4 animate-spin rounded-full border-b-2 border-blue-600"></div>
-              <span>Loading script status...</span>
-            </div>
-          </div>
-        )}
-
-        {scriptFilesData?.success &&
-          !scriptFilesLoading &&
-          (() => {
-            // Determine script type from the first install method
-            const firstScript = script?.install_methods?.[0]?.script;
-            let scriptType = "Script";
-            if (firstScript?.startsWith("ct/")) {
-              scriptType = "CT Script";
-            } else if (firstScript?.startsWith("tools/")) {
-              scriptType = "Tools Script";
-            } else if (firstScript?.startsWith("vm/")) {
-              scriptType = "VM Script";
-            } else if (firstScript?.startsWith("vw/")) {
-              scriptType = "VW Script";
-            }
-
-            return (
-              <div className="mx-4 sm:mx-6 mb-4 rounded-lg bg-muted p-3 text-sm text-muted-foreground">
-                <div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
-                  <div className="flex items-center space-x-2">
-                    <div
-                      className={`h-2 w-2 rounded-full ${scriptFilesData.ctExists ? "bg-green-500" : "bg-muted"}`}
-                    ></div>
-                    <span>
-                      {scriptType}:{" "}
-                      {scriptFilesData.ctExists ? "Available" : "Not loaded"}
-                    </span>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <div
-                      className={`h-2 w-2 rounded-full ${scriptFilesData.installExists ? "bg-green-500" : "bg-muted"}`}
-                    ></div>
-                    <span>
-                      Install Script:{" "}
-                      {scriptFilesData.installExists
-                        ? "Available"
-                        : "Not loaded"}
-                    </span>
-                  </div>
-                  {scriptFilesData?.success &&
-                    (scriptFilesData.ctExists ||
-                      scriptFilesData.installExists) &&
-                    comparisonData?.success &&
-                    !comparisonLoading && (
-                      <div className="flex items-center space-x-2">
-                        <div
-                          className={`h-2 w-2 rounded-full ${comparisonData.hasDifferences ? "bg-orange-500" : "bg-green-500"}`}
-                        ></div>
-                        <span>
-                          Status:{" "}
-                          {comparisonData.hasDifferences
-                            ? "Update available"
-                            : "Up to date"}
-                        </span>
-                      </div>
-                    )}
-                </div>
-                {scriptFilesData.files.length > 0 && (
-                  <div className="mt-2 text-xs text-muted-foreground break-words">
-                    Files: {scriptFilesData.files.join(", ")}
-                  </div>
-                )}
-              </div>
-            );
-          })()}
-
         {/* Content */}
         <div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
+          {/* Script Files Status */}
+          {(scriptFilesLoading || comparisonLoading) && (
+            <div className="mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
+              <div className="flex items-center space-x-2">
+                <div className="h-4 w-4 animate-spin rounded-full border-b-2 border-blue-600"></div>
+                <span>Loading script status...</span>
+              </div>
+            </div>
+          )}
+
+          {scriptFilesData?.success &&
+            !scriptFilesLoading &&
+            (() => {
+              // Determine script type from the first install method
+              const firstScript = script?.install_methods?.[0]?.script;
+              let scriptType = "Script";
+              if (firstScript?.startsWith("ct/")) {
+                scriptType = "CT Script";
+              } else if (firstScript?.startsWith("tools/")) {
+                scriptType = "Tools Script";
+              } else if (firstScript?.startsWith("vm/")) {
+                scriptType = "VM Script";
+              } else if (firstScript?.startsWith("vw/")) {
+                scriptType = "VW Script";
+              }
+
+              return (
+                <div className="mb-4 rounded-lg bg-muted p-3 text-sm text-muted-foreground">
+                  <div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
+                    <div className="flex items-center space-x-2">
+                      <div
+                        className={`h-2 w-2 rounded-full ${scriptFilesData.ctExists ? "bg-green-500" : "bg-muted"}`}
+                      ></div>
+                      <span>
+                        {scriptType}:{" "}
+                        {scriptFilesData.ctExists ? "Available" : "Not loaded"}
+                      </span>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <div
+                        className={`h-2 w-2 rounded-full ${scriptFilesData.installExists ? "bg-green-500" : "bg-muted"}`}
+                      ></div>
+                      <span>
+                        Install Script:{" "}
+                        {scriptFilesData.installExists
+                          ? "Available"
+                          : "Not loaded"}
+                      </span>
+                    </div>
+                    {scriptFilesData?.success &&
+                      (scriptFilesData.ctExists ||
+                        scriptFilesData.installExists) &&
+                      comparisonData?.success &&
+                      !comparisonLoading && (
+                        <div className="flex items-center space-x-2">
+                          <div
+                            className={`h-2 w-2 rounded-full ${comparisonData.hasDifferences ? "bg-orange-500" : "bg-green-500"}`}
+                          ></div>
+                          <span>
+                            Status:{" "}
+                            {comparisonData.hasDifferences
+                              ? "Update available"
+                              : "Up to date"}
+                          </span>
+                        </div>
+                      )}
+                  </div>
+                  {scriptFilesData.files.length > 0 && (
+                    <div className="mt-2 text-xs text-muted-foreground break-words">
+                      Files: {scriptFilesData.files.join(", ")}
+                    </div>
+                  )}
+                </div>
+              );
+            })()}
+
+          {/* Load Message */}
+          {loadMessage && (
+            <div className="mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
+              {loadMessage}
+            </div>
+          )}
+
           {/* Description */}
           <div>
             <h3 className="mb-2 text-base sm:text-lg font-semibold text-foreground">

src/app/_components/ScriptInstallationCard.tsx

@@ -3,6 +3,13 @@
 import { Button } from './ui/button';
 import { StatusBadge } from './Badge';
 import { getContrastColor } from '../../lib/colorUtils';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from './ui/dropdown-menu';
 
 interface InstalledScript {
   id: number;
@@ -14,24 +21,42 @@ interface InstalledScript {
   server_ip: string | null;
   server_user: string | null;
   server_password: string | null;
+  server_auth_type: string | null;
+  server_ssh_key: string | null;
+  server_ssh_key_passphrase: string | null;
+  server_ssh_port: number | null;
   server_color: string | null;
   installation_date: string;
   status: 'in_progress' | 'success' | 'failed';
   output_log: string | null;
+  execution_mode: 'local' | 'ssh';
+  container_status?: 'running' | 'stopped' | 'unknown';
+  web_ui_ip: string | null;
+  web_ui_port: number | null;
 }
 
 interface ScriptInstallationCardProps {
   script: InstalledScript;
   isEditing: boolean;
-  editFormData: { script_name: string; container_id: string };
-  onInputChange: (field: 'script_name' | 'container_id', value: string) => void;
+  editFormData: { script_name: string; container_id: string; web_ui_ip: string; web_ui_port: string };
+  onInputChange: (field: 'script_name' | 'container_id' | 'web_ui_ip' | 'web_ui_port', value: string) => void;
   onEdit: () => void;
   onSave: () => void;
   onCancel: () => void;
   onUpdate: () => void;
+  onShell: () => void;
   onDelete: () => void;
   isUpdating: boolean;
   isDeleting: boolean;
+  // New container control props
+  containerStatus?: 'running' | 'stopped' | 'unknown';
+  onStartStop: (action: 'start' | 'stop') => void;
+  onDestroy: () => void;
+  isControlling: boolean;
+  // Web UI props
+  onOpenWebUI: () => void;
+  onAutoDetectWebUI: () => void;
+  isAutoDetecting: boolean;
 }
 
 export function ScriptInstallationCard({
@@ -43,14 +68,30 @@ export function ScriptInstallationCard({
   onSave,
   onCancel,
   onUpdate,
+  onShell,
   onDelete,
   isUpdating,
-  isDeleting
+  isDeleting,
+  containerStatus,
+  onStartStop,
+  onDestroy,
+  isControlling,
+  onOpenWebUI,
+  onAutoDetectWebUI,
+  isAutoDetecting
 }: ScriptInstallationCardProps) {
   const formatDate = (dateString: string) => {
     return new Date(dateString).toLocaleString();
   };
 
+  // Helper function to check if a script has any actions available
+  const hasActions = (script: InstalledScript) => {
+    if (script.container_id && script.execution_mode === 'ssh') return true;
+    if (script.web_ui_ip != null) return true;
+    if (!script.container_id || script.execution_mode !== 'ssh') return true;
+    return false;
+  };
+
   return (
     <div 
       className="bg-card border border-border rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow"
@@ -99,7 +140,93 @@ export function ScriptInstallationCard({
             />
           ) : (
             <div className="text-sm font-mono text-foreground break-all">
-              {script.container_id ?? '-'}
+              {script.container_id ? (
+                <div className="flex items-center space-x-2">
+                  <span>{script.container_id}</span>
+                  {script.container_status && (
+                    <div className="flex items-center space-x-1">
+                      <div className={`w-2 h-2 rounded-full ${
+                        script.container_status === 'running' ? 'bg-green-500' : 
+                        script.container_status === 'stopped' ? 'bg-red-500' : 
+                        'bg-gray-400'
+                      }`}></div>
+                      <span className={`text-xs font-medium ${
+                        script.container_status === 'running' ? 'text-green-700 dark:text-green-300' : 
+                        script.container_status === 'stopped' ? 'text-red-700 dark:text-red-300' : 
+                        'text-gray-500 dark:text-gray-400'
+                      }`}>
+                        {script.container_status === 'running' ? 'Running' : 
+                         script.container_status === 'stopped' ? 'Stopped' : 
+                         'Unknown'}
+                      </span>
+                    </div>
+                  )}
+                </div>
+              ) : '-'}
+            </div>
+          )}
+        </div>
+
+        {/* Web UI */}
+        <div>
+          <div className="text-xs font-medium text-muted-foreground mb-1">IP:PORT</div>
+          {isEditing ? (
+            <div className="flex items-center space-x-2">
+              <input
+                type="text"
+                value={editFormData.web_ui_ip}
+                onChange={(e) => onInputChange('web_ui_ip', e.target.value)}
+                className="flex-1 px-2 py-1 text-sm font-mono border border-border rounded bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+                placeholder="IP"
+              />
+              <span className="text-muted-foreground">:</span>
+              <input
+                type="number"
+                value={editFormData.web_ui_port}
+                onChange={(e) => onInputChange('web_ui_port', e.target.value)}
+                className="w-20 px-2 py-1 text-sm font-mono border border-border rounded bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+                placeholder="Port"
+              />
+            </div>
+          ) : (
+            <div className="text-sm font-mono text-foreground">
+              {script.web_ui_ip ? (
+                <div className="flex items-center justify-between w-full">
+                  <button
+                    onClick={onOpenWebUI}
+                    disabled={containerStatus === 'stopped'}
+                    className={`text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 hover:underline flex-shrink-0 ${
+                      containerStatus === 'stopped' ? 'opacity-50 cursor-not-allowed' : ''
+                    }`}
+                  >
+                    {script.web_ui_ip}:{script.web_ui_port ?? 80}
+                  </button>
+                  {script.container_id && script.execution_mode === 'ssh' && (
+                    <button
+                      onClick={onAutoDetectWebUI}
+                      disabled={isAutoDetecting}
+                      className="text-xs px-2 py-1 bg-blue-900 hover:bg-blue-800 text-blue-300 border border-blue-700 rounded disabled:opacity-50 transition-colors flex-shrink-0 ml-2"
+                      title="Re-detect IP and port"
+                    >
+                      {isAutoDetecting ? '...' : 'Re-detect'}
+                    </button>
+                  )}
+                </div>
+              ) : (
+                <div className="flex items-center space-x-2">
+                  <span className="text-muted-foreground">-</span>
+                  {script.container_id && script.execution_mode === 'ssh' && (
+                    <button
+                      onClick={onAutoDetectWebUI}
+                      disabled={isAutoDetecting}
+                      className="text-xs px-2 py-1 bg-blue-900 hover:bg-blue-800 text-blue-300 border border-blue-700 rounded disabled:opacity-50 transition-colors"
+                      title="Re-detect IP and port"
+                    >
+                      {isAutoDetecting ? '...' : 'Re-detect'}
+                    </button>
+                  )}
+                </div>
+              )}
             </div>
           )}
         </div>
@@ -134,7 +261,7 @@ export function ScriptInstallationCard({
             <Button
               onClick={onSave}
               disabled={isUpdating}
-              variant="default"
+              variant="save"
               size="sm"
               className="flex-1 min-w-0"
             >
@@ -142,7 +269,7 @@ export function ScriptInstallationCard({
             </Button>
             <Button
               onClick={onCancel}
-              variant="outline"
+              variant="cancel"
               size="sm"
               className="flex-1 min-w-0"
             >
@@ -153,31 +280,88 @@ export function ScriptInstallationCard({
           <>
             <Button
               onClick={onEdit}
-              variant="default"
+              variant="edit"
               size="sm"
               className="flex-1 min-w-0"
             >
               Edit
             </Button>
-            {script.container_id && (
-              <Button
-                onClick={onUpdate}
-                variant="link"
-                size="sm"
-                className="flex-1 min-w-0"
-              >
-                Update
-              </Button>
+            {hasActions(script) && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="flex-1 min-w-0 bg-gray-800/20 hover:bg-gray-800/30 border border-gray-600/50 text-gray-300 hover:text-gray-200 hover:border-gray-500/60 transition-all duration-200 hover:scale-105 hover:shadow-md"
+                  >
+                    Actions
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-48 bg-gray-900 border-gray-700">
+                  {script.container_id && (
+                    <DropdownMenuItem
+                      onClick={onUpdate}
+                      disabled={containerStatus === 'stopped'}
+                      className="text-cyan-300 hover:text-cyan-200 hover:bg-cyan-900/20 focus:bg-cyan-900/20"
+                    >
+                      Update
+                    </DropdownMenuItem>
+                  )}
+                  {script.container_id && script.execution_mode === 'ssh' && (
+                    <DropdownMenuItem
+                      onClick={onShell}
+                      disabled={containerStatus === 'stopped'}
+                      className="text-gray-300 hover:text-gray-200 hover:bg-gray-800/20 focus:bg-gray-800/20"
+                    >
+                      Shell
+                    </DropdownMenuItem>
+                  )}
+                  {script.web_ui_ip && (
+                    <DropdownMenuItem
+                      onClick={onOpenWebUI}
+                      disabled={containerStatus === 'stopped'}
+                      className="text-blue-300 hover:text-blue-200 hover:bg-blue-900/20 focus:bg-blue-900/20"
+                    >
+                      Open UI
+                    </DropdownMenuItem>
+                  )}
+                  {script.container_id && script.execution_mode === 'ssh' && (
+                    <>
+                      <DropdownMenuSeparator className="bg-gray-700" />
+                      <DropdownMenuItem
+                        onClick={() => onStartStop(containerStatus === 'running' ? 'stop' : 'start')}
+                        disabled={isControlling || containerStatus === 'unknown'}
+                        className={containerStatus === 'running' 
+                          ? "text-red-300 hover:text-red-200 hover:bg-red-900/20 focus:bg-red-900/20"
+                          : "text-green-300 hover:text-green-200 hover:bg-green-900/20 focus:bg-green-900/20"
+                        }
+                      >
+                        {isControlling ? 'Working...' : containerStatus === 'running' ? 'Stop' : 'Start'}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onClick={onDestroy}
+                        disabled={isControlling}
+                        className="text-red-300 hover:text-red-200 hover:bg-red-900/20 focus:bg-red-900/20"
+                      >
+                        {isControlling ? 'Working...' : 'Destroy'}
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                  {(!script.container_id || script.execution_mode !== 'ssh') && (
+                    <>
+                      <DropdownMenuSeparator className="bg-gray-700" />
+                      <DropdownMenuItem
+                        onClick={onDelete}
+                        disabled={isDeleting}
+                        className="text-red-300 hover:text-red-200 hover:bg-red-900/20 focus:bg-red-900/20"
+                      >
+                        {isDeleting ? 'Deleting...' : 'Delete'}
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
             )}
-            <Button
-              onClick={onDelete}
-              variant="destructive"
-              size="sm"
-              disabled={isDeleting}
-              className="flex-1 min-w-0"
-            >
-              {isDeleting ? 'Deleting...' : 'Delete'}
-            </Button>
           </>
         )}
       </div>

src/app/_components/ScriptsGrid.tsx

@@ -22,6 +22,8 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [viewMode, setViewMode] = useState<'card' | 'list'>('card');
+  const [selectedSlugs, setSelectedSlugs] = useState<Set<string>>(new Set());
+  const [downloadProgress, setDownloadProgress] = useState<{ current: number; total: number; currentScript: string; failed: Array<{ slug: string; error: string }> } | null>(null);
   const [filters, setFilters] = useState<FilterState>({
     searchQuery: '',
     showUpdatable: null,
@@ -34,12 +36,15 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
   const gridRef = useRef<HTMLDivElement>(null);
 
   const { data: scriptCardsData, isLoading: githubLoading, error: githubError, refetch } = api.scripts.getScriptCardsWithCategories.useQuery();
-  const { data: localScriptsData, isLoading: localLoading, error: localError } = api.scripts.getCtScripts.useQuery();
+  const { data: localScriptsData, isLoading: localLoading, error: localError } = api.scripts.getAllDownloadedScripts.useQuery();
   const { data: scriptData } = api.scripts.getScriptBySlug.useQuery(
     { slug: selectedSlug ?? '' },
     { enabled: !!selectedSlug }
   );
 
+  // Individual script download mutation
+  const loadSingleScriptMutation = api.scripts.loadScript.useMutation();
+
   // Load SAVE_FILTER setting, saved filters, and view mode on component mount
   useEffect(() => {
     const loadSettings = async () => {
@@ -328,6 +333,167 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
     setSearchQuery(newFilters.searchQuery);
   };
 
+  // Selection management functions
+  const toggleScriptSelection = (slug: string) => {
+    setSelectedSlugs(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(slug)) {
+        newSet.delete(slug);
+      } else {
+        newSet.add(slug);
+      }
+      return newSet;
+    });
+  };
+
+  const selectAllVisible = () => {
+    const visibleSlugs = new Set(filteredScripts.map(script => script.slug).filter(Boolean));
+    setSelectedSlugs(visibleSlugs);
+  };
+
+  const clearSelection = () => {
+    setSelectedSlugs(new Set());
+  };
+
+  const getFriendlyErrorMessage = (error: string, slug: string): string => {
+    const errorLower = error.toLowerCase();
+    
+    // Exact matches first (most specific)
+    if (error === 'Script not found') {
+      return `Script "${slug}" is not available for download. It may not exist in the repository or has been removed.`;
+    }
+    
+    if (error === 'Failed to load script') {
+      return `Unable to download script "${slug}". Please check your internet connection and try again.`;
+    }
+    
+    // Network/Connection errors
+    if (errorLower.includes('network') || errorLower.includes('connection') || errorLower.includes('timeout')) {
+      return 'Network connection failed. Please check your internet connection and try again.';
+    }
+    
+    // GitHub API errors
+    if (errorLower.includes('not found') || errorLower.includes('404')) {
+      return `Script "${slug}" not found in the repository. It may have been removed or renamed.`;
+    }
+    
+    if (errorLower.includes('rate limit') || errorLower.includes('403')) {
+      return 'GitHub API rate limit exceeded. Please wait a few minutes and try again.';
+    }
+    
+    if (errorLower.includes('unauthorized') || errorLower.includes('401')) {
+      return 'Access denied. The script may be private or require authentication.';
+    }
+    
+    // File system errors
+    if (errorLower.includes('permission') || errorLower.includes('eacces')) {
+      return 'Permission denied. Please check file system permissions.';
+    }
+    
+    if (errorLower.includes('no space') || errorLower.includes('enospc')) {
+      return 'Insufficient disk space. Please free up some space and try again.';
+    }
+    
+    if (errorLower.includes('read-only') || errorLower.includes('erofs')) {
+      return 'Cannot write to read-only file system. Please check your installation directory.';
+    }
+    
+    // Script-specific errors
+    if (errorLower.includes('script not found')) {
+      return `Script "${slug}" not found in the local scripts directory.`;
+    }
+    
+    if (errorLower.includes('invalid script') || errorLower.includes('malformed')) {
+      return `Script "${slug}" appears to be corrupted or invalid.`;
+    }
+    
+    if (errorLower.includes('already exists') || errorLower.includes('file exists')) {
+      return `Script "${slug}" already exists locally. Skipping download.`;
+    }
+    
+    // Generic fallbacks
+    if (errorLower.includes('timeout')) {
+      return 'Download timed out. The script may be too large or the connection is slow.';
+    }
+    
+    if (errorLower.includes('server error') || errorLower.includes('500')) {
+      return 'Server error occurred. Please try again later.';
+    }
+    
+    // If we can't categorize it, return a more helpful generic message
+    if (error.length > 100) {
+      return `Download failed: ${error.substring(0, 100)}...`;
+    }
+    
+    return `Download failed: ${error}`;
+  };
+
+  const downloadScriptsIndividually = async (slugsToDownload: string[]) => {
+    setDownloadProgress({ current: 0, total: slugsToDownload.length, currentScript: '', failed: [] });
+    
+    const successful: Array<{ slug: string; files: string[] }> = [];
+    const failed: Array<{ slug: string; error: string }> = [];
+    
+    for (let i = 0; i < slugsToDownload.length; i++) {
+      const slug = slugsToDownload[i];
+      
+      // Update progress with current script
+      setDownloadProgress(prev => prev ? {
+        ...prev,
+        current: i,
+        currentScript: slug ?? ''
+      } : null);
+      
+      try {
+        // Download individual script
+        const result = await loadSingleScriptMutation.mutateAsync({ slug: slug ?? '' });
+        
+        if (result.success) {
+          successful.push({ slug: slug ?? '', files: result.files ?? [] });
+        } else {
+          const error = 'error' in result ? result.error : 'Failed to load script';
+          const userFriendlyError = getFriendlyErrorMessage(error, slug ?? '');
+          failed.push({ slug: slug ?? '', error: userFriendlyError });
+        }
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Failed to load script';
+        const userFriendlyError = getFriendlyErrorMessage(errorMessage, slug ?? '');
+        failed.push({ 
+          slug: slug ?? '', 
+          error: userFriendlyError
+        });
+      }
+    }
+    
+    // Final progress update
+    setDownloadProgress(prev => prev ? {
+      ...prev,
+      current: slugsToDownload.length,
+      failed
+    } : null);
+    
+    // Clear selection and refetch to update card download status
+    setSelectedSlugs(new Set());
+    void refetch();
+    
+    // Keep progress bar visible until user navigates away or manually dismisses
+    // Progress bar will stay visible to show final results
+  };
+
+  const handleBatchDownload = () => {
+    const slugsToDownload = Array.from(selectedSlugs);
+    if (slugsToDownload.length > 0) {
+      void downloadScriptsIndividually(slugsToDownload);
+    }
+  };
+
+  const handleDownloadAllFiltered = () => {
+    const slugsToDownload = filteredScripts.map(script => script.slug).filter(Boolean);
+    if (slugsToDownload.length > 0) {
+      void downloadScriptsIndividually(slugsToDownload);
+    }
+  };
+
   // Handle category selection with auto-scroll
   const handleCategorySelect = (category: string | null) => {
     setSelectedCategory(category);
@@ -348,6 +514,18 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
     }
   }, [selectedCategory]);
 
+  // Clear selection when switching between card/list views
+  useEffect(() => {
+    setSelectedSlugs(new Set());
+  }, [viewMode]);
+
+  // Clear progress bar when component unmounts
+  useEffect(() => {
+    return () => {
+      setDownloadProgress(null);
+    };
+  }, []);
+
 
   const handleCardClick = (scriptCard: { slug: string }) => {
     // All scripts are GitHub scripts, open modal
@@ -393,7 +571,7 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
     );
   }
 
-  if (!scriptsWithStatus || scriptsWithStatus.length === 0) {
+  if (!scriptsWithStatus?.length) {
     return (
       <div className="text-center py-12">
         <div className="text-muted-foreground">
@@ -441,6 +619,157 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
           onViewModeChange={setViewMode}
         />
 
+
+        {/* Action Buttons */}
+        <div className="flex flex-wrap gap-2 mb-4">
+          {selectedSlugs.size > 0 ? (
+            <Button
+              onClick={handleBatchDownload}
+              disabled={loadSingleScriptMutation.isPending}
+              variant="outline"
+              size="sm"
+              className="bg-blue-500/10 hover:bg-blue-500/20 border-blue-500/30 text-blue-300 hover:text-blue-200 hover:border-blue-400/50"
+            >
+              {loadSingleScriptMutation.isPending ? (
+                <>
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-current mr-2"></div>
+                  Downloading...
+                </>
+              ) : (
+                `Download Selected (${selectedSlugs.size})`
+              )}
+            </Button>
+          ) : (
+            <Button
+              onClick={handleDownloadAllFiltered}
+              disabled={filteredScripts.length === 0 || loadSingleScriptMutation.isPending}
+              variant="outline"
+              size="sm"
+            >
+              {loadSingleScriptMutation.isPending ? (
+                <>
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-current mr-2"></div>
+                  Downloading...
+                </>
+              ) : (
+                `Download All Filtered (${filteredScripts.length})`
+              )}
+            </Button>
+          )}
+
+          {selectedSlugs.size > 0 && (
+            <Button
+              onClick={clearSelection}
+              variant="outline"
+              size="default"
+            >
+              Clear Selection
+            </Button>
+          )}
+
+          {filteredScripts.length > 0 && (
+            <Button
+              onClick={selectAllVisible}
+              variant="outline"
+              size="default"
+            >
+              Select All Visible
+            </Button>
+          )}
+        </div>
+
+        {/* Progress Bar */}
+        {downloadProgress && (
+          <div className="mb-4 p-4 bg-card border border-border rounded-lg">
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex flex-col">
+                <span className="text-sm font-medium text-foreground">
+                  {downloadProgress.current >= downloadProgress.total ? 'Download completed' : 'Downloading scripts'}... {downloadProgress.current} of {downloadProgress.total}
+                </span>
+                {downloadProgress.currentScript && downloadProgress.current < downloadProgress.total && (
+                  <span className="text-xs text-muted-foreground">
+                    Currently downloading: {downloadProgress.currentScript}
+                  </span>
+                )}
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-sm text-muted-foreground">
+                  {Math.round((downloadProgress.current / downloadProgress.total) * 100)}%
+                </span>
+                {downloadProgress.current >= downloadProgress.total && (
+                  <button
+                    onClick={() => setDownloadProgress(null)}
+                    className="text-muted-foreground hover:text-foreground transition-colors"
+                    title="Dismiss progress bar"
+                  >
+                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
+                    </svg>
+                  </button>
+                )}
+              </div>
+            </div>
+            
+            {/* Progress Bar */}
+            <div className="w-full bg-muted rounded-full h-2 mb-2">
+              <div 
+                className={`h-2 rounded-full transition-all duration-300 ease-out ${
+                  downloadProgress.failed.length > 0 ? 'bg-yellow-500' : 'bg-primary'
+                }`}
+                style={{ width: `${(downloadProgress.current / downloadProgress.total) * 100}%` }}
+              />
+            </div>
+            
+            {/* Progress Visualization */}
+            <div className="flex items-center text-xs text-muted-foreground mb-2">
+              <span className="mr-2">Progress:</span>
+              <div className="flex flex-wrap gap-1">
+                {Array.from({ length: downloadProgress.total }, (_, i) => {
+                  const isCompleted = i < downloadProgress.current;
+                  const isCurrent = i === downloadProgress.current;
+                  const isFailed = downloadProgress.failed.some(f => f.slug === downloadProgress.currentScript);
+                  
+                  return (
+                    <span 
+                      key={i} 
+                      className={`px-1 py-0.5 rounded text-xs ${
+                        isCompleted 
+                          ? isFailed ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300' : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
+                          : isCurrent 
+                            ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 animate-pulse'
+                            : 'bg-muted text-muted-foreground'
+                      }`}
+                    >
+                      {isCompleted ? (isFailed ? '✗' : '✓') : isCurrent ? '⟳' : '○'}
+                    </span>
+                  );
+                })}
+              </div>
+            </div>
+            
+            {/* Failed Scripts Details */}
+            {downloadProgress.failed.length > 0 && (
+              <div className="mt-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                <div className="flex items-center mb-2">
+                  <svg className="w-4 h-4 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                  </svg>
+                  <span className="text-sm font-medium text-red-800 dark:text-red-200">
+                    Failed Downloads ({downloadProgress.failed.length})
+                  </span>
+                </div>
+                <div className="space-y-1">
+                  {downloadProgress.failed.map((failed, index) => (
+                    <div key={index} className="text-xs text-red-700 dark:text-red-300">
+                      <span className="font-medium">{failed.slug}:</span> {failed.error}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
         {/* Legacy Search Bar (keeping for backward compatibility, but hidden) */}
         <div className="hidden mb-8">
           <div className="relative max-w-md mx-auto">
@@ -532,6 +861,8 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
                   key={uniqueKey}
                   script={script}
                   onClick={handleCardClick}
+                  isSelected={selectedSlugs.has(script.slug ?? '')}
+                  onToggleSelect={toggleScriptSelection}
                 />
               );
             })}
@@ -552,6 +883,8 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
                   key={uniqueKey}
                   script={script}
                   onClick={handleCardClick}
+                  isSelected={selectedSlugs.has(script.slug ?? '')}
+                  onToggleSelect={toggleScriptSelection}
                 />
               );
             })}

src/app/_components/ServerForm.tsx

@@ -4,6 +4,8 @@ import { useState, useEffect } from 'react';
 import type { CreateServerData } from '../../types/server';
 import { Button } from './ui/button';
 import { SSHKeyInput } from './SSHKeyInput';
+import { PublicKeyModal } from './PublicKeyModal';
+import { Key } from 'lucide-react';
 
 interface ServerFormProps {
   onSubmit: (data: CreateServerData) => void;
@@ -30,6 +32,11 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
   const [errors, setErrors] = useState<Partial<Record<keyof CreateServerData, string>>>({});
   const [sshKeyError, setSshKeyError] = useState<string>('');
   const [colorCodingEnabled, setColorCodingEnabled] = useState(false);
+  const [isGeneratingKey, setIsGeneratingKey] = useState(false);
+  const [showPublicKeyModal, setShowPublicKeyModal] = useState(false);
+  const [generatedPublicKey, setGeneratedPublicKey] = useState('');
+  const [, setIsGeneratedKey] = useState(false);
+  const [, setGeneratedServerId] = useState<number | null>(null);
 
   useEffect(() => {
     const loadColorCodingSetting = async () => {
@@ -75,25 +82,18 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
     // Validate authentication based on auth_type
     const authType = formData.auth_type ?? 'password';
     
-    if (authType === 'password' || authType === 'both') {
+    if (authType === 'password') {
       if (!formData.password?.trim()) {
         newErrors.password = 'Password is required for password authentication';
       }
     }
     
-    if (authType === 'key' || authType === 'both') {
+    if (authType === 'key') {
       if (!formData.ssh_key?.trim()) {
         newErrors.ssh_key = 'SSH key is required for key authentication';
       }
     }
 
-    // Check if at least one authentication method is provided
-    if (authType === 'both') {
-      if (!formData.password?.trim() && !formData.ssh_key?.trim()) {
-        newErrors.password = 'At least one authentication method (password or SSH key) is required';
-        newErrors.ssh_key = 'At least one authentication method (password or SSH key) is required';
-      }
-    }
 
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0 && !sshKeyError;
@@ -127,6 +127,54 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
     if (errors[field]) {
       setErrors(prev => ({ ...prev, [field]: undefined }));
     }
+    
+    // Reset generated key state when switching auth types
+    if (field === 'auth_type') {
+      setIsGeneratedKey(false);
+      setGeneratedPublicKey('');
+    }
+  };
+
+  const handleGenerateKeyPair = async () => {
+    setIsGeneratingKey(true);
+    try {
+      const response = await fetch('/api/servers/generate-keypair', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to generate key pair');
+      }
+
+      const data = await response.json() as { success: boolean; privateKey?: string; publicKey?: string; serverId?: number; error?: string };
+      
+      if (data.success) {
+        const serverId = data.serverId ?? 0;
+        const keyPath = `data/ssh-keys/server_${serverId}_key`;
+        
+        setFormData(prev => ({ 
+          ...prev, 
+          ssh_key: data.privateKey ?? '',
+          ssh_key_path: keyPath,
+          key_generated: true
+        }));
+        setGeneratedPublicKey(data.publicKey ?? '');
+        setGeneratedServerId(serverId);
+        setIsGeneratedKey(true);
+        setShowPublicKeyModal(true);
+        setSshKeyError('');
+      } else {
+        throw new Error(data.error ?? 'Failed to generate key pair');
+      }
+    } catch (error) {
+      console.error('Error generating key pair:', error);
+        setSshKeyError(error instanceof Error ? error.message : 'Failed to generate key pair');
+    } finally {
+      setIsGeneratingKey(false);
+    }
   };
 
   const handleSSHKeyChange = (value: string) => {
@@ -137,6 +185,7 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
   };
 
   return (
+    <>
     <form onSubmit={handleSubmit} className="space-y-6">
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
@@ -221,7 +270,6 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
           >
             <option value="password">Password Only</option>
             <option value="key">SSH Key Only</option>
-            <option value="both">Both Password & SSH Key</option>
           </select>
         </div>
 
@@ -247,10 +295,10 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
       </div>
 
       {/* Password Authentication */}
-      {(formData.auth_type === 'password' || formData.auth_type === 'both') && (
+      {formData.auth_type === 'password' && (
         <div>
           <label htmlFor="password" className="block text-sm font-medium text-muted-foreground mb-1">
-            Password {formData.auth_type === 'both' ? '(Optional)' : '*'}
+            Password *
           </label>
           <input
             type="password"
@@ -267,19 +315,67 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
       )}
 
       {/* SSH Key Authentication */}
-      {(formData.auth_type === 'key' || formData.auth_type === 'both') && (
+      {formData.auth_type === 'key' && (
         <div className="space-y-4">
           <div>
-            <label className="block text-sm font-medium text-muted-foreground mb-1">
-              SSH Private Key {formData.auth_type === 'both' ? '(Optional)' : '*'}
-            </label>
-            <SSHKeyInput
-              value={formData.ssh_key ?? ''}
-              onChange={handleSSHKeyChange}
-              onError={setSshKeyError}
-            />
-            {errors.ssh_key && <p className="mt-1 text-sm text-destructive">{errors.ssh_key}</p>}
-            {sshKeyError && <p className="mt-1 text-sm text-destructive">{sshKeyError}</p>}
+            <div className="flex items-center justify-between mb-1">
+              <label className="block text-sm font-medium text-muted-foreground">
+                SSH Private Key *
+              </label>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleGenerateKeyPair}
+                disabled={isGeneratingKey}
+                className="gap-2"
+              >
+                <Key className="h-4 w-4" />
+                {isGeneratingKey ? 'Generating...' : 'Generate Key Pair'}
+              </Button>
+            </div>
+            
+            {/* Show manual key input only if no key has been generated */}
+            {!formData.key_generated && (
+              <>
+                <SSHKeyInput
+                  value={formData.ssh_key ?? ''}
+                  onChange={handleSSHKeyChange}
+                  onError={setSshKeyError}
+                />
+                {errors.ssh_key && <p className="mt-1 text-sm text-destructive">{errors.ssh_key}</p>}
+                {sshKeyError && <p className="mt-1 text-sm text-destructive">{sshKeyError}</p>}
+              </>
+            )}
+            
+            {/* Show generated key status */}
+            {formData.key_generated && (
+              <div className="p-3 bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-800 rounded-md">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <svg className="w-4 h-4 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                    <span className="text-sm font-medium text-green-800 dark:text-green-200">
+                      SSH key pair generated successfully
+                    </span>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setShowPublicKeyModal(true)}
+                    className="gap-2 border-blue-500/20 text-blue-400 bg-blue-500/10 hover:bg-blue-500/20"
+                  >
+                    <Key className="h-4 w-4" />
+                    View Public Key
+                  </Button>
+                </div>
+                <p className="text-xs text-green-700 dark:text-green-300 mt-1">
+                  The private key has been generated and will be saved with the server.
+                </p>
+              </div>
+            )}
           </div>
 
           <div>
@@ -323,6 +419,16 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
         </Button>
       </div>
     </form>
+    
+    {/* Public Key Modal */}
+    <PublicKeyModal
+      isOpen={showPublicKeyModal}
+      onClose={() => setShowPublicKeyModal(false)}
+      publicKey={generatedPublicKey}
+      serverName={formData.name || 'New Server'}
+      serverIp={formData.ip}
+    />
+    </>
   );
 }
 

src/app/_components/ServerList.tsx

@@ -4,6 +4,9 @@ import { useState } from 'react';
 import type { Server, CreateServerData } from '../../types/server';
 import { ServerForm } from './ServerForm';
 import { Button } from './ui/button';
+import { ConfirmationModal } from './ConfirmationModal';
+import { PublicKeyModal } from './PublicKeyModal';
+import { Key } from 'lucide-react';
 
 interface ServerListProps {
   servers: Server[];
@@ -15,6 +18,20 @@ export function ServerList({ servers, onUpdate, onDelete }: ServerListProps) {
   const [editingId, setEditingId] = useState<number | null>(null);
   const [testingConnections, setTestingConnections] = useState<Set<number>>(new Set());
   const [connectionResults, setConnectionResults] = useState<Map<number, { success: boolean; message: string }>>(new Map());
+  const [confirmationModal, setConfirmationModal] = useState<{
+    isOpen: boolean;
+    variant: 'danger';
+    title: string;
+    message: string;
+    confirmText: string;
+    onConfirm: () => void;
+  } | null>(null);
+  const [showPublicKeyModal, setShowPublicKeyModal] = useState(false);
+  const [publicKeyData, setPublicKeyData] = useState<{
+    publicKey: string;
+    serverName: string;
+    serverIp: string;
+  } | null>(null);
 
   const handleEdit = (server: Server) => {
     setEditingId(server.id);
@@ -31,12 +48,49 @@ export function ServerList({ servers, onUpdate, onDelete }: ServerListProps) {
     setEditingId(null);
   };
 
-  const handleDelete = (id: number) => {
-    if (window.confirm('Are you sure you want to delete this server configuration?')) {
-      onDelete(id);
+  const handleViewPublicKey = async (server: Server) => {
+    try {
+      const response = await fetch(`/api/servers/${server.id}/public-key`);
+      
+      if (!response.ok) {
+        throw new Error('Failed to retrieve public key');
+      }
+
+      const data = await response.json() as { success: boolean; publicKey?: string; serverName?: string; serverIp?: string; error?: string };
+      
+      if (data.success) {
+        setPublicKeyData({
+          publicKey: data.publicKey ?? '',
+          serverName: data.serverName ?? '',
+          serverIp: data.serverIp ?? ''
+        });
+        setShowPublicKeyModal(true);
+      } else {
+        throw new Error(data.error ?? 'Failed to retrieve public key');
+      }
+    } catch (error) {
+      console.error('Error retrieving public key:', error);
+      // You could show a toast notification here
     }
   };
 
+  const handleDelete = (id: number) => {
+    const server = servers.find(s => s.id === id);
+    if (!server) return;
+
+    setConfirmationModal({
+      isOpen: true,
+      variant: 'danger',
+      title: 'Delete Server',
+      message: `This will permanently delete the server configuration "${server.name}" (${server.ip}) and all associated installed scripts. This action cannot be undone!`,
+      confirmText: server.name,
+      onConfirm: () => {
+        onDelete(id);
+        setConfirmationModal(null);
+      }
+    });
+  };
+
   const handleTestConnection = async (server: Server) => {
     setTestingConnections(prev => new Set(prev).add(server.id));
     setConnectionResults(prev => {
@@ -138,8 +192,8 @@ export function ServerList({ servers, onUpdate, onDelete }: ServerListProps) {
                       </span>
                     </div>
                     <div className="mt-1 text-xs text-muted-foreground">
-                      Created: {new Date(server.created_at).toLocaleDateString()}
-                      {server.updated_at !== server.created_at && (
+                      Created: {server.created_at ? new Date(server.created_at).toLocaleDateString() : 'Unknown'}
+                      {server.updated_at && server.updated_at !== server.created_at && (
                         <span> • Updated: {new Date(server.updated_at).toLocaleDateString()}</span>
                       )}
                     </div>
@@ -198,6 +252,19 @@ export function ServerList({ servers, onUpdate, onDelete }: ServerListProps) {
                   )}
                 </Button>
                 <div className="flex space-x-2">
+                  {/* View Public Key button - only show for generated keys */}
+                  {server.key_generated === true && (
+                    <Button
+                      onClick={() => handleViewPublicKey(server)}
+                      variant="outline"
+                      size="sm"
+                      className="flex-1 sm:flex-none border-blue-500/20 text-blue-400 bg-blue-500/10 hover:bg-blue-500/20"
+                    >
+                      <Key className="w-4 h-4 mr-1" />
+                      <span className="hidden sm:inline">View Public Key</span>
+                      <span className="sm:hidden">Key</span>
+                    </Button>
+                  )}
                   <Button
                     onClick={() => handleEdit(server)}
                     variant="outline"
@@ -228,6 +295,35 @@ export function ServerList({ servers, onUpdate, onDelete }: ServerListProps) {
           )}
         </div>
       ))}
+      
+      {/* Confirmation Modal */}
+      {confirmationModal && (
+        <ConfirmationModal
+          isOpen={confirmationModal.isOpen}
+          onClose={() => setConfirmationModal(null)}
+          onConfirm={confirmationModal.onConfirm}
+          title={confirmationModal.title}
+          message={confirmationModal.message}
+          variant={confirmationModal.variant}
+          confirmText={confirmationModal.confirmText}
+          confirmButtonText="Delete Server"
+          cancelButtonText="Cancel"
+        />
+      )}
+      
+      {/* Public Key Modal */}
+      {publicKeyData && (
+        <PublicKeyModal
+          isOpen={showPublicKeyModal}
+          onClose={() => {
+            setShowPublicKeyModal(false);
+            setPublicKeyData(null);
+          }}
+          publicKey={publicKeyData.publicKey}
+          serverName={publicKeyData.serverName}
+          serverIp={publicKeyData.serverIp}
+        />
+      )}
     </div>
   );
 }

src/app/_components/SettingsModal.tsx

@@ -5,6 +5,7 @@ import type { Server, CreateServerData } from '../../types/server';
 import { ServerForm } from './ServerForm';
 import { ServerList } from './ServerList';
 import { Button } from './ui/button';
+import { ContextualHelpIcon } from './ContextualHelpIcon';
 
 interface SettingsModalProps {
   isOpen: boolean;
@@ -106,7 +107,10 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
             <div className="bg-card rounded-lg shadow-xl max-w-4xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden">
         {/* Header */}
         <div className="flex items-center justify-between p-4 sm:p-6 border-b border-border">
-          <h2 className="text-xl sm:text-2xl font-bold text-card-foreground">Settings</h2>
+          <div className="flex items-center gap-2">
+            <h2 className="text-xl sm:text-2xl font-bold text-card-foreground">Settings</h2>
+            <ContextualHelpIcon section="server-settings" tooltip="Help with Server Settings" />
+          </div>
           <Button
             onClick={onClose}
             variant="ghost"

src/app/_components/Terminal.tsx

@@ -11,6 +11,7 @@ interface TerminalProps {
   mode?: 'local' | 'ssh';
   server?: any;
   isUpdate?: boolean;
+  isShell?: boolean;
   containerId?: string;
 }
 
@@ -20,7 +21,7 @@ interface TerminalMessage {
   timestamp: number;
 }
 
-export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate = false, containerId }: TerminalProps) {
+export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate = false, isShell = false, containerId }: TerminalProps) {
   const [isConnected, setIsConnected] = useState(false);
   const [isRunning, setIsRunning] = useState(false);
   const [isClient, setIsClient] = useState(false);
@@ -332,6 +333,7 @@ export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate
             mode,
             server,
             isUpdate,
+            isShell,
             containerId
           };
           ws.send(JSON.stringify(message));
@@ -372,7 +374,7 @@ export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate
         wsRef.current.close();
       }
     };
-  }, [scriptPath, mode, server, isUpdate, containerId, isMobile]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [scriptPath, mode, server, isUpdate, isShell, containerId, isMobile]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const startScript = () => {
     if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN && !isRunning) {
@@ -388,6 +390,7 @@ export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate
         mode,
         server,
         isUpdate,
+        isShell,
         containerId
       }));
     }

src/app/_components/VersionDisplay.tsx

@@ -3,10 +3,15 @@
 import { api } from "~/trpc/react";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
+import { ContextualHelpIcon } from "./ContextualHelpIcon";
 
 import { ExternalLink, Download, RefreshCw, Loader2 } from "lucide-react";
 import { useState, useEffect, useRef } from "react";
 
+interface VersionDisplayProps {
+  onOpenReleaseNotes?: () => void;
+}
+
 // Loading overlay component with log streaming
 function LoadingOverlay({ 
   isNetworkError = false, 
@@ -72,7 +77,7 @@ function LoadingOverlay({
   );
 }
 
-export function VersionDisplay() {
+export function VersionDisplay({ onOpenReleaseNotes }: VersionDisplayProps = {}) {
   const { data: versionStatus, isLoading, error } = api.version.getVersionStatus.useQuery();
   const [isUpdating, setIsUpdating] = useState(false);
   const [updateResult, setUpdateResult] = useState<{ success: boolean; message: string } | null>(null);
@@ -137,7 +142,6 @@ export function VersionDisplay() {
       const noLogsForAWhile = timeSinceLastLog > 60000; // 60 seconds
       
       if (hasBeenUpdatingLongEnough && noLogsForAWhile && isUpdating && !isNetworkError) {
-        console.log('Fallback: Assuming server restart due to long silence');
         setIsNetworkError(true);
         setUpdateLogs(prev => [...prev, 'Server restarting... waiting for reconnection...']);
         
@@ -230,31 +234,16 @@ export function VersionDisplay() {
       {isUpdating && <LoadingOverlay isNetworkError={isNetworkError} logs={updateLogs} />}
       
       <div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-2">
-        <Badge variant={isUpToDate ? "default" : "secondary"} className="text-xs">
+        <Badge 
+          variant={isUpToDate ? "default" : "secondary"} 
+          className={`text-xs ${onOpenReleaseNotes ? 'cursor-pointer hover:opacity-80 transition-opacity' : ''}`}
+          onClick={onOpenReleaseNotes}
+        >
           v{currentVersion}
         </Badge>
         
         {updateAvailable && releaseInfo && (
           <div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-3">
-            <div className="relative group">
-              <Badge variant="destructive" className="animate-pulse cursor-help text-xs">
-                Update Available
-              </Badge>
-              <div className="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 px-3 py-2 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-10 hidden sm:block">
-                <div className="text-center">
-                  <div className="font-semibold mb-1">How to update:</div>
-                  <div>Click the button to update, when installed via the helper script</div>
-                  <div>or update manually:</div>
-                  <div>cd $PVESCRIPTLOCAL_DIR</div>
-                  <div>git pull</div>
-                  <div>npm install</div>
-                  <div>npm run build</div>
-                  <div>npm start</div>
-                </div>
-                <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-900 dark:border-b-gray-700"></div>
-              </div>
-            </div>
-            
             <div className="flex items-center gap-2">
               <Button
                 onClick={handleUpdate}
@@ -278,6 +267,11 @@ export function VersionDisplay() {
                 )}
               </Button>
               
+              <ContextualHelpIcon section="update-system" tooltip="Help with updates" />
+            </div>
+            
+            <div className="flex items-center gap-1">
+              <span className="text-xs text-muted-foreground">Release Notes:</span>
               <a
                 href={releaseInfo.htmlUrl}
                 target="_blank"

src/app/_components/ui/button.tsx

@@ -34,6 +34,16 @@ const buttonVariants = cva(
           "relative after:absolute after:bg-primary after:bottom-2 after:h-[1px] after:w-2/3 after:origin-bottom-left after:scale-x-100 hover:after:origin-bottom-right hover:after:scale-x-0 after:transition-transform after:ease-in-out after:duration-300",
         linkHover2:
           "relative after:absolute after:bg-primary after:bottom-2 after:h-[1px] after:w-2/3 after:origin-bottom-right after:scale-x-0 hover:after:origin-bottom-left hover:after:scale-x-100 after:transition-transform after:ease-in-out after:duration-300",
+        // Dark theme action button variants
+        edit: "bg-blue-900/20 hover:bg-blue-900/30 border border-blue-700/50 text-blue-300 hover:text-blue-200 hover:border-blue-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
+        update: "bg-cyan-900/20 hover:bg-cyan-900/30 border border-cyan-700/50 text-cyan-300 hover:text-cyan-200 hover:border-cyan-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
+        shell: "bg-gray-800/20 hover:bg-gray-800/30 border border-gray-600/50 text-gray-300 hover:text-gray-200 hover:border-gray-500/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
+        openui: "bg-blue-900/20 hover:bg-blue-900/30 border border-blue-700/50 text-blue-300 hover:text-blue-200 hover:border-blue-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
+        start: "bg-green-900/20 hover:bg-green-900/30 border border-green-700/50 text-green-300 hover:text-green-200 hover:border-green-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
+        stop: "bg-red-900/20 hover:bg-red-900/30 border border-red-700/50 text-red-300 hover:text-red-200 hover:border-red-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
+        delete: "bg-red-900/20 hover:bg-red-900/30 border border-red-700/50 text-red-300 hover:text-red-200 hover:border-red-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md disabled:hover:scale-100",
+        save: "bg-green-900/20 hover:bg-green-900/30 border border-green-700/50 text-green-300 hover:text-green-200 hover:border-green-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md disabled:hover:scale-100",
+        cancel: "bg-gray-800/20 hover:bg-gray-800/30 border border-gray-600/50 text-gray-300 hover:text-gray-200 hover:border-gray-500/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
       },
       size: {
         default: "h-10 px-4 py-2",

src/app/_components/ui/dropdown-menu.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "~/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

src/app/api/servers/[id]/public-key/route.ts

@@ -0,0 +1,64 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+import { getDatabase } from '../../../../../server/database-prisma';
+import { getSSHService } from '../../../../../server/ssh-service';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id: idParam } = await params;
+    const id = parseInt(idParam);
+    if (isNaN(id)) {
+      return NextResponse.json(
+        { error: 'Invalid server ID' },
+        { status: 400 }
+      );
+    }
+
+    const db = getDatabase();
+    const server = await db.getServerById(id);
+    
+    if (!server) {
+      return NextResponse.json(
+        { error: 'Server not found' },
+        { status: 404 }
+      );
+    }
+
+    // Only allow viewing public key if it was generated by the system
+    if (!(server as any).key_generated) {
+      return NextResponse.json(
+        { error: 'Public key not available for user-provided keys' },
+        { status: 403 }
+      );
+    }
+
+    if (!(server as any).ssh_key_path) {
+      return NextResponse.json(
+        { error: 'SSH key path not found' },
+        { status: 404 }
+      );
+    }
+
+    const sshService = getSSHService();
+    const publicKey = sshService.getPublicKey((server as any).ssh_key_path as string);
+    
+    return NextResponse.json({
+      success: true,
+      publicKey,
+      serverName: (server as any).name,
+      serverIp: (server as any).ip
+    });
+  } catch (error) {
+    console.error('Error retrieving public key:', error);
+    return NextResponse.json(
+      { 
+        success: false,
+        error: error instanceof Error ? error.message : String(error)
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/api/servers/[id]/route.ts

@@ -1,6 +1,6 @@
 import type { NextRequest } from 'next/server';
 import { NextResponse } from 'next/server';
-import { getDatabase } from '../../../../server/database';
+import { getDatabase } from '../../../../server/database-prisma';
 import type { CreateServerData } from '../../../../types/server';
 
 export async function GET(
@@ -18,7 +18,7 @@ export async function GET(
     }
 
     const db = getDatabase();
-    const server = db.getServerById(id);
+    const server = await db.getServerById(id);
     
     if (!server) {
       return NextResponse.json(
@@ -52,7 +52,7 @@ export async function PUT(
     }
 
     const body = await request.json();
-    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color }: CreateServerData = body;
+    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color, key_generated, ssh_key_path }: CreateServerData = body;
 
     // Validate required fields
     if (!name || !ip || !user) {
@@ -73,7 +73,7 @@ export async function PUT(
     // Validate authentication based on auth_type
     const authType = auth_type ?? 'password';
     
-    if (authType === 'password' || authType === 'both') {
+    if (authType === 'password') {
       if (!password?.trim()) {
         return NextResponse.json(
           { error: 'Password is required for password authentication' },
@@ -82,7 +82,7 @@ export async function PUT(
       }
     }
     
-    if (authType === 'key' || authType === 'both') {
+    if (authType === 'key') {
       if (!ssh_key?.trim()) {
         return NextResponse.json(
           { error: 'SSH key is required for key authentication' },
@@ -91,20 +91,11 @@ export async function PUT(
       }
     }
 
-    // Check if at least one authentication method is provided
-    if (authType === 'both') {
-      if (!password?.trim() && !ssh_key?.trim()) {
-        return NextResponse.json(
-          { error: 'At least one authentication method (password or SSH key) is required' },
-          { status: 400 }
-        );
-      }
-    }
 
     const db = getDatabase();
     
     // Check if server exists
-    const existingServer = db.getServerById(id);
+    const existingServer = await db.getServerById(id);
     if (!existingServer) {
       return NextResponse.json(
         { error: 'Server not found' },
@@ -112,7 +103,7 @@ export async function PUT(
       );
     }
 
-    const result = db.updateServer(id, { 
+    await db.updateServer(id, { 
       name, 
       ip, 
       user, 
@@ -121,13 +112,15 @@ export async function PUT(
       ssh_key,
       ssh_key_passphrase,
       ssh_port: ssh_port ?? 22,
-      color
+      color,
+      key_generated: key_generated ?? false,
+      ssh_key_path
     });
     
     return NextResponse.json(
       { 
         message: 'Server updated successfully',
-        changes: result.changes 
+        changes: 1 
       }
     );
   } catch (error) {
@@ -165,7 +158,7 @@ export async function DELETE(
     const db = getDatabase();
     
     // Check if server exists
-    const existingServer = db.getServerById(id);
+    const existingServer = await db.getServerById(id);
     if (!existingServer) {
       return NextResponse.json(
         { error: 'Server not found' },
@@ -173,12 +166,15 @@ export async function DELETE(
       );
     }
 
-    const result = db.deleteServer(id);
+    // Delete all installed scripts associated with this server
+    await db.deleteInstalledScriptsByServer(id);
+
+    await db.deleteServer(id);
     
     return NextResponse.json(
       { 
         message: 'Server deleted successfully',
-        changes: result.changes 
+        changes: 1 
       }
     );
   } catch (error) {

src/app/api/servers/[id]/test-connection/route.ts

@@ -1,6 +1,6 @@
 import type { NextRequest } from 'next/server';
 import { NextResponse } from 'next/server';
-import { getDatabase } from '../../../../../server/database';
+import { getDatabase } from '../../../../../server/database-prisma';
 import { getSSHService } from '../../../../../server/ssh-service';
 import type { Server } from '../../../../../types/server';
 
@@ -19,7 +19,7 @@ export async function POST(
     }
 
     const db = getDatabase();
-    const server = db.getServerById(id) as Server;
+    const server = await db.getServerById(id) as Server;
     
     if (!server) {
       return NextResponse.json(

src/app/api/servers/generate-keypair/route.ts

@@ -0,0 +1,32 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+import { getSSHService } from '../../../../server/ssh-service';
+import { getDatabase } from '../../../../server/database-prisma';
+
+export async function POST(_request: NextRequest) {
+  try {
+    const sshService = getSSHService();
+    const db = getDatabase();
+    
+    // Get the next available server ID for key file naming
+    const serverId = await db.getNextServerId();
+    
+    const keyPair = await sshService.generateKeyPair(serverId);
+    
+    return NextResponse.json({
+      success: true,
+      privateKey: keyPair.privateKey,
+      publicKey: keyPair.publicKey,
+      serverId: serverId
+    });
+  } catch (error) {
+    console.error('Error generating SSH key pair:', error);
+    return NextResponse.json(
+      { 
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to generate SSH key pair'
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/api/servers/route.ts

@@ -1,12 +1,12 @@
 import type { NextRequest } from 'next/server';
 import { NextResponse } from 'next/server';
-import { getDatabase } from '../../../server/database';
+import { getDatabase } from '../../../server/database-prisma';
 import type { CreateServerData } from '../../../types/server';
 
 export async function GET() {
   try {
     const db = getDatabase();
-    const servers = db.getAllServers();
+    const servers = await db.getAllServers();
     return NextResponse.json(servers);
   } catch (error) {
     console.error('Error fetching servers:', error);
@@ -20,7 +20,7 @@ export async function GET() {
 export async function POST(request: NextRequest) {
   try {
     const body = await request.json();
-    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color }: CreateServerData = body;
+    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color, key_generated, ssh_key_path }: CreateServerData = body;
 
     // Validate required fields
     if (!name || !ip || !user) {
@@ -41,7 +41,7 @@ export async function POST(request: NextRequest) {
     // Validate authentication based on auth_type
     const authType = auth_type ?? 'password';
     
-    if (authType === 'password' || authType === 'both') {
+    if (authType === 'password') {
       if (!password?.trim()) {
         return NextResponse.json(
           { error: 'Password is required for password authentication' },
@@ -50,7 +50,7 @@ export async function POST(request: NextRequest) {
       }
     }
     
-    if (authType === 'key' || authType === 'both') {
+    if (authType === 'key') {
       if (!ssh_key?.trim()) {
         return NextResponse.json(
           { error: 'SSH key is required for key authentication' },
@@ -59,18 +59,9 @@ export async function POST(request: NextRequest) {
       }
     }
 
-    // Check if at least one authentication method is provided
-    if (authType === 'both') {
-      if (!password?.trim() && !ssh_key?.trim()) {
-        return NextResponse.json(
-          { error: 'At least one authentication method (password or SSH key) is required' },
-          { status: 400 }
-        );
-      }
-    }
 
     const db = getDatabase();
-    const result = db.createServer({ 
+    const result = await db.createServer({ 
       name, 
       ip, 
       user, 
@@ -79,13 +70,15 @@ export async function POST(request: NextRequest) {
       ssh_key,
       ssh_key_passphrase,
       ssh_port: ssh_port ?? 22,
-      color
+      color,
+      key_generated: key_generated ?? false,
+      ssh_key_path
     });
     
     return NextResponse.json(
       { 
         message: 'Server created successfully',
-        id: result.lastInsertRowid 
+        id: result.id 
       },
       { status: 201 }
     );

src/app/page.tsx

@@ -1,7 +1,7 @@
 
 'use client';
 
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { ScriptsGrid } from './_components/ScriptsGrid';
 import { DownloadedScriptsTab } from './_components/DownloadedScriptsTab';
 import { InstalledScriptsTab } from './_components/InstalledScriptsTab';
@@ -9,32 +9,103 @@ import { ResyncButton } from './_components/ResyncButton';
 import { Terminal } from './_components/Terminal';
 import { ServerSettingsButton } from './_components/ServerSettingsButton';
 import { SettingsButton } from './_components/SettingsButton';
+import { HelpButton } from './_components/HelpButton';
 import { VersionDisplay } from './_components/VersionDisplay';
 import { Button } from './_components/ui/button';
-import { Rocket, Package, HardDrive, FolderOpen } from 'lucide-react';
+import { ContextualHelpIcon } from './_components/ContextualHelpIcon';
+import { ReleaseNotesModal, getLastSeenVersion } from './_components/ReleaseNotesModal';
+import { Footer } from './_components/Footer';
+import { Package, HardDrive, FolderOpen } from 'lucide-react';
 import { api } from '~/trpc/react';
 
 export default function Home() {
   const [runningScript, setRunningScript] = useState<{ path: string; name: string; mode?: 'local' | 'ssh'; server?: any } | null>(null);
-  const [activeTab, setActiveTab] = useState<'scripts' | 'downloaded' | 'installed'>('scripts');
+  const [activeTab, setActiveTab] = useState<'scripts' | 'downloaded' | 'installed'>(() => {
+    if (typeof window !== 'undefined') {
+      const savedTab = localStorage.getItem('activeTab') as 'scripts' | 'downloaded' | 'installed';
+      return savedTab || 'scripts';
+    }
+    return 'scripts';
+  });
+  const [releaseNotesOpen, setReleaseNotesOpen] = useState(false);
+  const [highlightVersion, setHighlightVersion] = useState<string | undefined>(undefined);
   const terminalRef = useRef<HTMLDivElement>(null);
 
   // Fetch data for script counts
   const { data: scriptCardsData } = api.scripts.getScriptCardsWithCategories.useQuery();
-  const { data: localScriptsData } = api.scripts.getCtScripts.useQuery();
+  const { data: localScriptsData } = api.scripts.getAllDownloadedScripts.useQuery();
   const { data: installedScriptsData } = api.installedScripts.getAllInstalledScripts.useQuery();
+  const { data: versionData } = api.version.getCurrentVersion.useQuery();
+
+  // Save active tab to localStorage whenever it changes
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('activeTab', activeTab);
+    }
+  }, [activeTab]);
+
+  // Auto-show release notes modal after update
+  useEffect(() => {
+    if (versionData?.success && versionData.version) {
+      const currentVersion = versionData.version;
+      const lastSeenVersion = getLastSeenVersion();
+      
+      // If we have a current version and either no last seen version or versions don't match
+      if (currentVersion && (!lastSeenVersion || currentVersion !== lastSeenVersion)) {
+        setHighlightVersion(currentVersion);
+        setReleaseNotesOpen(true);
+      }
+    }
+  }, [versionData]);
+
+  const handleOpenReleaseNotes = () => {
+    setHighlightVersion(undefined);
+    setReleaseNotesOpen(true);
+  };
+
+  const handleCloseReleaseNotes = () => {
+    setReleaseNotesOpen(false);
+    setHighlightVersion(undefined);
+  };
 
   // Calculate script counts
   const scriptCounts = {
-    available: scriptCardsData?.success ? scriptCardsData.cards?.length ?? 0 : 0,
+    available: (() => {
+      if (!scriptCardsData?.success) return 0;
+      
+      // Deduplicate scripts using Map by slug (same logic as ScriptsGrid.tsx)
+      const scriptMap = new Map<string, any>();
+      
+      scriptCardsData.cards?.forEach(script => {
+        if (script?.name && script?.slug) {
+          // Use slug as unique identifier, only keep first occurrence
+          if (!scriptMap.has(script.slug)) {
+            scriptMap.set(script.slug, script);
+          }
+        }
+      });
+      
+      return scriptMap.size;
+    })(),
     downloaded: (() => {
       if (!scriptCardsData?.success || !localScriptsData?.scripts) return 0;
       
-      // Count scripts that are both in GitHub data and have local versions
-      const githubScripts = scriptCardsData.cards ?? [];
+      // First deduplicate GitHub scripts using Map by slug
+      const scriptMap = new Map<string, any>();
+      
+      scriptCardsData.cards?.forEach(script => {
+        if (script?.name && script?.slug) {
+          if (!scriptMap.has(script.slug)) {
+            scriptMap.set(script.slug, script);
+          }
+        }
+      });
+      
+      const deduplicatedGithubScripts = Array.from(scriptMap.values());
       const localScripts = localScriptsData.scripts ?? [];
       
-      return githubScripts.filter(script => {
+      // Count scripts that are both in deduplicated GitHub data and have local versions
+      return deduplicatedGithubScripts.filter(script => {
         if (!script?.name) return false;
         return localScripts.some(local => {
           if (!local?.name) return false;
@@ -76,14 +147,14 @@ export default function Home() {
         {/* Header */}
         <div className="text-center mb-6 sm:mb-8">
           <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-foreground mb-2 flex items-center justify-center gap-2 sm:gap-3">
-            <Rocket className="h-6 w-6 sm:h-8 w-8 lg:h-9 lg:w-9" />
+            
             <span className="break-words">PVE Scripts Management</span>
           </h1>
           <p className="text-sm sm:text-base text-muted-foreground mb-4 px-2">
             Manage and execute Proxmox helper scripts locally with live output streaming
           </p>
           <div className="flex justify-center px-2">
-            <VersionDisplay />
+            <VersionDisplay onOpenReleaseNotes={handleOpenReleaseNotes} />
           </div>
         </div>
 
@@ -93,28 +164,30 @@ export default function Home() {
             <ServerSettingsButton />
             <SettingsButton />
             <ResyncButton />
+            <HelpButton />
           </div>
         </div>
 
         {/* Tab Navigation */}
         <div className="mb-6 sm:mb-8">
           <div className="border-b border-border">
-            <nav className="-mb-px flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 lg:space-x-8">
+            <nav className="-mb-px flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-1">
               <Button
                 variant="ghost"
                 size="null"
                 onClick={() => setActiveTab('scripts')}
                 className={`px-3 py-2 text-sm flex items-center justify-center sm:justify-start gap-2 w-full sm:w-auto ${
                   activeTab === 'scripts'
-                    ? 'bg-accent text-accent-foreground'
-                    : 'hover:bg-accent hover:text-accent-foreground'
-                }`}> 
+                    ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none'
+                    : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none'
+                }`}>
                 <Package className="h-4 w-4" />
                 <span className="hidden sm:inline">Available Scripts</span>
                 <span className="sm:hidden">Available</span>
                 <span className="ml-1 px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded-full">
                   {scriptCounts.available}
                 </span>
+                <ContextualHelpIcon section="available-scripts" tooltip="Help with Available Scripts" />
               </Button>
               <Button
                 variant="ghost"
@@ -122,8 +195,8 @@ export default function Home() {
                 onClick={() => setActiveTab('downloaded')}
                 className={`px-3 py-2 text-sm flex items-center justify-center sm:justify-start gap-2 w-full sm:w-auto ${
                   activeTab === 'downloaded'
-                    ? 'bg-accent text-accent-foreground'
-                    : 'hover:bg-accent hover:text-accent-foreground'
+                    ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none'
+                    : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none'
                 }`}>
                 <HardDrive className="h-4 w-4" />
                 <span className="hidden sm:inline">Downloaded Scripts</span>
@@ -131,6 +204,7 @@ export default function Home() {
                 <span className="ml-1 px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded-full">
                   {scriptCounts.downloaded}
                 </span>
+                <ContextualHelpIcon section="downloaded-scripts" tooltip="Help with Downloaded Scripts" />
               </Button>
               <Button
                 variant="ghost"
@@ -138,8 +212,8 @@ export default function Home() {
                 onClick={() => setActiveTab('installed')}
                 className={`px-3 py-2 text-sm flex items-center justify-center sm:justify-start gap-2 w-full sm:w-auto ${
                   activeTab === 'installed'
-                    ? 'bg-accent text-accent-foreground'
-                    : 'hover:bg-accent hover:text-accent-foreground'
+                    ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none'
+                    : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none'
                 }`}>
                 <FolderOpen className="h-4 w-4" />
                 <span className="hidden sm:inline">Installed Scripts</span>
@@ -147,6 +221,7 @@ export default function Home() {
                 <span className="ml-1 px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded-full">
                   {scriptCounts.installed}
                 </span>
+                <ContextualHelpIcon section="installed-scripts" tooltip="Help with Installed Scripts" />
               </Button>
             </nav>
           </div>
@@ -179,6 +254,16 @@ export default function Home() {
           <InstalledScriptsTab />
         )}
       </div>
+
+      {/* Footer */}
+      <Footer onOpenReleaseNotes={handleOpenReleaseNotes} />
+
+      {/* Release Notes Modal */}
+      <ReleaseNotesModal
+        isOpen={releaseNotesOpen}
+        onClose={handleCloseReleaseNotes}
+        highlightVersion={highlightVersion}
+      />
     </main>
   );
 }

src/lib/colorUtils.ts

@@ -3,7 +3,7 @@
  * to ensure optimal readability based on luminance
  */
 export function getContrastColor(hexColor: string): 'black' | 'white' {
-  if (!hexColor || hexColor.length !== 7 || !hexColor.startsWith('#')) {
+  if (!hexColor?.length || hexColor.length !== 7 || !hexColor.startsWith('#')) {
     return 'black'; // Default to black for invalid colors
   }
 

src/server/api/routers/scripts.ts

@@ -27,6 +27,16 @@ export const scriptsRouter = createTRPCRouter({
       };
     }),
 
+  // Get all downloaded scripts from all directories
+  getAllDownloadedScripts: publicProcedure
+    .query(async () => {
+      const scripts = await scriptManager.getAllDownloadedScripts();
+      return {
+        scripts,
+        directoryInfo: scriptManager.getScriptsDirectoryInfo()
+      };
+    }),
+
  
   // Get script content for viewing
   getScriptContent: publicProcedure
@@ -244,6 +254,58 @@ export const scriptsRouter = createTRPCRouter({
       }
     }),
 
+  // Load multiple scripts from GitHub
+  loadMultipleScripts: publicProcedure
+    .input(z.object({ slugs: z.array(z.string()) }))
+    .mutation(async ({ input }) => {
+      try {
+        const successful = [];
+        const failed = [];
+
+        for (const slug of input.slugs) {
+          try {
+            // Get the script details
+            const script = await localScriptsService.getScriptBySlug(slug);
+            if (!script) {
+              failed.push({ slug, error: 'Script not found' });
+              continue;
+            }
+
+            // Load the script files
+            const result = await scriptDownloaderService.loadScript(script);
+            if (result.success) {
+              successful.push({ slug, files: result.files });
+            } else {
+              const error = 'error' in result ? result.error : 'Failed to load script';
+              failed.push({ slug, error });
+            }
+          } catch (error) {
+            failed.push({ 
+              slug, 
+              error: error instanceof Error ? error.message : 'Failed to load script' 
+            });
+          }
+        }
+
+        return {
+          success: true,
+          message: `Downloaded ${successful.length} scripts successfully, ${failed.length} failed`,
+          successful,
+          failed,
+          total: input.slugs.length
+        };
+      } catch (error) {
+        console.error('Error in loadMultipleScripts:', error);
+        return {
+          success: false,
+          error: error instanceof Error ? error.message : 'Failed to load multiple scripts',
+          successful: [],
+          failed: [],
+          total: 0
+        };
+      }
+    }),
+
   // Check if script files exist locally
   checkScriptFiles: publicProcedure
     .input(z.object({ slug: z.string() }))

src/server/api/routers/servers.ts

@@ -1,13 +1,13 @@
 import { z } from "zod";
 import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
-import { getDatabase } from "~/server/database";
+import { getDatabase } from "~/server/database-prisma";
 
 export const serversRouter = createTRPCRouter({
   getAllServers: publicProcedure
     .query(async () => {
       try {
         const db = getDatabase();
-        const servers = db.getAllServers();
+        const servers = await db.getAllServers();
         return { success: true, servers };
       } catch (error) {
         console.error('Error fetching servers:', error);
@@ -24,7 +24,7 @@ export const serversRouter = createTRPCRouter({
     .query(async ({ input }) => {
       try {
         const db = getDatabase();
-        const server = db.getServerById(input.id);
+        const server = await db.getServerById(input.id);
         if (!server) {
           return { success: false, error: 'Server not found', server: null };
         }

src/server/api/routers/version.ts

@@ -11,6 +11,7 @@ interface GitHubRelease {
   name: string;
   published_at: string;
   html_url: string;
+  body: string;
 }
 
 // Helper function to fetch from GitHub API with optional authentication
@@ -127,6 +128,43 @@ export const versionRouter = createTRPCRouter({
       }
     }),
 
+  // Get all releases for release notes
+  getAllReleases: publicProcedure
+    .query(async () => {
+      try {
+        const response = await fetchGitHubAPI('https://api.github.com/repos/community-scripts/ProxmoxVE-Local/releases');
+        
+        if (!response.ok) {
+          throw new Error(`GitHub API error: ${response.status}`);
+        }
+        
+        const releases: GitHubRelease[] = await response.json();
+        
+        // Sort by published date (newest first)
+        const sortedReleases = releases
+          .filter(release => !release.tag_name.includes('beta') && !release.tag_name.includes('alpha'))
+          .sort((a, b) => new Date(b.published_at).getTime() - new Date(a.published_at).getTime());
+        
+        return {
+          success: true,
+          releases: sortedReleases.map(release => ({
+            tagName: release.tag_name,
+            name: release.name,
+            publishedAt: release.published_at,
+            htmlUrl: release.html_url,
+            body: release.body
+          }))
+        };
+      } catch (error) {
+        console.error('Error fetching all releases:', error);
+        return {
+          success: false,
+          error: error instanceof Error ? error.message : 'Failed to fetch releases',
+          releases: []
+        };
+      }
+    }),
+
   // Get update logs from the log file
   getUpdateLogs: publicProcedure
     .query(async () => {

src/server/database-prisma.js

@@ -0,0 +1,287 @@
+import { prisma } from './db.js';
+import { join } from 'path';
+import { writeFileSync, unlinkSync, chmodSync, mkdirSync } from 'fs';
+import { existsSync } from 'fs';
+
+class DatabaseServicePrisma {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    // Ensure data/ssh-keys directory exists
+    const sshKeysDir = join(process.cwd(), 'data', 'ssh-keys');
+    if (!existsSync(sshKeysDir)) {
+      mkdirSync(sshKeysDir, { mode: 0o700 });
+    }
+  }
+
+  // Server CRUD operations
+  async createServer(serverData) {
+    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color, key_generated } = serverData;
+    
+    let ssh_key_path = null;
+    
+    // If using SSH key authentication, create persistent key file
+    if (auth_type === 'key' && ssh_key) {
+      const serverId = await this.getNextServerId();
+      ssh_key_path = this.createSSHKeyFile(serverId, ssh_key);
+    }
+    
+    return await prisma.server.create({
+      data: {
+        name,
+        ip,
+        user,
+        password,
+        auth_type: auth_type ?? 'password',
+        ssh_key,
+        ssh_key_passphrase,
+        ssh_port: ssh_port ?? 22,
+        ssh_key_path,
+        key_generated: Boolean(key_generated),
+        color,
+      }
+    });
+  }
+
+  async getAllServers() {
+    return await prisma.server.findMany({
+      orderBy: { created_at: 'desc' }
+    });
+  }
+
+  async getServerById(id) {
+    return await prisma.server.findUnique({
+      where: { id }
+    });
+  }
+
+  async updateServer(id, serverData) {
+    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color, key_generated } = serverData;
+    
+    // Get existing server to check for key changes
+    const existingServer = await this.getServerById(id);
+    let ssh_key_path = existingServer?.ssh_key_path;
+    
+    // Handle SSH key changes
+    if (auth_type === 'key' && ssh_key) {
+      // Delete old key file if it exists
+      if (existingServer?.ssh_key_path && existsSync(existingServer.ssh_key_path)) {
+        try {
+          unlinkSync(existingServer.ssh_key_path);
+          // Also delete public key file if it exists
+          const pubKeyPath = existingServer.ssh_key_path + '.pub';
+          if (existsSync(pubKeyPath)) {
+            unlinkSync(pubKeyPath);
+          }
+        } catch (error) {
+          console.warn('Failed to delete old SSH key file:', error);
+        }
+      }
+      
+      // Create new key file
+      ssh_key_path = this.createSSHKeyFile(id, ssh_key);
+    } else if (auth_type !== 'key') {
+      // If switching away from key auth, delete key files
+      if (existingServer?.ssh_key_path && existsSync(existingServer.ssh_key_path)) {
+        try {
+          unlinkSync(existingServer.ssh_key_path);
+          const pubKeyPath = existingServer.ssh_key_path + '.pub';
+          if (existsSync(pubKeyPath)) {
+            unlinkSync(pubKeyPath);
+          }
+        } catch (error) {
+          console.warn('Failed to delete SSH key file:', error);
+        }
+      }
+      ssh_key_path = null;
+    }
+    
+    return await prisma.server.update({
+      where: { id },
+      data: {
+        name,
+        ip,
+        user,
+        password,
+        auth_type: auth_type ?? 'password',
+        ssh_key,
+        ssh_key_passphrase,
+        ssh_port: ssh_port ?? 22,
+        ssh_key_path,
+        key_generated: key_generated !== undefined ? Boolean(key_generated) : (existingServer?.key_generated ?? false),
+        color,
+      }
+    });
+  }
+
+  async deleteServer(id) {
+    // Get server info before deletion to clean up key files
+    const server = await this.getServerById(id);
+    
+    // Delete SSH key files if they exist
+    if (server?.ssh_key_path && existsSync(server.ssh_key_path)) {
+      try {
+        unlinkSync(server.ssh_key_path);
+        const pubKeyPath = server.ssh_key_path + '.pub';
+        if (existsSync(pubKeyPath)) {
+          unlinkSync(pubKeyPath);
+        }
+      } catch (error) {
+        console.warn('Failed to delete SSH key file:', error);
+      }
+    }
+    
+    return await prisma.server.delete({
+      where: { id }
+    });
+  }
+
+  // Installed Scripts CRUD operations
+  async createInstalledScript(scriptData) {
+    const { script_name, script_path, container_id, server_id, execution_mode, status, output_log, web_ui_ip, web_ui_port } = scriptData;
+    
+    return await prisma.installedScript.create({
+      data: {
+        script_name,
+        script_path,
+        container_id: container_id ?? null,
+        server_id: server_id ?? null,
+        execution_mode,
+        status,
+        output_log: output_log ?? null,
+        web_ui_ip: web_ui_ip ?? null,
+        web_ui_port: web_ui_port ?? null,
+      }
+    });
+  }
+
+  async getAllInstalledScripts() {
+    return await prisma.installedScript.findMany({
+      include: {
+        server: true
+      },
+      orderBy: { installation_date: 'desc' }
+    });
+  }
+
+  async getInstalledScriptById(id) {
+    return await prisma.installedScript.findUnique({
+      where: { id },
+      include: {
+        server: true
+      }
+    });
+  }
+
+  async getInstalledScriptsByServer(server_id) {
+    return await prisma.installedScript.findMany({
+      where: { server_id },
+      include: {
+        server: true
+      },
+      orderBy: { installation_date: 'desc' }
+    });
+  }
+
+  async updateInstalledScript(id, updateData) {
+    const { script_name, container_id, status, output_log, web_ui_ip, web_ui_port } = updateData;
+    
+    const updateFields = {};
+    if (script_name !== undefined) updateFields.script_name = script_name;
+    if (container_id !== undefined) updateFields.container_id = container_id;
+    if (status !== undefined) updateFields.status = status;
+    if (output_log !== undefined) updateFields.output_log = output_log;
+    if (web_ui_ip !== undefined) updateFields.web_ui_ip = web_ui_ip;
+    if (web_ui_port !== undefined) updateFields.web_ui_port = web_ui_port;
+
+    if (Object.keys(updateFields).length === 0) {
+      return { changes: 0 };
+    }
+
+    return await prisma.installedScript.update({
+      where: { id },
+      data: updateFields
+    });
+  }
+
+  async deleteInstalledScript(id) {
+    return await prisma.installedScript.delete({
+      where: { id }
+    });
+  }
+
+  async deleteInstalledScriptsByServer(server_id) {
+    return await prisma.installedScript.deleteMany({
+      where: { server_id }
+    });
+  }
+
+  async getNextServerId() {
+    const result = await prisma.server.findFirst({
+      orderBy: { id: 'desc' },
+      select: { id: true }
+    });
+    return (result?.id ?? 0) + 1;
+  }
+
+  createSSHKeyFile(serverId, sshKey) {
+    const sshKeysDir = join(process.cwd(), 'data', 'ssh-keys');
+    const keyPath = join(sshKeysDir, `server_${serverId}_key`);
+    
+    // Normalize the key: trim any trailing whitespace and ensure exactly one newline at the end
+    const normalizedKey = sshKey.trimEnd() + '\n';
+    writeFileSync(keyPath, normalizedKey);
+    chmodSync(keyPath, 0o600); // Set proper permissions
+    
+    return keyPath;
+  }
+
+  // LXC Config CRUD operations
+  async createLXCConfig(scriptId, configData) {
+    return await prisma.lXCConfig.create({
+      data: {
+        installed_script_id: scriptId,
+        ...configData
+      }
+    });
+  }
+
+  async updateLXCConfig(scriptId, configData) {
+    return await prisma.lXCConfig.upsert({
+      where: { installed_script_id: scriptId },
+      update: configData,
+      create: {
+        installed_script_id: scriptId,
+        ...configData
+      }
+    });
+  }
+
+  async getLXCConfigByScriptId(scriptId) {
+    return await prisma.lXCConfig.findUnique({
+      where: { installed_script_id: scriptId }
+    });
+  }
+
+  async deleteLXCConfig(scriptId) {
+    return await prisma.lXCConfig.delete({
+      where: { installed_script_id: scriptId }
+    });
+  }
+
+  async close() {
+    await prisma.$disconnect();
+  }
+}
+
+// Singleton instance
+let dbInstance = null;
+
+export function getDatabase() {
+  dbInstance ??= new DatabaseServicePrisma();
+  return dbInstance;
+}
+
+export default DatabaseServicePrisma;

src/server/database-prisma.ts

@@ -0,0 +1,312 @@
+import { prisma } from './db';
+import { join } from 'path';
+import { writeFileSync, unlinkSync, chmodSync, mkdirSync } from 'fs';
+import { existsSync } from 'fs';
+import type { CreateServerData } from '../types/server';
+
+class DatabaseServicePrisma {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    // Ensure data/ssh-keys directory exists
+    const sshKeysDir = join(process.cwd(), 'data', 'ssh-keys');
+    if (!existsSync(sshKeysDir)) {
+      mkdirSync(sshKeysDir, { mode: 0o700 });
+    }
+  }
+
+  // Server CRUD operations
+  async createServer(serverData: CreateServerData) {
+    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color, key_generated } = serverData;
+    
+    let ssh_key_path = null;
+    
+    // If using SSH key authentication, create persistent key file
+    if (auth_type === 'key' && ssh_key) {
+      const serverId = await this.getNextServerId();
+      ssh_key_path = this.createSSHKeyFile(serverId, ssh_key);
+    }
+    
+    return await prisma.server.create({
+      data: {
+        name,
+        ip,
+        user,
+        password,
+        auth_type: auth_type ?? 'password',
+        ssh_key,
+        ssh_key_passphrase,
+        ssh_port: ssh_port ?? 22,
+        ssh_key_path,
+        key_generated: Boolean(key_generated),
+        color,
+      }
+    });
+  }
+
+  async getAllServers() {
+    return await prisma.server.findMany({
+      orderBy: { created_at: 'desc' }
+    });
+  }
+
+  async getServerById(id: number) {
+    return await prisma.server.findUnique({
+      where: { id }
+    });
+  }
+
+  async updateServer(id: number, serverData: CreateServerData) {
+    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color, key_generated } = serverData;
+    
+    // Get existing server to check for key changes
+    const existingServer = await this.getServerById(id);
+    let ssh_key_path = existingServer?.ssh_key_path;
+    
+    // Handle SSH key changes
+    if (auth_type === 'key' && ssh_key) {
+      // Delete old key file if it exists
+      if (existingServer?.ssh_key_path && existsSync(existingServer.ssh_key_path)) {
+        try {
+          unlinkSync(existingServer.ssh_key_path);
+          // Also delete public key file if it exists
+          const pubKeyPath = existingServer.ssh_key_path + '.pub';
+          if (existsSync(pubKeyPath)) {
+            unlinkSync(pubKeyPath);
+          }
+        } catch (error) {
+          console.warn('Failed to delete old SSH key file:', error);
+        }
+      }
+      
+      // Create new key file
+      ssh_key_path = this.createSSHKeyFile(id, ssh_key);
+    } else if (auth_type !== 'key') {
+      // If switching away from key auth, delete key files
+      if (existingServer?.ssh_key_path && existsSync(existingServer.ssh_key_path)) {
+        try {
+          unlinkSync(existingServer.ssh_key_path);
+          const pubKeyPath = existingServer.ssh_key_path + '.pub';
+          if (existsSync(pubKeyPath)) {
+            unlinkSync(pubKeyPath);
+          }
+        } catch (error) {
+          console.warn('Failed to delete SSH key file:', error);
+        }
+      }
+      ssh_key_path = null;
+    }
+    
+    return await prisma.server.update({
+      where: { id },
+      data: {
+        name,
+        ip,
+        user,
+        password,
+        auth_type: auth_type ?? 'password',
+        ssh_key,
+        ssh_key_passphrase,
+        ssh_port: ssh_port ?? 22,
+        ssh_key_path,
+        key_generated: key_generated !== undefined ? Boolean(key_generated) : (existingServer?.key_generated ?? false),
+        color,
+      }
+    });
+  }
+
+  async deleteServer(id: number) {
+    // Get server info before deletion to clean up key files
+    const server = await this.getServerById(id);
+    
+    // Delete SSH key files if they exist
+    if (server?.ssh_key_path && existsSync(server.ssh_key_path)) {
+      try {
+        unlinkSync(server.ssh_key_path);
+        const pubKeyPath = server.ssh_key_path + '.pub';
+        if (existsSync(pubKeyPath)) {
+          unlinkSync(pubKeyPath);
+        }
+      } catch (error) {
+        console.warn('Failed to delete SSH key file:', error);
+      }
+    }
+    
+    return await prisma.server.delete({
+      where: { id }
+    });
+  }
+
+  // Installed Scripts CRUD operations
+  async createInstalledScript(scriptData: {
+    script_name: string;
+    script_path: string;
+    container_id?: string;
+    server_id?: number;
+    execution_mode: string;
+    status: 'in_progress' | 'success' | 'failed';
+    output_log?: string;
+    web_ui_ip?: string;
+    web_ui_port?: number;
+  }) {
+    const { script_name, script_path, container_id, server_id, execution_mode, status, output_log, web_ui_ip, web_ui_port } = scriptData;
+    
+    return await prisma.installedScript.create({
+      data: {
+        script_name,
+        script_path,
+        container_id: container_id ?? null,
+        server_id: server_id ?? null,
+        execution_mode,
+        status,
+        output_log: output_log ?? null,
+        web_ui_ip: web_ui_ip ?? null,
+        web_ui_port: web_ui_port ?? null,
+      }
+    });
+  }
+
+  async getAllInstalledScripts() {
+    return await prisma.installedScript.findMany({
+      include: {
+        server: true
+      },
+      orderBy: { installation_date: 'desc' }
+    });
+  }
+
+  async getInstalledScriptById(id: number) {
+    return await prisma.installedScript.findUnique({
+      where: { id },
+      include: {
+        server: true
+      }
+    });
+  }
+
+  async getInstalledScriptsByServer(server_id: number) {
+    return await prisma.installedScript.findMany({
+      where: { server_id },
+      include: {
+        server: true
+      },
+      orderBy: { installation_date: 'desc' }
+    });
+  }
+
+  async updateInstalledScript(id: number, updateData: {
+    script_name?: string;
+    container_id?: string;
+    status?: 'in_progress' | 'success' | 'failed';
+    output_log?: string;
+    web_ui_ip?: string;
+    web_ui_port?: number;
+  }) {
+    const { script_name, container_id, status, output_log, web_ui_ip, web_ui_port } = updateData;
+    
+    const updateFields: {
+      script_name?: string;
+      container_id?: string;
+      status?: 'in_progress' | 'success' | 'failed';
+      output_log?: string;
+      web_ui_ip?: string;
+      web_ui_port?: number;
+    } = {};
+    if (script_name !== undefined) updateFields.script_name = script_name;
+    if (container_id !== undefined) updateFields.container_id = container_id;
+    if (status !== undefined) updateFields.status = status;
+    if (output_log !== undefined) updateFields.output_log = output_log;
+    if (web_ui_ip !== undefined) updateFields.web_ui_ip = web_ui_ip;
+    if (web_ui_port !== undefined) updateFields.web_ui_port = web_ui_port;
+
+    if (Object.keys(updateFields).length === 0) {
+      return { changes: 0 };
+    }
+
+    return await prisma.installedScript.update({
+      where: { id },
+      data: updateFields
+    });
+  }
+
+  async deleteInstalledScript(id: number) {
+    return await prisma.installedScript.delete({
+      where: { id }
+    });
+  }
+
+  async deleteInstalledScriptsByServer(server_id: number) {
+    return await prisma.installedScript.deleteMany({
+      where: { server_id }
+    });
+  }
+
+  async getNextServerId() {
+    const result = await prisma.server.findFirst({
+      orderBy: { id: 'desc' },
+      select: { id: true }
+    });
+    return (result?.id ?? 0) + 1;
+  }
+
+  createSSHKeyFile(serverId: number, sshKey: string) {
+    const sshKeysDir = join(process.cwd(), 'data', 'ssh-keys');
+    const keyPath = join(sshKeysDir, `server_${serverId}_key`);
+    
+    // Normalize the key: trim any trailing whitespace and ensure exactly one newline at the end
+    const normalizedKey = sshKey.trimEnd() + '\n';
+    writeFileSync(keyPath, normalizedKey);
+    chmodSync(keyPath, 0o600); // Set proper permissions
+    
+    return keyPath;
+  }
+
+  // LXC Config CRUD operations
+  async createLXCConfig(scriptId: number, configData: any) {
+    return await prisma.lXCConfig.create({
+      data: {
+        installed_script_id: scriptId,
+        ...configData
+      }
+    });
+  }
+
+  async updateLXCConfig(scriptId: number, configData: any) {
+    return await prisma.lXCConfig.upsert({
+      where: { installed_script_id: scriptId },
+      update: configData,
+      create: {
+        installed_script_id: scriptId,
+        ...configData
+      }
+    });
+  }
+
+  async getLXCConfigByScriptId(scriptId: number) {
+    return await prisma.lXCConfig.findUnique({
+      where: { installed_script_id: scriptId }
+    });
+  }
+
+  async deleteLXCConfig(scriptId: number) {
+    return await prisma.lXCConfig.delete({
+      where: { installed_script_id: scriptId }
+    });
+  }
+
+  async close() {
+    await prisma.$disconnect();
+  }
+}
+
+// Singleton instance
+let dbInstance: DatabaseServicePrisma | null = null;
+
+export function getDatabase() {
+  dbInstance ??= new DatabaseServicePrisma();
+  return dbInstance;
+}
+
+export default DatabaseServicePrisma;

src/server/database.js

@@ -1,292 +0,0 @@
-import Database from 'better-sqlite3';
-import { join } from 'path';
-
-class DatabaseService {
-  constructor() {
-    const dbPath = join(process.cwd(), 'data', 'settings.db');
-    this.db = new Database(dbPath);
-    this.init();
-  }
-
-  init() {
-    // Create servers table if it doesn't exist
-    this.db.exec(`
-      CREATE TABLE IF NOT EXISTS servers (
-        id INTEGER PRIMARY KEY AUTOINCREMENT,
-        name TEXT NOT NULL UNIQUE,
-        ip TEXT NOT NULL,
-        user TEXT NOT NULL,
-        password TEXT,
-        auth_type TEXT DEFAULT 'password' CHECK(auth_type IN ('password', 'key', 'both')),
-        ssh_key TEXT,
-        ssh_key_passphrase TEXT,
-        ssh_port INTEGER DEFAULT 22,
-        color TEXT,
-        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-        updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
-      )
-    `);
-
-    // Migration: Add new columns to existing servers table
-    try {
-      this.db.exec(`
-        ALTER TABLE servers ADD COLUMN auth_type TEXT DEFAULT 'password' CHECK(auth_type IN ('password', 'key', 'both'))
-      `);
-    } catch (e) {
-      // Column already exists, ignore error
-    }
-
-    try {
-      this.db.exec(`
-        ALTER TABLE servers ADD COLUMN ssh_key TEXT
-      `);
-    } catch (e) {
-      // Column already exists, ignore error
-    }
-
-    try {
-      this.db.exec(`
-        ALTER TABLE servers ADD COLUMN ssh_key_passphrase TEXT
-      `);
-    } catch (e) {
-      // Column already exists, ignore error
-    }
-
-    try {
-      this.db.exec(`
-        ALTER TABLE servers ADD COLUMN ssh_port INTEGER DEFAULT 22
-      `);
-    } catch (e) {
-      // Column already exists, ignore error
-    }
-
-    try {
-      this.db.exec(`
-        ALTER TABLE servers ADD COLUMN color TEXT
-      `);
-    } catch (e) {
-      // Column already exists, ignore error
-    }
-
-    // Update existing servers to have auth_type='password' if not set
-    this.db.exec(`
-      UPDATE servers SET auth_type = 'password' WHERE auth_type IS NULL
-    `);
-
-    // Update existing servers to have ssh_port=22 if not set
-    this.db.exec(`
-      UPDATE servers SET ssh_port = 22 WHERE ssh_port IS NULL
-    `);
-
-    // Create installed_scripts table if it doesn't exist
-    this.db.exec(`
-      CREATE TABLE IF NOT EXISTS installed_scripts (
-        id INTEGER PRIMARY KEY AUTOINCREMENT,
-        script_name TEXT NOT NULL,
-        script_path TEXT NOT NULL,
-        container_id TEXT,
-        server_id INTEGER,
-        execution_mode TEXT NOT NULL CHECK(execution_mode IN ('local', 'ssh')),
-        installation_date DATETIME DEFAULT CURRENT_TIMESTAMP,
-        status TEXT NOT NULL CHECK(status IN ('in_progress', 'success', 'failed')),
-        output_log TEXT,
-        FOREIGN KEY (server_id) REFERENCES servers(id) ON DELETE SET NULL
-      )
-    `);
-
-    // Create trigger to update updated_at on row update
-    this.db.exec(`
-      CREATE TRIGGER IF NOT EXISTS update_servers_timestamp 
-      AFTER UPDATE ON servers
-      BEGIN
-        UPDATE servers SET updated_at = CURRENT_TIMESTAMP WHERE id = NEW.id;
-      END
-    `);
-  }
-
-  // Server CRUD operations
-  /**
-   * @param {import('../types/server').CreateServerData} serverData
-   */
-  createServer(serverData) {
-    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color } = serverData;
-    const stmt = this.db.prepare(`
-      INSERT INTO servers (name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color) 
-      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
-    `);
-    return stmt.run(name, ip, user, password, auth_type || 'password', ssh_key, ssh_key_passphrase, ssh_port || 22, color);
-  }
-
-  getAllServers() {
-    const stmt = this.db.prepare('SELECT * FROM servers ORDER BY created_at DESC');
-    return stmt.all();
-  }
-
-  /**
-   * @param {number} id
-   */
-  getServerById(id) {
-    const stmt = this.db.prepare('SELECT * FROM servers WHERE id = ?');
-    return stmt.get(id);
-  }
-
-  /**
-   * @param {number} id
-   * @param {import('../types/server').CreateServerData} serverData
-   */
-  updateServer(id, serverData) {
-    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color } = serverData;
-    const stmt = this.db.prepare(`
-      UPDATE servers 
-      SET name = ?, ip = ?, user = ?, password = ?, auth_type = ?, ssh_key = ?, ssh_key_passphrase = ?, ssh_port = ?, color = ?
-      WHERE id = ?
-    `);
-    return stmt.run(name, ip, user, password, auth_type || 'password', ssh_key, ssh_key_passphrase, ssh_port || 22, color, id);
-  }
-
-  /**
-   * @param {number} id
-   */
-  deleteServer(id) {
-    const stmt = this.db.prepare('DELETE FROM servers WHERE id = ?');
-    return stmt.run(id);
-  }
-
-  // Installed Scripts CRUD operations
-  /**
-   * @param {Object} scriptData
-   * @param {string} scriptData.script_name
-   * @param {string} scriptData.script_path
-   * @param {string} [scriptData.container_id]
-   * @param {number} [scriptData.server_id]
-   * @param {string} scriptData.execution_mode
-   * @param {string} scriptData.status
-   * @param {string} [scriptData.output_log]
-   */
-  createInstalledScript(scriptData) {
-    const { script_name, script_path, container_id, server_id, execution_mode, status, output_log } = scriptData;
-    const stmt = this.db.prepare(`
-      INSERT INTO installed_scripts (script_name, script_path, container_id, server_id, execution_mode, status, output_log) 
-      VALUES (?, ?, ?, ?, ?, ?, ?)
-    `);
-    return stmt.run(script_name, script_path, container_id || null, server_id || null, execution_mode, status, output_log || null);
-  }
-
-  getAllInstalledScripts() {
-    const stmt = this.db.prepare(`
-      SELECT 
-        inst.*,
-        s.name as server_name,
-        s.ip as server_ip,
-        s.user as server_user,
-        s.password as server_password,
-        s.color as server_color
-      FROM installed_scripts inst
-      LEFT JOIN servers s ON inst.server_id = s.id
-      ORDER BY inst.installation_date DESC
-    `);
-    return stmt.all();
-  }
-
-  /**
-   * @param {number} id
-   */
-  getInstalledScriptById(id) {
-    const stmt = this.db.prepare(`
-      SELECT 
-        inst.*,
-        s.name as server_name,
-        s.ip as server_ip
-      FROM installed_scripts inst
-      LEFT JOIN servers s ON inst.server_id = s.id
-      WHERE inst.id = ?
-    `);
-    return stmt.get(id);
-  }
-
-  /**
-   * @param {number} server_id
-   */
-  getInstalledScriptsByServer(server_id) {
-    const stmt = this.db.prepare(`
-      SELECT 
-        inst.*,
-        s.name as server_name,
-        s.ip as server_ip
-      FROM installed_scripts inst
-      LEFT JOIN servers s ON inst.server_id = s.id
-      WHERE inst.server_id = ?
-      ORDER BY inst.installation_date DESC
-    `);
-    return stmt.all(server_id);
-  }
-
-  /**
-   * @param {number} id
-   * @param {Object} updateData
-   * @param {string} [updateData.script_name]
-   * @param {string} [updateData.container_id]
-   * @param {string} [updateData.status]
-   * @param {string} [updateData.output_log]
-   */
-  updateInstalledScript(id, updateData) {
-    const { script_name, container_id, status, output_log } = updateData;
-    const updates = [];
-    const values = [];
-
-    if (script_name !== undefined) {
-      updates.push('script_name = ?');
-      values.push(script_name);
-    }
-    if (container_id !== undefined) {
-      updates.push('container_id = ?');
-      values.push(container_id);
-    }
-    if (status !== undefined) {
-      updates.push('status = ?');
-      values.push(status);
-    }
-    if (output_log !== undefined) {
-      updates.push('output_log = ?');
-      values.push(output_log);
-    }
-
-    if (updates.length === 0) {
-      return { changes: 0 };
-    }
-
-    values.push(id);
-    const stmt = this.db.prepare(`
-      UPDATE installed_scripts 
-      SET ${updates.join(', ')}
-      WHERE id = ?
-    `);
-    return stmt.run(...values);
-  }
-
-  /**
-   * @param {number} id
-   */
-  deleteInstalledScript(id) {
-    const stmt = this.db.prepare('DELETE FROM installed_scripts WHERE id = ?');
-    return stmt.run(id);
-  }
-
-  close() {
-    this.db.close();
-  }
-}
-
-// Singleton instance
-/** @type {DatabaseService | null} */
-let dbInstance = null;
-
-export function getDatabase() {
-  if (!dbInstance) {
-    dbInstance = new DatabaseService();
-  }
-  return dbInstance;
-}
-
-export default DatabaseService;
-

src/server/db.js

@@ -0,0 +1,7 @@
+import { PrismaClient } from '@prisma/client';
+
+const globalForPrisma = globalThis;
+
+export const prisma = globalForPrisma.prisma ?? new PrismaClient();
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;

src/server/db.ts

@@ -0,0 +1,9 @@
+import { PrismaClient } from '@prisma/client';
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined;
+};
+
+export const prisma = globalForPrisma.prisma ?? new PrismaClient();
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;

src/server/lib/scripts.ts

@@ -141,6 +141,95 @@ export class ScriptManager {
     }
   }
 
+  /**
+   * Get all downloaded scripts from all directories (ct, tools, vm, vw)
+   */
+  async getAllDownloadedScripts(): Promise<ScriptInfo[]> {
+    this.initializeConfig();
+    const allScripts: ScriptInfo[] = [];
+    
+    // Define all script directories to scan
+    const scriptDirs = ['ct', 'tools', 'vm', 'vw'];
+    
+    for (const dirName of scriptDirs) {
+      try {
+        const dirPath = join(this.scriptsDir!, dirName);
+        
+        // Check if directory exists
+        try {
+          await stat(dirPath);
+        } catch {
+          // Directory doesn't exist, skip it
+          continue;
+        }
+        
+        const scripts = await this.getScriptsFromDirectory(dirPath);
+        allScripts.push(...scripts);
+      } catch (error) {
+        console.error(`Error reading ${dirName} scripts directory:`, error);
+        // Continue with other directories even if one fails
+      }
+    }
+
+    return allScripts.sort((a, b) => a.name.localeCompare(b.name));
+  }
+
+  /**
+   * Get scripts from a specific directory (recursively)
+   */
+  private async getScriptsFromDirectory(dirPath: string): Promise<ScriptInfo[]> {
+    const scripts: ScriptInfo[] = [];
+    
+    const scanDirectory = async (currentPath: string, relativePath = ''): Promise<void> => {
+      const files = await readdir(currentPath);
+
+      for (const file of files) {
+        const filePath = join(currentPath, file);
+        const stats = await stat(filePath);
+
+        if (stats.isFile()) {
+          const extension = extname(file);
+          
+          // Check if file extension is allowed
+          if (this.allowedExtensions!.includes(extension)) {
+            // Check if file is executable
+            const executable = await this.isExecutable(filePath);
+            
+            // Extract slug from filename (remove .sh extension)
+            const slug = file.replace(/\.sh$/, '');
+            
+            // Try to get logo from JSON data
+            let logo: string | undefined;
+            try {
+              const scriptData = await localScriptsService.getScriptBySlug(slug);
+              logo = scriptData?.logo ?? undefined;
+            } catch {
+              // JSON file might not exist, that's okay
+            }
+            
+            scripts.push({
+              name: file,
+              path: filePath,
+              extension,
+              size: stats.size,
+              lastModified: stats.mtime,
+              executable,
+              logo,
+              slug
+            });
+          }
+        } else if (stats.isDirectory()) {
+          // Recursively scan subdirectories
+          const subRelativePath = relativePath ? join(relativePath, file) : file;
+          await scanDirectory(filePath, subRelativePath);
+        }
+      }
+    };
+
+    await scanDirectory(dirPath);
+    return scripts;
+  }
+
   /**
    * Check if a file is executable
    */

src/server/ssh-execution-service.js

@@ -1,8 +1,6 @@
 import { spawn } from 'child_process';
 import { spawn as ptySpawn } from 'node-pty';
-import { writeFileSync, unlinkSync, chmodSync, mkdtempSync, rmdirSync } from 'fs';
-import { join } from 'path';
-import { tmpdir } from 'os';
+import { existsSync } from 'fs';
 
 
 /**
@@ -11,41 +9,22 @@ import { tmpdir } from 'os';
  * @property {string} user - Username
  * @property {string} [password] - Password (optional)
  * @property {string} name - Server name
- * @property {string} [auth_type] - Authentication type ('password', 'key', 'both')
+ * @property {string} [auth_type] - Authentication type ('password', 'key')
  * @property {string} [ssh_key] - SSH private key content
  * @property {string} [ssh_key_passphrase] - SSH key passphrase
+ * @property {string} [ssh_key_path] - Path to persistent SSH key file
  * @property {number} [ssh_port] - SSH port (default: 22)
  */
 
 class SSHExecutionService {
-  /**
-   * Create a temporary SSH key file for authentication
-   * @param {Server} server - Server configuration
-   * @returns {string} Path to temporary key file
-   */
-  createTempKeyFile(server) {
-    const { ssh_key } = server;
-    if (!ssh_key) {
-      throw new Error('SSH key not provided');
-    }
-    
-    const tempDir = mkdtempSync(join(tmpdir(), 'ssh-key-'));
-    const tempKeyPath = join(tempDir, 'private_key');
-    
-    writeFileSync(tempKeyPath, ssh_key);
-    chmodSync(tempKeyPath, 0o600); // Set proper permissions
-    
-    return tempKeyPath;
-  }
 
   /**
    * Build SSH command arguments based on authentication type
    * @param {Server} server - Server configuration
-   * @param {string|null} [tempKeyPath=null] - Path to temporary key file (if using key auth)
    * @returns {{command: string, args: string[]}} Command and arguments for SSH
    */
-  buildSSHCommand(server, tempKeyPath = null) {
-    const { ip, user, password, auth_type = 'password', ssh_key_passphrase, ssh_port = 22 } = server;
+  buildSSHCommand(server) {
+    const { ip, user, password, auth_type = 'password', ssh_key_passphrase, ssh_key_path, ssh_port = 22 } = server;
     
     const baseArgs = [
       '-t',
@@ -67,12 +46,14 @@ class SSHExecutionService {
 
     if (auth_type === 'key') {
       // SSH key authentication
-      if (tempKeyPath) {
-        baseArgs.push('-i', tempKeyPath);
-        baseArgs.push('-o', 'PasswordAuthentication=no');
-        baseArgs.push('-o', 'PubkeyAuthentication=yes');
+      if (!ssh_key_path || !existsSync(ssh_key_path)) {
+        throw new Error('SSH key file not found');
       }
       
+      baseArgs.push('-i', ssh_key_path);
+      baseArgs.push('-o', 'PasswordAuthentication=no');
+      baseArgs.push('-o', 'PubkeyAuthentication=yes');
+      
       if (ssh_key_passphrase) {
         return {
           command: 'sshpass',
@@ -84,35 +65,6 @@ class SSHExecutionService {
           args: [...baseArgs, `${user}@${ip}`]
         };
       }
-    } else if (auth_type === 'both') {
-      // Try SSH key first, then password
-      if (tempKeyPath) {
-        baseArgs.push('-i', tempKeyPath);
-        baseArgs.push('-o', 'PasswordAuthentication=yes');
-        baseArgs.push('-o', 'PubkeyAuthentication=yes');
-        
-        if (ssh_key_passphrase) {
-          return {
-            command: 'sshpass',
-            args: ['-P', 'passphrase', '-p', ssh_key_passphrase, 'ssh', ...baseArgs, `${user}@${ip}`]
-          };
-        } else {
-          return {
-            command: 'ssh',
-            args: [...baseArgs, `${user}@${ip}`]
-          };
-        }
-      } else {
-        // Fallback to password
-        if (password) {
-          return {
-            command: 'sshpass',
-            args: ['-p', password, 'ssh', ...baseArgs, '-o', 'PasswordAuthentication=yes', '-o', 'PubkeyAuthentication=no', `${user}@${ip}`]
-          };
-        } else {
-          throw new Error('Password is required for password authentication');
-        }
-      }
     } else {
       // Password authentication (default)
       if (password) {
@@ -136,9 +88,6 @@ class SSHExecutionService {
    * @returns {Promise<Object>} Process information
    */
   async executeScript(server, scriptPath, onData, onError, onExit) {
-    /** @type {string|null} */
-    let tempKeyPath = null;
-    
     try {
       await this.transferScriptsFolder(server, onData, onError);
       
@@ -146,13 +95,8 @@ class SSHExecutionService {
         const relativeScriptPath = scriptPath.startsWith('scripts/') ? scriptPath.substring(8) : scriptPath;
         
         try {
-          // Create temporary key file if using key authentication
-          if (server.auth_type === 'key' || server.auth_type === 'both') {
-            tempKeyPath = this.createTempKeyFile(server);
-          }
-          
           // Build SSH command based on authentication type
-          const { command, args } = this.buildSSHCommand(server, tempKeyPath);
+          const { command, args } = this.buildSSHCommand(server);
           
           // Add the script execution command to the args
           args.push(`cd /tmp/scripts && chmod +x ${relativeScriptPath} && export TERM=xterm-256color && export COLUMNS=120 && export LINES=30 && export COLORTERM=truecolor && export FORCE_COLOR=1 && export NO_COLOR=0 && export CLICOLOR=1 && export CLICOLOR_FORCE=1 && bash ${relativeScriptPath}`);
@@ -191,30 +135,10 @@ class SSHExecutionService {
           process: sshCommand,
           kill: () => {
             sshCommand.kill('SIGTERM');
-            // Clean up temporary key file
-            if (tempKeyPath) {
-              try {
-                unlinkSync(tempKeyPath);
-                const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-                rmdirSync(tempDir);
-              } catch (cleanupError) {
-                console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-              }
-            }
           }
         });
         
         } catch (error) {
-          // Clean up temporary key file on error
-          if (tempKeyPath) {
-            try {
-              unlinkSync(tempKeyPath);
-              const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-              rmdirSync(tempDir);
-            } catch (cleanupError) {
-              console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-            }
-          }
           reject(error);
         }
       });
@@ -233,35 +157,24 @@ class SSHExecutionService {
    * @returns {Promise<void>}
    */
   async transferScriptsFolder(server, onData, onError) {
-    const { ip, user, password, auth_type = 'password', ssh_key, ssh_key_passphrase, ssh_port = 22 } = server;
-    /** @type {string|null} */
-    let tempKeyPath = null;
+    const { ip, user, password, auth_type = 'password', ssh_key_passphrase, ssh_key_path, ssh_port = 22 } = server;
     
     return new Promise((resolve, reject) => {
       try {
-        // Create temporary key file if using key authentication
-        if (auth_type === 'key' || auth_type === 'both') {
-          if (ssh_key) {
-            tempKeyPath = this.createTempKeyFile(server);
-          }
-        }
-        
         // Build rsync command based on authentication type
         let rshCommand;
-        if (auth_type === 'key' && tempKeyPath) {
-          if (ssh_key_passphrase) {
-            rshCommand = `sshpass -P passphrase -p ${ssh_key_passphrase} ssh -i ${tempKeyPath} -p ${ssh_port} -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null`;
-          } else {
-            rshCommand = `ssh -i ${tempKeyPath} -p ${ssh_port} -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null`;
+        if (auth_type === 'key') {
+          if (!ssh_key_path || !existsSync(ssh_key_path)) {
+            throw new Error('SSH key file not found');
           }
-        } else if (auth_type === 'both' && tempKeyPath) {
+          
           if (ssh_key_passphrase) {
-            rshCommand = `sshpass -P passphrase -p ${ssh_key_passphrase} ssh -i ${tempKeyPath} -p ${ssh_port} -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null`;
+            rshCommand = `sshpass -P passphrase -p ${ssh_key_passphrase} ssh -i ${ssh_key_path} -p ${ssh_port} -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null`;
           } else {
-            rshCommand = `ssh -i ${tempKeyPath} -p ${ssh_port} -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null`;
+            rshCommand = `ssh -i ${ssh_key_path} -p ${ssh_port} -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null`;
           }
         } else {
-          // Fallback to password authentication
+          // Password authentication
           rshCommand = `sshpass -p ${password} ssh -p ${ssh_port} -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null`;
         }
         
@@ -290,17 +203,6 @@ class SSHExecutionService {
       });
 
       rsyncCommand.on('close', (code) => {
-        // Clean up temporary key file
-        if (tempKeyPath) {
-          try {
-            unlinkSync(tempKeyPath);
-            const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-            unlinkSync(tempDir);
-          } catch (cleanupError) {
-            console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-          }
-        }
-        
         if (code === 0) {
           resolve();
         } else {
@@ -309,30 +211,10 @@ class SSHExecutionService {
       });
 
       rsyncCommand.on('error', (error) => {
-        // Clean up temporary key file on error
-        if (tempKeyPath) {
-          try {
-            unlinkSync(tempKeyPath);
-            const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-            unlinkSync(tempDir);
-          } catch (cleanupError) {
-            console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-          }
-        }
         reject(error);
       });
       
       } catch (error) {
-        // Clean up temporary key file on error
-        if (tempKeyPath) {
-          try {
-            unlinkSync(tempKeyPath);
-            const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-            unlinkSync(tempDir);
-          } catch (cleanupError) {
-            console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-          }
-        }
         reject(error);
       }
     });
@@ -348,18 +230,10 @@ class SSHExecutionService {
    * @returns {Promise<Object>} Process information
    */
   async executeCommand(server, command, onData, onError, onExit) {
-    /** @type {string|null} */
-    let tempKeyPath = null;
-    
     return new Promise((resolve, reject) => {
       try {
-        // Create temporary key file if using key authentication
-        if (server.auth_type === 'key' || server.auth_type === 'both') {
-          tempKeyPath = this.createTempKeyFile(server);
-        }
-        
         // Build SSH command based on authentication type
-        const { command: sshCommandName, args } = this.buildSSHCommand(server, tempKeyPath);
+        const { command: sshCommandName, args } = this.buildSSHCommand(server);
         
         // Add the command to execute to the args
         args.push(command);
@@ -378,16 +252,6 @@ class SSHExecutionService {
       });
 
       sshCommand.onExit((e) => {
-        // Clean up temporary key file
-        if (tempKeyPath) {
-          try {
-            unlinkSync(tempKeyPath);
-            const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-            unlinkSync(tempDir);
-          } catch (cleanupError) {
-            console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-          }
-        }
         onExit(e.exitCode);
       });
 
@@ -395,30 +259,10 @@ class SSHExecutionService {
         process: sshCommand,
         kill: () => {
           sshCommand.kill('SIGTERM');
-          // Clean up temporary key file
-          if (tempKeyPath) {
-            try {
-              unlinkSync(tempKeyPath);
-              const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-              rmdirSync(tempDir);
-            } catch (cleanupError) {
-              console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-            }
-          }
         }
       });
       
       } catch (error) {
-        // Clean up temporary key file on error
-        if (tempKeyPath) {
-          try {
-            unlinkSync(tempKeyPath);
-            const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-            unlinkSync(tempDir);
-          } catch (cleanupError) {
-            console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-          }
-        }
         reject(error);
       }
     });

src/server/ssh-service.js

@@ -1,5 +1,5 @@
 import { spawn } from 'child_process';
-import { writeFileSync, unlinkSync, chmodSync, mkdtempSync, rmdirSync } from 'fs';
+import { writeFileSync, unlinkSync, chmodSync, mkdtempSync, rmdirSync, readFileSync, existsSync } from 'fs';
 import { join } from 'path';
 import { tmpdir } from 'os';
 
@@ -21,9 +21,6 @@ class SSHService {
       let authPromise;
       if (auth_type === 'key') {
         authPromise = this.testWithSSHKey(server);
-      } else if (auth_type === 'both') {
-        // Try SSH key first, then password
-        authPromise = this.testWithSSHKey(server).catch(() => this.testWithSshpass(server));
       } else {
         // Default to password authentication
         authPromise = this.testWithSshpass(server).catch(() => this.testWithExpect(server));
@@ -540,29 +537,20 @@ expect {
    * @returns {Promise<Object>} Connection test result
    */
   async testWithSSHKey(server) {
-    const { ip, user, ssh_key, ssh_key_passphrase, ssh_port = 22 } = server;
+    const { ip, user, ssh_key_path, ssh_key_passphrase, ssh_port = 22 } = server;
     
-    if (!ssh_key) {
-      throw new Error('SSH key not provided');
+    if (!ssh_key_path || !existsSync(ssh_key_path)) {
+      throw new Error('SSH key file not found');
     }
 
     return new Promise((resolve, reject) => {
       const timeout = 10000;
       let resolved = false;
-      let tempKeyPath = null;
       
       try {
-        // Create temporary key file
-        const tempDir = mkdtempSync(join(tmpdir(), 'ssh-key-'));
-        tempKeyPath = join(tempDir, 'private_key');
-        
-        // Write the private key to temporary file
-        writeFileSync(tempKeyPath, ssh_key);
-        chmodSync(tempKeyPath, 0o600); // Set proper permissions
-        
         // Build SSH command
         const sshArgs = [
-          '-i', tempKeyPath,
+          '-i', ssh_key_path,
           '-p', ssh_port.toString(),
           '-o', 'ConnectTimeout=10',
           '-o', 'StrictHostKeyChecking=no',
@@ -660,22 +648,82 @@ expect {
           resolved = true;
           reject(error);
         }
-      } finally {
-        // Clean up temporary key file
-        if (tempKeyPath) {
-          try {
-            unlinkSync(tempKeyPath);
-            // Also remove the temp directory
-            const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-            rmdirSync(tempDir);
-          } catch (cleanupError) {
-            console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-          }
-        }
       }
     });
   }
 
+  /**
+   * Generate SSH key pair for a server
+   * @param {number} serverId - Server ID for key file naming
+   * @returns {Promise<{privateKey: string, publicKey: string}>}
+   */
+  async generateKeyPair(serverId) {
+    const sshKeysDir = join(process.cwd(), 'data', 'ssh-keys');
+    const keyPath = join(sshKeysDir, `server_${serverId}_key`);
+    
+    return new Promise((resolve, reject) => {
+      const sshKeygen = spawn('ssh-keygen', [
+        '-t', 'ed25519',
+        '-f', keyPath,
+        '-N', '', // No passphrase
+        '-C', 'pve-scripts-local'
+      ], {
+        stdio: ['pipe', 'pipe', 'pipe']
+      });
+
+      let errorOutput = '';
+      
+      sshKeygen.stderr.on('data', (data) => {
+        errorOutput += data.toString();
+      });
+
+      sshKeygen.on('close', (code) => {
+        if (code === 0) {
+          try {
+            // Read the generated private key
+            const privateKey = readFileSync(keyPath, 'utf8');
+            
+            // Read the generated public key
+            const publicKeyPath = keyPath + '.pub';
+            const publicKey = readFileSync(publicKeyPath, 'utf8');
+            
+            // Set proper permissions
+            chmodSync(keyPath, 0o600);
+            chmodSync(publicKeyPath, 0o644);
+            
+            resolve({
+              privateKey,
+              publicKey: publicKey.trim()
+            });
+          } catch (error) {
+            reject(new Error(`Failed to read generated key files: ${error instanceof Error ? error.message : String(error)}`));
+          }
+        } else {
+          reject(new Error(`ssh-keygen failed: ${errorOutput}`));
+        }
+      });
+
+      sshKeygen.on('error', (error) => {
+        reject(new Error(`Failed to run ssh-keygen: ${error.message}`));
+      });
+    });
+  }
+
+  /**
+   * Get public key from private key file
+   * @param {string} keyPath - Path to private key file
+   * @returns {string} Public key content
+   */
+  getPublicKey(keyPath) {
+    const publicKeyPath = keyPath + '.pub';
+    
+    if (!existsSync(publicKeyPath)) {
+      throw new Error('Public key file not found');
+    }
+    
+    return readFileSync(publicKeyPath, 'utf8').trim();
+  }
+
 }
 
 // Singleton instance

src/styles/globals.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 @layer base {
   :root {

src/types/server.ts

@@ -4,13 +4,15 @@ export interface Server {
   ip: string;
   user: string;
   password?: string;
-  auth_type?: 'password' | 'key' | 'both';
+  auth_type?: 'password' | 'key';
   ssh_key?: string;
   ssh_key_passphrase?: string;
+  ssh_key_path?: string;
+  key_generated?: boolean;
   ssh_port?: number;
   color?: string;
-  created_at: string;
-  updated_at: string;
+  created_at: Date | null;
+  updated_at: Date | null;
 }
 
 export interface CreateServerData {
@@ -18,9 +20,11 @@ export interface CreateServerData {
   ip: string;
   user: string;
   password?: string;
-  auth_type?: 'password' | 'key' | 'both';
+  auth_type?: 'password' | 'key';
   ssh_key?: string;
   ssh_key_passphrase?: string;
+  ssh_key_path?: string;
+  key_generated?: boolean;
   ssh_port?: number;
   color?: string;
 }

update.sh

@@ -170,7 +170,7 @@ get_latest_release() {
     echo "$tag_name|$download_url"
 }
 
-# Backup data directory and .env file
+# Backup data directory, .env file, and scripts directories
 backup_data() {
     log "Creating backup directory at $BACKUP_DIR..."
     
@@ -205,6 +205,23 @@ backup_data() {
     else
         log_warning ".env file not found, skipping backup"
     fi
+    
+    # Backup scripts directories
+    local scripts_dirs=("scripts/ct" "scripts/install" "scripts/tools" "scripts/vm")
+    for scripts_dir in "${scripts_dirs[@]}"; do
+        if [ -d "$scripts_dir" ]; then
+            log "Backing up $scripts_dir directory..."
+            local backup_name=$(basename "$scripts_dir")
+            if ! cp -r "$scripts_dir" "$BACKUP_DIR/$backup_name"; then
+                log_error "Failed to backup $scripts_dir directory"
+                exit 1
+            else
+                log_success "$scripts_dir directory backed up successfully"
+            fi
+        else
+            log_warning "$scripts_dir directory not found, skipping backup"
+        fi
+    done
 }
 
 # Download and extract latest release
@@ -287,6 +304,7 @@ clear_original_directory() {
         "*.backup"
         "*.bak"
         ".git"
+        "scripts"
     )
     
     # Remove all files except preserved ones
@@ -328,7 +346,7 @@ clear_original_directory() {
 
 # Restore backup files before building
 restore_backup_files() {
-    log "Restoring .env and data directory from backup..."
+    log "Restoring .env, data directory, and scripts directories from backup..."
     
     if [ -d "$BACKUP_DIR" ]; then
         # Restore .env file
@@ -360,12 +378,70 @@ restore_backup_files() {
         else
             log_warning "No data directory backup found"
         fi
+        
+        # Restore scripts directories
+        local scripts_dirs=("ct" "install" "tools" "vm")
+        for backup_name in "${scripts_dirs[@]}"; do
+            if [ -d "$BACKUP_DIR/$backup_name" ]; then
+                local target_dir="scripts/$backup_name"
+                log "Restoring $target_dir directory from backup..."
+                
+                # Ensure scripts directory exists
+                if [ ! -d "scripts" ]; then
+                    mkdir -p "scripts"
+                fi
+                
+                # Remove existing directory if it exists
+                if [ -d "$target_dir" ]; then
+                    rm -rf "$target_dir"
+                fi
+                
+                if mv "$BACKUP_DIR/$backup_name" "$target_dir"; then
+                    log_success "$target_dir directory restored from backup"
+                else
+                    log_error "Failed to restore $target_dir directory"
+                    return 1
+                fi
+            else
+                log_warning "No $backup_name directory backup found"
+            fi
+        done
     else
         log_error "No backup directory found for restoration"
         return 1
     fi
 }
 
+# Ensure DATABASE_URL is set in .env file for Prisma
+ensure_database_url() {
+    log "Ensuring DATABASE_URL is set in .env file..."
+    
+    # Check if .env file exists
+    if [ ! -f ".env" ]; then
+        log_warning ".env file not found, creating from .env.example..."
+        if [ -f ".env.example" ]; then
+            cp ".env.example" ".env"
+        else
+            log_error ".env.example not found, cannot create .env file"
+            return 1
+        fi
+    fi
+    
+    # Check if DATABASE_URL is already set
+    if grep -q "^DATABASE_URL=" .env; then
+        log "DATABASE_URL already exists in .env file"
+        return 0
+    fi
+    
+    # Add DATABASE_URL to .env file
+    log "Adding DATABASE_URL to .env file..."
+    echo "" >> .env
+    echo "# Database" >> .env
+    echo "DATABASE_URL=\"file:./data/database.sqlite\"" >> .env
+    
+    log_success "DATABASE_URL added to .env file"
+}
+
 # Check if systemd service exists
 check_service() {
     # systemctl status returns 0-3 if service exists (running, exited, failed, etc.)
@@ -448,6 +524,7 @@ update_files() {
         "update.log"
         "*.backup"
         "*.bak"
+        "scripts"
     )
     
     # Find the actual source directory (strip the top-level directory)
@@ -560,6 +637,32 @@ install_and_build() {
     log_success "Dependencies installed successfully"
     rm -f "$npm_log"
     
+    # Generate Prisma client
+    log "Generating Prisma client..."
+    if ! npx prisma generate > "$npm_log" 2>&1; then
+        log_error "Failed to generate Prisma client"
+        log_error "Prisma generate output:"
+        cat "$npm_log" | while read -r line; do
+            log_error "PRISMA: $line"
+        done
+        rm -f "$npm_log"
+        return 1
+    fi
+    log_success "Prisma client generated successfully"
+    
+    # Run Prisma migrations
+    log "Running Prisma migrations..."
+    if ! npx prisma migrate deploy > "$npm_log" 2>&1; then
+        log_warning "Prisma migrations failed or no migrations to run"
+        log "Prisma migrate output:"
+        cat "$npm_log" | while read -r line; do
+            log "PRISMA: $line"
+        done
+    else
+        log_success "Prisma migrations completed successfully"
+    fi
+    rm -f "$npm_log"
+    
     log "Building application..."
     # Set NODE_ENV to production for build
     export NODE_ENV=production
@@ -666,6 +769,33 @@ rollback() {
             log_warning "No .env file backup found"
         fi
         
+        # Restore scripts directories
+        local scripts_dirs=("ct" "install" "tools" "vm")
+        for backup_name in "${scripts_dirs[@]}"; do
+            if [ -d "$BACKUP_DIR/$backup_name" ]; then
+                local target_dir="scripts/$backup_name"
+                log "Restoring $target_dir directory from backup..."
+                
+                # Ensure scripts directory exists
+                if [ ! -d "scripts" ]; then
+                    mkdir -p "scripts"
+                fi
+                
+                # Remove existing directory if it exists
+                if [ -d "$target_dir" ]; then
+                    rm -rf "$target_dir"
+                fi
+                
+                if mv "$BACKUP_DIR/$backup_name" "$target_dir"; then
+                    log_success "$target_dir directory restored from backup"
+                else
+                    log_error "Failed to restore $target_dir directory"
+                fi
+            else
+                log_warning "No $backup_name directory backup found"
+            fi
+        done
+        
         # Clean up backup directory
         log "Cleaning up backup directory..."
         rm -rf "$BACKUP_DIR"
@@ -764,6 +894,9 @@ main() {
     # Restore .env and data directory before building
     restore_backup_files
     
+    # Ensure DATABASE_URL is set for Prisma
+    ensure_database_url
+    
     # Install dependencies and build
     if ! install_and_build; then
         log_error "Install and build failed, rolling back..."