rms-devremote 3.0.0 → 3.2.0

package/dist/index.js

@@ -4,7 +4,7 @@ const program = new Command();
 program
     .name('rms-devremote')
     .description('Share your local terminal remotely with push notifications')
-    .version('2.0.0');
+    .version('3.2.0');
 // Helper: lazy-load a command module by path (relative to dist/)
 async function runCommand(modulePath) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/server/frontend.js

@@ -32,6 +32,8 @@ export function buildFrontendHTML() {
       <span class="h-status" id="status-text">connecting</span>
     </div>
     <div class="h-right">
+      <button class="h-btn" id="btn-wins" title="Windows"><span id="win-label">1</span></button>
+      <button class="h-btn" id="btn-new-win" title="New window">+</button>
       <button class="h-btn" id="btn-kb" title="Keyboard">&#x2328;</button>
       <button class="h-btn" id="btn-toggle" title="Toolbar">&#x2699;</button>
     </div>
@@ -46,6 +48,11 @@ export function buildFrontendHTML() {
     <div class="info-row"><span class="info-label">Uptime</span><span class="info-value" id="info-uptime">--</span></div>
   </div>
 
+  <!-- Window selector (dropdown from header) -->
+  <div id="win-dropdown" class="hidden">
+    <div id="win-list"></div>
+  </div>
+
   <!-- Terminal -->
   <div id="terminal-container" class="hidden"></div>
 
@@ -125,6 +132,7 @@ const CSS = `
   --muted: #888888;
   --border: #333333;
   --header-h: 44px;
+  --tabbar-h: 0px;
   --input-h: 48px;
   --toolbar-h: 104px;
   --safe-t: env(safe-area-inset-top, 0px);
@@ -221,6 +229,49 @@ body { touch-action: none; }
 .info-value.err { color: var(--danger); }
 .info-value.info-path { font-size: 12px; max-width: 60%; text-align: right; word-break: break-all; }
 
+/* ── Window selector dropdown ───────────── */
+#btn-wins {
+  font-size: 14px; font-weight: 800; min-width: 36px;
+}
+#btn-wins.active { border-color: var(--accent); color: var(--accent); background: rgba(0,255,170,0.08); }
+#btn-new-win { font-size: 22px; font-weight: 400; }
+#win-dropdown {
+  position: fixed;
+  top: calc(var(--header-h) + var(--safe-t));
+  right: 0; left: 0;
+  background: var(--surface);
+  border-bottom: 2px solid var(--border);
+  padding: 8px calc(14px + var(--safe-l)) 10px calc(14px + var(--safe-r));
+  z-index: 92;
+  animation: slideDown 0.15s ease-out;
+  display: flex; flex-direction: column; gap: 4px;
+}
+#win-dropdown.hidden { display: none !important; }
+.win-row {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 12px;
+  background: var(--surface2); border: 2px solid var(--border);
+  border-radius: 8px; cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: border-color 0.12s, background 0.12s;
+}
+.win-row:active { background: #222; }
+.win-row.active { border-color: var(--accent); background: rgba(0,255,170,0.06); }
+.win-name {
+  font-size: 14px; font-weight: 600; color: var(--text);
+  font-family: 'JetBrains Mono', monospace;
+}
+.win-row.active .win-name { color: var(--accent); }
+.win-close {
+  width: 24px; height: 24px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 16px; font-weight: 700;
+  color: var(--muted); background: none; border: none;
+  border-radius: 4px; cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.win-close:active { background: rgba(255,51,85,0.3); color: var(--danger); }
+
 /* ── Terminal ───────────────────────────── */
 #terminal-container {
   position: fixed;
@@ -472,6 +523,7 @@ const JS = `
     inputBar.classList.remove('hidden');
     toolbar.classList.remove('hidden');
     connected = true;
+    startWindowsPoll();
     setTimeout(doResize, 50);
     showGestureHint();
   }
@@ -480,11 +532,13 @@ const JS = `
     container.classList.add('hidden');
     inputBar.classList.add('hidden');
     toolbar.classList.add('hidden');
+    toggleWinDropdown(false);
     disconnect.classList.remove('hidden');
     dcTitle.textContent = title;
     dcReason.textContent = reason;
     dcIcon.className = 'dc-icon' + (iconClass ? ' ' + iconClass : '');
     connected = false;
+    stopWindowsPoll();
   }
 
   function connect() {
@@ -509,6 +563,7 @@ const JS = `
       try {
         var msg = JSON.parse(evt.data);
         if (msg.type === 'output') term.write(msg.data);
+        else if (msg.type === 'windows-updated') fetchWindows();
         else if (msg.type === 'exit') {
           showDisconnect('Session Ended', 'The tmux session has ended.', 'error');
           setStatus('session ended', false);
@@ -829,6 +884,120 @@ const JS = `
     navigator.serviceWorker.register('/sw.js').catch(function() {});
   }
 
+  // ── Window management (header buttons + dropdown) ───────
+  var btnWins = document.getElementById('btn-wins');
+  var btnNewWin = document.getElementById('btn-new-win');
+  var winLabel = document.getElementById('win-label');
+  var winDropdown = document.getElementById('win-dropdown');
+  var winList = document.getElementById('win-list');
+  var windowsCache = [];
+  var windowsPollTimer = null;
+  var winDropdownOpen = false;
+
+  function fetchWindows() {
+    fetch('/windows', { credentials: 'same-origin' })
+      .then(function(r) { return r.json(); })
+      .then(function(wins) {
+        windowsCache = wins;
+        updateWinLabel(wins);
+        if (winDropdownOpen) renderWinDropdown(wins);
+      })
+      .catch(function() {});
+  }
+
+  function updateWinLabel(wins) {
+    if (!wins || wins.length === 0) { winLabel.textContent = '0'; return; }
+    var active = wins.find(function(w) { return w.active; });
+    winLabel.textContent = active ? active.index : wins.length;
+  }
+
+  function renderWinDropdown(wins) {
+    while (winList.firstChild) winList.removeChild(winList.firstChild);
+    if (!wins) return;
+
+    wins.forEach(function(w) {
+      var row = document.createElement('div');
+      row.className = 'win-row' + (w.active ? ' active' : '');
+
+      var name = document.createElement('span');
+      name.className = 'win-name';
+      name.textContent = w.index + ' : ' + (w.name || 'bash');
+      row.appendChild(name);
+
+      // Close button (only if more than 1 window)
+      if (wins.length > 1) {
+        var closeBtn = document.createElement('button');
+        closeBtn.className = 'win-close';
+        closeBtn.textContent = '\\u00d7';
+        closeBtn.setAttribute('tabindex', '-1');
+        closeBtn.addEventListener('touchstart', function(e) {
+          e.stopPropagation(); e.preventDefault();
+          if (navigator.vibrate) navigator.vibrate(VIBRATE);
+          sendWsMsg({ type: 'window-close', index: w.index });
+        }, { passive: false });
+        closeBtn.addEventListener('click', function(e) {
+          e.stopPropagation();
+          if (navigator.vibrate) navigator.vibrate(VIBRATE);
+          sendWsMsg({ type: 'window-close', index: w.index });
+        });
+        row.appendChild(closeBtn);
+      }
+
+      // Switch on tap
+      row.addEventListener('touchstart', function(e) {
+        e.preventDefault();
+        if (navigator.vibrate) navigator.vibrate(VIBRATE);
+        sendWsMsg({ type: 'window-switch', index: w.index });
+        toggleWinDropdown(false);
+      }, { passive: false });
+      row.addEventListener('click', function() {
+        if (navigator.vibrate) navigator.vibrate(VIBRATE);
+        sendWsMsg({ type: 'window-switch', index: w.index });
+        toggleWinDropdown(false);
+      });
+
+      winList.appendChild(row);
+    });
+  }
+
+  function toggleWinDropdown(force) {
+    winDropdownOpen = force !== undefined ? force : !winDropdownOpen;
+    winDropdown.classList.toggle('hidden', !winDropdownOpen);
+    btnWins.classList.toggle('active', winDropdownOpen);
+    // Close info panel if open
+    if (winDropdownOpen && infoOpen) { infoOpen = false; infoPanel.classList.add('hidden'); }
+    if (winDropdownOpen) renderWinDropdown(windowsCache);
+  }
+
+  btnWins.addEventListener('click', function() { toggleWinDropdown(); });
+
+  // New window button
+  btnNewWin.addEventListener('touchstart', function(e) {
+    e.preventDefault();
+    if (navigator.vibrate) navigator.vibrate(VIBRATE);
+    sendWsMsg({ type: 'window-create' });
+  }, { passive: false });
+  btnNewWin.addEventListener('click', function() {
+    if (navigator.vibrate) navigator.vibrate(VIBRATE);
+    sendWsMsg({ type: 'window-create' });
+  });
+
+  function sendWsMsg(obj) {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(obj));
+    }
+  }
+
+  function startWindowsPoll() {
+    stopWindowsPoll();
+    fetchWindows();
+    windowsPollTimer = setInterval(fetchWindows, 2000);
+  }
+
+  function stopWindowsPoll() {
+    if (windowsPollTimer) { clearInterval(windowsPollTimer); windowsPollTimer = null; }
+  }
+
   // ── Info panel ────────────────────────────────────────────
   var infoPanel = document.getElementById('info-panel');
   var infoOpen = false;

package/dist/server/index.js

@@ -107,6 +107,23 @@ app.get('/', (_req, res) => {
 app.get('/health', (_req, res) => {
     res.json({ status: 'ok', uptime: process.uptime() });
 });
+// ── tmux windows list ──────────────────────────────────────────────────
+app.get('/windows', (_req, res) => {
+    try {
+        const raw = execFileSync('tmux', [
+            'list-windows', '-t', 'devremote',
+            '-F', '#{window_index}\t#{window_name}\t#{window_active}',
+        ], { encoding: 'utf8', timeout: 3000 }).trim();
+        const windows = raw.split('\n').map((line) => {
+            const [index, name, active] = line.split('\t');
+            return { index: Number(index), name, active: active === '1' };
+        });
+        res.json(windows);
+    }
+    catch {
+        res.json([]);
+    }
+});
 app.get('/status', (_req, res) => {
     // Get tmux current pane path
     let tmuxPath = '';
@@ -201,6 +218,31 @@ wss.on('connection', (ws) => {
                 activeSession.resize(parsed.cols, parsed.rows);
                 return;
             }
+            // ── Window management (tmux) ──────────────────────────
+            if (parsed.type === 'window-create') {
+                try {
+                    execFileSync('tmux', ['new-window', '-t', 'devremote'], { timeout: 3000 });
+                    ws.send(JSON.stringify({ type: 'windows-updated' }));
+                }
+                catch { /* ignore */ }
+                return;
+            }
+            if (parsed.type === 'window-switch' && parsed.index !== undefined) {
+                try {
+                    execFileSync('tmux', ['select-window', '-t', `devremote:${parsed.index}`], { timeout: 3000 });
+                    ws.send(JSON.stringify({ type: 'windows-updated' }));
+                }
+                catch { /* ignore */ }
+                return;
+            }
+            if (parsed.type === 'window-close' && parsed.index !== undefined) {
+                try {
+                    execFileSync('tmux', ['kill-window', '-t', `devremote:${parsed.index}`], { timeout: 3000 });
+                    ws.send(JSON.stringify({ type: 'windows-updated' }));
+                }
+                catch { /* ignore */ }
+                return;
+            }
         }
         catch {
             // Ignore malformed messages

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rms-devremote",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "Control your terminal remotely from your phone — mobile PWA with push notifications and zero open ports",
   "type": "module",
   "bin": {