Update script-terminal-modal.tsx

This commit is contained in:
MacRimi
2025-12-10 20:17:13 +01:00
parent 7b9e1a71a3
commit 207e75f5b9

View File

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