MeshCentralTerminal.jsx

Go to the documentation of this file.

/**
 * Custom MeshCentral Terminal Component
 * Direct WebSocket connection - no iframe needed
 * Adapted from MeshCentral's client-side terminal code
 */
 
import { useEffect, useRef, useState } from 'react';
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import 'xterm/css/xterm.css';
 
export default function MeshCentralTerminal({ agentId, sessionToken }) {
    const terminalRef = useRef(null);
    const wsRef = useRef(null);
    const xtermRef = useRef(null);
    const fitAddonRef = useRef(null);
    const [status, setStatus] = useState('connecting');
 
    useEffect(() => {
        if (!agentId || !sessionToken) return;
 
        // Initialize xterm.js terminal
        const terminal = new Terminal({
            cursorBlink: true,
            fontSize: 14,
            fontFamily: 'Menlo, Monaco, "Courier New", monospace',
            theme: {
                background: '#1e1e1e',
                foreground: '#d4d4d4'
            }
        });
 
        const fitAddon = new FitAddon();
        terminal.loadAddon(fitAddon);
 
        terminal.open(terminalRef.current);
        fitAddon.fit();
 
        xtermRef.current = terminal;
        fitAddonRef.current = fitAddon;
 
        // Connect to backend WebSocket proxy
        const wsUrl = `${import.meta.env.VITE_WS_URL || 'wss://rmm-psa-backend-t9f7k.ondigitalocean.app'}/api/meshcentral/terminal?sessionToken=${sessionToken}&agentId=${agentId}`;
 
        const ws = new WebSocket(wsUrl);
        wsRef.current = ws;
 
        ws.onopen = () => {
            console.log('✅ Terminal WebSocket connected');
            setStatus('connected');
            terminal.writeln('Terminal connected. Waiting for shell...\r\n');
        };
 
        ws.onmessage = (event) => {
            try {
                const message = JSON.parse(event.data);
 
                if (message.error) {
                    terminal.writeln(`\r\n\x1b[31mError: ${message.error}\x1b[0m\r\n`);
                    setStatus('error');
                    return;
                }
 
                // Handle terminal output
                if (message.type === 'console' && message.data) {
                    // MeshCentral sends base64 encoded terminal data
                    const output = atob(message.data);
                    terminal.write(output);
                }
            } catch (err) {
                console.error('Error parsing terminal message:', err);
            }
        };
 
        ws.onerror = (error) => {
            console.error('Terminal WebSocket error:', error);
            setStatus('error');
            terminal.writeln('\r\n\x1b[31mConnection error\x1b[0m\r\n');
        };
 
        ws.onclose = () => {
            console.log('Terminal WebSocket closed');
            setStatus('disconnected');
            terminal.writeln('\r\n\x1b[33mConnection closed\x1b[0m\r\n');
        };
 
        // Send terminal input to MeshCentral
        terminal.onData((data) => {
            if (ws.readyState === WebSocket.OPEN) {
                // Encode input as base64 (MeshCentral protocol)
                const encoded = btoa(data);
                ws.send(JSON.stringify({
                    type: 'console',
                    action: 'input',
                    data: encoded
                }));
            }
        });
 
        // Handle window resize
        const handleResize = () => {
            fitAddon.fit();
            if (ws.readyState === WebSocket.OPEN) {
                ws.send(JSON.stringify({
                    type: 'console',
                    action: 'resize',
                    cols: terminal.cols,
                    rows: terminal.rows
                }));
            }
        };
 
        window.addEventListener('resize', handleResize);
 
        // Cleanup
        return () => {
            window.removeEventListener('resize', handleResize);
            if (ws.readyState === WebSocket.OPEN) {
                ws.close();
            }
            terminal.dispose();
        };
    }, [agentId, sessionToken]);
 
    return (
        <div className="meshcentral-terminal">
            <div className="terminal-header">
                <span className={`status-indicator status-${status}`}></span>
                <span className="status-text">
                    {status === 'connecting' && 'Connecting...'}
                    {status === 'connected' && 'Connected'}
                    {status === 'error' && 'Connection Error'}
                    {status === 'disconnected' && 'Disconnected'}
                </span>
            </div>
 
            <div
                ref={terminalRef}
                className="terminal-container"
                style={{ height: '500px', width: '100%' }}
            />
 
            <style jsx>{`
        .meshcentral-terminal {
          border: 1px solid #ccc;
          border-radius: 4px;
          overflow: hidden;
        }
 
        .terminal-header {
          background: #2d2d2d;
          padding: 8px 12px;
          display: flex;
          align-items: center;
          gap: 8px;
        }
 
        .status-indicator {
          width: 8px;
          height: 8px;
          border-radius: 50%;
        }
 
        .status-connecting { background: #ffa500; }
        .status-connected { background: #00ff00; }
        .status-error { background: #ff0000; }
        .status-disconnected { background: #888; }
 
        .status-text {
          color: #d4d4d4;
          font-size: 12px;
        }
 
        .terminal-container {
          padding: 8px;
        }
      `}</style>
        </div>
    );
}