Update terminal-panel.tsx

AppImage/components/terminal-panel.tsx

@@ -352,39 +352,46 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
     })
   }, [terminalHeight, layout, terminals, isMobile])
 
-  const term = new TerminalClass({
+  const initializeTerminal = async (terminal: TerminalInstance, container: HTMLDivElement) => {
-    fontFamily: 'Consolas, "DejaVu Sans Mono", "Liberation Mono", "Courier", monospace',
+    const [TerminalClass, FitAddonClass] = await Promise.all([
-    fontSize: isMobile ? 13 : 14,
+      import("xterm").then((mod) => mod.Terminal),
-    lineHeight: 1,                  
+      import("xterm-addon-fit").then((mod) => mod.FitAddon),
-    cursorBlink: true,
+      import("xterm/css/xterm.css"),
-    scrollback: 2000,
+    ]).then(([Terminal, FitAddon]) => [Terminal, FitAddon])
-    disableStdin: false,
+
-    customGlyphs: false,            
+    const term = new TerminalClass({
-    cols: isMobile ? 80 : layout === "grid" ? 100 : 120,
+      fontFamily: 'Consolas, "DejaVu Sans Mono", "Liberation Mono", "Courier", monospace',
-    rows: isMobile ? 24 : layout === "grid" ? 30 : 40,
+      fontSize: isMobile ? 13 : 14,  
-    theme: {
+      lineHeight: 1,                 
-      background: "#000000",
+      cursorBlink: true,
-      foreground: "#ffffff",
+      scrollback: 2000,
-      cursor: "#ffffff",
+      disableStdin: false,
-      cursorAccent: "#000000",
+      customGlyphs: false,          
-      black: "#2e3436",
+      cols: isMobile ? 80 : layout === "grid" ? 100 : 120,
-      red: "#cc0000",
+      rows: isMobile ? 24 : layout === "grid" ? 30 : 40,
-      green: "#4e9a06",
+      theme: {
-      yellow: "#c4a000",
+        background: "#000000",
-      blue: "#3465a4",
+        foreground: "#ffffff",
-      magenta: "#75507b",
+        cursor: "#ffffff",
-      cyan: "#06989a",
+        cursorAccent: "#000000",
-      white: "#d3d7cf",
+        black: "#2e3436",
-      brightBlack: "#555753",
+        red: "#cc0000",
-      brightRed: "#ef2929",
+        green: "#4e9a06",
-      brightGreen: "#8ae234",
+        yellow: "#c4a000",
-      brightYellow: "#fce94f",
+        blue: "#3465a4",
-      brightBlue: "#729fcf",
+        magenta: "#75507b",
-      brightMagenta: "#ad7fa8",
+        cyan: "#06989a",
-      brightCyan: "#34e2e2",
+        white: "#d3d7cf",
-      brightWhite: "#eeeeec",
+        brightBlack: "#555753",
-    },
+        brightRed: "#ef2929",
-  })
+        brightGreen: "#8ae234",
+        brightYellow: "#fce94f",
+        brightBlue: "#729fcf",
+        brightMagenta: "#ad7fa8",
+        brightCyan: "#34e2e2",
+        brightWhite: "#eeeeec",
+      },
+    })
 
 
     const fitAddon = new FitAddonClass()