Update AppImage

AppImage/components/script-terminal-modal.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { X, CheckCircle2, XCircle, Loader2 } from "lucide-react"
-import { TerminalPanel, type TerminalPanelHandle } from "./terminal-panel"
+import { TerminalPanel } from "./terminal-panel"
 import { API_PORT } from "@/lib/api-config"
 
 interface WebInteraction {
@@ -42,36 +42,16 @@ export function ScriptTerminalModal({
   const [exitCode, setExitCode] = useState<number | null>(null)
   const [currentInteraction, setCurrentInteraction] = useState<WebInteraction | null>(null)
   const [interactionInput, setInteractionInput] = useState("")
-  const terminalRef = useRef<TerminalPanelHandle>(null)
-
-  useEffect(() => {
-    console.log("[v0] currentInteraction changed:", currentInteraction)
-    if (currentInteraction) {
-      console.log("[v0] Interaction opened, type:", currentInteraction.type, "id:", currentInteraction.id)
-    } else {
-      console.log("[v0] Interaction closed/cleared")
-      console.trace("[v0] Stack trace for currentInteraction = null")
-    }
-  }, [currentInteraction])
+  const wsRef = useRef<WebSocket | null>(null)
 
   useEffect(() => {
     if (open) {
-      console.log("[v0] ScriptTerminalModal opened with:", {
-        scriptPath,
-        scriptName,
-        params,
-        sessionId,
-      })
-      // Reset state only when modal opens
       setIsComplete(false)
       setExitCode(null)
       setInteractionInput("")
-      // Don't clear currentInteraction here - it causes issues
-    } else {
-      // Clear interaction when modal closes
       setCurrentInteraction(null)
     }
-  }, [open]) // Only depend on 'open' to avoid unnecessary re-runs
+  }, [open])
 
   const getScriptWebSocketUrl = (): string => {
     if (typeof window === "undefined") {
@@ -85,16 +65,16 @@ export function ScriptTerminalModal({
 
   const wsUrl = getScriptWebSocketUrl()
 
+  const handleWebSocketCreated = (ws: WebSocket) => {
+    wsRef.current = ws
+  }
+
   const handleWebInteraction = (interaction: WebInteraction) => {
-    console.log("[v0] handleWebInteraction called with:", interaction)
     setCurrentInteraction(interaction)
-    console.log("[v0] currentInteraction set to:", interaction.type, interaction.id)
   }
 
   const handleInteractionResponse = (value: string) => {
-    console.log("[v0] handleInteractionResponse called with value:", value)
-    if (!terminalRef.current || !currentInteraction) {
-      console.log("[v0] Cannot send response - no terminal ref or interaction")
+    if (!wsRef.current || !currentInteraction) {
       return
     }
 
@@ -104,12 +84,10 @@ export function ScriptTerminalModal({
       value: value,
     })
 
-    console.log("[v0] Sending interaction response:", response)
+    if (wsRef.current.readyState === WebSocket.OPEN) {
+      wsRef.current.send(response)
+    }
 
-    terminalRef.current.sendMessage(response)
-    console.log("[v0] Response sent successfully")
-
-    console.log("[v0] Clearing currentInteraction after response")
     setCurrentInteraction(null)
     setInteractionInput("")
   }
@@ -144,13 +122,13 @@ export function ScriptTerminalModal({
 
           <div className="flex-1 overflow-hidden">
             <TerminalPanel
-              ref={terminalRef}
               websocketUrl={wsUrl}
               initMessage={{
                 script_path: scriptPath,
                 params: params,
               }}
               onWebInteraction={handleWebInteraction}
+              onWebSocketCreated={handleWebSocketCreated}
             />
           </div>
 
@@ -163,17 +141,11 @@ export function ScriptTerminalModal({
       </Dialog>
 
       {currentInteraction && (
-        <Dialog open={true} modal={true}>
+        <Dialog open={true}>
           <DialogContent
             className="max-w-4xl max-h-[80vh] overflow-y-auto"
-            onInteractOutside={(e) => {
-              console.log("[v0] onInteractOutside triggered - preventing close")
-              e.preventDefault()
-            }}
-            onEscapeKeyDown={(e) => {
-              console.log("[v0] onEscapeKeyDown triggered - preventing close")
-              e.preventDefault()
-            }}
+            onInteractOutside={(e) => e.preventDefault()}
+            onEscapeKeyDown={(e) => e.preventDefault()}
           >
             <DialogTitle>{currentInteraction.title}</DialogTitle>
             <div className="space-y-4">
@@ -212,8 +184,7 @@ export function ScriptTerminalModal({
                 </div>
               )}
 
-              {currentInteraction.type === "input" ||
-                (currentInteraction.type === "inputbox" && (
+              {(currentInteraction.type === "input" || currentInteraction.type === "inputbox") && (
                 <div className="space-y-2">
                   <Label>Your input:</Label>
                   <Input
@@ -230,7 +201,7 @@ export function ScriptTerminalModal({
                     Submit
                   </Button>
                 </div>
-                ))}
+              )}
 
               {currentInteraction.type === "msgbox" && (
                 <Button onClick={() => handleInteractionResponse("ok")} className="w-full">

AppImage/components/terminal-panel.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import type React from "react"
-import { useEffect, useRef, useState, forwardRef, useImperativeHandle } from "react"
+import { useEffect, useRef, useState } from "react"
 import { API_PORT } from "../lib/api-config"
 import { fetchApi } from "@/lib/api-config" // Cambiando import para usar fetchApi directamente
 import {
@@ -28,10 +28,7 @@ type TerminalPanelProps = {
   onClose?: () => void
   initMessage?: Record<string, any>
   onWebInteraction?: (interaction: any) => void
-}
-
-export interface TerminalPanelHandle {
-  sendMessage: (message: string) => void
+  onWebSocketCreated?: (ws: WebSocket) => void
 }
 
 interface TerminalInstance {
@@ -138,8 +135,13 @@ const proxmoxCommands = [
   { cmd: "clear", desc: "Clear terminal screen" },
 ]
 
-const TerminalPanel = forwardRef<TerminalPanelHandle, TerminalPanelProps>(
-  ({ websocketUrl, onClose, initMessage, onWebInteraction }, ref) => {
+export const TerminalPanel: React.FC<TerminalPanelProps> = ({
+  websocketUrl,
+  onClose,
+  initMessage,
+  onWebInteraction,
+  onWebSocketCreated,
+}) => {
   const [terminals, setTerminals] = useState<TerminalInstance[]>([])
   const [activeTerminalId, setActiveTerminalId] = useState<string>("")
   const [layout, setLayout] = useState<"single" | "grid">("grid")
@@ -155,24 +157,6 @@ const TerminalPanel = forwardRef<TerminalPanelHandle, TerminalPanelProps>(
 
   const containerRefs = useRef<{ [key: string]: HTMLDivElement | null }>({})
 
-    useImperativeHandle(
-      ref,
-      () => ({
-        sendMessage: (message: string) => {
-          console.log("[v0] TerminalPanel.sendMessage called with:", message)
-          // Send to the first terminal (or active terminal if available)
-          const terminal = terminals.find((t) => t.id === activeTerminalId) || terminals[0]
-          if (terminal?.ws && terminal.ws.readyState === WebSocket.OPEN) {
-            console.log("[v0] Sending message via WebSocket")
-            terminal.ws.send(message)
-          } else {
-            console.log("[v0] Cannot send message - no active WebSocket")
-          }
-        },
-      }),
-      [terminals, activeTerminalId],
-    )
-
   useEffect(() => {
     const updateDeviceType = () => {
       const width = window.innerWidth
@@ -453,6 +437,10 @@ const TerminalPanel = forwardRef<TerminalPanelHandle, TerminalPanelProps>(
         prev.map((t) => (t.id === terminal.id ? { ...t, isConnected: true, term, ws, fitAddon } : t)),
       )
 
+      if (onWebSocketCreated) {
+        onWebSocketCreated(ws)
+      }
+
       if (initMessage) {
         console.log("[v0] TerminalPanel: Sending init message:", initMessage)
         ws.send(JSON.stringify(initMessage))
@@ -1040,9 +1028,4 @@ const TerminalPanel = forwardRef<TerminalPanelHandle, TerminalPanelProps>(
       </Dialog>
     </div>
   )
-  },
-)
-
-TerminalPanel.displayName = "TerminalPanel"
-
-export default TerminalPanel
+}