feat: Add Install button to script detail modal

- Add Install button that appears when script files are loaded
- Integrate with existing terminal component for script execution
- Pass correct script path to terminal (scripts/ct/script.sh)
- Close modal when installation starts
- Add proper TypeScript handling for union types
- Install button only shows when CT script is available locally

scripts/ct/actualbudget.sh

@@ -0,0 +1,67 @@
+#!/usr/bin/env bash
+this SCRIPT_DIR="$(dirname "$0")" source "$SCRIPT_DIR/../core/build.func"
+# Copyright (c) 2021-2025 community-scripts ORG
+# Author: MickLesk (CanbiZ)
+# License: MIT | https://github.com/community-scripts/ProxmoxVE/raw/main/LICENSE
+# Source: https://actualbudget.org/
+
+APP="Actual Budget"
+var_tags="${var_tags:-finance}"
+var_cpu="${var_cpu:-2}"
+var_ram="${var_ram:-2048}"
+var_disk="${var_disk:-4}"
+var_os="${var_os:-debian}"
+var_version="${var_version:-12}"
+var_unprivileged="${var_unprivileged:-1}"
+
+header_info "$APP"
+variables
+color
+catch_errors
+
+function update_script() {
+  header_info
+  check_container_storage
+  check_container_resources
+
+  if [[ ! -f /opt/actualbudget_version.txt ]]; then
+    msg_error "No ${APP} Installation Found!"
+    exit
+  fi
+  NODE_VERSION="22"
+  setup_nodejs
+  RELEASE=$(curl -fsSL https://api.github.com/repos/actualbudget/actual/releases/latest | grep "tag_name" | awk '{print substr($2, 3, length($2)-4) }')
+  if [[ -f /opt/actualbudget-data/config.json ]]; then
+    if [[ ! -f /opt/actualbudget_version.txt ]] || [[ "${RELEASE}" != "$(cat /opt/actualbudget_version.txt)" ]]; then
+      msg_info "Stopping ${APP}"
+      systemctl stop actualbudget
+      msg_ok "${APP} Stopped"
+
+      msg_info "Updating ${APP} to ${RELEASE}"
+      $STD npm update -g @actual-app/sync-server
+      echo "${RELEASE}" >/opt/actualbudget_version.txt
+      msg_ok "Updated ${APP} to ${RELEASE}"
+
+      msg_info "Starting ${APP}"
+      systemctl start actualbudget
+      msg_ok "Restarted ${APP}"
+    else
+      msg_info "${APP} is already up to date"
+    fi
+  else
+    msg_info "Old Installation Found, you need to migrate your data and recreate to a new container"
+    msg_info "Please follow the instructions on the ${APP} website to migrate your data"
+    msg_info "https://actualbudget.org/docs/backup-restore/backup"
+    exit 1
+  fi
+  exit
+}
+
+start
+build_container
+description
+
+msg_ok "Completed Successfully!\n"
+echo -e "${CREATING}${GN}${APP} setup has been successfully initialized!${CL}"
+echo -e "${INFO}${YW} Access it using the following URL:${CL}"
+echo -e "${TAB}${GATEWAY}${BGN}https://${IP}:5006${CL}"

scripts/install/actualbudget-install.sh

@@ -0,0 +1,97 @@
+#!/usr/bin/env bash
+
+# Copyright (c) 2021-2025 community-scripts ORG
+# Author: MickLesk (CanbiZ)
+# License: MIT | https://github.com/community-scripts/ProxmoxVE/raw/main/LICENSE
+# Source: https://actualbudget.org/
+
+source /dev/stdin <<<"$FUNCTIONS_FILE_PATH"
+color
+verb_ip6
+catch_errors
+setting_up_container
+network_check
+update_os
+
+msg_info "Installing Dependencies"
+$STD apt-get install -y \
+  make \
+  g++
+msg_ok "Installed Dependencies"
+
+msg_info "Installing Actual Budget"
+cd /opt
+RELEASE=$(curl -fsSL https://api.github.com/repos/actualbudget/actual/releases/latest | grep "tag_name" | awk '{print substr($2, 3, length($2)-4) }')
+NODE_VERSION="22"
+setup_nodejs
+mkdir -p /opt/actualbudget-data/{server-files,upload,migrate,user-files,migrations,config}
+chown -R root:root /opt/actualbudget-data
+chmod -R 755 /opt/actualbudget-data
+
+cat <<EOF >/opt/actualbudget-data/config.json
+{
+  "port": 5006,
+  "hostname": "::",
+  "serverFiles": "/opt/actualbudget-data/server-files",
+  "userFiles": "/opt/actualbudget-data/user-files",
+  "trustedProxies": [
+    "10.0.0.0/8",
+    "172.16.0.0/12",
+    "192.168.0.0/16",
+    "127.0.0.0/8",
+    "::1/128",
+    "fc00::/7"
+  ],
+  "https": {
+    "key": "/opt/actualbudget/selfhost.key",
+    "cert": "/opt/actualbudget/selfhost.crt"
+  }
+}
+EOF
+
+mkdir -p /opt/actualbudget
+cd /opt/actualbudget
+$STD npm install --location=global @actual-app/sync-server
+$STD openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout selfhost.key -out selfhost.crt <<EOF
+US
+California
+San Francisco
+My Organization
+My Unit
+localhost
+myemail@example.com
+EOF
+echo "${RELEASE}" >"/opt/actualbudget_version.txt"
+msg_ok "Installed Actual Budget"
+
+msg_info "Creating Service"
+cat <<EOF >/etc/systemd/system/actualbudget.service
+[Unit]
+Description=Actual Budget Service
+After=network.target
+
+[Service]
+Type=simple
+User=root
+Group=root
+WorkingDirectory=/opt/actualbudget
+Environment=ACTUAL_UPLOAD_FILE_SIZE_LIMIT_MB=20
+Environment=ACTUAL_UPLOAD_SYNC_ENCRYPTED_FILE_SYNC_SIZE_LIMIT_MB=50
+Environment=ACTUAL_UPLOAD_FILE_SYNC_SIZE_LIMIT_MB=20
+ExecStart=/usr/bin/actual-server --config /opt/actualbudget-data/config.json
+Restart=always
+RestartSec=10
+
+[Install]
+WantedBy=multi-user.target
+EOF
+systemctl enable -q --now actualbudget
+msg_ok "Created Service"
+
+motd_ssh
+customize
+
+msg_info "Cleaning up"
+$STD apt-get -y autoremove
+$STD apt-get -y autoclean
+msg_ok "Cleaned"

scripts/test-script.sh

@@ -1,14 +0,0 @@
-#!/bin/bash
-
-echo "Hello from test script!"
-echo "Current directory: $(pwd)"
-echo "Script arguments: $@"
-echo "Environment variables:"
-env | grep -E "(PATH|HOME|USER)" | head -5
-
-for i in {1..5}; do
-    echo "Count: $i"
-    sleep 1
-done
-
-echo "Test script completed!"

src/app/_components/ScriptDetailModal.tsx

@@ -8,9 +8,10 @@ interface ScriptDetailModalProps {
   script: Script | null;
   isOpen: boolean;
   onClose: () => void;
+  onInstallScript?: (scriptPath: string, scriptName: string) => void;
 }
 
-export function ScriptDetailModal({ script, isOpen, onClose }: ScriptDetailModalProps) {
+export function ScriptDetailModal({ script, isOpen, onClose, onInstallScript }: ScriptDetailModalProps) {
   const [imageError, setImageError] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [loadMessage, setLoadMessage] = useState<string | null>(null);
@@ -26,11 +27,13 @@ export function ScriptDetailModal({ script, isOpen, onClose }: ScriptDetailModal
     onSuccess: (data) => {
       setIsLoading(false);
       if (data.success) {
-        setLoadMessage(`✅ ${data.message}`);
+        const message = 'message' in data ? data.message : 'Script loaded successfully';
+        setLoadMessage(`✅ ${message}`);
         // Refetch script files status to update the UI
         refetchScriptFiles();
       } else {
-        setLoadMessage(`❌ ${data.error}`);
+        const error = 'error' in data ? data.error : 'Failed to load script';
+        setLoadMessage(`❌ ${error}`);
       }
       // Clear message after 5 seconds
       setTimeout(() => setLoadMessage(null), 5000);
@@ -62,6 +65,19 @@ export function ScriptDetailModal({ script, isOpen, onClose }: ScriptDetailModal
     loadScriptMutation.mutate({ slug: script.slug });
   };
 
+  const handleInstallScript = () => {
+    if (!script || !onInstallScript) return;
+    
+    // Find the CT script path
+    const ctScript = script.install_methods?.find(method => method.script?.startsWith('ct/'));
+    if (ctScript?.script) {
+      const scriptPath = `scripts/${ctScript.script}`;
+      const scriptName = script.name;
+      onInstallScript(scriptPath, scriptName);
+      onClose(); // Close the modal when starting installation
+    }
+  };
+
   return (
     <div
       className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
@@ -109,6 +125,19 @@ export function ScriptDetailModal({ script, isOpen, onClose }: ScriptDetailModal
             </div>
           </div>
           <div className="flex items-center space-x-4">
+            {/* Install Button - only show if script files exist */}
+            {scriptFilesData?.success && scriptFilesData.ctExists && onInstallScript && (
+              <button
+                onClick={handleInstallScript}
+                className="flex items-center space-x-2 px-4 py-2 rounded-lg font-medium transition-colors bg-blue-600 text-white hover:bg-blue-700"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                </svg>
+                <span>Install</span>
+              </button>
+            )}
+            
             {/* Load Script Button */}
             <button
               onClick={handleLoadScript}

src/app/_components/ScriptsGrid.tsx

@@ -6,7 +6,11 @@ import { ScriptCard } from './ScriptCard';
 import { ScriptDetailModal } from './ScriptDetailModal';
 import type { ScriptCard as ScriptCardType, Script } from '~/types/script';
 
-export function ScriptsGrid() {
+interface ScriptsGridProps {
+  onInstallScript?: (scriptPath: string, scriptName: string) => void;
+}
+
+export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
   const [selectedSlug, setSelectedSlug] = useState<string | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -111,6 +115,7 @@ export function ScriptsGrid() {
         script={scriptData?.success ? scriptData.script : null}
         isOpen={isModalOpen}
         onClose={handleCloseModal}
+        onInstallScript={onInstallScript}
       />
     </>
   );

src/app/page.tsx

@@ -79,7 +79,7 @@ export default function Home() {
 
         {/* Scripts List */}
         {activeTab === 'github' ? (
-          <ScriptsGrid />
+          <ScriptsGrid onInstallScript={handleRunScript} />
         ) : (
           <ScriptsList onRunScript={handleRunScript} />
         )}