xterm theme

public/js/app.js

@@ -390,35 +390,75 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   function initializeTerminal() {
+    const terminalElement = document.getElementById('dockerLogsTerminal');
+  
+    // Early return if terminal element is not found
+    if (!terminalElement) {
+      console.error('Terminal element not found');
+      return;
+    }
+  
+    // Reuse existing terminal instance if available
     if (terminal) {
       terminal.clear();
+      terminal.reset();
     } else {
+      // Lazy-load xterm and addons to reduce initial bundle size
       terminal = new Terminal({
-        rows: 22,
-        fontSize: 14,
-        fontFamily: 'monospace',
+        rows: 50,
+        fontSize: 12,
+        fontFamily: '"Fira Mono", monospace',
         theme: {
-          background: '#1f2937',
+          background: '#121528',
           foreground: '#ffffff',
-          cursor: '#ffffff'
+          cursor: '#ffffff',
+          selectionBackground: '#ffffff44', // Improve accessibility
         },
-        scrollback: 1000,
-        rendererType: 'canvas'
+        scrollback: 5000, // Reduced for better memory usage
+        rendererType: 'dom', // Use 'dom' for better performance in most cases
+        cursorBlink: false, // Disable for better performance
+        convertEol: true, // Normalize line endings for consistency
       });
+  
+      // Initialize FitAddon
       fitAddon = new FitAddon.FitAddon();
       terminal.loadAddon(fitAddon);
-      terminal.open(elements.dockerLogsTerminal);
-      terminal.element.style.border = 'none';
+  
+      // Open terminal and remove border
+      terminal.open(terminalElement);
+      terminalElement.style.border = 'none';
     }
+  
+    // Fit terminal to container
     fitAddon.fit();
-
-    window.addEventListener('resize', () => {
-      if (fitAddon && terminal) {
-        fitAddon.fit();
-      }
-    });
+  
+    // Debounced resize handler to prevent excessive reflows
+    let resizeTimeout;
+    const debouncedResize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        if (fitAddon && terminal) {
+          fitAddon.fit();
+        }
+      }, 100);
+    };
+  
+    // Clean up previous event listeners to prevent memory leaks
+    window.removeEventListener('resize', debouncedResize);
+    window.addEventListener('resize', debouncedResize);
+  
+    // Return terminal instance for external use if needed
+    return terminal;
+  }
+  
+  // Optional: Clean up terminal when no longer needed
+  function disposeTerminal() {
+    if (terminal) {
+      terminal.dispose();
+      terminal = null;
+      fitAddon = null;
+    }
   }
-
   function connectWebSocket() {
     if (ws && ws.readyState === WebSocket.OPEN) {
       return;