Update script-terminal-modal.tsx

AppImage/components/script-terminal-modal.tsx

@@ -8,7 +8,6 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Loader2, Activity, GripHorizontal } from "lucide-react"
 import { API_PORT } from "../lib/api-config"
-import { fetchApi } from "@/lib/api-config"
 import { useIsMobile } from "@/hooks/use-mobile"
 
 interface WebInteraction {
@@ -58,17 +57,38 @@ export function ScriptTerminalModal({
   const [modalHeight, setModalHeight] = useState(600)
   const [isResizing, setIsResizing] = useState(false)
   const resizeHandlersRef = useRef<{
-    handleMove: ((e: MouseEvent | TouchEvent) => void) | null
-    handleEnd: (() => void) | null
-  }>({ handleMove: null, handleEnd: null })
+    handleMouseMove: ((e: MouseEvent) => void) | null
+    handleMouseUp: (() => void) | null
+    handleTouchMove: ((e: TouchEvent) => void) | null
+    handleTouchEnd: (() => void) | null
+  }>({
+    handleMouseMove: null,
+    handleMouseUp: null,
+    handleTouchMove: null,
+    handleTouchEnd: null,
+  })
 
-  const terminalContainerRef = useCallback(
-    (node: HTMLDivElement | null) => {
-      if (!node || !isOpen || termRef.current) {
-        return
+  const terminalContainerRef = useRef<HTMLDivElement>(null)
+
+  const sendKey = useCallback((key: string) => {
+    if (!termRef.current) return
+
+    const keyMap: Record<string, string> = {
+      escape: "\x1b",
+      tab: "\t",
+      up: "\x1b[A",
+      down: "\x1b[B",
+      left: "\x1b[D",
+      right: "\x1b[C",
+      enter: "\r",
+      ctrlc: "\x03",
     }
 
-      console.log("[v0] Terminal container mounted, initializing...")
+    const sequence = keyMap[key]
+    if (sequence && wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: "input", data: sequence }))
+    }
+  }, [])
 
   const initializeTerminal = async () => {
     console.log("[v0] Loading xterm modules...")
@@ -119,7 +139,9 @@ export function ScriptTerminalModal({
     const fitAddon = new FitAddonClass()
     term.loadAddon(fitAddon)
     console.log("[v0] Opening terminal in container...")
-        term.open(node)
+    if (terminalContainerRef.current) {
+      term.open(terminalContainerRef.current)
+    }
 
     termRef.current = term
     fitAddonRef.current = fitAddon
@@ -262,13 +284,10 @@ export function ScriptTerminalModal({
       }, 100)
     })
 
-        resizeObserver.observe(node)
+    if (terminalContainerRef.current) {
+      resizeObserver.observe(terminalContainerRef.current)
+    }
   }
-
-      initializeTerminal()
-    },
-    [isOpen, scriptPath, params],
-  )
 
   useEffect(() => {
     const savedHeight = localStorage.getItem("scriptModalHeight")
@@ -276,7 +295,9 @@ export function ScriptTerminalModal({
       setModalHeight(Number.parseInt(savedHeight, 10))
     }
 
-    if (!isOpen) {
+    if (isOpen) {
+      initializeTerminal()
+    } else {
       if (checkConnectionInterval.current) {
         clearInterval(checkConnectionInterval.current)
       }
@@ -291,15 +312,24 @@ export function ScriptTerminalModal({
         termRef.current.dispose()
         termRef.current = null
       }
-      if (resizeHandlersRef.current.handleMove) {
-        document.removeEventListener("mousemove", resizeHandlersRef.current.handleMove as any)
-        document.removeEventListener("touchmove", resizeHandlersRef.current.handleMove as any)
+      if (resizeHandlersRef.current.handleMouseMove) {
+        document.removeEventListener("mousemove", resizeHandlersRef.current.handleMouseMove)
       }
-      if (resizeHandlersRef.current.handleEnd) {
-        document.removeEventListener("mouseup", resizeHandlersRef.current.handleEnd)
-        document.removeEventListener("touchend", resizeHandlersRef.current.handleEnd)
+      if (resizeHandlersRef.current.handleMouseUp) {
+        document.removeEventListener("mouseup", resizeHandlersRef.current.handleMouseUp)
+      }
+      if (resizeHandlersRef.current.handleTouchMove) {
+        document.removeEventListener("touchmove", resizeHandlersRef.current.handleTouchMove)
+      }
+      if (resizeHandlersRef.current.handleTouchEnd) {
+        document.removeEventListener("touchend", resizeHandlersRef.current.handleTouchEnd)
+      }
+      resizeHandlersRef.current = {
+        handleMouseMove: null,
+        handleMouseUp: null,
+        handleTouchMove: null,
+        handleTouchEnd: null,
       }
-      resizeHandlersRef.current = { handleMove: null, handleEnd: null }
 
       sessionIdRef.current = Math.random().toString(36).substring(2, 8)
       setIsComplete(false)
@@ -316,10 +346,18 @@ export function ScriptTerminalModal({
       return `ws://localhost:${API_PORT}/ws/script/${sid}`
     }
 
-    const { hostname, protocol } = window.location
+    const { protocol, hostname, port } = window.location
+    const isStandardPort = port === "" || port === "80" || port === "443"
     const wsProtocol = protocol === "https:" ? "wss:" : "ws:"
+
+    if (isStandardPort) {
+      // When using standard port (proxy scenario), don't add port number
+      return `${wsProtocol}//${hostname}/ws/script/${sid}`
+    } else {
+      // Development or custom port, use API_PORT
       return `${wsProtocol}//${hostname}:${API_PORT}/ws/script/${sid}`
     }
+  }
 
   const handleInteractionResponse = (value: string) => {
     if (!wsRef.current || !currentInteraction) {
@@ -419,15 +457,25 @@ export function ScriptTerminalModal({
         }
       }
 
-      document.removeEventListener("mousemove", handleMove as any)
-      document.removeEventListener("touchmove", handleMove as any)
+      document.removeEventListener("mousemove", handleMove)
+      document.removeEventListener("touchmove", handleMove)
       document.removeEventListener("mouseup", handleEnd)
       document.removeEventListener("touchend", handleEnd)
 
-      resizeHandlersRef.current = { handleMove: null, handleEnd: null }
+      resizeHandlersRef.current = {
+        handleMouseMove: null,
+        handleMouseUp: null,
+        handleTouchMove: null,
+        handleTouchEnd: null,
+      }
     }
 
-    resizeHandlersRef.current = { handleMove, handleEnd }
+    resizeHandlersRef.current = {
+      handleMouseMove: handleMove as any,
+      handleMouseUp: handleEnd,
+      handleTouchMove: handleMove as any,
+      handleTouchEnd: handleEnd,
+    }
 
     document.addEventListener("mousemove", handleMove as any)
     document.addEventListener("touchmove", handleMove as any, { passive: false })
@@ -466,6 +514,77 @@ export function ScriptTerminalModal({
             )}
           </div>
 
+          {isMobile && (
+            <div className="border-t bg-zinc-900/50 px-1 py-2 overflow-x-auto">
+              <div className="flex gap-1.5 justify-center min-w-max">
+                <Button
+                  onClick={() => sendKey("escape")}
+                  variant="outline"
+                  size="sm"
+                  className="px-2.5 py-2 text-xs h-9 bg-zinc-800 hover:bg-zinc-700 border-zinc-700"
+                >
+                  ESC
+                </Button>
+                <Button
+                  onClick={() => sendKey("tab")}
+                  variant="outline"
+                  size="sm"
+                  className="px-2.5 py-2 text-xs h-9 bg-zinc-800 hover:bg-zinc-700 border-zinc-700"
+                >
+                  TAB
+                </Button>
+                <Button
+                  onClick={() => sendKey("up")}
+                  variant="outline"
+                  size="sm"
+                  className="px-3 py-2 text-base h-9 bg-zinc-800 hover:bg-zinc-700 border-zinc-700"
+                >
+                  ↑
+                </Button>
+                <Button
+                  onClick={() => sendKey("down")}
+                  variant="outline"
+                  size="sm"
+                  className="px-3 py-2 text-base h-9 bg-zinc-800 hover:bg-zinc-700 border-zinc-700"
+                >
+                  ↓
+                </Button>
+                <Button
+                  onClick={() => sendKey("left")}
+                  variant="outline"
+                  size="sm"
+                  className="px-3 py-2 text-base h-9 bg-zinc-800 hover:bg-zinc-700 border-zinc-700"
+                >
+                  ←
+                </Button>
+                <Button
+                  onClick={() => sendKey("right")}
+                  variant="outline"
+                  size="sm"
+                  className="px-3 py-2 text-base h-9 bg-zinc-800 hover:bg-zinc-700 border-zinc-700"
+                >
+                  →
+                </Button>
+                <Button
+                  onClick={() => sendKey("enter")}
+                  variant="outline"
+                  size="sm"
+                  className="px-3 py-2 text-base h-9 bg-zinc-800 hover:bg-zinc-700 border-zinc-700"
+                >
+                  ↵
+                </Button>
+                <Button
+                  onClick={() => sendKey("ctrlc")}
+                  variant="outline"
+                  size="sm"
+                  className="px-2 py-2 text-xs h-9 bg-zinc-800 hover:bg-zinc-700 border-zinc-700"
+                >
+                  CTRL+C
+                </Button>
+              </div>
+            </div>
+          )}
+
           {!isMobile && (
             <div
               className={`h-2 cursor-ns-resize flex items-center justify-center transition-all duration-150 ${