// terminal.js import { Terminal } from 'xterm'; import { FitAddon } from 'xterm-addon-fit'; // DOM Elements const terminalModal = document.getElementById('terminal-modal'); const terminalTitle = document.getElementById('terminal-title'); const terminalContainer = document.getElementById('terminal-container'); const tray = document.getElementById('tray'); // Terminal variables let terminalSessions = {}; // Track terminal sessions per containerId let activeContainerId = null; // Currently displayed containerId // Kill Terminal button functionality document.getElementById('kill-terminal-btn').onclick = () => { const containerId = activeContainerId; if (containerId && terminalSessions[containerId]) { console.log(`[INFO] Killing terminal session for container: ${containerId}`); // Send kill command to server window.sendCommand('killTerminal', { containerId }); // Clean up terminal session const session = terminalSessions[containerId]; session.xterm.dispose(); session.onDataDisposable.dispose(); if (session.resizeListener) { window.removeEventListener('resize', session.resizeListener); } // Remove the terminal's container div from DOM session.container.parentNode.removeChild(session.container); delete terminalSessions[containerId]; // Remove from tray if exists removeFromTray(containerId); // Hide the terminal modal if this was the active session if (activeContainerId === containerId) { terminalModal.style.display = 'none'; activeContainerId = null; } } else { console.error('[ERROR] No terminal session found to kill.'); } }; // Start terminal session function startTerminal(containerId, containerName) { if (!window.activePeer) { console.error('[ERROR] No active peer for terminal.'); return; } if (terminalSessions[containerId]) { // Terminal session already exists console.log(`[INFO] Terminal session already exists for container: ${containerId}`); // If terminal is minimized or not active, switch to it if (activeContainerId !== containerId || terminalModal.style.display === 'none') { switchTerminal(containerId); } else { console.log(`[INFO] Terminal for container ${containerId} is already active`); } return; } // Create new terminal session console.log(`[INFO] Creating new terminal session for container: ${containerId}`); // Initialize new terminal session const xterm = new Terminal({ cursorBlink: true, theme: { background: '#000000', foreground: '#ffffff' }, }); const fitAddon = new FitAddon(); xterm.loadAddon(fitAddon); // Create a container div for this terminal const terminalDiv = document.createElement('div'); terminalDiv.style.width = '100%'; terminalDiv.style.height = '100%'; terminalDiv.style.display = 'none'; // Initially hidden terminalContainer.appendChild(terminalDiv); // Open the terminal in the container div xterm.open(terminalDiv); // Set up event listener for terminal input using onData const onDataDisposable = xterm.onData((data) => { console.log(`[DEBUG] Sending terminal input for container ${containerId}: ${data}`); // Base64 encode the data window.activePeer.write( JSON.stringify({ type: 'terminalInput', containerId, data: btoa(data), encoding: 'base64', }) ); }); // Store the terminal session terminalSessions[containerId] = { xterm, fitAddon, onDataDisposable, output: '', name: containerName, resizeListener: null, container: terminalDiv, }; // Send startTerminal command to server console.log(`[INFO] Starting terminal for container: ${containerId}`); window.activePeer.write( JSON.stringify({ command: 'startTerminal', args: { containerId } }) ); // Switch to the requested terminal session switchTerminal(containerId); } // Switch to a terminal session function switchTerminal(containerId) { const session = terminalSessions[containerId]; if (!session) { console.error(`[ERROR] No terminal session found for container: ${containerId}`); return; } // Hide the current terminal if any if (activeContainerId && activeContainerId !== containerId) { const currentSession = terminalSessions[activeContainerId]; if (currentSession) { // Remove resize listener for current session if (currentSession.resizeListener) { window.removeEventListener('resize', currentSession.resizeListener); currentSession.resizeListener = null; } // Hide current terminal's container currentSession.container.style.display = 'none'; } } // Show the terminal session.container.style.display = 'block'; setTimeout(() => session.fitAddon.fit(), 10); // Ensure terminal fits properly after rendering // Update modal title terminalTitle.dataset.containerId = containerId; terminalTitle.textContent = `Container Terminal: ${session.name}`; // Show the terminal modal terminalModal.style.display = 'flex'; activeContainerId = containerId; // Remove from tray if it exists removeFromTray(containerId); console.log(`[INFO] Switched to terminal for container: ${containerId}`); // Adjust resize event listener if (session.resizeListener) { window.removeEventListener('resize', session.resizeListener); } session.resizeListener = () => session.fitAddon.fit(); window.addEventListener('resize', session.resizeListener); } // Append terminal output function appendTerminalOutput(data, containerId, encoding) { const session = terminalSessions[containerId]; if (!session) { console.error(`[ERROR] No terminal session found for container: ${containerId}`); return; } let outputData; if (encoding === 'base64') { outputData = atob(data); } else { outputData = data; } // Write the decoded data to the terminal session.xterm.write(outputData); } // Remove terminal from tray function removeFromTray(containerId) { const trayItem = document.querySelector(`.tray-item[data-id="${containerId}"]`); if (trayItem) { trayItem.remove(); } } // Expose functions to app.js export { startTerminal, appendTerminalOutput };