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

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}