Update AppImage

AppImage/components/script-terminal-modal.tsx

@@ -1,13 +1,13 @@
 "use client"
 
 import type React from "react"
-import { useState, useRef } from "react"
+import { useState, useEffect, useRef, useCallback } from "react"
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { CheckCircle2, XCircle, GripHorizontal } from "lucide-react"
+import { CheckCircle2, XCircle, Loader2, Activity, GripHorizontal } from "lucide-react"
-import { TerminalPanel } from "./terminal-panel"
+import { API_PORT } from "../lib/api-config"
 import { useIsMobile } from "@/hooks/use-mobile"
 
 interface WebInteraction {
@@ -38,36 +38,312 @@ export function ScriptTerminalModal({
   title,
   description,
 }: ScriptTerminalModalProps) {
+  const termRef = useRef<any>(null)
+  const wsRef = useRef<WebSocket | null>(null)
+  const fitAddonRef = useRef<any>(null)
+  const sessionIdRef = useRef<string>(Math.random().toString(36).substring(2, 8))
+
+  const [isConnected, setIsConnected] = useState(false)
   const [isComplete, setIsComplete] = useState(false)
   const [exitCode, setExitCode] = useState<number | null>(null)
   const [currentInteraction, setCurrentInteraction] = useState<WebInteraction | null>(null)
   const [interactionInput, setInteractionInput] = useState("")
+  const checkConnectionInterval = useRef<NodeJS.Timeout | null>(null)
   const isMobile = useIsMobile()
 
+  const [isWaitingNextInteraction, setIsWaitingNextInteraction] = useState(false)
+  const waitingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
   const [modalHeight, setModalHeight] = useState(80)
   const [isResizing, setIsResizing] = useState(false)
   const startYRef = useRef(0)
   const startHeightRef = useRef(80)
 
-  const initMessage = {
+  const terminalContainerRef = useCallback(
-    script_path: scriptPath,
+    (node: HTMLDivElement | null) => {
-    params: {
+      if (!node || !open || termRef.current) {
-      EXECUTION_MODE: "web",
+        return
-      ...params,
+      }
+
+      console.log("[v0] Terminal container mounted, initializing...")
+
+      const initializeTerminal = async () => {
+        console.log("[v0] Loading xterm modules...")
+        const [TerminalClass, FitAddonClass] = await Promise.all([
+          import("xterm").then((mod) => mod.Terminal),
+          import("xterm-addon-fit").then((mod) => mod.FitAddon),
+          import("xterm/css/xterm.css"),
+        ])
+
+        console.log("[v0] Creating terminal instance...")
+        const fontSize = window.innerWidth < 768 ? 12 : 16
+
+        const term = new TerminalClass({
+          rendererType: "dom",
+          fontFamily: '"Courier", "Courier New", "Liberation Mono", "DejaVu Sans Mono", monospace',
+          fontSize: fontSize,
+          lineHeight: 1,
+          cursorBlink: true,
+          scrollback: 2000,
+          disableStdin: false,
+          customGlyphs: true,
+          fontWeight: "500",
+          fontWeightBold: "700",
+          theme: {
+            background: "#000000",
+            foreground: "#ffffff",
+            cursor: "#ffffff",
+            cursorAccent: "#000000",
+            black: "#2e3436",
+            red: "#cc0000",
+            green: "#4e9a06",
+            yellow: "#c4a000",
+            blue: "#3465a4",
+            magenta: "#75507b",
+            cyan: "#06989a",
+            white: "#d3d7cf",
+            brightBlack: "#555753",
+            brightRed: "#ef2929",
+            brightGreen: "#8ae234",
+            brightYellow: "#fce94f",
+            brightBlue: "#729fcf",
+            brightMagenta: "#ad7fa8",
+            brightCyan: "#34e2e2",
+            brightWhite: "#eeeeec",
+          },
+        })
+
+        const fitAddon = new FitAddonClass()
+        term.loadAddon(fitAddon)
+        console.log("[v0] Opening terminal in container...")
+        term.open(node)
+
+        termRef.current = term
+        fitAddonRef.current = fitAddon
+
+        setTimeout(() => {
+          try {
+            fitAddon.fit()
+            console.log("[v0] Terminal fitted, cols:", term.cols, "rows:", term.rows)
+          } catch (err) {
+            console.log("[v0] Fit error:", err)
+          }
+        }, 50)
+
+        const wsUrl = getScriptWebSocketUrl(sessionIdRef.current)
+        console.log("[v0] Connecting to WebSocket:", wsUrl)
+        const ws = new WebSocket(wsUrl)
+        wsRef.current = ws
+
+        ws.onopen = () => {
+          console.log("[v0] WebSocket connected!")
+          setIsConnected(true)
+
+          const initMessage = {
+            script_path: scriptPath,
+            params: {
+              EXECUTION_MODE: "web",
+              ...params,
+            },
+          }
+
+          console.log("[v0] Sending init message:", initMessage)
+          ws.send(JSON.stringify(initMessage))
+
+          setTimeout(() => {
+            try {
+              fitAddon.fit()
+              const cols = term.cols
+              const rows = term.rows
+              console.log("[v0] Sending resize:", { cols, rows })
+              ws.send(
+                JSON.stringify({
+                  type: "resize",
+                  cols: cols,
+                  rows: rows,
+                }),
+              )
+            } catch (err) {
+              console.log("[v0] Resize error:", err)
+            }
+          }, 100)
+        }
+
+        ws.onmessage = (event) => {
+          console.log("[v0] WebSocket message received:", event.data.substring(0, 100))
+          try {
+            const msg = JSON.parse(event.data)
+
+            if (msg.type === "web_interaction" && msg.interaction) {
+              console.log("[v0] Web interaction detected:", msg.interaction.type)
+              setIsWaitingNextInteraction(false)
+              if (waitingTimeoutRef.current) {
+                clearTimeout(waitingTimeoutRef.current)
+              }
+              setCurrentInteraction({
+                type: msg.interaction.type,
+                id: msg.interaction.id,
+                title: msg.interaction.title || "",
+                message: msg.interaction.message || "",
+                options: msg.interaction.options,
+                default: msg.interaction.default,
+              })
+              return
+            }
+
+            if (msg.type === "error") {
+              console.log("[v0] Error message:", msg.message)
+              term.writeln(`\x1b[31m${msg.message}\x1b[0m`)
+              return
+            }
+          } catch {
+            // Not JSON, es output normal de terminal
+          }
+
+          term.write(event.data)
+
+          setIsWaitingNextInteraction(false)
+          if (waitingTimeoutRef.current) {
+            clearTimeout(waitingTimeoutRef.current)
+          }
+        }
+
+        ws.onerror = (error) => {
+          console.log("[v0] WebSocket error:", error)
+          setIsConnected(false)
+          term.writeln("\x1b[31mWebSocket error occurred\x1b[0m")
+        }
+
+        ws.onclose = (event) => {
+          console.log("[v0] WebSocket closed:", event.code, event.reason)
+          setIsConnected(false)
+          term.writeln("\x1b[33mConnection closed\x1b[0m")
+
+          if (!isComplete) {
+            setIsComplete(true)
+            setExitCode(event.code === 1000 ? 0 : 1)
+          }
+        }
+
+        term.onData((data) => {
+          if (ws.readyState === WebSocket.OPEN) {
+            ws.send(data)
+          }
+        })
+
+        checkConnectionInterval.current = setInterval(() => {
+          if (ws) {
+            setIsConnected(ws.readyState === WebSocket.OPEN)
+          }
+        }, 500)
+
+        let resizeTimeout: NodeJS.Timeout | null = null
+
+        const resizeObserver = new ResizeObserver(() => {
+          if (resizeTimeout) clearTimeout(resizeTimeout)
+          resizeTimeout = setTimeout(() => {
+            if (fitAddon && term && ws?.readyState === WebSocket.OPEN) {
+              try {
+                fitAddon.fit()
+                ws.send(
+                  JSON.stringify({
+                    type: "resize",
+                    cols: term.cols,
+                    rows: term.rows,
+                  }),
+                )
+              } catch (err) {
+                // Ignore
+              }
+            }
+          }, 100)
+        })
+
+        resizeObserver.observe(node)
+      }
+
+      initializeTerminal()
     },
+    [open, scriptPath, params],
+  )
+
+  useEffect(() => {
+    if (!open) {
+      if (checkConnectionInterval.current) {
+        clearInterval(checkConnectionInterval.current)
+      }
+      if (waitingTimeoutRef.current) {
+        clearTimeout(waitingTimeoutRef.current)
+      }
+      if (wsRef.current) {
+        wsRef.current.close()
+        wsRef.current = null
+      }
+      if (termRef.current) {
+        termRef.current.dispose()
+        termRef.current = null
+      }
+      sessionIdRef.current = Math.random().toString(36).substring(2, 8)
+      setIsComplete(false)
+      setExitCode(null)
+      setInteractionInput("")
+      setCurrentInteraction(null)
+      setIsWaitingNextInteraction(false)
+      setIsConnected(false)
+    }
+  }, [open])
+
+  const getScriptWebSocketUrl = (sid: string): string => {
+    if (typeof window === "undefined") {
+      return `ws://localhost:${API_PORT}/ws/script/${sid}`
+    }
+
+    const { hostname, protocol } = window.location
+    const wsProtocol = protocol === "https:" ? "wss:" : "ws:"
+    return `${wsProtocol}//${hostname}:${API_PORT}/ws/script/${sid}`
   }
 
   const handleInteractionResponse = (value: string) => {
-    if (value === "cancel" || value === "") {
+    if (!wsRef.current || !currentInteraction) {
-      setCurrentInteraction(null)
-      setInteractionInput("")
-      onClose()
       return
     }
 
-    // TerminalPanel manejará el envío de la respuesta
+    if (value === "cancel" || value === "") {
+      setCurrentInteraction(null)
+      setInteractionInput("")
+      handleCloseModal()
+      return
+    }
+
+    const response = JSON.stringify({
+      type: "interaction_response",
+      id: currentInteraction.id,
+      value: value,
+    })
+
+    if (wsRef.current.readyState === WebSocket.OPEN) {
+      wsRef.current.send(response)
+    }
+
     setCurrentInteraction(null)
     setInteractionInput("")
+
+    waitingTimeoutRef.current = setTimeout(() => {
+      setIsWaitingNextInteraction(true)
+    }, 300)
+  }
+
+  const handleCloseModal = () => {
+    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+      wsRef.current.close()
+    }
+    if (checkConnectionInterval.current) {
+      clearInterval(checkConnectionInterval.current)
+    }
+    if (termRef.current) {
+      termRef.current.dispose()
+    }
+    onClose()
   }
 
   const handleResizeStart = (e: React.MouseEvent | React.TouchEvent) => {
@@ -120,22 +396,17 @@ export function ScriptTerminalModal({
             </div>
           </div>
 
-          <div className="flex-1 overflow-hidden">
+          <div className="overflow-hidden relative flex-1">
-            <TerminalPanel
+            <div ref={terminalContainerRef} className="w-full h-full" />
-              isScriptModal={true}
+
-              initMessage={initMessage}
+            {isWaitingNextInteraction && !currentInteraction && (
-              onWebInteraction={(interaction) => {
+              <div className="absolute inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-                setCurrentInteraction({
+                <div className="flex flex-col items-center gap-3">
-                  type: interaction.type as any,
+                  <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
-                  id: interaction.id,
+                  <p className="text-sm text-muted-foreground">Processing...</p>
-                  title: interaction.title || "",
+                </div>
-                  message: interaction.message || "",
+              </div>
-                  options: interaction.options,
+            )}
-                  default: interaction.default,
-                })
-              }}
-              onClose={onClose}
-            />
           </div>
 
           {!isMobile && (
@@ -149,6 +420,25 @@ export function ScriptTerminalModal({
               <GripHorizontal className={`h-4 w-4 ${isResizing ? "text-white" : "text-zinc-500"}`} />
             </div>
           )}
+
+          <div className="flex items-center justify-between p-4 border-t">
+            <div className="flex items-center gap-3">
+              <Activity className="h-5 w-5 text-blue-500" />
+              <div
+                className={`w-2 h-2 rounded-full ${isConnected ? "bg-green-500" : "bg-red-500"}`}
+                title={isConnected ? "Connected" : "Disconnected"}
+              ></div>
+              <span className="text-xs text-muted-foreground">{isConnected ? "Online" : "Offline"}</span>
+            </div>
+
+            <Button
+              onClick={handleCloseModal}
+              variant="outline"
+              className="bg-red-600 hover:bg-red-700 border-red-500 text-white"
+            >
+              Close
+            </Button>
+          </div>
         </DialogContent>
       </Dialog>
 

AppImage/components/terminal-panel.tsx

@@ -26,9 +26,6 @@ import type { CheatSheetResult } from "@/lib/cheat-sheet-result" // Declare Chea
 type TerminalPanelProps = {
   websocketUrl?: string
   onClose?: () => void
-  isScriptModal?: boolean
-  initMessage?: { script_path: string; params: Record<string, string> }
-  onWebInteraction?: (interaction: any) => void
 }
 
 interface TerminalInstance {
@@ -135,13 +132,7 @@ const proxmoxCommands = [
   { cmd: "clear", desc: "Clear terminal screen" },
 ]
 
-export const TerminalPanel: React.FC<TerminalPanelProps> = ({
+export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onClose }) => {
-  websocketUrl,
-  onClose,
-  isScriptModal,
-  initMessage,
-  onWebInteraction,
-}) => {
   const [terminals, setTerminals] = useState<TerminalInstance[]>([])
   const [activeTerminalId, setActiveTerminalId] = useState<string>("")
   const [layout, setLayout] = useState<"single" | "grid">("grid")
@@ -579,16 +570,6 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({
 
   const activeTerminal = terminals.find((t) => t.id === activeTerminalId)
 
-  useEffect(() => {
-    if (initMessage && activeTerminal?.ws && activeTerminal.ws.readyState === WebSocket.OPEN) {
-      const message = JSON.stringify(initMessage)
-      activeTerminal.ws.send(message)
-      if (onWebInteraction) {
-        onWebInteraction({ type: "script_init", message })
-      }
-    }
-  }, [initMessage, activeTerminal])
-
   return (
     <div className="flex flex-col h-full bg-zinc-950 rounded-md overflow-hidden">
       <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-800">