feat: upgrade terminal to xterm.js + WebSocket

- Rewrite terminal.js: xterm.js Terminal per tab, WebSocket per connection
- Light theme terminal (Lumina: white bg, blue cursor, proper ANSI colors)
- Alpine.js keeps tab management, xterm.js handles rendering
- Each tab gets its own WebSocket to /terminal/ws/:hostID
- Mock handler iterates chars (fixes multi-char xterm.js messages)
- Sync mock commands with React template (help, ls, docker ps, etc.)
- Add xterm.css custom scrollbar styles
- terminal_content.html: xterm containers with Alpine show/hide per tab

app/backend/internal/handler/terminal.go

@@ -102,34 +102,34 @@ func mockTerminal(c *websocket.Conn, host string) {
 	c.WriteMessage(websocket.TextMessage, []byte(welcome))
 
 	prompt := fmt.Sprintf("\x1b[1;34m%s:~$\x1b[0m ", host)
-	cwd := "~"
+	c.WriteMessage(websocket.TextMessage, []byte(prompt))
 
+	cwd := "~"
 	buf := ""
+
 	for {
 		_, msg, err := c.ReadMessage()
 		if err != nil {
 			break
 		}
 
-		input := string(msg)
-
-		switch {
-		case input == "\r":
-			output := handleCommand(buf, host, &cwd)
-			c.WriteMessage(websocket.TextMessage, []byte(output+prompt))
-			buf = ""
-		case input == "\x7f":
-			if len(buf) > 0 {
-				buf = buf[:len(buf)-1]
-				c.WriteMessage(websocket.TextMessage, []byte("\b \b"))
-			}
-		case input == "\x03":
-			buf = ""
-			c.WriteMessage(websocket.TextMessage, []byte("^C\r\n"+prompt))
-		default:
-			if input >= " " && input <= "~" {
-				buf += input
-				c.WriteMessage(websocket.TextMessage, []byte(input))
+		for _, ch := range string(msg) {
+			switch {
+			case ch == '\r':
+				output := handleCommand(buf, host, &cwd)
+				c.WriteMessage(websocket.TextMessage, []byte(output+prompt))
+				buf = ""
+			case ch == '\x7f':
+				if len(buf) > 0 {
+					buf = buf[:len(buf)-1]
+					c.WriteMessage(websocket.TextMessage, []byte("\b \b"))
+				}
+			case ch == '\x03':
+				buf = ""
+				c.WriteMessage(websocket.TextMessage, []byte("^C\r\n"+prompt))
+			case ch >= ' ' && ch <= '~':
+				buf += string(ch)
+				c.WriteMessage(websocket.TextMessage, []byte(string(ch)))
 			}
 		}
 	}
@@ -148,41 +148,71 @@ func handleCommand(cmd, host string, cwd *string) string {
 		return "\x1b[2J\x1b[H"
 	case "exit", "logout":
 		return "logout\r\n\x1b[2J\x1b[H\x1b[1;31mConnection closed.\x1b[0m\r\n"
-	case "pwd":
-		return *cwd + "\r\n"
-	case "whoami":
-		return "deploy\r\n"
-	case "hostname":
-		return host + "\r\n"
-	case "date":
-		return time.Now().Format("Mon Jan 2 15:04:05 MST 2006") + "\r\n"
-	case "uptime":
-		return fmt.Sprintf(" 13:42:17 up %d day,  1 user,  load average: 0.08, 0.12, 0.10\r\n", 1+time.Now().Day()%30)
-	case "uname":
-		if len(parts) > 1 && parts[1] == "-a" {
-			return fmt.Sprintf("Linux %s 6.8.0-45-generic #47-Ubuntu SMP PREEMPT x86_64 x86_64 x86_64 GNU/Linux\r\n", host)
-		}
-		return "Linux\r\n"
+	case "help":
+		return "HostKeeper Mock SSH Interactive Command Parser:\r\n" +
+			"  help          - Display this support manifest list\r\n" +
+			"  ls            - List contents of the current working directory\r\n" +
+			"  docker ps     - List simulated running Docker containers on cluster\r\n" +
+			"  uname -a      - Show operating system and machine kernel data\r\n" +
+			"  ping 8.8.8.8  - Probe network gateway performance\r\n" +
+			"  cat server.js - Output snippet of remote index server configuration\r\n" +
+			"  keychain      - Query keychain credentials loaded for target session\r\n" +
+			"  clear         - Wipe the terminal display buffer clean\r\n"
 	case "ls":
 		if *cwd == "~" || *cwd == "/home/deploy" {
-			return "Documents  Downloads  projects  config.yml  README.md  .env\r\n"
+			return "drwxr-xr-x  3 root  root  4096 Jul  6 12:00 controllers\r\n" +
+				"drwxr-xr-x  2 root  root  4096 Jul  6 12:00 models\r\n" +
+				"drwxr-xr-x  2 root  root  4096 Jul  6 12:00 routes\r\n" +
+				"-rw-r--r--  1 root  root   280 Jul  6 11:34 .env\r\n" +
+				"-rw-r--r--  1 root  root  1432 Jul  6 14:20 package.json\r\n" +
+				"-rwxr-xr-x  1 root  root  8412 Jul  6 15:43 server.js\r\n"
 		}
 		return "total 0\r\n"
 	case "cd":
 		if len(parts) > 1 { *cwd = parts[1] } else { *cwd = "~" }
 		return ""
+	case "docker ps":
+		return "CONTAINER ID   IMAGE                 COMMAND                  CREATED         STATUS         PORTS\r\n" +
+			"f87a2d12e9b0   node:18-alpine        \"docker-entrypoint.s…\"   2 hours ago     Up 2 hours     0.0.0.0:3000->3000/tcp\r\n" +
+			"c23e84bf9211   postgres:15-alpine    \"docker-entrypoint.s…\"   5 hours ago     Up 5 hours     0.0.0.0:5432->5432/tcp\r\n" +
+			"78da12b84e0c   redis:7-alpine        \"docker-entrypoint.s…\"   10 hours ago    Up 10 hours    0.0.0.0:6379->6379/tcp\r\n"
+	case "uname":
+		if len(parts) > 1 && parts[1] == "-a" {
+			return fmt.Sprintf("Linux %s 5.15.0-101-generic #111-Ubuntu SMP Wed Jul 6 21:27:00 UTC 2026 x86_64 GNU/Linux\r\n", host)
+		}
+		return "Linux\r\n"
+	case "ping":
+		return "64 bytes from 8.8.8.8: icmp_seq=1 ttl=116 time=12.4 ms\r\n" +
+			"64 bytes from 8.8.8.8: icmp_seq=2 ttl=116 time=14.1 ms\r\n" +
+			"64 bytes from 8.8.8.8: icmp_seq=3 ttl=116 time=11.8 ms\r\n" +
+			"--- 8.8.8.8 ping statistics ---\r\n" +
+			"3 packets transmitted, 3 received, 0% packet loss, rtt min/avg/max = 11.8/12.76/14.1 ms\r\n"
 	case "cat":
+		if len(parts) > 1 && parts[1] == "server.js" {
+			return "const express = require(\"express\");\r\n" +
+				"const app = express();\r\n" +
+				"const PORT = process.env.PORT || 3000;\r\n" +
+				"app.get(\"/api/health\", (req, res) => res.send({ status: \"healthy\" }));\r\n" +
+				"app.listen(PORT, () => console.log(\"Server active on cluster ingress\"));\r\n"
+		}
 		if len(parts) > 1 {
-			return fmt.Sprintf("\x1b[1;37m# Content of %s\x1b[0m\r\n(not implemented in mock shell)\r\n", parts[1])
+			return fmt.Sprintf("# Content of %s\r\n(not implemented in mock shell)\r\n", parts[1])
 		}
 		return ""
+	case "keychain":
+		return "Keychain Credential Mapping Selected:\r\n" +
+			"  Active Key: id_ed25519_alex (ED25519 standard)\r\n" +
+			"  Encryption: AES-256 GCM cryptokey payload\r\n" +
+			"  Fingerprint: SHA256:7mP9K9+fVj5bW0vQ8zD1y2u3t4m5n6p7q8r9s0v1w2x\r\n"
+	case "whoami":
+		return "deploy\r\n"
+	case "hostname":
+		return host + "\r\n"
+	case "pwd":
+		return *cwd + "\r\n"
 	case "echo":
 		return strings.Join(parts[1:], " ") + "\r\n"
-	case "ssh":
-		return "\x1b[1;33mSSH forwarding not available in mock mode\x1b[0m\r\n"
-	case "help":
-		return "Available commands: clear, exit, pwd, whoami, hostname, date, uptime, uname, ls, cd, cat, echo, ssh, help\r\n"
 	default:
-		return fmt.Sprintf("\x1b[1;31m%s: command not found\x1b[0m\r\n", parts[0])
+		return fmt.Sprintf("hostkeeper: command not found: \"%s\". Type \"help\" to view custom commands list.\r\n", parts[0])
 	}
 }

app/backend/static/css/custom.css

@@ -176,6 +176,11 @@
   background: #f1f4f9;
 }
 
+/* xterm.js container */
+.xterm { padding: 8px 0; }
+.xterm-viewport::-webkit-scrollbar { width: 6px; }
+.xterm-viewport::-webkit-scrollbar-thumb { background: #c2c6d8; border-radius: 3px; }
+
 /* Strength badges */
 .strength-badge-secure {
   display: inline-flex;

app/backend/static/css/output.css

@@ -16,7 +16,6 @@
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-sm: 24rem;
-    --container-md: 28rem;
     --container-lg: 32rem;
     --container-3xl: 48rem;
     --container-7xl: 80rem;
@@ -301,6 +300,24 @@
   .col-span-full {
     grid-column: 1 / -1;
   }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -352,9 +369,6 @@
   .block {
     display: block;
   }
-  .contents {
-    display: contents;
-  }
   .flex {
     display: flex;
   }
@@ -875,12 +889,6 @@
       background-color: color-mix(in oklab, var(--color-error-container) 5%, transparent);
     }
   }
-  .bg-error-container\/20 {
-    background-color: color-mix(in srgb, #f9dedc 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-error-container) 20%, transparent);
-    }
-  }
   .bg-error\/80 {
     background-color: color-mix(in srgb, #b3261e 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -959,12 +967,6 @@
   .bg-secondary {
     background-color: var(--color-secondary);
   }
-  .bg-secondary-container\/10 {
-    background-color: color-mix(in srgb, #6bff8f 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-secondary-container) 10%, transparent);
-    }
-  }
   .bg-secondary-container\/20 {
     background-color: color-mix(in srgb, #6bff8f 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1288,9 +1290,6 @@
   .text-\[\#191c1e\] {
     color: #191c1e;
   }
-  .text-\[\#2244aa\] {
-    color: #2244aa;
-  }
   .text-amber-500 {
     color: var(--color-amber-500);
   }

app/backend/static/js/terminal.js

@@ -4,129 +4,152 @@ document.addEventListener('alpine:init', () => {
   const selEl = document.getElementById('selected-host');
   const selectedHostId = selEl ? JSON.parse(selEl.textContent) : '';
 
-  function processCommand(cmd, tabName) {
-    const lines = [];
-    const clean = cmd.toLowerCase().trim();
-    if (!clean) return lines;
-
-    if (clean === 'clear') return [];
-
-    const commands = {
-      help: [
-        { text: 'HostKeeper Mock SSH Interactive Command Parser:', type: 'success' },
-        { text: '  help          - Display this support manifest list', type: 'output' },
-        { text: '  ls            - List contents of the current working directory', type: 'output' },
-        { text: '  docker ps     - List simulated running Docker containers on cluster', type: 'output' },
-        { text: '  uname -a      - Show operating system and machine kernel data', type: 'output' },
-        { text: '  ping 8.8.8.8  - Probe network gateway performance', type: 'output' },
-        { text: '  cat server.js - Output snippet of remote index server configuration', type: 'output' },
-        { text: '  keychain      - Query keychain credentials loaded for target session', type: 'output' },
-        { text: '  clear         - Wipe the terminal display buffer clean', type: 'output' },
-      ],
-      ls: [
-        { text: 'drwxr-xr-x  3 root  root  4096 Jul  6 12:00 controllers', type: 'output' },
-        { text: 'drwxr-xr-x  2 root  root  4096 Jul  6 12:00 models', type: 'output' },
-        { text: 'drwxr-xr-x  2 root  root  4096 Jul  6 12:00 routes', type: 'output' },
-        { text: '-rw-r--r--  1 root  root   280 Jul  6 11:34 .env', type: 'error' },
-        { text: '-rw-r--r--  1 root  root  1432 Jul  6 14:20 package.json', type: 'output' },
-        { text: '-rwxr-xr-x  1 root  root  8412 Jul  6 15:43 server.js', type: 'success' },
-      ],
-      'docker ps': [
-        { text: 'CONTAINER ID   IMAGE                 COMMAND                  CREATED         STATUS         PORTS', type: 'success' },
-        { text: 'f87a2d12e9b0   node:18-alpine        "docker-entrypoint.s…"   2 hours ago     Up 2 hours     0.0.0.0:3000->3000/tcp', type: 'output' },
-        { text: 'c23e84bf9211   postgres:15-alpine    "docker-entrypoint.s…"   5 hours ago     Up 5 hours     0.0.0.0:5432->5432/tcp', type: 'output' },
-        { text: '78da12b84e0c   redis:7-alpine        "docker-entrypoint.s…"   10 hours ago    Up 10 hours    0.0.0.0:6379->6379/tcp', type: 'output' },
-      ],
-      'uname -a': [
-        { text: 'Linux ' + tabName + ' 5.15.0-101-generic #111-Ubuntu SMP Wed Jul 6 21:27:00 UTC 2026 x86_64 GNU/Linux', type: 'output' },
-      ],
-      'cat server.js': [
-        { text: 'const express = require("express");', type: 'output' },
-        { text: 'const app = express();', type: 'output' },
-        { text: 'const PORT = process.env.PORT || 3000;', type: 'output' },
-        { text: 'app.get("/api/health", (req, res) => res.send({ status: "healthy" }));', type: 'output' },
-        { text: 'app.listen(PORT, () => console.log("Server active on cluster ingress"));', type: 'success' },
-      ],
-      keychain: [
-        { text: 'Keychain Credential Mapping Selected:', type: 'success' },
-        { text: '  Active Key: id_ed25519_alex (ED25519 standard)', type: 'output' },
-        { text: '  Encryption: AES-256 GCM cryptokey payload', type: 'output' },
-        { text: '  Fingerprint: SHA256:7mP9K9+fVj5bW0vQ8zD1y2u3t4m5n6p7q8r9s0v1w2x', type: 'output' },
-      ],
-    };
-
-    if (commands[clean]) {
-      return commands[clean];
-    }
-
-    if (clean.startsWith('ping')) {
-      return [
-        { text: '64 bytes from 8.8.8.8: icmp_seq=1 ttl=116 time=12.4 ms', type: 'output' },
-        { text: '64 bytes from 8.8.8.8: icmp_seq=2 ttl=116 time=14.1 ms', type: 'output' },
-        { text: '64 bytes from 8.8.8.8: icmp_seq=3 ttl=116 time=11.8 ms', type: 'output' },
-        { text: '--- 8.8.8.8 ping statistics ---', type: 'success' },
-        { text: '3 packets transmitted, 3 received, 0% packet loss, rtt min/avg/max = 11.8/12.76/14.1 ms', type: 'success' },
-      ];
-    }
-
-    return [{ text: `hostkeeper: command not found: "${cmd}". Type "help" to view custom commands list.`, type: 'error' }];
-  }
+  const termTheme = {
+    background: '#ffffff',
+    foreground: '#191c1e',
+    cursor: '#0050cb',
+    cursorAccent: '#ffffff',
+    selectionBackground: '#0050cb33',
+    black: '#191c1e',
+    red: '#b3261e',
+    green: '#006e2f',
+    yellow: '#a86e0a',
+    blue: '#0050cb',
+    magenta: '#7e23cc',
+    cyan: '#006493',
+    white: '#191c1e',
+    brightBlack: '#727686',
+    brightRed: '#dc362e',
+    brightGreen: '#008a42',
+    brightYellow: '#c58800',
+    brightBlue: '#2962d5',
+    brightMagenta: '#9a40e8',
+    brightCyan: '#007ab5',
+    brightWhite: '#424656',
+  };
 
   Alpine.data('terminalManager', () => ({
     tabs: [],
     activeTab: 0,
-    histories: {},
+    terminals: {},
+    sockets: {},
     command: '',
 
-    get history() {
-      const cur = this.tabs[this.activeTab];
-      return cur ? (this.histories[cur.id] || []) : [];
-    },
-
     init() {
       this.addTab();
     },
 
-    addTab() {
+    _createTerminal(id, hostName) {
+      const term = new Terminal({
+        theme: termTheme,
+        fontFamily: "'JetBrains Mono', monospace",
+        fontSize: 13,
+        lineHeight: 1.5,
+        cursorBlink: true,
+        cursorStyle: 'bar',
+        allowProposedApi: true,
+        scrollback: 5000,
+      });
+      this.terminals[id] = term;
+      return term;
+    },
+
+    _connectWebSocket(id, hostID, hostName) {
+      const ws = new WebSocket(
+        (location.protocol === 'https:' ? 'wss:' : 'ws:') +
+        '//' + location.host + '/terminal/ws/' + hostID
+      );
+      this.sockets[id] = ws;
+
+      const term = this.terminals[id];
+
+      ws.onopen = () => {
+        term.focus();
+      };
+
+      ws.onmessage = (ev) => {
+        term.write(ev.data);
+      };
+
+      ws.onclose = () => {
+        term.write('\r\n\x1b[33m[Connection closed]\x1b[0m\r\n');
+      };
+
+      ws.onerror = () => {
+        term.write('\r\n\x1b[31m[Connection error]\x1b[0m\r\n');
+      };
+
+      term.onData((data) => {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(data);
+        }
+      });
+    },
+
+    _getHostForTab() {
       let host;
       if (selectedHostId) {
-        host = hostOptions.find(h => h.id === selectedHostId) || hostOptions[0];
+        host = hostOptions.find((h) => h.id === selectedHostId) || hostOptions[0];
       }
       if (!host) {
         host = hostOptions.length > 0
           ? hostOptions[Math.floor(Math.random() * hostOptions.length)]
           : { id: 'h1', name: 'localhost', ip: '127.0.0.1' };
       }
+      return host;
+    },
+
+    addTab() {
+      const host = this._getHostForTab();
       const id = 'tab-' + Date.now() + '-' + Math.random().toString(36).slice(2, 6);
-      this.tabs.push({ id, name: host.name, host: host.ip, connected: true });
+
+      this.tabs.push({ id, name: host.name, host: host.ip, hostID: host.id });
       this.activeTab = this.tabs.length - 1;
-      this.histories[id] = [
-        { text: 'Connecting to ' + host.name + ' (' + host.ip + ') via port 22...', type: 'output' },
-        { text: 'Using identity keychain file: id_ed25519_alex (strength: SECURE)', type: 'output' },
-        { text: 'Welcome to Ubuntu 22.04 LTS (GNU/Linux 5.15.0-101-generic x86_64)', type: 'success' },
-        { text: 'System load: 0.12 | Processes: 104 | Memory: 32% used', type: 'output' },
-        { text: 'Type "help" to view custom interactive HostKeeper mock commands.', type: 'success' },
-      ];
+
+      this._createTerminal(id, host.name);
+
       this.$nextTick(() => {
-        const out = document.getElementById('terminal-output');
-        if (out) out.scrollTop = out.scrollHeight;
+        const container = document.getElementById('xterm-' + id);
+        if (container) {
+          this.terminals[id].open(container);
+          this._connectWebSocket(id, host.id, host.name);
+        }
       });
     },
 
     switchTab(i) {
       this.activeTab = i;
       this.$nextTick(() => {
-        const out = document.getElementById('terminal-output');
-        if (out) out.scrollTop = out.scrollHeight;
+        const cur = this.tabs[this.activeTab];
+        if (cur && this.terminals[cur.id]) {
+          this.terminals[cur.id].focus();
+        }
       });
     },
 
     closeTab(i) {
       if (this.tabs.length <= 1) return;
-      const id = this.tabs[i].id;
+      const tab = this.tabs[i];
+      const id = tab.id;
+
+      if (this.sockets[id]) {
+        this.sockets[id].close();
+        delete this.sockets[id];
+      }
+      if (this.terminals[id]) {
+        this.terminals[id].dispose();
+        delete this.terminals[id];
+      }
+
       this.tabs.splice(i, 1);
-      delete this.histories[id];
-      if (this.activeTab >= this.tabs.length) this.activeTab = this.tabs.length - 1;
+      if (this.activeTab >= this.tabs.length) {
+        this.activeTab = this.tabs.length - 1;
+      }
+
+      const cur = this.tabs[this.activeTab];
+      if (cur && this.terminals[cur.id]) {
+        this.$nextTick(() => this.terminals[cur.id].focus());
+      }
     },
 
     submitCommand() {
@@ -134,16 +157,11 @@ document.addEventListener('alpine:init', () => {
       if (!cmd) return;
       const cur = this.tabs[this.activeTab];
       if (!cur) return;
-      const id = cur.id;
-      const lines = this.histories[id] || [];
-      lines.push({ text: '$ ' + cmd, type: 'input' });
-      const output = processCommand(cmd, cur.name);
-      this.histories[id] = lines.concat(output);
+      const ws = this.sockets[cur.id];
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(cmd + '\r');
+      }
       this.command = '';
-      this.$nextTick(() => {
-        const out = document.getElementById('terminal-output');
-        if (out) out.scrollTop = out.scrollHeight;
-      });
     },
 
     insertCommand(cmd) {
@@ -154,10 +172,11 @@ document.addEventListener('alpine:init', () => {
     clearBuffer() {
       const cur = this.tabs[this.activeTab];
       if (!cur) return;
-      this.histories[cur.id] = [
-        { text: 'Session log display buffer cleared manually.', type: 'output' },
-        { text: 'Type "help" to view interactive choices.', type: 'success' },
-      ];
+      const term = this.terminals[cur.id];
+      if (term) {
+        term.clear();
+        term.write('\x1b[2J\x1b[H');
+      }
     },
   }));
 });

app/backend/views/terminal_content.html

@@ -33,7 +33,7 @@
   <!-- Terminal shell frame -->
   <div class="flex-1 bg-white border border-outline-variant rounded-2xl shadow-sm flex flex-col overflow-hidden min-h-0">
     <!-- Terminal Header -->
-    <div class="px-4 py-2 bg-surface-container-low border-b border-outline-variant/30 flex justify-between items-center">
+    <div class="px-4 py-2 bg-surface-container-low border-b border-outline-variant/30 flex justify-between items-center shrink-0">
       <div class="flex items-center gap-1.5">
         <span class="w-3 h-3 rounded-full bg-error/80"></span>
         <span class="w-3 h-3 rounded-full bg-primary-container/80"></span>
@@ -49,18 +49,20 @@
       </div>
     </div>
 
-    <!-- Console display -->
-    <div class="flex-1 overflow-y-auto min-h-0 font-mono text-sm leading-relaxed p-5 bg-white" id="terminal-output">
-      <template x-for="(line, idx) in history" :key="idx">
-        <div :class="line.type === 'input' ? 'text-on-surface font-bold' : line.type === 'error' ? 'text-error bg-error-container/20 px-2.5 py-1 rounded-md' : line.type === 'success' ? 'text-secondary bg-secondary-container/10 px-2.5 py-1 rounded-md font-semibold' : 'text-[#2244aa]'"
-             class="whitespace-pre-wrap" x-text="line.text"></div>
+    <!-- xterm.js containers — one per tab, shown/hidden by Alpine -->
+    <div class="flex-1 relative min-h-0">
+      <template x-for="(tab, idx) in tabs" :key="tab.id">
+        <div x-show="idx === activeTab"
+             x-cloak
+             class="absolute inset-0">
+          <div :id="'xterm-' + tab.id" class="w-full h-full"></div>
+        </div>
       </template>
-      <div class="h-4"></div>
     </div>
 
     <!-- Input prompt -->
     <form @submit.prevent="submitCommand()"
-          class="p-3 border-t border-outline-variant/40 bg-surface-container-low flex items-center gap-2.5">
+          class="p-3 border-t border-outline-variant/40 bg-surface-container-low flex items-center gap-2.5 shrink-0">
       <span class="font-mono text-xs font-bold text-primary pl-2 shrink-0 flex items-center gap-1">
         <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3"/></svg>
         root@<span x-text="tabs.length ? tabs[activeTab].name : 'host'"></span>:~$
@@ -88,4 +90,4 @@
     <button type="button" @click="insertCommand('clear')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">clear</button>
   </div>
 </div>
-{{end}}
+{{end}}