Replace terminal with xterm.js

templates/base.html

@@ -7,6 +7,7 @@
     <link rel="icon" href="/logos/favicon.ico" type="image/x-icon">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css">
     <style>
         .navbar-brand {
             font-weight: bold;
@@ -138,6 +139,7 @@
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
     <script>
         function copyToClipboard(text) {
             navigator.clipboard.writeText(text).then(function() {

templates/terminal.html

@@ -21,13 +21,7 @@
                 </div>
             </div>
             <div class="card-body p-0">
-                <div id="terminal" class="terminal-container">
-                    <div id="output"></div>
-                    <div class="input-group">
-                        <span class="text-success me-2">$</span>
-                        <input type="text" id="commandInput" class="terminal-input" placeholder="Type your command..." disabled>
-                    </div>
-                </div>
+                <div id="terminal" class="terminal-container"></div>
             </div>
         </div>
     </div>
@@ -36,16 +30,12 @@
 
 {% block scripts %}
 <script>
-let ws = null;
+let term = null;
 let connected = false;
+let commandBuffer = '';
 
 document.getElementById('connectBtn').addEventListener('click', connect);
 document.getElementById('disconnectBtn').addEventListener('click', disconnect);
-document.getElementById('commandInput').addEventListener('keypress', function(e) {
-    if (e.key === 'Enter') {
-        sendCommand();
-    }
-});
 
 function connect() {
     const username = document.getElementById('sshUsername').value;
@@ -54,73 +44,85 @@ function connect() {
         return;
     }
 
+    // Initialize xterm
+    if (!term) {
+        term = new Terminal();
+        term.open(document.getElementById('terminal'));
+        term.write('Connecting to ' + username + '@{{ client_id }}...\r\n');
+    }
+
     // For demo purposes, we'll simulate the connection
-    // In a real implementation, this would use WebSocket to communicate with wsssh
     connected = true;
     document.getElementById('connectBtn').disabled = true;
     document.getElementById('disconnectBtn').disabled = false;
-    document.getElementById('commandInput').disabled = false;
     document.getElementById('sshUsername').disabled = true;
 
-    appendOutput(`Connecting to ${username}@{{ client_id }}...`);
     setTimeout(() => {
-        appendOutput(`Connected successfully!`);
-        appendOutput(`Welcome to {{ client_id }}`);
-        appendOutput(`$ `);
+        term.write('Connected successfully!\r\n');
+        term.write('Welcome to {{ client_id }}\r\n');
+        term.write('$ ');
     }, 1000);
+
+    // Handle input
+    term.onData(data => {
+        if (!connected) return;
+        if (data === '\r' || data === '\n') {
+            // Enter pressed, process command
+            processCommand(commandBuffer.trim());
+            commandBuffer = '';
+        } else if (data === '\x7f' || data === '\b') { // Backspace
+            if (commandBuffer.length > 0) {
+                commandBuffer = commandBuffer.slice(0, -1);
+                term.write('\b \b');
+            }
+        } else {
+            commandBuffer += data;
+            term.write(data);
+        }
+    });
 }
 
 function disconnect() {
     connected = false;
     document.getElementById('connectBtn').disabled = false;
     document.getElementById('disconnectBtn').disabled = true;
-    document.getElementById('commandInput').disabled = true;
     document.getElementById('sshUsername').disabled = false;
+    commandBuffer = '';
 
-    appendOutput('Disconnected.');
+    if (term) {
+        term.write('\r\nDisconnected.\r\n');
+    }
 }
 
-function sendCommand() {
-    if (!connected) return;
-
-    const input = document.getElementById('commandInput');
-    const command = input.value.trim();
-    if (!command) return;
+function processCommand(command) {
+    if (!connected || !term) return;
 
-    appendOutput(`$ ${command}`);
+    term.write('\r\n');
 
     // Simulate command execution
     setTimeout(() => {
         if (command === 'ls') {
-            appendOutput(`Desktop  Documents  Downloads  Music  Pictures  Videos`);
+            term.write('Desktop  Documents  Downloads  Music  Pictures  Videos\r\n');
         } else if (command === 'pwd') {
-            appendOutput(`/home/${document.getElementById('sshUsername').value}`);
+            term.write('/home/' + document.getElementById('sshUsername').value + '\r\n');
         } else if (command === 'whoami') {
-            appendOutput(document.getElementById('sshUsername').value);
+            term.write(document.getElementById('sshUsername').value + '\r\n');
         } else if (command === 'exit' || command === 'logout') {
             disconnect();
             return;
+        } else if (command === '') {
+            // Empty command
         } else {
-            appendOutput(`Command not found: ${command}`);
+            term.write('Command not found: ' + command + '\r\n');
         }
-        appendOutput(`$ `);
+        term.write('$ ');
     }, 500);
-
-    input.value = '';
-}
-
-function appendOutput(text) {
-    const output = document.getElementById('output');
-    const line = document.createElement('div');
-    line.textContent = text;
-    output.appendChild(line);
-    output.scrollTop = output.scrollHeight;
 }
 
-// Focus on command input when connected
+// Focus on terminal when connected
 document.addEventListener('keydown', function(e) {
-    if (connected && e.target.tagName !== 'INPUT') {
-        document.getElementById('commandInput').focus();
+    if (connected && term) {
+        term.focus();
     }
 });
 </script>