refactor: optimize UI button layout and fix dependency loop

- Add Open UI button next to IP:Port in installed scripts table
- Move Re-detect button to Actions dropdown for better space usage
- Fix dependency array loop in fetchContainerStatuses useCallback
- Hide buttons for stopped containers to prevent invalid actions
- Enhance auto-detect success message with LXC ID and hostname
- Improve font consistency by removing monospace from IP:Port text
- Optimize screen real estate with cleaner, more scannable layout

VERSION

@@ -1 +1 @@
-0.4.0
+0.4.1

package.json

@@ -22,8 +22,10 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.3",
     "@t3-oss/env-nextjs": "^0.13.8",
+    "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-query": "^5.90.3",
     "@trpc/client": "^11.6.0",
     "@trpc/react-query": "^11.6.0",
@@ -43,8 +45,10 @@
     "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",

scripts/vm/openwrt-vm.sh

@@ -1,651 +0,0 @@
-#!/usr/bin/env bash
-
-# Copyright (c) 2021-2025 tteck
-# Author: tteck (tteckster)
-#         Jon Spriggs (jontheniceguy)
-# License: MIT
-# https://github.com/community-scripts/ProxmoxVE/raw/main/LICENSE
-# Based on work from https://i12bretro.github.io/tutorials/0405.html
-
-source /dev/stdin <<<$(curl -fsSL https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main/misc/api.func)
-
-function header_info {
-  clear
-  cat <<"EOF"
-   ____                 _       __     __
-  / __ \____  ___  ____| |     / /____/ /_
- / / / / __ \/ _ \/ __ \ | /| / / ___/ __/
-/ /_/ / /_/ /  __/ / / / |/ |/ / /  / /_
-\____/ .___/\___/_/ /_/|__/|__/_/   \__/
-    /_/ W I R E L E S S   F R E E D O M
-
-EOF
-}
-header_info
-echo -e "\n Loading..."
-RANDOM_UUID="$(cat /proc/sys/kernel/random/uuid)"
-METHOD=""
-NSAPP="openwrt-vm"
-var_os="openwrt"
-var_version=" "
-DISK_SIZE="1G"
-GEN_MAC=02:$(openssl rand -hex 5 | awk '{print toupper($0)}' | sed 's/\(..\)/\1:/g; s/.$//')
-GEN_MAC_LAN=02:$(openssl rand -hex 5 | awk '{print toupper($0)}' | sed 's/\(..\)/\1:/g; s/.$//')
-
-YW=$(echo "\033[33m")
-BL=$(echo "\033[36m")
-HA=$(echo "\033[1;34m")
-RD=$(echo "\033[01;31m")
-BGN=$(echo "\033[4;92m")
-GN=$(echo "\033[1;92m")
-DGN=$(echo "\033[32m")
-CL=$(echo "\033[m")
-
-BOLD=$(echo "\033[1m")
-BFR="\\r\\033[K"
-HOLD=" "
-TAB="  "
-
-CM="${TAB}✔️${TAB}${CL}"
-CROSS="${TAB}✖️${TAB}${CL}"
-INFO="${TAB}💡${TAB}${CL}"
-OS="${TAB}🖥️${TAB}${CL}"
-CONTAINERTYPE="${TAB}📦${TAB}${CL}"
-DISKSIZE="${TAB}💾${TAB}${CL}"
-CPUCORE="${TAB}🧠${TAB}${CL}"
-RAMSIZE="${TAB}🛠️${TAB}${CL}"
-CONTAINERID="${TAB}🆔${TAB}${CL}"
-HOSTNAME="${TAB}🏠${TAB}${CL}"
-BRIDGE="${TAB}🌉${TAB}${CL}"
-GATEWAY="${TAB}🌐${TAB}${CL}"
-DEFAULT="${TAB}⚙️${TAB}${CL}"
-MACADDRESS="${TAB}🔗${TAB}${CL}"
-VLANTAG="${TAB}🏷️${TAB}${CL}"
-CREATING="${TAB}🚀${TAB}${CL}"
-ADVANCED="${TAB}🧩${TAB}${CL}"
-CLOUD="${TAB}☁️${TAB}${CL}"
-
-set -Eeo pipefail
-trap 'error_handler $LINENO "$BASH_COMMAND"' ERR
-trap cleanup EXIT
-trap 'post_update_to_api "failed" "INTERRUPTED"' SIGINT
-trap 'post_update_to_api "failed" "TERMINATED"' SIGTERM
-function error_handler() {
-  local exit_code="$?"
-  local line_number="$1"
-  local command="$2"
-  post_update_to_api "failed" "$command"
-  local error_message="${RD}[ERROR]${CL} in line ${RD}$line_number${CL}: exit code ${RD}$exit_code${CL}: while executing command ${YW}$command${CL}"
-  echo -e "\n$error_message\n"
-  cleanup_vmid
-}
-
-function get_valid_nextid() {
-  local try_id
-  try_id=$(pvesh get /cluster/nextid)
-  while true; do
-    if [ -f "/etc/pve/qemu-server/${try_id}.conf" ] || [ -f "/etc/pve/lxc/${try_id}.conf" ]; then
-      try_id=$((try_id + 1))
-      continue
-    fi
-    if lvs --noheadings -o lv_name | grep -qE "(^|[-_])${try_id}($|[-_])"; then
-      try_id=$((try_id + 1))
-      continue
-    fi
-    break
-  done
-  echo "$try_id"
-}
-
-function cleanup_vmid() {
-  if qm status $VMID &>/dev/null; then
-    qm stop $VMID &>/dev/null
-    qm destroy $VMID &>/dev/null
-  fi
-}
-
-function cleanup() {
-  popd >/dev/null
-  rm -rf $TEMP_DIR
-}
-
-TEMP_DIR=$(mktemp -d)
-pushd $TEMP_DIR >/dev/null
-function send_line_to_vm() {
-  echo -e "${DGN}Sending line: ${YW}$1${CL}"
-  for ((i = 0; i < ${#1}; i++)); do
-    character=${1:i:1}
-    case $character in
-    " ") character="spc" ;;
-    "-") character="minus" ;;
-    "=") character="equal" ;;
-    ",") character="comma" ;;
-    ".") character="dot" ;;
-    "/") character="slash" ;;
-    "'") character="apostrophe" ;;
-    ";") character="semicolon" ;;
-    '\') character="backslash" ;;
-    '`') character="grave_accent" ;;
-    "[") character="bracket_left" ;;
-    "]") character="bracket_right" ;;
-    "_") character="shift-minus" ;;
-    "+") character="shift-equal" ;;
-    "?") character="shift-slash" ;;
-    "<") character="shift-comma" ;;
-    ">") character="shift-dot" ;;
-    '"') character="shift-apostrophe" ;;
-    ":") character="shift-semicolon" ;;
-    "|") character="shift-backslash" ;;
-    "~") character="shift-grave_accent" ;;
-    "{") character="shift-bracket_left" ;;
-    "}") character="shift-bracket_right" ;;
-    "A") character="shift-a" ;;
-    "B") character="shift-b" ;;
-    "C") character="shift-c" ;;
-    "D") character="shift-d" ;;
-    "E") character="shift-e" ;;
-    "F") character="shift-f" ;;
-    "G") character="shift-g" ;;
-    "H") character="shift-h" ;;
-    "I") character="shift-i" ;;
-    "J") character="shift-j" ;;
-    "K") character="shift-k" ;;
-    "L") character="shift-l" ;;
-    "M") character="shift-m" ;;
-    "N") character="shift-n" ;;
-    "O") character="shift-o" ;;
-    "P") character="shift-p" ;;
-    "Q") character="shift-q" ;;
-    "R") character="shift-r" ;;
-    "S") character="shift-s" ;;
-    "T") character="shift-t" ;;
-    "U") character="shift-u" ;;
-    "V") character="shift-v" ;;
-    "W") character="shift-w" ;;
-    "X") character="shift=x" ;;
-    "Y") character="shift-y" ;;
-    "Z") character="shift-z" ;;
-    "!") character="shift-1" ;;
-    "@") character="shift-2" ;;
-    "#") character="shift-3" ;;
-    '$') character="shift-4" ;;
-    "%") character="shift-5" ;;
-    "^") character="shift-6" ;;
-    "&") character="shift-7" ;;
-    "*") character="shift-8" ;;
-    "(") character="shift-9" ;;
-    ")") character="shift-0" ;;
-    esac
-    qm sendkey $VMID "$character"
-  done
-  qm sendkey $VMID ret
-}
-
-TEMP_DIR=$(mktemp -d)
-pushd $TEMP_DIR >/dev/null
-
-if (whiptail --backtitle "Proxmox VE Helper Scripts" --title "OpenWrt VM" --yesno "This will create a New OpenWrt VM. Proceed?" 10 58); then
-  :
-else
-  header_info && echo -e "⚠ User exited script \n" && exit
-fi
-
-function msg_info() {
-  local msg="$1"
-  echo -ne " ${HOLD} ${YW}${msg}..."
-}
-
-function msg_ok() {
-  local msg="$1"
-  echo -e "${BFR} ${CM} ${GN}${msg}${CL}"
-}
-
-function msg_error() {
-  local msg="$1"
-  echo -e "${BFR} ${CROSS} ${RD}${msg}${CL}"
-}
-
-# This function checks the version of Proxmox Virtual Environment (PVE) and exits if the version is not supported.
-# Supported: Proxmox VE 8.0.x – 8.9.x and 9.0 (NOT 9.1+)
-pve_check() {
-  local PVE_VER
-  PVE_VER="$(pveversion | awk -F'/' '{print $2}' | awk -F'-' '{print $1}')"
-
-  # Check for Proxmox VE 8.x: allow 8.0–8.9
-  if [[ "$PVE_VER" =~ ^8\.([0-9]+) ]]; then
-    local MINOR="${BASH_REMATCH[1]}"
-    if ((MINOR < 0 || MINOR > 9)); then
-      msg_error "This version of Proxmox VE is not supported."
-      msg_error "Supported: Proxmox VE version 8.0 – 8.9"
-      exit 1
-    fi
-    return 0
-  fi
-
-  # Check for Proxmox VE 9.x: allow ONLY 9.0
-  if [[ "$PVE_VER" =~ ^9\.([0-9]+) ]]; then
-    local MINOR="${BASH_REMATCH[1]}"
-    if ((MINOR != 0)); then
-      msg_error "This version of Proxmox VE is not yet supported."
-      msg_error "Supported: Proxmox VE version 9.0"
-      exit 1
-    fi
-    return 0
-  fi
-
-  # All other unsupported versions
-  msg_error "This version of Proxmox VE is not supported."
-  msg_error "Supported versions: Proxmox VE 8.0 – 8.x or 9.0"
-  exit 1
-}
-
-function arch_check() {
-  if [ "$(dpkg --print-architecture)" != "amd64" ]; then
-    echo -e "\n ${CROSS} This script will not work with PiMox! \n"
-    echo -e "Exiting..."
-    sleep 2
-    exit
-  fi
-}
-
-function ssh_check() {
-  if command -v pveversion >/dev/null 2>&1; then
-    if [ -n "${SSH_CLIENT:+x}" ]; then
-      if whiptail --backtitle "Proxmox VE Helper Scripts" --defaultno --title "SSH DETECTED" --yesno "It's suggested to use the Proxmox shell instead of SSH, since SSH can create issues while gathering variables. Would you like to proceed with using SSH?" 10 62; then
-        echo "you've been warned"
-      else
-        clear
-        exit
-      fi
-    fi
-  fi
-}
-
-function exit-script() {
-  clear
-  echo -e "⚠  User exited script \n"
-  exit
-}
-
-function default_settings() {
-  VMID=$(get_valid_nextid)
-  HN="openwrt"
-  CORE_COUNT="1"
-  RAM_SIZE="256"
-  BRG="vmbr0"
-  LAN_BRG="vmbr0"
-  MAC=$GEN_MAC
-  LAN_MAC=$GEN_MAC_LAN
-  VLAN=""
-  LAN_VLAN=",tag=999"
-  LAN_IP_ADDR="192.168.1.1"
-  LAN_NETMASK="255.255.255.0"
-  MTU=""
-  START_VM="yes"
-  METHOD="default"
-  DISK_SIZE="1G"
-  echo -e "${CONTAINERID}${BOLD}${DGN}VMID: ${BGN}${VMID}${CL}"
-  echo -e "${HOSTNAME}${BOLD}${DGN}Hostname: ${BGN}${HN}${CL}"
-  echo -e "${CPUCORE}${BOLD}${DGN}CPU Cores: ${BGN}${CORE_COUNT}${CL}"
-  echo -e "${RAMSIZE}${BOLD}${DGN}RAM: ${BGN}${RAM_SIZE}${CL}"
-  echo -e "${DISKSIZE}${BOLD}${DGN}Disk Size: ${BGN}${DISK_SIZE}${CL}"
-  echo -e "${BRIDGE}${BOLD}${DGN}WAN Bridge: ${BGN}${BRG}${CL}"
-  echo -e "${BRIDGE}${BOLD}${DGN}LAN Bridge: ${BGN}${LAN_BRG}${CL}"
-  echo -e "${MACADDRESS}${BOLD}${DGN}WAN MAC: ${BGN}${MAC}${CL}"
-  echo -e "${MACADDRESS}${BOLD}${DGN}LAN MAC: ${BGN}${LAN_MAC}${CL}"
-}
-
-function advanced_settings() {
-  METHOD="advanced"
-  [ -z "${VMID:-}" ] && VMID=$(get_valid_nextid)
-  while true; do
-    if VMID=$(whiptail --backtitle "Proxmox VE Helper Scripts" --inputbox "Set Virtual Machine ID" 8 58 $VMID --title "VIRTUAL MACHINE ID" --cancel-button Exit-Script 3>&1 1>&2 2>&3); then
-      if [ -z "$VMID" ]; then
-        VMID=$(get_valid_nextid)
-      fi
-      if pct status "$VMID" &>/dev/null || qm status "$VMID" &>/dev/null; then
-        echo -e "${CROSS}${RD} ID $VMID is already in use${CL}"
-        sleep 2
-        continue
-      fi
-      echo -e "${DGN}Virtual Machine ID: ${BGN}$VMID${CL}"
-      break
-    else
-      exit-script
-    fi
-  done
-
-  if VM_NAME=$(whiptail --backtitle "Proxmox VE Helper Scripts" --inputbox "Set Hostname" 8 58 openwrt --title "HOSTNAME" --cancel-button Exit-Script 3>&1 1>&2 2>&3); then
-    if [ -z $VM_NAME ]; then
-      HN="openwrt"
-    else
-      HN=$(echo ${VM_NAME,,} | tr -d ' ')
-    fi
-    echo -e "${DGN}Using Hostname: ${BGN}$HN${CL}"
-  else
-    exit-script
-  fi
-
-  if CORE_COUNT=$(whiptail --backtitle "Proxmox VE Helper Scripts" --inputbox "Allocate CPU Cores" 8 58 1 --title "CORE COUNT" --cancel-button Exit-Script 3>&1 1>&2 2>&3); then
-    if [ -z $CORE_COUNT ]; then
-      CORE_COUNT="1"
-    fi
-    echo -e "${DGN}Allocated Cores: ${BGN}$CORE_COUNT${CL}"
-  else
-    exit-script
-  fi
-
-  if RAM_SIZE=$(whiptail --backtitle "Proxmox VE Helper Scripts" --inputbox "Allocate RAM in MiB" 8 58 256 --title "RAM" --cancel-button Exit-Script 3>&1 1>&2 2>&3); then
-    if [ -z $RAM_SIZE ]; then
-      RAM_SIZE="256"
-    fi
-    echo -e "${DGN}Allocated RAM: ${BGN}$RAM_SIZE${CL}"
-  else
-    exit-script
-  fi
-
-  if DISK_SIZE=$(whiptail --backtitle "Proxmox VE Helper Scripts" \
-    --inputbox "Set Disk Size in GiB (e.g., 1, 2, 4)" 8 58 "1" \
-    --title "DISK SIZE" --cancel-button Exit-Script 3>&1 1>&2 2>&3); then
-    if [[ "$DISK_SIZE" =~ ^[0-9]+$ ]]; then
-      DISK_SIZE="${DISK_SIZE}G"
-    fi
-    echo -e "${DISKSIZE}${BOLD}${DGN}Disk Size: ${BGN}${DISK_SIZE}${CL}"
-  else
-    exit-script
-  fi
-
-  if BRG=$(whiptail --backtitle "Proxmox VE Helper Scripts" --inputbox "Set a WAN Bridge" 8 58 vmbr0 --title "WAN BRIDGE" --cancel-button Exit-Script 3>&1 1>&2 2>&3); then
-    if [ -z $BRG ]; then
-      BRG="vmbr0"
-    fi
-    echo -e "${DGN}Using WAN Bridge: ${BGN}$BRG${CL}"
-  else
-    exit-script
-  fi
-
-  if LAN_BRG=$(whiptail --backtitle "Proxmox VE Helper Scripts" --inputbox "Set a LAN Bridge" 8 58 vmbr0 --title "LAN BRIDGE" --cancel-button Exit-Script 3>&1 1>&2 2>&3); then
-    if [ -z $LAN_BRG ]; then
-      LAN_BRG="vmbr0"
-    fi
-    echo -e "${DGN}Using LAN Bridge: ${BGN}$LAN_BRG${CL}"
-  else
-    exit-script
-  fi
-
-  if LAN_IP_ADDR=$(whiptail --backtitle "Proxmox VE Helper Scripts" --inputbox "Set a router IP" 8 58 $LAN_IP_ADDR --title "LAN IP ADDRESS" --cancel-button Exit-Script 3>&1 1>&2 2>&3); then
-    if [ -z $LAN_IP_ADDR ]; then
-      LAN_IP_ADDR="192.168.1.1"
-    fi
-    echo -e "${DGN}Using LAN IP ADDRESS: ${BGN}$LAN_IP_ADDR${CL}"
-  else
-    exit-script
-  fi
-
-  if LAN_NETMASK=$(whiptail --backtitle "Proxmox VE Helper Scripts" --inputbox "Set a router netmask" 8 58 $LAN_NETMASK --title "LAN NETMASK" --cancel-button Exit-Script 3>&1 1>&2 2>&3); then
-    if [ -z $LAN_NETMASK ]; then
-      LAN_NETMASK="255.255.255.0"
-    fi
-    echo -e "${DGN}Using LAN NETMASK: ${BGN}$LAN_NETMASK${CL}"
-  else
-    exit-script
-  fi
-
-  if MAC1=$(whiptail --backtitle "Proxmox VE Helper Scripts" --inputbox "Set a WAN MAC Address" 8 58 $GEN_MAC --title "WAN MAC ADDRESS" --cancel-button Exit-Script 3>&1 1>&2 2>&3); then
-    if [ -z $MAC1 ]; then
-      MAC="$GEN_MAC"
-    else
-      MAC="$MAC1"
-    fi
-    echo -e "${DGN}Using WAN MAC Address: ${BGN}$MAC${CL}"
-  else
-    exit-script
-  fi
-
-  if MAC2=$(whiptail --backtitle "Proxmox VE Helper Scripts" --inputbox "Set a LAN MAC Address" 8 58 $GEN_MAC_LAN --title "LAN MAC ADDRESS" --cancel-button Exit-Script 3>&1 1>&2 2>&3); then
-    if [ -z $MAC2 ]; then
-      LAN_MAC="$GEN_MAC_LAN"
-    else
-      LAN_MAC="$MAC2"
-    fi
-    echo -e "${DGN}Using LAN MAC Address: ${BGN}$LAN_MAC${CL}"
-  else
-    exit-script
-  fi
-
-  if VLAN1=$(whiptail --backtitle "Proxmox VE Helper Scripts" --inputbox "Set a WAN Vlan (leave blank for default)" 8 58 --title "WAN VLAN" --cancel-button Exit-Script 3>&1 1>&2 2>&3); then
-    if [ -z $VLAN1 ]; then
-      VLAN1="Default"
-      VLAN=""
-    else
-      VLAN=",tag=$VLAN1"
-    fi
-    echo -e "${DGN}Using WAN Vlan: ${BGN}$VLAN1${CL}"
-  else
-    exit-script
-  fi
-
-  if VLAN2=$(whiptail --backtitle "Proxmox VE Helper Scripts" --inputbox "Set a LAN Vlan" 8 58 999 --title "LAN VLAN" --cancel-button Exit-Script 3>&1 1>&2 2>&3); then
-    if [ -z $VLAN2 ]; then
-      VLAN2="999"
-      LAN_VLAN=",tag=$VLAN2"
-    else
-      LAN_VLAN=",tag=$VLAN2"
-    fi
-    echo -e "${DGN}Using LAN Vlan: ${BGN}$VLAN2${CL}"
-  else
-    exit-script
-  fi
-
-  if MTU1=$(whiptail --backtitle "Proxmox VE Helper Scripts" --inputbox "Set Interface MTU Size (leave blank for default)" 8 58 --title "MTU SIZE" --cancel-button Exit-Script 3>&1 1>&2 2>&3); then
-    if [ -z $MTU1 ]; then
-      MTU1="Default"
-      MTU=""
-    else
-      MTU=",mtu=$MTU1"
-    fi
-    echo -e "${DGN}Using Interface MTU Size: ${BGN}$MTU1${CL}"
-  else
-    exit-script
-  fi
-
-  if (whiptail --backtitle "Proxmox VE Helper Scripts" --title "START VIRTUAL MACHINE" --yesno "Start VM when completed?" 10 58); then
-    START_VM="yes"
-  else
-    START_VM="no"
-  fi
-  echo -e "${DGN}Start VM when completed: ${BGN}$START_VM${CL}"
-
-  if (whiptail --backtitle "Proxmox VE Helper Scripts" --title "ADVANCED SETTINGS COMPLETE" --yesno "Ready to create OpenWrt VM?" --no-button Do-Over 10 58); then
-    echo -e "${RD}Creating a OpenWrt VM using the above advanced settings${CL}"
-  else
-    header_info
-    echo -e "${RD}Using Advanced Settings${CL}"
-    advanced_settings
-  fi
-}
-
-function start_script() {
-  if (whiptail --backtitle "Proxmox VE Helper Scripts" --title "SETTINGS" --yesno "Use Default Settings?" --no-button Advanced 10 58); then
-    header_info
-    echo -e "${BL}Using Default Settings${CL}"
-    default_settings
-  else
-    header_info
-    echo -e "${RD}Using Advanced Settings${CL}"
-    advanced_settings
-  fi
-}
-
-arch_check
-pve_check
-ssh_check
-start_script
-post_to_api_vm
-
-msg_info "Validating Storage"
-while read -r line; do
-  TAG=$(echo $line | awk '{print $1}')
-  TYPE=$(echo $line | awk '{printf "%-10s", $2}')
-  FREE=$(echo $line | numfmt --field 4-6 --from-unit=K --to=iec --format %.2f | awk '{printf( "%9sB", $6)}')
-  ITEM="  Type: $TYPE Free: $FREE "
-  OFFSET=2
-  if [[ $((${#ITEM} + $OFFSET)) -gt ${MSG_MAX_LENGTH:-} ]]; then
-    MSG_MAX_LENGTH=$((${#ITEM} + $OFFSET))
-  fi
-  STORAGE_MENU+=("$TAG" "$ITEM" "OFF")
-done < <(pvesm status -content images | awk 'NR>1')
-VALID=$(pvesm status -content images | awk 'NR>1')
-if [ -z "$VALID" ]; then
-  echo -e "\n${RD}⚠ Unable to detect a valid storage location.${CL}"
-  echo -e "Exiting..."
-  exit
-elif [ $((${#STORAGE_MENU[@]} / 3)) -eq 1 ]; then
-  STORAGE=${STORAGE_MENU[0]}
-else
-  while [ -z "${STORAGE:+x}" ]; do
-    STORAGE=$(whiptail --backtitle "Proxmox VE Helper Scripts" --title "Storage Pools" --radiolist \
-      "Which storage pool would you like to use for the OpenWrt VM?\n\n" \
-      16 $(($MSG_MAX_LENGTH + 23)) 6 \
-      "${STORAGE_MENU[@]}" 3>&1 1>&2 2>&3)
-  done
-fi
-msg_ok "Using ${CL}${BL}$STORAGE${CL} ${GN}for Storage Location."
-msg_ok "Virtual Machine ID is ${CL}${BL}$VMID${CL}."
-msg_info "Getting URL for OpenWrt Disk Image"
-
-response=$(curl -fsSL https://openwrt.org)
-stableversion=$(echo "$response" | sed -n 's/.*Current stable release - OpenWrt \([0-9.]\+\).*/\1/p' | head -n 1)
-URL="https://downloads.openwrt.org/releases/$stableversion/targets/x86/64/openwrt-$stableversion-x86-64-generic-ext4-combined.img.gz"
-
-msg_ok "${CL}${BL}${URL}${CL}"
-curl -f#SL -o "$(basename "$URL")" "$URL"
-FILE=$(basename "$URL")
-msg_ok "Downloaded ${CL}${BL}$FILE${CL}"
-
-gunzip -f "$FILE" >/dev/null 2>&1 || true
-FILE="${FILE%.*}"
-msg_ok "Extracted OpenWrt Disk Image ${CL}${BL}$FILE${CL}"
-
-msg_info "Creating OpenWrt VM"
-qm create "$VMID" -cores "$CORE_COUNT" -memory "$RAM_SIZE" -name "$HN" \
-  -onboot 1 -ostype l26 -scsihw virtio-scsi-pci --tablet 0
-if [[ "$(pvesm status | awk -v s=$STORAGE '$1==s {print $2}')" == "dir" ]]; then
-  qm set "$VMID" -efidisk0 "${STORAGE}:0,efitype=4m,size=4M"
-else
-  pvesm alloc "$STORAGE" "$VMID" "vm-$VMID-disk-0" 4M >/dev/null
-  qm set "$VMID" -efidisk0 "${STORAGE}:vm-$VMID-disk-0,efitype=4m,size=4M"
-fi
-
-IMPORT_OUT="$(qm importdisk "$VMID" "$FILE" "$STORAGE" --format raw 2>&1 || true)"
-DISK_REF="$(printf '%s\n' "$IMPORT_OUT" | sed -n "s/.*successfully imported disk '\([^']\+\)'.*/\1/p")"
-
-if [[ -z "$DISK_REF" ]]; then
-  DISK_REF="$(pvesm list "$STORAGE" | awk -v id="$VMID" '$1 ~ ("vm-"id"-disk-") {print $1}' | sort | tail -n1)"
-fi
-
-if [[ -z "$DISK_REF" ]]; then
-  msg_error "Unable to determine imported disk reference."
-  echo "$IMPORT_OUT"
-  exit 1
-fi
-
-qm set "$VMID" \
-  -efidisk0 "${STORAGE}:0,efitype=4m,size=4M" \
-  -scsi0 "${DISK_REF},size=${DISK_SIZE}" \
-  -boot order=scsi0 \
-  -tags community-script >/dev/null
-msg_ok "Attached disk (${DISK_SIZE})"
-
-DESCRIPTION=$(
-  cat <<EOF
-<div align='center'>
-  <a href='https://Helper-Scripts.com' target='_blank' rel='noopener noreferrer'>
-    <img src='https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main/misc/images/logo-81x112.png' alt='Logo' style='width:81px;height:112px;'/>
-  </a>
-
-  <h2 style='font-size: 24px; margin: 20px 0;'>OpenWrt VM</h2>
-
-  <p style='margin: 16px 0;'>
-    <a href='https://ko-fi.com/community_scripts' target='_blank' rel='noopener noreferrer'>
-      <img src='https://img.shields.io/badge/&#x2615;-Buy us a coffee-blue' alt='spend Coffee' />
-    </a>
-  </p>
-  
-  <span style='margin: 0 10px;'>
-    <i class="fa fa-github fa-fw" style="color: #f5f5f5;"></i>
-    <a href='https://github.com/community-scripts/ProxmoxVE' target='_blank' rel='noopener noreferrer' style='text-decoration: none; color: #00617f;'>GitHub</a>
-  </span>
-  <span style='margin: 0 10px;'>
-    <i class="fa fa-comments fa-fw" style="color: #f5f5f5;"></i>
-    <a href='https://github.com/community-scripts/ProxmoxVE/discussions' target='_blank' rel='noopener noreferrer' style='text-decoration: none; color: #00617f;'>Discussions</a>
-  </span>
-  <span style='margin: 0 10px;'>
-    <i class="fa fa-exclamation-circle fa-fw" style="color: #f5f5f5;"></i>
-    <a href='https://github.com/community-scripts/ProxmoxVE/issues' target='_blank' rel='noopener noreferrer' style='text-decoration: none; color: #00617f;'>Issues</a>
-  </span>
-</div>
-EOF
-)
-qm set "$VMID" -description "$DESCRIPTION" >/dev/null
-
-msg_ok "Created OpenWrt VM ${CL}${BL}(${HN})"
-msg_info "OpenWrt is being started in order to configure the network interfaces."
-qm start $VMID
-sleep 15
-msg_info "Waiting for OpenWrt to boot..."
-for i in {1..30}; do
-  if qm status "$VMID" | grep -q "running"; then
-    sleep 5
-    msg_ok "OpenWrt is running"
-    break
-  fi
-  sleep 1
-done
-
-msg_ok "Network interfaces are being configured as OpenWrt initiates."
-
-if qm status "$VMID" | grep -q "running"; then
-  send_line_to_vm ""
-  send_line_to_vm "uci delete network.@device[0]"
-  send_line_to_vm "uci set network.wan=interface"
-  send_line_to_vm "uci set network.wan.device=eth1"
-  send_line_to_vm "uci set network.wan.proto=dhcp"
-  send_line_to_vm "uci delete network.lan"
-  send_line_to_vm "uci set network.lan=interface"
-  send_line_to_vm "uci set network.lan.device=eth0"
-  send_line_to_vm "uci set network.lan.proto=static"
-  send_line_to_vm "uci set network.lan.ipaddr=${LAN_IP_ADDR}"
-  send_line_to_vm "uci set network.lan.netmask=${LAN_NETMASK}"
-  send_line_to_vm "uci commit"
-  send_line_to_vm "halt"
-  msg_ok "Network interfaces configured in OpenWrt"
-else
-  msg_error "VM is not running"
-  exit 1
-fi
-
-msg_info "Waiting for OpenWrt to shut down..."
-until qm status "$VMID" | grep -q "stopped"; do
-  sleep 2
-done
-msg_ok "OpenWrt has shut down"
-
-msg_info "Adding bridge interfaces on Proxmox side"
-qm set "$VMID" \
-  -net0 virtio,bridge="${LAN_BRG}",macaddr="${LAN_MAC}${LAN_VLAN}${MTU}" \
-  -net1 virtio,bridge="${BRG}",macaddr="${MAC}${VLAN}${MTU}" >/dev/null
-msg_ok "Bridge interfaces added"
-
-if [ "$START_VM" = "yes" ]; then
-  msg_info "Starting OpenWrt VM"
-  qm start "$VMID"
-  msg_ok "Started OpenWrt VM"
-fi
-
-VLAN_FINISH=""
-if [ -z "$VLAN" ] && [ "$VLAN2" != "999" ]; then
-  VLAN_FINISH=" Please remember to adjust the VLAN tags to suit your network."
-fi
-post_update_to_api "done" "none"
-msg_ok "Completed Successfully!${VLAN_FINISH:+\n$VLAN_FINISH}"

server.js

@@ -51,6 +51,7 @@ const handle = app.getRequestHandler();
  * @property {string} [mode]
  * @property {ServerInfo} [server]
  * @property {boolean} [isUpdate]
+ * @property {boolean} [isShell]
  * @property {string} [containerId]
  */
 
@@ -130,6 +131,55 @@ 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
@@ -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);
           }
@@ -361,6 +413,18 @@ class ScriptExecutionHandler {
           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) {
+            this.updateInstallationRecord(installationId, { 
+              web_ui_ip: ip, 
+              web_ui_port: port 
+            });
+          }
+        }
+        
         this.sendMessage(ws, {
           type: 'output',
           data: output,
@@ -444,6 +508,18 @@ class ScriptExecutionHandler {
             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) {
+              this.updateInstallationRecord(installationId, { 
+                web_ui_ip: ip, 
+                web_ui_port: port 
+              });
+            }
+          }
+          
           // Handle data output
           this.sendMessage(ws, {
             type: 'output',
@@ -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/ContextualHelpIcon.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from 'react';
 import { HelpModal } from './HelpModal';
-import { Button } from './ui/button';
 import { HelpCircle } from 'lucide-react';
 
 interface ContextualHelpIconProps {
@@ -26,15 +25,13 @@ export function ContextualHelpIcon({
 
   return (
     <>
-      <Button
+      <div
         onClick={() => setIsOpen(true)}
-        variant="ghost"
-        size="icon"
-        className={`${sizeClasses} text-muted-foreground hover:text-foreground hover:bg-muted ${className}`}
+        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" />
-      </Button>
+      </div>
 
       <HelpModal 
         isOpen={isOpen} 

src/app/_components/HelpModal.tsx

@@ -319,6 +319,7 @@ export function HelpModal({ isOpen, onClose, initialSection = 'server-settings'
                   <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>
@@ -335,8 +336,47 @@ export function HelpModal({ isOpen, onClose, initialSection = 'server-settings'
                 </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">Container Control (NEW)</h4>
+                <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>

src/app/_components/InstalledScriptsTab.tsx

@@ -9,6 +9,13 @@ import { ScriptInstallationCard } from './ScriptInstallationCard';
 import { ConfirmationModal } from './ConfirmationModal';
 import { ErrorModal } from './ErrorModal';
 import { getContrastColor } from '../../lib/colorUtils';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from './ui/dropdown-menu';
 
 interface InstalledScript {
   id: number;
@@ -20,12 +27,18 @@ 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;
 }
 
 export function InstalledScriptsTab() {
@@ -35,8 +48,9 @@ export function InstalledScriptsTab() {
   const [sortField, setSortField] = useState<'script_name' | 'container_id' | 'server_name' | 'status' | 'installation_date'>('server_name');
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
   const [updatingScript, setUpdatingScript] = useState<{ id: number; containerId: string; server?: any } | null>(null);
+  const [openingShell, setOpeningShell] = useState<{ id: number; containerId: string; server?: any } | null>(null);
   const [editingScriptId, setEditingScriptId] = useState<number | null>(null);
-  const [editFormData, setEditFormData] = useState<{ script_name: string; container_id: string }>({ script_name: '', container_id: '' });
+  const [editFormData, setEditFormData] = useState<{ script_name: string; container_id: string; web_ui_ip: string; web_ui_port: string }>({ script_name: '', container_id: '', web_ui_ip: '', web_ui_port: '' });
   const [showAddForm, setShowAddForm] = useState(false);
   const [addFormData, setAddFormData] = useState<{ script_name: string; container_id: string; server_id: string }>({ script_name: '', container_id: '', server_id: 'local' });
   const [showAutoDetectForm, setShowAutoDetectForm] = useState(false);
@@ -87,7 +101,7 @@ export function InstalledScriptsTab() {
     onSuccess: () => {
       void refetchScripts();
       setEditingScriptId(null);
-      setEditFormData({ script_name: '', container_id: '' });
+      setEditFormData({ script_name: '', container_id: '', web_ui_ip: '', web_ui_port: '' });
     },
     onError: (error) => {
       alert(`Error updating script: ${error.message}`);
@@ -201,7 +215,30 @@ export function InstalledScriptsTab() {
         message: error.message ?? 'Cleanup failed. Please try again.' 
       });
       // Clear status after 5 seconds
-      setTimeout(() => setCleanupStatus({ type: null, message: '' }), 5000);
+      setTimeout(() => setCleanupStatus({ type: null, message: '' }), 8000);
+    }
+  });
+
+  // Auto-detect Web UI mutation
+  const autoDetectWebUIMutation = api.installedScripts.autoDetectWebUI.useMutation({
+    onSuccess: (data) => {
+      console.log('✅ Auto-detect WebUI success:', data);
+      void refetchScripts();
+      setAutoDetectStatus({ 
+        type: 'success', 
+        message: data.message ?? 'Web UI IP detected successfully!' 
+      });
+      // Clear status after 5 seconds
+      setTimeout(() => setAutoDetectStatus({ type: null, message: '' }), 5000);
+    },
+    onError: (error) => {
+      console.error('❌ Auto-detect Web UI error:', error);
+      setAutoDetectStatus({ 
+        type: 'error', 
+        message: error.message ?? 'Auto-detect failed. Please try again.' 
+      });
+      // Clear status after 5 seconds
+      setTimeout(() => setAutoDetectStatus({ type: null, message: '' }), 5000);
     }
   });
 
@@ -340,7 +377,7 @@ export function InstalledScriptsTab() {
         containerStatusMutation.mutate({ serverIds });
       }
     }, 500);
-  }, []); // Remove containerStatusMutation from dependencies to prevent loops
+  }, []);
 
   // Run cleanup when component mounts and scripts are loaded (only once)
   useEffect(() => {
@@ -356,7 +393,7 @@ export function InstalledScriptsTab() {
       console.log('Status check triggered - scripts length:', scripts.length);
       fetchContainerStatuses();
     }
-  }, [scripts.length]); // Remove fetchContainerStatuses from dependencies
+  }, [scripts.length, fetchContainerStatuses]);
 
   // Cleanup timeout on unmount
   useEffect(() => {
@@ -526,13 +563,17 @@ export function InstalledScriptsTab() {
       onConfirm: () => {
         // Get server info if it's SSH mode
         let server = null;
-        if (script.server_id && script.server_user && script.server_password) {
+        if (script.server_id && script.server_user) {
           server = {
             id: script.server_id,
             name: script.server_name,
             ip: script.server_ip,
             user: script.server_user,
-            password: script.server_password
+            password: script.server_password,
+            auth_type: script.server_auth_type ?? 'password',
+            ssh_key: script.server_ssh_key,
+            ssh_key_passphrase: script.server_ssh_key_passphrase,
+            ssh_port: script.server_ssh_port ?? 22
           };
         }
         
@@ -550,17 +591,104 @@ export function InstalledScriptsTab() {
     setUpdatingScript(null);
   };
 
+  const handleOpenShell = (script: InstalledScript) => {
+    if (!script.container_id) {
+      setErrorModal({
+        isOpen: true,
+        title: 'Shell Access Failed',
+        message: 'No Container ID available for this script',
+        details: 'This script does not have a valid container ID and cannot be accessed via shell.'
+      });
+      return;
+    }
+    
+    // Get server info if it's SSH mode
+    let server = null;
+    if (script.server_id && script.server_user) {
+      server = {
+        id: script.server_id,
+        name: script.server_name,
+        ip: script.server_ip,
+        user: script.server_user,
+        password: script.server_password,
+        auth_type: script.server_auth_type ?? 'password',
+        ssh_key: script.server_ssh_key,
+        ssh_key_passphrase: script.server_ssh_key_passphrase,
+        ssh_port: script.server_ssh_port ?? 22
+      };
+    }
+    
+    setOpeningShell({
+      id: script.id,
+      containerId: script.container_id,
+      server: server
+    });
+  };
+
+  const handleCloseShellTerminal = () => {
+    setOpeningShell(null);
+  };
+
+  // Auto-scroll to terminals when they open
+  useEffect(() => {
+    if (openingShell) {
+      // Small delay to ensure the terminal is rendered
+      setTimeout(() => {
+        const terminalElement = document.querySelector('[data-terminal="shell"]');
+        if (terminalElement) {
+          // Scroll to the terminal with smooth animation
+          terminalElement.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'start',
+            inline: 'nearest'
+          });
+          
+          // Add a subtle highlight effect
+          terminalElement.classList.add('animate-pulse');
+          setTimeout(() => {
+            terminalElement.classList.remove('animate-pulse');
+          }, 2000);
+        }
+      }, 200);
+    }
+  }, [openingShell]);
+
+  useEffect(() => {
+    if (updatingScript) {
+      // Small delay to ensure the terminal is rendered
+      setTimeout(() => {
+        const terminalElement = document.querySelector('[data-terminal="update"]');
+        if (terminalElement) {
+          // Scroll to the terminal with smooth animation
+          terminalElement.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'start',
+            inline: 'nearest'
+          });
+          
+          // Add a subtle highlight effect
+          terminalElement.classList.add('animate-pulse');
+          setTimeout(() => {
+            terminalElement.classList.remove('animate-pulse');
+          }, 2000);
+        }
+      }, 200);
+    }
+  }, [updatingScript]);
+
   const handleEditScript = (script: InstalledScript) => {
     setEditingScriptId(script.id);
     setEditFormData({
       script_name: script.script_name,
-      container_id: script.container_id ?? ''
+      container_id: script.container_id ?? '',
+      web_ui_ip: script.web_ui_ip ?? '',
+      web_ui_port: script.web_ui_port?.toString() ?? ''
     });
   };
 
   const handleCancelEdit = () => {
     setEditingScriptId(null);
-    setEditFormData({ script_name: '', container_id: '' });
+    setEditFormData({ script_name: '', container_id: '', web_ui_ip: '', web_ui_port: '' });
   };
 
   const handleSaveEdit = () => {
@@ -579,11 +707,13 @@ export function InstalledScriptsTab() {
         id: editingScriptId,
         script_name: editFormData.script_name.trim(),
         container_id: editFormData.container_id.trim() || undefined,
+        web_ui_ip: editFormData.web_ui_ip.trim() || undefined,
+        web_ui_port: editFormData.web_ui_port.trim() ? parseInt(editFormData.web_ui_port, 10) : undefined,
       });
     }
   };
 
-  const handleInputChange = (field: 'script_name' | 'container_id', value: string) => {
+  const handleInputChange = (field: 'script_name' | 'container_id' | 'web_ui_ip' | 'web_ui_port', value: string) => {
     setEditFormData(prev => ({
       ...prev,
       [field]: value
@@ -645,6 +775,54 @@ export function InstalledScriptsTab() {
     }
   };
 
+  const handleAutoDetectWebUI = (script: InstalledScript) => {
+    console.log('🔍 Auto-detect WebUI clicked for script:', script);
+    console.log('Script validation:', {
+      hasContainerId: !!script.container_id,
+      isSSHMode: script.execution_mode === 'ssh',
+      containerId: script.container_id,
+      executionMode: script.execution_mode
+    });
+    
+    if (!script.container_id || script.execution_mode !== 'ssh') {
+      console.log('❌ Auto-detect validation failed');
+      setErrorModal({
+        isOpen: true,
+        title: 'Auto-Detect Failed',
+        message: 'Auto-detect only works for SSH mode scripts with container ID',
+        details: 'This script does not have a valid container ID or is not in SSH mode.'
+      });
+      return;
+    }
+
+    console.log('✅ Calling autoDetectWebUIMutation.mutate with id:', script.id);
+    autoDetectWebUIMutation.mutate({ id: script.id });
+  };
+
+  const handleOpenWebUI = (script: InstalledScript) => {
+    if (!script.web_ui_ip) {
+      setErrorModal({
+        isOpen: true,
+        title: 'Web UI Access Failed',
+        message: 'No IP address configured for this script',
+        details: 'Please set the Web UI IP address before opening the interface.'
+      });
+      return;
+    }
+
+    const port = script.web_ui_port ?? 80;
+    const url = `http://${script.web_ui_ip}:${port}`;
+    window.open(url, '_blank', 'noopener,noreferrer');
+  };
+
+  // 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;
+  };
+
 
   const formatDate = (dateString: string) => {
     return new Date(dateString).toLocaleString();
@@ -662,7 +840,7 @@ export function InstalledScriptsTab() {
     <div className="space-y-6">
       {/* Update Terminal */}
       {updatingScript && (
-        <div className="mb-8">
+        <div className="mb-8" data-terminal="update">
           <Terminal
             scriptPath={`update-${updatingScript.containerId}`}
             onClose={handleCloseUpdateTerminal}
@@ -674,6 +852,20 @@ export function InstalledScriptsTab() {
         </div>
       )}
 
+      {/* Shell Terminal */}
+      {openingShell && (
+        <div className="mb-8" data-terminal="shell">
+          <Terminal
+            scriptPath={`shell-${openingShell.containerId}`}
+            onClose={handleCloseShellTerminal}
+            mode={openingShell.server ? 'ssh' : 'local'}
+            server={openingShell.server}
+            isShell={true}
+            containerId={openingShell.containerId}
+          />
+        </div>
+      )}
+
       {/* Header with Stats */}
       <div className="bg-card rounded-lg shadow p-6">
         <h2 className="text-2xl font-bold text-foreground mb-4">Installed Scripts</h2>
@@ -995,6 +1187,7 @@ export function InstalledScriptsTab() {
                   onSave={handleSaveEdit}
                   onCancel={handleCancelEdit}
                   onUpdate={() => handleUpdateScript(script)}
+                  onShell={() => handleOpenShell(script)}
                   onDelete={() => handleDeleteScript(Number(script.id))}
                   isUpdating={updateScriptMutation.isPending}
                   isDeleting={deleteScriptMutation.isPending}
@@ -1002,6 +1195,9 @@ export function InstalledScriptsTab() {
                   onStartStop={(action) => handleStartStop(script, action)}
                   onDestroy={() => handleDestroy(script)}
                   isControlling={controllingScriptId === script.id}
+                  onOpenWebUI={() => handleOpenWebUI(script)}
+                  onAutoDetectWebUI={() => handleAutoDetectWebUI(script)}
+                  isAutoDetecting={autoDetectWebUIMutation.isPending}
                 />
               ))}
             </div>
@@ -1037,6 +1233,9 @@ export function InstalledScriptsTab() {
                         )}
                       </div>
                     </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                      Web UI
+                    </th>
                     <th 
                       className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider cursor-pointer hover:bg-muted/80 select-none"
                       onClick={() => handleSort('server_name')}
@@ -1145,6 +1344,58 @@ export function InstalledScriptsTab() {
                           )
                         )}
                       </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        {editingScriptId === script.id ? (
+                          <div className="flex items-center space-x-2 min-h-[2.5rem]">
+                            <input
+                              type="text"
+                              value={editFormData.web_ui_ip}
+                              onChange={(e) => handleInputChange('web_ui_ip', e.target.value)}
+                              className="w-32 px-3 py-2 text-sm font-mono border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring"
+                              placeholder="IP"
+                            />
+                            <span className="text-muted-foreground">:</span>
+                            <input
+                              type="number"
+                              value={editFormData.web_ui_port}
+                              onChange={(e) => handleInputChange('web_ui_port', e.target.value)}
+                              className="w-20 px-3 py-2 text-sm font-mono border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring"
+                              placeholder="Port"
+                            />
+                          </div>
+                        ) : (
+                          script.web_ui_ip ? (
+                            <div className="flex items-center space-x-3">
+                              <span className="text-sm text-foreground">
+                                {script.web_ui_ip}:{script.web_ui_port ?? 80}
+                              </span>
+                              {containerStatuses.get(script.id) === 'running' && (
+                                <button
+                                  onClick={() => handleOpenWebUI(script)}
+                                  className="text-xs px-2 py-1 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 rounded disabled:opacity-50 flex-shrink-0"
+                                  title="Open Web UI"
+                                >
+                                  Open UI
+                                </button>
+                              )}
+                            </div>
+                          ) : (
+                            <div className="flex items-center space-x-2">
+                              <span className="text-sm text-muted-foreground">-</span>
+                              {script.container_id && script.execution_mode === 'ssh' && (
+                                <button
+                                  onClick={() => handleAutoDetectWebUI(script)}
+                                  disabled={autoDetectWebUIMutation.isPending}
+                                  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"
+                                >
+                                  {autoDetectWebUIMutation.isPending ? '...' : 'Re-detect'}
+                                </button>
+                              )}
+                            </div>
+                          )
+                        )}
+                      </td>
                       <td className="px-6 py-4 whitespace-nowrap text-left">
                         <span 
                           className="text-sm px-3 py-1 rounded inline-block"
@@ -1193,52 +1444,90 @@ export function InstalledScriptsTab() {
                               >
                                 Edit
                               </Button>
-                              {script.container_id && (
-                                <Button
-                                  onClick={() => handleUpdateScript(script)}
-                                  variant="update"
-                                  size="sm"
-                                  disabled={containerStatuses.get(script.id) === 'stopped'}
-                                >
-                                  Update
-                                </Button>
-                              )}
-                              {/* Container Control Buttons - only show for SSH scripts with container_id */}
-                              {script.container_id && script.execution_mode === 'ssh' && (
-                                <>
-                                  <Button
-                                    onClick={() => handleStartStop(script, (containerStatuses.get(script.id) ?? 'unknown') === 'running' ? 'stop' : 'start')}
-                                    disabled={controllingScriptId === script.id || (containerStatuses.get(script.id) ?? 'unknown') === 'unknown'}
-                                    variant={(containerStatuses.get(script.id) ?? 'unknown') === 'running' ? 'destructive' : 'default'}
-                                    size="sm"
-                                    className={(containerStatuses.get(script.id) ?? 'unknown') === 'running' 
-                                      ? "bg-red-600 hover:bg-red-700 text-white border border-red-500 hover:border-red-400 hover:scale-105 hover:shadow-lg hover:shadow-red-500/25 transition-all duration-200 disabled:hover:scale-100" 
-                                      : "bg-green-600 hover:bg-green-700 text-white border border-green-500 hover:border-green-400 hover:scale-105 hover:shadow-lg hover:shadow-green-500/25 transition-all duration-200 disabled:hover:scale-100"
-                                    }
-                                  >
-                                    {controllingScriptId === script.id ? 'Working...' : (containerStatuses.get(script.id) ?? 'unknown') === 'running' ? 'Stop' : 'Start'}
-                                  </Button>
-                                  <Button
-                                    onClick={() => handleDestroy(script)}
-                                    disabled={controllingScriptId === script.id}
-                                    variant="destructive"
-                                    size="sm"
-                                    className="bg-red-800 hover:bg-red-900 text-white border border-red-600 hover:border-red-500 hover:scale-105 hover:shadow-lg hover:shadow-red-600/30 transition-all duration-200 disabled:hover:scale-100"
-                                  >
-                                    {controllingScriptId === script.id ? 'Working...' : 'Destroy'}
-                                  </Button>
-                                </>
-                              )}
-                              {/* Fallback to old Delete button for non-SSH scripts */}
-                              {(!script.container_id || script.execution_mode !== 'ssh') && (
-                                <Button
-                                  onClick={() => handleDeleteScript(Number(script.id))}
-                                  variant="delete"
-                                  size="sm"
-                                  disabled={deleteScriptMutation.isPending}
-                                >
-                                  {deleteScriptMutation.isPending ? 'Deleting...' : 'Delete'}
-                                </Button>
+                              {hasActions(script) && (
+                                <DropdownMenu>
+                                  <DropdownMenuTrigger asChild>
+                                    <Button
+                                      variant="outline"
+                                      size="sm"
+                                      className="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={() => handleUpdateScript(script)}
+                                        disabled={containerStatuses.get(script.id) === '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={() => handleOpenShell(script)}
+                                        disabled={containerStatuses.get(script.id) === '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={() => handleOpenWebUI(script)}
+                                        disabled={containerStatuses.get(script.id) === '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' && script.web_ui_ip && (
+                                      <DropdownMenuItem
+                                        onClick={() => handleAutoDetectWebUI(script)}
+                                        disabled={autoDetectWebUIMutation.isPending || containerStatuses.get(script.id) === 'stopped'}
+                                        className="text-blue-300 hover:text-blue-200 hover:bg-blue-900/20 focus:bg-blue-900/20"
+                                      >
+                                        {autoDetectWebUIMutation.isPending ? 'Re-detect...' : 'Re-detect IP/Port'}
+                                      </DropdownMenuItem>
+                                    )}
+                                    {script.container_id && script.execution_mode === 'ssh' && (
+                                      <>
+                                        <DropdownMenuSeparator className="bg-gray-700" />
+                                        <DropdownMenuItem
+                                          onClick={() => handleStartStop(script, (containerStatuses.get(script.id) ?? 'unknown') === 'running' ? 'stop' : 'start')}
+                                          disabled={controllingScriptId === script.id || (containerStatuses.get(script.id) ?? 'unknown') === 'unknown'}
+                                          className={(containerStatuses.get(script.id) ?? 'unknown') === '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"
+                                          }
+                                        >
+                                          {controllingScriptId === script.id ? 'Working...' : (containerStatuses.get(script.id) ?? 'unknown') === 'running' ? 'Stop' : 'Start'}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem
+                                          onClick={() => handleDestroy(script)}
+                                          disabled={controllingScriptId === script.id}
+                                          className="text-red-300 hover:text-red-200 hover:bg-red-900/20 focus:bg-red-900/20"
+                                        >
+                                          {controllingScriptId === script.id ? 'Working...' : 'Destroy'}
+                                        </DropdownMenuItem>
+                                      </>
+                                    )}
+                                    {(!script.container_id || script.execution_mode !== 'ssh') && (
+                                      <>
+                                        <DropdownMenuSeparator className="bg-gray-700" />
+                                        <DropdownMenuItem
+                                          onClick={() => handleDeleteScript(Number(script.id))}
+                                          disabled={deleteScriptMutation.isPending}
+                                          className="text-red-300 hover:text-red-200 hover:bg-red-900/20 focus:bg-red-900/20"
+                                        >
+                                          {deleteScriptMutation.isPending ? 'Deleting...' : 'Delete'}
+                                        </DropdownMenuItem>
+                                      </>
+                                    )}
+                                  </DropdownMenuContent>
+                                </DropdownMenu>
                               )}
                             </>
                           )}

src/app/_components/ReleaseNotesModal.tsx

@@ -5,6 +5,8 @@ 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;
@@ -170,9 +172,23 @@ export function ReleaseNotesModal({ isOpen, onClose, highlightVersion }: Release
                     {/* Release Body */}
                     {release.body && (
                       <div className="prose prose-sm max-w-none dark:prose-invert">
-                        <div className="whitespace-pre-wrap text-sm text-card-foreground leading-relaxed">
+                        <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}
-                        </div>
+                        </ReactMarkdown>
                       </div>
                     )}
                   </div>

src/app/_components/SSHKeyInput.tsx

@@ -104,9 +104,6 @@ export function SSHKeyInput({ value, onChange, onError, disabled = false }: SSHK
         keyType = 'ECDSA';
       } else if (keyLine.includes('OPENSSH PRIVATE KEY')) {
         // For OpenSSH format keys, try to detect type from the key content
-        // Look for common patterns in the base64 content
-        const base64Content = keyContent.replace(/-----BEGIN.*?-----/, '').replace(/-----END.*?-----/, '').replace(/\s/g, '');
-        
         // 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';

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,23 +21,30 @@ 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;
@@ -39,6 +53,10 @@ interface ScriptInstallationCardProps {
   onStartStop: (action: 'start' | 'stop') => void;
   onDestroy: () => void;
   isControlling: boolean;
+  // Web UI props
+  onOpenWebUI: () => void;
+  onAutoDetectWebUI: () => void;
+  isAutoDetecting: boolean;
 }
 
 export function ScriptInstallationCard({
@@ -50,18 +68,30 @@ export function ScriptInstallationCard({
   onSave,
   onCancel,
   onUpdate,
+  onShell,
   onDelete,
   isUpdating,
   isDeleting,
   containerStatus,
   onStartStop,
   onDestroy,
-  isControlling
+  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"
@@ -137,6 +167,70 @@ export function ScriptInstallationCard({
           )}
         </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>
+
         {/* Server */}
         <div>
           <div className="text-xs font-medium text-muted-foreground mb-1">Server</div>
@@ -192,51 +286,81 @@ export function ScriptInstallationCard({
             >
               Edit
             </Button>
-            {script.container_id && (
-              <Button
-                onClick={onUpdate}
-                variant="update"
-                size="sm"
-                className="flex-1 min-w-0"
-                disabled={containerStatus === 'stopped'}
-              >
-                Update
-              </Button>
-            )}
-            {/* Container Control Buttons - only show for SSH scripts with container_id */}
-            {script.container_id && script.execution_mode === 'ssh' && (
-              <>
-                <Button
-                  onClick={() => onStartStop(containerStatus === 'running' ? 'stop' : 'start')}
-                  disabled={isControlling || containerStatus === 'unknown'}
-                  variant={containerStatus === 'running' ? 'destructive' : 'default'}
-                  size="sm"
-                  className="flex-1 min-w-0"
-                >
-                  {isControlling ? 'Working...' : containerStatus === 'running' ? 'Stop' : 'Start'}
-                </Button>
-                <Button
-                  onClick={onDestroy}
-                  disabled={isControlling}
-                  variant="destructive"
-                  size="sm"
-                  className="flex-1 min-w-0"
-                >
-                  {isControlling ? 'Working...' : 'Destroy'}
-                </Button>
-              </>
-            )}
-            {/* Fallback to old Delete button for non-SSH scripts */}
-            {(!script.container_id || script.execution_mode !== 'ssh') && (
-              <Button
-                onClick={onDelete}
-                variant="delete"
-                size="sm"
-                disabled={isDeleting}
-                className="flex-1 min-w-0"
-              >
-                {isDeleting ? 'Deleting...' : 'Delete'}
-              </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>
             )}
           </>
         )}

src/app/_components/ServerList.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import type { Server, CreateServerData } from '../../types/server';
 import { ServerForm } from './ServerForm';
 import { Button } from './ui/button';
+import { ConfirmationModal } from './ConfirmationModal';
 
 interface ServerListProps {
   servers: Server[];
@@ -15,6 +16,14 @@ 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 handleEdit = (server: Server) => {
     setEditingId(server.id);
@@ -32,9 +41,20 @@ export function ServerList({ servers, onUpdate, onDelete }: ServerListProps) {
   };
 
   const handleDelete = (id: number) => {
-    if (window.confirm('Are you sure you want to delete this server configuration?')) {
-      onDelete(id);
-    }
+    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) => {
@@ -228,6 +248,21 @@ 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"
+        />
+      )}
     </div>
   );
 }

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/ui/button.tsx

@@ -37,6 +37,10 @@ const buttonVariants = cva(
         // 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",

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]/route.ts

@@ -173,6 +173,9 @@ export async function DELETE(
       );
     }
 
+    // Delete all installed scripts associated with this server
+    db.deleteInstalledScriptsByServer(id);
+
     const result = db.deleteServer(id);
     
     return NextResponse.json(

src/app/page.tsx

@@ -70,15 +70,42 @@ export default function Home() {
 
   // 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;

src/server/api/routers/installedScripts.ts

@@ -83,7 +83,9 @@ export const installedScriptsRouter = createTRPCRouter({
       server_id: z.number().optional(),
       execution_mode: z.enum(['local', 'ssh']),
       status: z.enum(['in_progress', 'success', 'failed']),
-      output_log: z.string().optional()
+      output_log: z.string().optional(),
+      web_ui_ip: z.string().optional(),
+      web_ui_port: z.number().optional()
     }))
     .mutation(async ({ input }) => {
       try {
@@ -110,7 +112,9 @@ export const installedScriptsRouter = createTRPCRouter({
       script_name: z.string().optional(),
       container_id: z.string().optional(),
       status: z.enum(['in_progress', 'success', 'failed']).optional(),
-      output_log: z.string().optional()
+      output_log: z.string().optional(),
+      web_ui_ip: z.string().optional(),
+      web_ui_port: z.number().optional()
     }))
     .mutation(async ({ input }) => {
       try {
@@ -972,5 +976,179 @@ export const installedScriptsRouter = createTRPCRouter({
           error: error instanceof Error ? error.message : 'Failed to destroy container'
         };
       }
+    }),
+
+  // Auto-detect Web UI IP and port
+  autoDetectWebUI: publicProcedure
+    .input(z.object({ id: z.number() }))
+    .mutation(async ({ input }) => {
+      try {
+        console.log('🔍 Auto-detect WebUI called with id:', input.id);
+        const db = getDatabase();
+        const script = db.getInstalledScriptById(input.id);
+        
+        if (!script) {
+          console.log('❌ Script not found for id:', input.id);
+          return {
+            success: false,
+            error: 'Script not found'
+          };
+        }
+
+        const scriptData = script as any;
+        console.log('📋 Script data:', {
+          id: scriptData.id,
+          execution_mode: scriptData.execution_mode,
+          server_id: scriptData.server_id,
+          container_id: scriptData.container_id
+        });
+        
+        // Only works for SSH mode scripts with container_id
+        if (scriptData.execution_mode !== 'ssh' || !scriptData.server_id || !scriptData.container_id) {
+          console.log('❌ Validation failed - not SSH mode or missing server/container ID');
+          return {
+            success: false,
+            error: 'Auto-detect only works for SSH mode scripts with container ID'
+          };
+        }
+
+        // Get server info
+        const server = db.getServerById(Number(scriptData.server_id));
+        if (!server) {
+          console.log('❌ Server not found for id:', scriptData.server_id);
+          return {
+            success: false,
+            error: 'Server not found'
+          };
+        }
+
+        console.log('🖥️ Server found:', { id: (server as any).id, name: (server as any).name, ip: (server as any).ip });
+
+        // Import SSH services
+        const { default: SSHService } = await import('~/server/ssh-service');
+        const { default: SSHExecutionService } = await import('~/server/ssh-execution-service');
+        const sshService = new SSHService();
+        const sshExecutionService = new SSHExecutionService();
+
+        // Test SSH connection first
+        console.log('🔌 Testing SSH connection...');
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        const connectionTest = await sshService.testSSHConnection(server as any);
+        if (!(connectionTest as any).success) {
+          console.log('❌ SSH connection failed:', (connectionTest as any).error);
+          return {
+            success: false,
+            error: `SSH connection failed: ${(connectionTest as any).error ?? 'Unknown error'}`
+          };
+        }
+
+        console.log('✅ SSH connection successful');
+
+        // Run hostname -I inside the container
+        // Use pct exec instead of pct enter -c (which doesn't exist)
+        const hostnameCommand = `pct exec ${scriptData.container_id} -- hostname -I`;
+        console.log('🚀 Running command:', hostnameCommand);
+        let commandOutput = '';
+        
+        await new Promise<void>((resolve, reject) => {
+          void sshExecutionService.executeCommand(
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            server as any,
+            hostnameCommand,
+            (data: string) => {
+              console.log('📤 Command output chunk:', data);
+              commandOutput += data;
+            },
+            (error: string) => {
+              console.log('❌ Command error:', error);
+              reject(new Error(error));
+            },
+            (exitCode: number) => {
+              console.log('🏁 Command finished with exit code:', exitCode);
+              if (exitCode !== 0) {
+                reject(new Error(`Command failed with exit code ${exitCode}`));
+              } else {
+                resolve();
+              }
+            }
+          );
+        });
+
+        // Parse output to get first IP address
+        console.log('📝 Full command output:', commandOutput);
+        const ips = commandOutput.trim().split(/\s+/);
+        const detectedIp = ips[0];
+        console.log('🔍 Parsed IPs:', ips);
+        console.log('🎯 Detected IP:', detectedIp);
+        
+        if (!detectedIp || !/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.exec(detectedIp)) {
+          console.log('❌ Invalid IP address detected:', detectedIp);
+          return {
+            success: false,
+            error: 'Could not detect valid IP address from container'
+          };
+        }
+
+        // Get the script's interface_port from metadata (prioritize metadata over existing database values)
+        let detectedPort = 80; // Default fallback
+        
+        try {
+          // Import localScriptsService to get script metadata
+          const { localScriptsService } = await import('~/server/services/localScripts');
+          
+          // Get all scripts and find the one matching our script name
+          const allScripts = await localScriptsService.getAllScripts();
+          
+          // Extract script slug from script_name (remove .sh extension)
+          const scriptSlug = scriptData.script_name.replace(/\.sh$/, '');
+          console.log('🔍 Looking for script with slug:', scriptSlug);
+          
+          const scriptMetadata = allScripts.find(script => script.slug === scriptSlug);
+          
+          if (scriptMetadata?.interface_port) {
+            detectedPort = scriptMetadata.interface_port;
+            console.log('📋 Found interface_port in metadata:', detectedPort);
+          } else {
+            console.log('📋 No interface_port found in metadata, using default port 80');
+            detectedPort = 80; // Default to port 80 if no metadata port found
+          }
+        } catch (error) {
+          console.log('⚠️ Error getting script metadata, using default port 80:', error);
+          detectedPort = 80; // Default to port 80 if metadata lookup fails
+        }
+        
+        console.log('🎯 Final detected port:', detectedPort);
+        
+        // Update the database with detected IP and port
+        console.log('💾 Updating database with IP:', detectedIp, 'Port:', detectedPort);
+        const updateResult = db.updateInstalledScript(input.id, {
+          web_ui_ip: detectedIp,
+          web_ui_port: detectedPort
+        });
+
+        if (updateResult.changes === 0) {
+          console.log('❌ Database update failed - no changes made');
+          return {
+            success: false,
+            error: 'Failed to update database with detected IP'
+          };
+        }
+
+        console.log('✅ Successfully updated database');
+        return {
+          success: true,
+          message: `Successfully detected IP: ${detectedIp}:${detectedPort} for LXC ${scriptData.container_id} on ${(server as any).name}`,
+          detectedIp,
+          detectedPort: detectedPort,
+          containerId: scriptData.container_id,
+          serverName: (server as any).name
+        };
+      } catch (error) {
+        console.error('Error in autoDetectWebUI:', error);
+        return {
+          success: false,
+          error: error instanceof Error ? error.message : 'Failed to auto-detect Web UI IP'
+        };
+      }
     })
 });

src/server/database.js

@@ -78,6 +78,24 @@ class DatabaseService {
       UPDATE servers SET ssh_port = 22 WHERE ssh_port IS NULL
     `);
 
+    // Migration: Add web_ui_ip column to existing installed_scripts table
+    try {
+      this.db.exec(`
+        ALTER TABLE installed_scripts ADD COLUMN web_ui_ip TEXT
+      `);
+    } catch (e) {
+      // Column already exists, ignore error
+    }
+
+    // Migration: Add web_ui_port column to existing installed_scripts table
+    try {
+      this.db.exec(`
+        ALTER TABLE installed_scripts ADD COLUMN web_ui_port INTEGER
+      `);
+    } catch (e) {
+      // Column already exists, ignore error
+    }
+
     // Create installed_scripts table if it doesn't exist
     this.db.exec(`
       CREATE TABLE IF NOT EXISTS installed_scripts (
@@ -90,6 +108,8 @@ class DatabaseService {
         installation_date DATETIME DEFAULT CURRENT_TIMESTAMP,
         status TEXT NOT NULL CHECK(status IN ('in_progress', 'success', 'failed')),
         output_log TEXT,
+        web_ui_ip TEXT,
+        web_ui_port INTEGER,
         FOREIGN KEY (server_id) REFERENCES servers(id) ON DELETE SET NULL
       )
     `);
@@ -162,14 +182,16 @@ class DatabaseService {
    * @param {string} scriptData.execution_mode
    * @param {string} scriptData.status
    * @param {string} [scriptData.output_log]
+   * @param {string} [scriptData.web_ui_ip]
+   * @param {number} [scriptData.web_ui_port]
    */
   createInstalledScript(scriptData) {
-    const { script_name, script_path, container_id, server_id, execution_mode, status, output_log } = scriptData;
+    const { script_name, script_path, container_id, server_id, execution_mode, status, output_log, web_ui_ip, web_ui_port } = scriptData;
     const stmt = this.db.prepare(`
-      INSERT INTO installed_scripts (script_name, script_path, container_id, server_id, execution_mode, status, output_log) 
-      VALUES (?, ?, ?, ?, ?, ?, ?)
+      INSERT INTO installed_scripts (script_name, script_path, container_id, server_id, execution_mode, status, output_log, web_ui_ip, web_ui_port) 
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
     `);
-    return stmt.run(script_name, script_path, container_id || null, server_id || null, execution_mode, status, output_log || null);
+    return stmt.run(script_name, script_path, container_id || null, server_id || null, execution_mode, status, output_log || null, web_ui_ip || null, web_ui_port || null);
   }
 
   getAllInstalledScripts() {
@@ -180,6 +202,10 @@ class DatabaseService {
         s.ip as server_ip,
         s.user as server_user,
         s.password as server_password,
+        s.auth_type as server_auth_type,
+        s.ssh_key as server_ssh_key,
+        s.ssh_key_passphrase as server_ssh_key_passphrase,
+        s.ssh_port as server_ssh_port,
         s.color as server_color
       FROM installed_scripts inst
       LEFT JOIN servers s ON inst.server_id = s.id
@@ -228,9 +254,11 @@ class DatabaseService {
    * @param {string} [updateData.container_id]
    * @param {string} [updateData.status]
    * @param {string} [updateData.output_log]
+   * @param {string} [updateData.web_ui_ip]
+   * @param {number} [updateData.web_ui_port]
    */
   updateInstalledScript(id, updateData) {
-    const { script_name, container_id, status, output_log } = updateData;
+    const { script_name, container_id, status, output_log, web_ui_ip, web_ui_port } = updateData;
     const updates = [];
     const values = [];
 
@@ -250,6 +278,14 @@ class DatabaseService {
       updates.push('output_log = ?');
       values.push(output_log);
     }
+    if (web_ui_ip !== undefined) {
+      updates.push('web_ui_ip = ?');
+      values.push(web_ui_ip);
+    }
+    if (web_ui_port !== undefined) {
+      updates.push('web_ui_port = ?');
+      values.push(web_ui_port);
+    }
 
     if (updates.length === 0) {
       return { changes: 0 };
@@ -272,6 +308,14 @@ class DatabaseService {
     return stmt.run(id);
   }
 
+  /**
+   * @param {number} server_id
+   */
+  deleteInstalledScriptsByServer(server_id) {
+    const stmt = this.db.prepare('DELETE FROM installed_scripts WHERE server_id = ?');
+    return stmt.run(server_id);
+  }
+
   close() {
     this.db.close();
   }

src/styles/globals.css

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