npm - termites - Versions diffs - 1.0.28 → 1.0.29 - Mend

termites 1.0.28 → 1.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/package.json +1 -1
package/server.js +261 -72

package/package.json CHANGED Viewed

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

package/server.js CHANGED Viewed

@@ -635,7 +635,7 @@ class TermitesServer {
         /* Mobile toolbar */
         .mobile-toolbar {
             display: none; flex-shrink: 0; padding: 6px 8px; gap: 6px;
-            border-top: 1px solid; overflow-x: auto; -webkit-overflow-scrolling: touch;
+            border-top: 1px solid; flex-wrap: wrap; justify-content: center;
         }
         .mobile-toolbar.show { display: flex; }
         .mobile-toolbar button {
@@ -645,7 +645,6 @@ class TermitesServer {
         }
         .mobile-toolbar button:active { opacity: 0.6; transform: scale(0.95); }
         .mobile-toolbar button.active { background: var(--btn-active, rgba(255,255,255,0.15)); }
-        .mobile-toolbar .sep { width: 1px; background: currentColor; opacity: 0.2; margin: 0 4px; }
         .sel-marker {
             position: absolute; z-index: 50; padding: 4px 8px; border-radius: 4px;
             font-size: 11px; font-weight: bold; cursor: grab; touch-action: none;
@@ -653,6 +652,38 @@ class TermitesServer {
         }
         #sel-start-marker { background: #22c55e; color: #fff; }
         #sel-end-marker { background: #ef4444; color: #fff; }
+        .float-copy-btn {
+            position: absolute; z-index: 60; padding: 8px 16px; border-radius: 6px;
+            background: #3b82f6; color: #fff; border: none; font-size: 14px; font-weight: bold;
+            cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+        }
+        .float-copy-btn:active { background: #2563eb; transform: scale(0.95); }
+        /* History overlay */
+        .history-overlay {
+            position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 40;
+            display: none; flex-direction: column; overflow: hidden;
+        }
+        .history-overlay.show { display: flex; }
+        .history-header {
+            padding: 8px 12px; display: flex; align-items: center; justify-content: space-between;
+            border-bottom: 1px solid; font-size: 12px; flex-shrink: 0;
+        }
+        .history-header span { opacity: 0.7; }
+        .history-close {
+            background: none; border: 1px solid; border-radius: 4px; padding: 4px 12px;
+            color: inherit; cursor: pointer; font-size: 12px;
+        }
+        .history-content {
+            flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
+            padding: 4px; font-family: inherit; white-space: pre-wrap; word-break: break-all;
+            user-select: text; -webkit-user-select: text;
+        }
+        .history-indicator {
+            position: absolute; top: 50px; left: 50%; transform: translateX(-50%);
+            padding: 6px 16px; border-radius: 20px; font-size: 12px; z-index: 30;
+            cursor: pointer; opacity: 0; transition: opacity 0.3s; pointer-events: none;
+        }
+        .history-indicator.show { opacity: 1; pointer-events: auto; }
     </style>
 </head>
 <body>
@@ -722,28 +753,37 @@ class TermitesServer {
         <button data-key="Tab">Tab</button>
         <button data-mod="ctrl" class="mod-btn">Ctrl</button>
         <button data-mod="alt" class="mod-btn">Alt</button>
-        <div class="sep"></div>
         <button data-key="ArrowLeft">←</button>
         <button data-key="ArrowRight">→</button>
         <button data-key="ArrowUp">↑</button>
         <button data-key="ArrowDown">↓</button>
-        <div class="sep"></div>
         <button data-seq="/">/</button>
         <button data-seq="[">[</button>
         <button data-seq="]">]</button>
-        <button id="sel-btn" class="mod-btn">Sel</button>
-        <button id="copy-btn">Copy</button>
-        <button id="paste-btn">Paste</button>
+        <button id="hist-btn">Hist</button>
     </div>
     <div id="sel-start-marker" class="sel-marker" style="display:none">▼Start</div>
     <div id="sel-end-marker" class="sel-marker" style="display:none">▲End</div>
+    <button id="float-copy-btn" class="float-copy-btn" style="display:none">Copy</button>
+    <div id="history-indicator" class="history-indicator">↑ View History</div>
+    <div id="history-overlay" class="history-overlay">
+        <div class="history-header">
+            <span>Terminal History (scroll to view)</span>
+            <button class="history-close" id="history-close">Back to Terminal</button>
+        </div>
+        <div class="history-content" id="history-content"></div>
+    </div>
     <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/ansi_up@5.2.1/ansi_up.min.js"></script>
     <script>
         let ws, term, fitAddon;
         let clients = [];
         let selectedClientId = null;
+        // History buffer for iTerm-like scrolling (stores raw output)
+        let historyBuffer = [];
+        const MAX_HISTORY_SIZE = 100000; // Max characters to store
         const themes = {
             'solarized-light': {
@@ -867,6 +907,20 @@ class TermitesServer {
             toolbar.style.background = t.headerBg;
             toolbar.style.borderColor = t.headerBorder;
             toolbar.style.color = t.foreground;
+            // History overlay styling
+            const historyOverlay = document.getElementById('history-overlay');
+            historyOverlay.style.background = t.background;
+            historyOverlay.style.color = t.foreground;
+            const historyHeader = historyOverlay.querySelector('.history-header');
+            historyHeader.style.background = t.headerBg;
+            historyHeader.style.borderColor = t.headerBorder;
+            const historyContent = document.getElementById('history-content');
+            historyContent.style.fontFamily = currentFont;
+            historyContent.style.fontSize = currentFontSize + 'px';
+            const historyIndicator = document.getElementById('history-indicator');
+            historyIndicator.style.background = t.headerBg;
+            historyIndicator.style.color = t.foreground;
+            historyIndicator.style.border = '1px solid ' + t.headerBorder;
             const style = document.documentElement.style;
             style.setProperty('--user-color', t.userColor);
             style.setProperty('--host-color', t.hostColor);
@@ -1042,44 +1096,61 @@ class TermitesServer {
                 btn.addEventListener('click', handler);
             });
-            // Copy button - copy selection
-            const copyBtn = document.getElementById('copy-btn');
-            const handleCopy = async (e) => {
-                e.preventDefault();
-                const selection = term.getSelection();
-                if (selection) {
-                    await navigator.clipboard.writeText(selection);
-                    term.clearSelection();
-                }
-            };
-            copyBtn.addEventListener('touchstart', handleCopy, { passive: false });
-            copyBtn.addEventListener('click', handleCopy);
-            // Paste button
-            const pasteBtn = document.getElementById('paste-btn');
-            const handlePaste = async (e) => {
+            // History button
+            const histBtn = document.getElementById('hist-btn');
+            const handleHist = (e) => {
                 e.preventDefault();
-                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();
+                showHistoryOverlay();
             };
-            pasteBtn.addEventListener('touchstart', handlePaste, { passive: false });
-            pasteBtn.addEventListener('click', handlePaste);
+            histBtn.addEventListener('touchstart', handleHist, { passive: false });
+            histBtn.addEventListener('click', handleHist);
             // Selection mode with draggable markers
             let selMode = false;
             let selStart = { col: 0, row: 0 };
             let selEnd = { col: 0, row: 0 };
-            const selBtn = document.getElementById('sel-btn');
             const startMarker = document.getElementById('sel-start-marker');
             const endMarker = document.getElementById('sel-end-marker');
             const termContainer = document.getElementById('terminal-container');
+            const floatCopyBtn = document.getElementById('float-copy-btn');
+            function showFloatCopyBtn() {
+                if (!selMode) return;
+                const cell = getCellSize();
+                // Position at bottom-left of end marker
+                const x = Math.max(4, (selEnd.col * cell.width) - 60);
+                const y = ((selEnd.row + 1) * cell.height) + 5;
+                floatCopyBtn.style.left = x + 'px';
+                floatCopyBtn.style.top = y + 'px';
+                floatCopyBtn.style.display = 'block';
+            }
+            function hideFloatCopyBtn() {
+                floatCopyBtn.style.display = 'none';
+            }
+            function exitSelMode() {
+                if (selMode) {
+                    selMode = false;
+                    startMarker.style.display = 'none';
+                    endMarker.style.display = 'none';
+                    hideFloatCopyBtn();
+                    term.clearSelection();
+                }
+            }
+            function enterSelMode(row) {
+                if (!selMode) {
+                    selMode = true;
+                    const targetRow = row !== undefined ? row : term.buffer.active.cursorY;
+                    selStart = { col: 0, row: Math.max(0, targetRow - 2) };
+                    selEnd = { col: term.cols - 1, row: targetRow };
+                    startMarker.style.display = 'block';
+                    endMarker.style.display = 'block';
+                    updateSelection();
+                    showFloatCopyBtn();
+                }
+            }
             function getCellSize() {
                 try {
@@ -1111,27 +1182,24 @@ class TermitesServer {
                 updateMarkerPositions();
             }
-            function toggleSelMode(e) {
-                e.preventDefault();
-                selMode = !selMode;
-                selBtn.classList.toggle('active', selMode);
-                if (selMode) {
-                    // Enter selection mode
-                    const lastRow = term.buffer.active.cursorY;
-                    selStart = { col: 0, row: Math.max(0, lastRow - 2) };
-                    selEnd = { col: term.cols - 1, row: lastRow };
-                    startMarker.style.display = 'block';
-                    endMarker.style.display = 'block';
-                    updateSelection();
-                } else {
-                    // Exit selection mode
-                    startMarker.style.display = 'none';
-                    endMarker.style.display = 'none';
-                    term.clearSelection();
-                }
-            }
-            selBtn.addEventListener('touchstart', toggleSelMode, { passive: false });
-            selBtn.addEventListener('click', toggleSelMode);
+            // Long press to enter selection mode
+            let longPressTimer = null;
+            termContainer.addEventListener('touchstart', (e) => {
+                longPressTimer = setTimeout(() => {
+                    // Calculate row from touch position
+                    const cell = getCellSize();
+                    const rect = termContainer.getBoundingClientRect();
+                    const y = e.touches[0].clientY - rect.top;
+                    const row = Math.floor(y / cell.height);
+                    enterSelMode(row);
+                }, 500); // 500ms long press
+            }, { passive: true });
+            termContainer.addEventListener('touchend', () => {
+                if (longPressTimer) { clearTimeout(longPressTimer); longPressTimer = null; }
+            }, { passive: true });
+            termContainer.addEventListener('touchmove', () => {
+                if (longPressTimer) { clearTimeout(longPressTimer); longPressTimer = null; }
+            }, { passive: true });
             // Make markers draggable
             function setupDraggable(marker, isStart) {
@@ -1170,6 +1238,7 @@ class TermitesServer {
                 const onEnd = () => {
                     dragging = false;
                     marker.style.cursor = 'grab';
+                    showFloatCopyBtn(); // Show floating copy button after drag
                 };
                 marker.addEventListener('touchstart', onStart, { passive: false });
@@ -1183,28 +1252,145 @@ class TermitesServer {
             setupDraggable(startMarker, true);
             setupDraggable(endMarker, false);
-            // Touch scrolling for terminal
-            let touchScrollY = null;
-            const termEl = document.getElementById('terminal-container');
-            termEl.addEventListener('touchstart', (e) => {
-                if (e.touches.length === 1 && !selMode) {
-                    touchScrollY = e.touches[0].clientY;
+            // Floating copy button click handler
+            const handleFloatCopy = async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                // Reuse the same copy logic
+                let selection = term.getSelection();
+                if (!selection && selMode) {
+                    let text = '';
+                    const buffer = term.buffer.active;
+                    for (let row = selStart.row; row <= selEnd.row; row++) {
+                        const line = buffer.getLine(row);
+                        if (line) {
+                            const startCol = (row === selStart.row) ? selStart.col : 0;
+                            const endCol = (row === selEnd.row) ? selEnd.col : term.cols - 1;
+                            for (let col = startCol; col <= endCol; col++) {
+                                const cell = line.getCell(col);
+                                if (cell) text += cell.getChars() || ' ';
+                            }
+                            if (row < selEnd.row) text += '\\n';
+                        }
+                    }
+                    selection = text.replace(/\\s+$/gm, '');
+                }
+                if (selection) {
+                    try {
+                        await navigator.clipboard.writeText(selection);
+                    } catch (err) {
+                        const textarea = document.createElement('textarea');
+                        textarea.value = selection;
+                        textarea.style.position = 'fixed';
+                        textarea.style.opacity = '0';
+                        document.body.appendChild(textarea);
+                        textarea.select();
+                        document.execCommand('copy');
+                        document.body.removeChild(textarea);
+                    }
+                    exitSelMode();
+                }
+            };
+            floatCopyBtn.addEventListener('touchstart', handleFloatCopy, { passive: false });
+            floatCopyBtn.addEventListener('click', handleFloatCopy);
+        }
+        // History functions for iTerm-like scrolling
+        function addToHistory(data) {
+            historyBuffer.push(data);
+            // Trim if too large
+            const totalSize = historyBuffer.join('').length;
+            if (totalSize > MAX_HISTORY_SIZE) {
+                while (historyBuffer.length > 0 && historyBuffer.join('').length > MAX_HISTORY_SIZE * 0.8) {
+                    historyBuffer.shift();
                 }
-            }, { passive: true });
+            }
+        }
-            termEl.addEventListener('touchmove', (e) => {
-                if (touchScrollY !== null && e.touches.length === 1 && !selMode) {
-                    const deltaY = touchScrollY - e.touches[0].clientY;
-                    const lines = Math.round(deltaY / 20); // ~20px per line
-                    if (lines !== 0) {
-                        term.scrollLines(lines);
-                        touchScrollY = e.touches[0].clientY;
+        function clearHistory() {
+            historyBuffer = [];
+        }
+        function showHistoryOverlay() {
+            const overlay = document.getElementById('history-overlay');
+            const content = document.getElementById('history-content');
+            // Convert ANSI to HTML with colors using ansi_up
+            const ansi_up = new AnsiUp();
+            ansi_up.use_classes = false;
+            const html = ansi_up.ansi_to_html(historyBuffer.join(''));
+            content.innerHTML = html;
+            overlay.classList.add('show');
+            // Scroll to bottom of history
+            content.scrollTop = content.scrollHeight;
+            // Listen for any key to close
+            document.addEventListener('keydown', historyKeyHandler);
+        }
+        function historyKeyHandler(e) {
+            // Allow copy/paste shortcuts (Ctrl+C, Ctrl+V, Cmd+C, Cmd+V)
+            if ((e.ctrlKey || e.metaKey) && (e.key === 'c' || e.key === 'v' || e.key === 'a')) {
+                return; // Don't close on copy/paste/select-all
+            }
+            hideHistoryOverlay();
+            document.removeEventListener('keydown', historyKeyHandler);
+        }
+        function hideHistoryOverlay() {
+            document.getElementById('history-overlay').classList.remove('show');
+            document.removeEventListener('keydown', historyKeyHandler);
+            term.focus();
+        }
+        function setupHistoryOverlay() {
+            const closeBtn = document.getElementById('history-close');
+            const indicator = document.getElementById('history-indicator');
+            const overlay = document.getElementById('history-overlay');
+            closeBtn.addEventListener('click', hideHistoryOverlay);
+            closeBtn.addEventListener('touchstart', (e) => { e.preventDefault(); hideHistoryOverlay(); }, { passive: false });
+            indicator.addEventListener('click', showHistoryOverlay);
+            indicator.addEventListener('touchstart', (e) => { e.preventDefault(); showHistoryOverlay(); }, { passive: false });
+            // Track if already at top to detect "scroll up more" gesture
+            let atTopCount = 0;
+            let lastViewportY = -1;
+            const checkScrollAndMaybeOpenHistory = (scrollingUp) => {
+                if (!term || historyBuffer.length === 0) return;
+                const viewport = term.buffer.active.viewportY;
+                // If at top of scrollback and scrolling up, open history
+                if (viewport === 0 && scrollingUp) {
+                    atTopCount++;
+                    if (atTopCount >= 2) { // Need 2 scroll-up gestures at top
+                        showHistoryOverlay();
+                        atTopCount = 0;
                     }
+                } else {
+                    atTopCount = 0;
                 }
+                lastViewportY = viewport;
+            };
+            // Check on wheel scroll
+            const termContainer = document.getElementById('terminal-container');
+            termContainer.addEventListener('wheel', (e) => {
+                const scrollingUp = e.deltaY < 0;
+                setTimeout(() => checkScrollAndMaybeOpenHistory(scrollingUp), 50);
             }, { passive: true });
-            termEl.addEventListener('touchend', () => {
-                touchScrollY = null;
+            // Touch scroll detection
+            let touchStartY = 0;
+            termContainer.addEventListener('touchstart', (e) => {
+                touchStartY = e.touches[0].clientY;
+            }, { passive: true });
+            termContainer.addEventListener('touchend', (e) => {
+                const touchEndY = e.changedTouches[0].clientY;
+                const scrollingUp = touchEndY > touchStartY + 20; // Finger moved down = scroll up
+                if (scrollingUp) {
+                    setTimeout(() => checkScrollAndMaybeOpenHistory(true), 50);
+                }
             }, { passive: true });
         }
@@ -1241,6 +1427,7 @@ class TermitesServer {
                     '<span class="sep">@</span><span class="host">' + client.hostname + '</span>';
             }
             term.clear();
+            clearHistory(); // Clear history when switching clients
             ws.send(JSON.stringify({ type: 'select', clientId }));
             updateClientList();
             document.getElementById('drawer').classList.remove('open');
@@ -1252,6 +1439,7 @@ class TermitesServer {
             loadSettings();
             setupDrawer();
             setupMobileToolbar();
+            setupHistoryOverlay();
             term = new Terminal({
                 theme: themes[currentTheme], fontFamily: currentFont,
                 fontSize: currentFontSize, cursorBlink: true,
@@ -1394,6 +1582,7 @@ class TermitesServer {
                         break;
                     case 'output':
                         if (d.clientId === selectedClientId) {
+                            addToHistory(d.data);
                             term.write(d.data);
                             term.scrollToBottom();
                         }