termites 1.0.16 → 1.0.18

package/package.json

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

package/server.js

@@ -590,7 +590,9 @@ 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; min-height: 0; }
+        #terminal-container { flex: 1; padding: 4px; transition: background 0.3s; overflow: hidden; min-height: 0; position: relative; }
+        #terminal-container.select-mode { cursor: text; }
+        #terminal-container.select-mode::after { content: 'Select Mode'; position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.7); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 11px; pointer-events: none; }
         .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; }
@@ -725,6 +727,10 @@ class TermitesServer {
         <button data-seq="\\x04">^D</button>
         <button data-seq="\\x1a">^Z</button>
         <button data-seq="\\x0c">^L</button>
+        <div class="sep"></div>
+        <button id="copy-btn">Copy</button>
+        <button id="paste-btn">Paste</button>
+        <button id="select-btn" class="mod-btn">Select</button>
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
@@ -1030,6 +1036,77 @@ class TermitesServer {
                 btn.addEventListener('touchstart', handler, { passive: false });
                 btn.addEventListener('click', handler);
             });
+
+            // Copy button - copy selection or last line
+            document.getElementById('copy-btn').addEventListener('click', async () => {
+                const selection = term.getSelection();
+                if (selection) {
+                    await navigator.clipboard.writeText(selection);
+                    term.clearSelection();
+                }
+            });
+
+            // Paste button
+            document.getElementById('paste-btn').addEventListener('click', async () => {
+                try {
+                    const text = await navigator.clipboard.readText();
+                    if (text && ws?.readyState === WebSocket.OPEN && selectedClientId) {
+                        ws.send(JSON.stringify({ type: 'input', clientId: selectedClientId, text }));
+                    }
+                } catch (e) {
+                    console.error('Paste failed:', e);
+                }
+                term.focus();
+            });
+
+            // Select mode button - enables touch selection
+            let selectMode = false;
+            const selectBtn = document.getElementById('select-btn');
+            const termContainer = document.getElementById('terminal-container');
+
+            selectBtn.addEventListener('click', () => {
+                selectMode = !selectMode;
+                selectBtn.classList.toggle('active', selectMode);
+                termContainer.style.touchAction = selectMode ? 'none' : '';
+                termContainer.style.userSelect = selectMode ? 'text' : '';
+                if (selectMode) {
+                    // Enable selection overlay
+                    termContainer.classList.add('select-mode');
+                } else {
+                    termContainer.classList.remove('select-mode');
+                    term.clearSelection();
+                }
+            });
+
+            // Handle touch selection
+            let touchStartPos = null;
+            termContainer.addEventListener('touchstart', (e) => {
+                if (selectMode && e.touches.length === 1) {
+                    const touch = e.touches[0];
+                    const rect = termContainer.getBoundingClientRect();
+                    touchStartPos = { x: touch.clientX - rect.left, y: touch.clientY - rect.top };
+                }
+            }, { passive: true });
+
+            termContainer.addEventListener('touchmove', (e) => {
+                if (selectMode && touchStartPos && e.touches.length === 1) {
+                    e.preventDefault();
+                    const touch = e.touches[0];
+                    const rect = termContainer.getBoundingClientRect();
+                    const currentPos = { x: touch.clientX - rect.left, y: touch.clientY - rect.top };
+
+                    // Convert pixel positions to terminal coordinates
+                    const cellWidth = term._core._renderService.dimensions.css.cell.width;
+                    const cellHeight = term._core._renderService.dimensions.css.cell.height;
+
+                    const startCol = Math.floor(touchStartPos.x / cellWidth);
+                    const startRow = Math.floor(touchStartPos.y / cellHeight);
+                    const endCol = Math.floor(currentPos.x / cellWidth);
+                    const endRow = Math.floor(currentPos.y / cellHeight);
+
+                    term.select(startCol, startRow, (endRow - startRow) * term.cols + (endCol - startCol) + 1);
+                }
+            }, { passive: false });
         }
 
         function updateClientList() {