Update script-terminal-modal.tsx

AppImage/components/script-terminal-modal.tsx

@@ -22,27 +22,24 @@ interface ScriptTerminalModalProps {
   open: boolean
   onClose: () => void
   scriptPath: string
-  scriptName: string
+  scriptTitle: string
   params?: Record<string, string>
-  title: string
-  description: string
 }
 
 export function ScriptTerminalModal({
   open: isOpen,
   onClose,
   scriptPath,
-  scriptName,
+  scriptTitle,
   params = {},
-  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(true)
+  const [output, setOutput] = useState<string>("")
+  const [connectionStatus, setConnectionStatus] = useState<"connecting" | "online" | "offline">("connecting")
   const [isComplete, setIsComplete] = useState(false)
   const [exitCode, setExitCode] = useState<number | null>(null)
   const [currentInteraction, setCurrentInteraction] = useState<WebInteraction | null>(null)
@@ -161,7 +158,7 @@ export function ScriptTerminalModal({
     wsRef.current = ws
 
     ws.onopen = () => {
-      setIsConnected(true)
+      setConnectionStatus("online")
 
       const initMessage = {
         script_path: scriptPath,
@@ -232,12 +229,12 @@ export function ScriptTerminalModal({
     }
 
     ws.onerror = (error) => {
-      setIsConnected(false)
+      setConnectionStatus("offline")
       term.writeln("\x1b[31mWebSocket error occurred\x1b[0m")
     }
 
     ws.onclose = (event) => {
-      setIsConnected(false)
+      setConnectionStatus("offline")
       term.writeln("\x1b[33mConnection closed\x1b[0m")
 
       if (!isComplete) {
@@ -254,7 +251,13 @@ export function ScriptTerminalModal({
 
     checkConnectionInterval.current = setInterval(() => {
       if (ws) {
-        setIsConnected(ws.readyState === WebSocket.OPEN)
+        if (ws.readyState === WebSocket.OPEN) {
+          setConnectionStatus("online")
+        } else if (ws.readyState === WebSocket.CONNECTING) {
+          setConnectionStatus("connecting")
+        } else {
+          setConnectionStatus("offline")
+        }
       }
     }, 500)
 
@@ -333,7 +336,7 @@ export function ScriptTerminalModal({
       setInteractionInput("")
       setCurrentInteraction(null)
       setIsWaitingNextInteraction(false)
-      setIsConnected(false)
+      setConnectionStatus("connecting")
     }
   }, [isOpen])
 
@@ -507,12 +510,11 @@ export function ScriptTerminalModal({
           onInteractOutside={(e) => e.preventDefault()}
           onEscapeKeyDown={(e) => e.preventDefault()}
         >
-          <DialogTitle className="sr-only">{title}</DialogTitle>
+          <DialogTitle className="sr-only">{scriptTitle}</DialogTitle>
 
           <div className="flex items-center gap-2 p-4 border-b">
             <div>
-              <h2 className="text-lg font-semibold">{title}</h2>
+              <h2 className="text-lg font-semibold">{scriptTitle}</h2>
-              {description && <p className="text-sm text-muted-foreground">{description}</p>}
             </div>
           </div>
 
@@ -617,10 +619,28 @@ export function ScriptTerminalModal({
             <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"}`}
+                className={`w-2 h-2 rounded-full ${
-                title={isConnected ? "Connected" : "Disconnected"}
+                  connectionStatus === "online"
+                    ? "bg-green-500"
+                    : connectionStatus === "connecting"
+                      ? "bg-blue-500" // Changed from bg-yellow-500 to bg-blue-500
+                      : "bg-red-500"
+                }`}
+                title={
+                  connectionStatus === "online"
+                    ? "Connected"
+                    : connectionStatus === "connecting"
+                      ? "Connecting..."
+                      : "Disconnected"
+                }
               ></div>
-              <span className="text-xs text-muted-foreground">{isConnected ? "Online" : "Offline"}</span>
+              <span className="text-xs text-muted-foreground">
+                {connectionStatus === "online"
+                  ? "Online"
+                  : connectionStatus === "connecting"
+                    ? "Connecting..."
+                    : "Offline"}
+              </span>
             </div>
 
             <Button