termites 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "termites",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Web terminal with server-client architecture for remote shell access",
   "main": "index.js",
   "scripts": {

package/server.js

@@ -574,7 +574,8 @@ class TermitesServer {
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { height: 100vh; display: flex; flex-direction: column; transition: background 0.3s; font-family: monospace; }
+        html { height: 100%; overflow: hidden; }
+        body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; transition: background 0.3s; font-family: monospace; overflow: hidden; position: fixed; width: 100%; }
         .header {
             padding: 10px 12px; display: flex; align-items: center; gap: 12px;
             border-bottom: 1px solid; transition: all 0.3s; flex-shrink: 0;
@@ -589,7 +590,7 @@ class TermitesServer {
         .header-title .host { color: var(--host-color, #859900); }
         .header-title .sep { color: var(--sep-color, #657b83); }
         .no-client { color: #888; font-style: italic; }
-        #terminal-container { flex: 1; padding: 4px; transition: background 0.3s; overflow: hidden; }
+        #terminal-container { flex: 1; padding: 4px; transition: background 0.3s; overflow: hidden; min-height: 0; }
         .xterm { height: 100%; }
         .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 99; opacity: 0; visibility: hidden; transition: all 0.3s; }
         .overlay.open { opacity: 1; visibility: visible; }
@@ -954,8 +955,10 @@ class TermitesServer {
             };
 
             toolbar.querySelectorAll('button').forEach(btn => {
-                btn.addEventListener('click', (e) => {
+                // Use touchstart to prevent losing focus on terminal
+                const handler = (e) => {
                     e.preventDefault();
+                    e.stopPropagation();
                     const mod = btn.dataset.mod;
                     const key = btn.dataset.key;
                     const seq = btn.dataset.seq;
@@ -963,6 +966,8 @@ class TermitesServer {
                     if (mod) {
                         modifiers[mod] = !modifiers[mod];
                         btn.classList.toggle('active', modifiers[mod]);
+                        console.log('Modifier toggled:', mod, modifiers[mod]);
+                        // Don't focus terminal when toggling modifier, keep keyboard open
                         return;
                     }
 
@@ -992,8 +997,11 @@ class TermitesServer {
                         modifiers.alt = false;
                         toolbar.querySelectorAll('.mod-btn').forEach(b => b.classList.remove('active'));
                     }
+                    // Only focus terminal for non-modifier buttons
                     term.focus();
-                });
+                };
+                btn.addEventListener('touchstart', handler, { passive: false });
+                btn.addEventListener('click', handler);
             });
         }
 
@@ -1052,11 +1060,13 @@ class TermitesServer {
             term.onData(data => {
                 if (ws?.readyState === WebSocket.OPEN && selectedClientId) {
                     let sendData = data;
+                    console.log('Input received:', data, 'Ctrl active:', modifiers.ctrl);
                     // Apply Ctrl modifier to keyboard input
                     if (modifiers.ctrl && data.length === 1) {
                         const code = data.toUpperCase().charCodeAt(0);
                         if (code >= 65 && code <= 90) { // A-Z
                             sendData = String.fromCharCode(code - 64);
+                            console.log('Sending Ctrl+' + data.toUpperCase());
                         }
                         // Reset Ctrl after use
                         modifiers.ctrl = false;
@@ -1065,7 +1075,7 @@ class TermitesServer {
                     ws.send(JSON.stringify({ type: 'input', clientId: selectedClientId, text: sendData }));
                 }
             });
-            window.addEventListener('resize', () => {
+            function handleResize() {
                 fitAddon.fit();
                 if (ws?.readyState === WebSocket.OPEN && selectedClientId) {
                     ws.send(JSON.stringify({
@@ -1073,7 +1083,16 @@ class TermitesServer {
                         cols: term.cols, rows: term.rows
                     }));
                 }
+            }
+            window.addEventListener('resize', handleResize);
+            window.addEventListener('orientationchange', () => {
+                // Delay fit after orientation change to let browser settle
+                setTimeout(handleResize, 100);
             });
+            // Also handle visual viewport changes (mobile keyboard show/hide)
+            if (window.visualViewport) {
+                window.visualViewport.addEventListener('resize', handleResize);
+            }
             connect();
             applyTheme(currentTheme);
         }
@@ -1123,6 +1142,7 @@ class TermitesServer {
                     case 'output':
                         if (d.clientId === selectedClientId) {
                             term.write(d.data);
+                            term.scrollToBottom();
                         }
                         break;
                 }