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/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);
   }