Update hybrid-script-monitor.tsx

AppImage/components/hybrid-script-monitor.tsx

@@ -9,9 +9,8 @@ import { Label } from "@/components/ui/label"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Loader2, CheckCircle2, XCircle, TerminalIcon } from "lucide-react"
 
-import { Terminal } from "xterm"
-import { FitAddon } from "xterm-addon-fit"
-import "xterm/css/xterm.css"
+import type { Terminal } from "xterm"
+import type { FitAddon } from "xterm-addon-fit"
 
 interface HybridScriptMonitorProps {
   sessionId: string | null
@@ -57,7 +56,12 @@ export function HybridScriptMonitor({
   }
 
   useEffect(() => {
-    if (!terminalRef.current || xtermRef.current) return
+    if (!terminalRef.current || xtermRef.current || typeof window === "undefined") return
+
+    const loadTerminal = async () => {
+      const { Terminal } = await import("xterm")
+      const { FitAddon } = await import("xterm-addon-fit")
+      await import("xterm/css/xterm.css")
 
       const term = new Terminal({
         cursorBlink: false,
@@ -85,22 +89,21 @@ export function HybridScriptMonitor({
           brightWhite: "#ffffff",
         },
         convertEol: true,
-      disableStdin: true, // Terminal es solo lectura
+        disableStdin: true,
       })
 
       const fitAddon = new FitAddon()
       term.loadAddon(fitAddon)
-    term.open(terminalRef.current)
+      term.open(terminalRef.current!)
       fitAddon.fit()
 
       xtermRef.current = term
       fitAddonRef.current = fitAddon
 
-    // Ajustar terminal cuando cambia el tamaño
       const resizeObserver = new ResizeObserver(() => {
         fitAddon.fit()
       })
-    resizeObserver.observe(terminalRef.current)
+      resizeObserver.observe(terminalRef.current!)
 
       return () => {
         resizeObserver.disconnect()
@@ -108,6 +111,9 @@ export function HybridScriptMonitor({
         xtermRef.current = null
         fitAddonRef.current = null
       }
+    }
+
+    loadTerminal()
   }, [])
 
   useEffect(() => {