Update AppImage

AppImage/components/script-terminal-modal.tsx

@@ -1,13 +1,16 @@
 "use client"
 
+import type React from "react"
+
 import { useState, useEffect, useRef } 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 { X, CheckCircle2, XCircle, Loader2 } 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 {
   type: "yesno" | "menu" | "msgbox" | "input" | "inputbox"
@@ -43,6 +46,14 @@ export function ScriptTerminalModal({
   const [currentInteraction, setCurrentInteraction] = useState<WebInteraction | null>(null)
   const [interactionInput, setInteractionInput] = useState("")
   const wsRef = useRef<WebSocket | null>(null)
+  const [isConnected, setIsConnected] = useState(false)
+  const checkConnectionInterval = useRef<NodeJS.Timeout | null>(null)
+  const isMobile = useIsMobile()
+
+  const [modalHeight, setModalHeight] = useState(80)
+  const [isResizing, setIsResizing] = useState(false)
+  const startYRef = useRef(0)
+  const startHeightRef = useRef(80)
 
   useEffect(() => {
     if (open) {
@@ -50,9 +61,62 @@ export function ScriptTerminalModal({
       setExitCode(null)
       setInteractionInput("")
       setCurrentInteraction(null)
+      setIsConnected(false)
+
+      checkConnectionInterval.current = setInterval(() => {
+        if (wsRef.current) {
+          setIsConnected(wsRef.current.readyState === WebSocket.OPEN)
+        }
+      }, 500)
+    }
+
+    return () => {
+      if (checkConnectionInterval.current) {
+        clearInterval(checkConnectionInterval.current)
+      }
     }
   }, [open])
 
+  const handleResizeStart = (e: React.MouseEvent | React.TouchEvent) => {
+    if (isMobile) return
+
+    setIsResizing(true)
+    startYRef.current = "touches" in e ? e.touches[0].clientY : e.clientY
+    startHeightRef.current = modalHeight
+
+    e.preventDefault()
+  }
+
+  useEffect(() => {
+    if (!isResizing) return
+
+    const handleResizeMove = (e: MouseEvent | TouchEvent) => {
+      const currentY = "touches" in e ? e.touches[0].clientY : e.clientY
+      const deltaY = startYRef.current - currentY
+      const viewportHeight = window.innerHeight
+      const deltaVh = (deltaY / viewportHeight) * 100
+
+      const newHeight = Math.min(Math.max(startHeightRef.current + deltaVh, 50), 95)
+      setModalHeight(newHeight)
+    }
+
+    const handleResizeEnd = () => {
+      setIsResizing(false)
+    }
+
+    document.addEventListener("mousemove", handleResizeMove)
+    document.addEventListener("mouseup", handleResizeEnd)
+    document.addEventListener("touchmove", handleResizeMove)
+    document.addEventListener("touchend", handleResizeEnd)
+
+    return () => {
+      document.removeEventListener("mousemove", handleResizeMove)
+      document.removeEventListener("mouseup", handleResizeEnd)
+      document.removeEventListener("touchmove", handleResizeMove)
+      document.removeEventListener("touchend", handleResizeEnd)
+    }
+  }, [isResizing])
+
   const getScriptWebSocketUrl = (): string => {
     if (typeof window === "undefined") {
       return `ws://localhost:${API_PORT}/ws/script/${sessionId}`
@@ -67,6 +131,7 @@ export function ScriptTerminalModal({
 
   const handleWebSocketCreated = (ws: WebSocket) => {
     wsRef.current = ws
+    setIsConnected(ws.readyState === WebSocket.OPEN)
   }
 
   const handleWebInteraction = (interaction: WebInteraction) => {
@@ -92,32 +157,41 @@ export function ScriptTerminalModal({
     setInteractionInput("")
   }
 
+  const handleCloseModal = () => {
+    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+      wsRef.current.close()
+    }
+    if (checkConnectionInterval.current) {
+      clearInterval(checkConnectionInterval.current)
+    }
+    onClose()
+  }
+
   return (
     <>
-      <Dialog open={open} onOpenChange={onClose}>
-        <DialogContent className="max-w-4xl h-[80vh] p-0 flex flex-col">
+      <Dialog open={open}>
+        <DialogContent
+          className="max-w-4xl p-0 flex flex-col"
+          style={{ height: isMobile ? "80vh" : `${modalHeight}vh` }}
+          onInteractOutside={(e) => e.preventDefault()}
+          onEscapeKeyDown={(e) => e.preventDefault()}
+        >
           <DialogTitle className="sr-only">{title}</DialogTitle>
 
-          {/* Header */}
-          <div className="flex items-center justify-between p-4 border-b">
-            <div className="flex items-center gap-2">
-              {isComplete ? (
-                exitCode === 0 ? (
-                  <CheckCircle2 className="h-5 w-5 text-green-500" />
-                ) : (
-                  <XCircle className="h-5 w-5 text-red-500" />
-                )
+          <div className="flex items-center gap-2 p-4 border-b">
+            {isComplete ? (
+              exitCode === 0 ? (
+                <CheckCircle2 className="h-5 w-5 text-green-500" />
               ) : (
-                <Loader2 className="h-5 w-5 animate-spin" />
-              )}
-              <div>
-                <h2 className="text-lg font-semibold">{title}</h2>
-                {description && <p className="text-sm text-muted-foreground">{description}</p>}
-              </div>
+                <XCircle className="h-5 w-5 text-red-500" />
+              )
+            ) : (
+              <Loader2 className="h-5 w-5 animate-spin" />
+            )}
+            <div>
+              <h2 className="text-lg font-semibold">{title}</h2>
+              {description && <p className="text-sm text-muted-foreground">{description}</p>}
             </div>
-            <Button variant="ghost" size="icon" onClick={onClose}>
-              <X className="h-4 w-4" />
-            </Button>
           </div>
 
           <div className="flex-1 overflow-hidden">
@@ -129,13 +203,37 @@ export function ScriptTerminalModal({
               }}
               onWebInteraction={handleWebInteraction}
               onWebSocketCreated={handleWebSocketCreated}
+              isScriptModal={true}
             />
           </div>
 
-          {/* Footer */}
+          {!isMobile && (
+            <div
+              className="h-2 bg-border hover:bg-primary/20 cursor-ns-resize flex items-center justify-center transition-colors"
+              onMouseDown={handleResizeStart}
+              onTouchStart={handleResizeStart}
+            >
+              <GripHorizontal className="h-4 w-4 text-muted-foreground" />
+            </div>
+          )}
+
           <div className="flex items-center justify-between p-4 border-t">
-            <div className="text-sm text-muted-foreground">Session ID: {sessionId}</div>
-            {isComplete && <Button onClick={onClose}>Close</Button>}
+            <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>
@@ -176,11 +274,18 @@ export function ScriptTerminalModal({
                       key={option.value}
                       onClick={() => handleInteractionResponse(option.value)}
                       variant="outline"
-                      className="w-full justify-start"
+                      className="w-full justify-start hover:bg-blue-600 hover:text-white"
                     >
                       {option.label}
                     </Button>
                   ))}
+                  <Button
+                    onClick={() => handleInteractionResponse("cancel")}
+                    variant="outline"
+                    className="w-full hover:bg-red-600 hover:text-white hover:border-red-600"
+                  >
+                    Cancel / Go Back
+                  </Button>
                 </div>
               )}
 
@@ -197,14 +302,29 @@ export function ScriptTerminalModal({
                     }}
                     placeholder={currentInteraction.default || ""}
                   />
-                  <Button onClick={() => handleInteractionResponse(interactionInput)} className="w-full">
-                    Submit
-                  </Button>
+                  <div className="flex gap-2">
+                    <Button
+                      onClick={() => handleInteractionResponse(interactionInput)}
+                      className="flex-1 bg-blue-600 hover:bg-blue-700"
+                    >
+                      Submit
+                    </Button>
+                    <Button
+                      onClick={() => handleInteractionResponse("")}
+                      variant="outline"
+                      className="flex-1 hover:bg-red-600 hover:text-white hover:border-red-600"
+                    >
+                      Cancel
+                    </Button>
+                  </div>
                 </div>
               )}
 
               {currentInteraction.type === "msgbox" && (
-                <Button onClick={() => handleInteractionResponse("ok")} className="w-full">
+                <Button
+                  onClick={() => handleInteractionResponse("ok")}
+                  className="w-full bg-blue-600 hover:bg-blue-700"
+                >
                   OK
                 </Button>
               )}

AppImage/components/terminal-panel.tsx

@@ -29,6 +29,7 @@ type TerminalPanelProps = {
   initMessage?: Record<string, any>
   onWebInteraction?: (interaction: any) => void
   onWebSocketCreated?: (ws: WebSocket) => void
+  isScriptModal?: boolean
 }
 
 interface TerminalInstance {
@@ -141,6 +142,7 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({
   initMessage,
   onWebInteraction,
   onWebSocketCreated,
+  isScriptModal = false,
 }) => {
   const [terminals, setTerminals] = useState<TerminalInstance[]>([])
   const [activeTerminalId, setActiveTerminalId] = useState<string>("")
@@ -246,8 +248,6 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({
           throw new Error("No examples found")
         }
 
-        console.log("[v0] Received parsed examples from server:", data.examples.length)
-
         const formattedResults: CheatSheetResult[] = data.examples.map((example: any) => ({
           command: example.command,
           description: example.description || "",
@@ -257,7 +257,6 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({
         setUseOnline(true)
         setSearchResults(formattedResults)
       } catch (error) {
-        console.log("[v0] Error fetching from cheat.sh proxy, using offline commands:", error)
         const filtered = proxmoxCommands.filter(
           (item) =>
             item.cmd.toLowerCase().includes(query.toLowerCase()) ||
@@ -442,7 +441,6 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({
       }
 
       if (initMessage) {
-        console.log("[v0] TerminalPanel: Sending init message:", initMessage)
         ws.send(JSON.stringify(initMessage))
       } else {
         term.writeln("\x1b[32mConnected to ProxMenux terminal.\x1b[0m")
@@ -454,8 +452,7 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({
     ws.onmessage = (event) => {
       try {
         const data = JSON.parse(event.data)
-        if (data.type === "web_interaction" && onWebInteraction) {
-          console.log("[v0] TerminalPanel: Intercepted web_interaction:", data.interaction)
+        if (data.type === "web_interaction" && data.interaction && onWebInteraction) {
           onWebInteraction(data.interaction)
           return // Don't write to terminal
         }
@@ -466,8 +463,7 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({
       term.write(event.data)
     }
 
-    ws.onerror = (error) => {
-      console.error("[v0] TerminalPanel: WebSocket error:", error)
+    ws.onerror = () => {
       setTerminals((prev) => prev.map((t) => (t.id === terminal.id ? { ...t, isConnected: false } : t)))
       term.writeln("\r\n\x1b[31m[ERROR] WebSocket connection error\x1b[0m")
     }
@@ -603,80 +599,88 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({
 
   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">
-        <div className="flex items-center gap-3">
-          <Activity className="h-5 w-5 text-blue-500" />
-          <div
-            className={`w-2 h-2 rounded-full ${activeTerminal?.isConnected ? "bg-green-500" : "bg-red-500"}`}
-            title={activeTerminal?.isConnected ? "Connected" : "Disconnected"}
-          ></div>
-          <span className="text-xs text-zinc-500">{terminals.length} / 4 terminals</span>
-        </div>
+      {!isScriptModal && (
+        <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-800">
+          <div className="flex items-center gap-3">
+            <Activity className="h-5 w-5 text-blue-500" />
+            <div
+              className={`w-2 h-2 rounded-full ${activeTerminal?.isConnected ? "bg-green-500" : "bg-red-500"}`}
+              title={activeTerminal?.isConnected ? "Connected" : "Disconnected"}
+            ></div>
+            <span className="text-xs text-zinc-500">{terminals.length} / 4 terminals</span>
+          </div>
 
-        <div className="flex gap-2">
-          {!isMobile && terminals.length > 1 && (
-            <>
-              <Button
-                onClick={() => setLayout("single")}
-                variant="outline"
-                size="sm"
-                className={`h-8 px-2 ${layout === "single" ? "bg-blue-500/20 border-blue-500" : ""}`}
-                title="Vista apilada (filas)"
-              >
-                <AlignJustify className="h-4 w-4" />
-              </Button>
-              <Button
-                onClick={() => setLayout("grid")}
-                variant="outline"
-                size="sm"
-                className={`h-8 px-2 ${layout === "grid" ? "bg-blue-500/20 border-blue-500" : ""}`}
-                title="Vista cuadrícula 2x2"
-              >
-                <Grid2X2 className="h-4 w-4" />
-              </Button>
-            </>
-          )}
-          <Button
-            onClick={addNewTerminal}
-            variant="outline"
-            size="sm"
-            disabled={terminals.length >= 4}
-            className="h-8 gap-2 bg-green-600 hover:bg-green-700 border-green-500 text-white disabled:opacity-50"
-          >
-            <Plus className="h-4 w-4" />
-            <span className="hidden sm:inline">New</span>
-          </Button>
-          <Button
-            onClick={() => setSearchModalOpen(true)}
-            variant="outline"
-            size="sm"
-            disabled={!activeTerminal?.isConnected}
-            className="h-8 gap-2 bg-blue-600 hover:bg-blue-700 border-blue-500 text-white disabled:opacity-50"
-          >
-            <Search className="h-4 w-4" />
-            <span className="hidden sm:inline">Search</span>
-          </Button>
-          <Button
-            onClick={handleClear}
-            variant="outline"
-            size="sm"
-            disabled={!activeTerminal?.isConnected}
-            className="h-8 gap-2 bg-yellow-600 hover:bg-yellow-700 border-yellow-500 text-white disabled:opacity-50"
-          >
-            <Trash2 className="h-4 w-4" />
-            <span className="hidden sm:inline">Clear</span>
-          </Button>
-          <Button
-            onClick={handleClose}
-            variant="outline"
-            size="sm"
-            className="h-8 gap-2 bg-red-600 hover:bg-red-700 border-red-500 text-white"
-          >
-            <X className="h-4 w-4" />
-            <span className="hidden sm:inline">Close</span>
-          </Button>
+          <div className="flex gap-2">
+            {!isMobile && terminals.length > 1 && (
+              <>
+                <Button
+                  onClick={() => setLayout("single")}
+                  variant="outline"
+                  size="sm"
+                  className={`h-8 px-2 ${layout === "single" ? "bg-blue-500/20 border-blue-500" : ""}`}
+                  title="Vista apilada (filas)"
+                >
+                  <AlignJustify className="h-4 w-4" />
+                </Button>
+                <Button
+                  onClick={() => setLayout("grid")}
+                  variant="outline"
+                  size="sm"
+                  className={`h-8 px-2 ${layout === "grid" ? "bg-blue-500/20 border-blue-500" : ""}`}
+                  title="Vista cuadrícula 2x2"
+                >
+                  <Grid2X2 className="h-4 w-4" />
+                </Button>
+              </>
+            )}
+            <Button
+              onClick={addNewTerminal}
+              variant="outline"
+              size="sm"
+              disabled={terminals.length >= 4}
+              className="h-8 gap-2 bg-green-600 hover:bg-green-700 border-green-500 text-white disabled:opacity-50"
+            >
+              <Plus className="h-4 w-4" />
+              <span className="hidden sm:inline">New</span>
+            </Button>
+            <Button
+              onClick={() => setSearchModalOpen(true)}
+              variant="outline"
+              size="sm"
+              disabled={!activeTerminal?.isConnected}
+              className="h-8 gap-2 bg-blue-600 hover:bg-blue-700 border-blue-500 text-white disabled:opacity-50"
+            >
+              <Search className="h-4 w-4" />
+              <span className="hidden sm:inline">Search</span>
+            </Button>
+            <Button
+              onClick={handleClear}
+              variant="outline"
+              size="sm"
+              disabled={!activeTerminal?.isConnected}
+              className="h-8 gap-2 bg-yellow-600 hover:bg-yellow-700 border-yellow-500 text-white disabled:opacity-50"
+            >
+              <Trash2 className="h-4 w-4" />
+              <span className="hidden sm:inline">Clear</span>
+            </Button>
+            <Button
+              onClick={handleClose}
+              variant="outline"
+              size="sm"
+              className="h-8 gap-2 bg-red-600 hover:bg-red-700 border-red-500 text-white"
+            >
+              <X className="h-4 w-4" />
+              <span className="hidden sm:inline">Close</span>
+            </Button>
+          </div>
         </div>
-      </div>
+      )}
+
+      {isScriptModal && (
+        <div className="sr-only" data-connection-status={activeTerminal?.isConnected ? "connected" : "disconnected"}>
+          Connection Status
+        </div>
+      )}
 
       <div
         data-terminal-container