Update script-terminal-modal.tsx

AppImage/components/script-terminal-modal.tsx

@@ -59,9 +59,35 @@ export function ScriptTerminalModal({
   const startHeightRef = useRef(80)
 
   const terminalRef = useRef<any>(null)
-  const terminalContainerRef = useRef<HTMLDivElement>(null)
   const fitAddonRef = useRef<any>(null)
 
+  const terminalContainerRef = useRef<((node: HTMLDivElement | null) => void) | null>(null)
+
+  const handleResizeStart = (e: React.MouseEvent | React.TouchEvent) => {
+    setIsResizing(true)
+    startYRef.current = e.clientY || e.touches[0].clientY
+    startHeightRef.current = modalHeight
+    document.addEventListener("mousemove", handleResize)
+    document.addEventListener("touchmove", handleResize)
+    document.addEventListener("mouseup", handleResizeEnd)
+    document.addEventListener("touchend", handleResizeEnd)
+  }
+
+  const handleResize = (e: React.MouseEvent | React.TouchEvent) => {
+    if (!isResizing) return
+    const currentY = e.clientY || e.touches[0].clientY
+    const newHeight = startHeightRef.current + (currentY - startYRef.current)
+    setModalHeight(Math.max(20, Math.min(80, newHeight)))
+  }
+
+  const handleResizeEnd = () => {
+    setIsResizing(false)
+    document.removeEventListener("mousemove", handleResize)
+    document.removeEventListener("touchmove", handleResize)
+    document.removeEventListener("mouseup", handleResizeEnd)
+    document.removeEventListener("touchend", handleResizeEnd)
+  }
+
   useEffect(() => {
     if (!open) {
       // Cleanup
@@ -91,17 +117,12 @@ export function ScriptTerminalModal({
     }
   }, [open])
 
-  useEffect(() => {
-    if (!open || !terminalContainerRef.current || hasInitializedRef.current) {
-      console.log("[v0] Skipping init:", {
-        open,
-        hasContainer: !!terminalContainerRef.current,
-        hasInitialized: hasInitializedRef.current,
-      })
+  const handleTerminalContainerRef = (node: HTMLDivElement | null) => {
+    if (!node || !open || hasInitializedRef.current) {
       return
     }
 
-    console.log("[v0] Starting terminal initialization")
+    console.log("[v0] Terminal container mounted, starting initialization")
     hasInitializedRef.current = true
 
     // Generate session ID once
@@ -158,7 +179,7 @@ export function ScriptTerminalModal({
 
       const fitAddon = new FitAddonClass()
       term.loadAddon(fitAddon)
-      term.open(terminalContainerRef.current!)
+      term.open(node)
       console.log("[v0] Terminal opened in container")
 
       setTimeout(() => {
@@ -287,16 +308,8 @@ export function ScriptTerminalModal({
           setIsConnected(ws.readyState === WebSocket.OPEN)
         }
       }, 500)
-    }
-
-    initTerminal()
-  }, [open]) // Only depend on open, not scriptPath or params
-
-  useEffect(() => {
-    if (!terminalContainerRef.current || !terminalRef.current || !fitAddonRef.current) {
-      return
-    }
 
+      // Setup ResizeObserver for the terminal container
       let resizeTimeout: NodeJS.Timeout | null = null
 
       const resizeObserver = new ResizeObserver(() => {
@@ -305,13 +318,13 @@ export function ScriptTerminalModal({
         }
 
         resizeTimeout = setTimeout(() => {
-        if (fitAddonRef.current && terminalRef.current && wsRef.current?.readyState === WebSocket.OPEN) {
+          if (fitAddon && term && ws?.readyState === WebSocket.OPEN) {
             try {
-            fitAddonRef.current.fit()
-            const cols = terminalRef.current.cols
-            const rows = terminalRef.current.rows
+              fitAddon.fit()
+              const cols = term.cols
+              const rows = term.rows
               console.log("[v0] Terminal resized to:", cols, "x", rows)
-            wsRef.current.send(
+              ws.send(
                 JSON.stringify({
                   type: "resize",
                   cols: cols,
@@ -325,56 +338,12 @@ export function ScriptTerminalModal({
         }, 100)
       })
 
-    resizeObserver.observe(terminalContainerRef.current)
-
-    return () => {
-      if (resizeTimeout) {
-        clearTimeout(resizeTimeout)
-      }
-      resizeObserver.disconnect()
-    }
-  }, [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()
+      resizeObserver.observe(node)
     }
 
-  const handleResizeMove = (e: MouseEvent | TouchEvent) => {
-    const currentY = "touches" in e ? e.touches[0].clientY : e.clientY
-    const deltaY = currentY - startYRef.current
-    const viewportHeight = window.innerHeight
-    const deltaVh = (deltaY / viewportHeight) * 100
-
-    const newHeight = Math.min(Math.max(startHeightRef.current + deltaVh, 50), 95)
-    setModalHeight(newHeight)
+    initTerminal()
   }
 
-  const handleResizeEnd = () => {
-    setIsResizing(false)
-  }
-
-  useEffect(() => {
-    if (!isResizing) return
-
-    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 = (sid: string): string => {
     if (typeof window === "undefined") {
       return `ws://localhost:${API_PORT}/ws/script/${sid}`