rms-devremote 3.0.0 → 3.1.0

package/dist/server/frontend.js

@@ -46,6 +46,14 @@ export function buildFrontendHTML() {
     <div class="info-row"><span class="info-label">Uptime</span><span class="info-value" id="info-uptime">--</span></div>
   </div>
 
+  <!-- Tab bar (tmux windows) -->
+  <div id="tab-bar" class="hidden">
+    <div id="tabs-scroll">
+      <div id="tabs-list"></div>
+      <button id="tab-add" title="New window">+</button>
+    </div>
+  </div>
+
   <!-- Terminal -->
   <div id="terminal-container" class="hidden"></div>
 
@@ -125,6 +133,7 @@ const CSS = `
   --muted: #888888;
   --border: #333333;
   --header-h: 44px;
+  --tabbar-h: 38px;
   --input-h: 48px;
   --toolbar-h: 104px;
   --safe-t: env(safe-area-inset-top, 0px);
@@ -200,7 +209,7 @@ body { touch-action: none; }
 /* ── Info panel ──────────────────────────── */
 #info-panel {
   position: fixed;
-  top: calc(var(--header-h) + var(--safe-t));
+  top: calc(var(--header-h) + var(--tabbar-h) + var(--safe-t));
   left: 0; right: 0;
   background: var(--surface);
   border-bottom: 2px solid var(--border);
@@ -221,10 +230,76 @@ 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; }
 
+/* ── Tab bar ────────────────────────────── */
+#tab-bar {
+  position: fixed;
+  top: calc(var(--header-h) + var(--safe-t));
+  left: 0; right: 0;
+  height: var(--tabbar-h);
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  z-index: 95;
+  display: flex; align-items: center;
+}
+#tab-bar.hidden { display: none !important; }
+#tabs-scroll {
+  display: flex; align-items: center;
+  overflow-x: auto; overflow-y: hidden;
+  width: 100%; height: 100%;
+  padding: 0 calc(6px + var(--safe-l)) 0 calc(6px + var(--safe-r));
+  gap: 4px;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+}
+#tabs-scroll::-webkit-scrollbar { display: none; }
+#tabs-list {
+  display: flex; align-items: center; gap: 4px;
+  flex-shrink: 0;
+}
+.tab-item {
+  display: flex; align-items: center; gap: 6px;
+  flex-shrink: 0;
+  height: 28px; padding: 0 10px;
+  background: var(--surface2); border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 12px; font-weight: 600;
+  color: var(--muted); cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background 0.12s, border-color 0.12s, color 0.12s;
+  white-space: nowrap;
+}
+.tab-item:active { background: #222; }
+.tab-item.active {
+  background: rgba(0,255,170,0.1);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.tab-close {
+  display: flex; align-items: center; justify-content: center;
+  width: 16px; height: 16px;
+  font-size: 13px; font-weight: 700;
+  color: var(--muted); border: none; background: none;
+  border-radius: 3px; cursor: pointer; padding: 0;
+  -webkit-tap-highlight-color: transparent;
+  line-height: 1;
+}
+.tab-close:active { background: rgba(255,51,85,0.3); color: var(--danger); }
+#tab-add {
+  flex-shrink: 0;
+  width: 28px; height: 28px;
+  background: var(--surface2); border: 1px dashed var(--border);
+  border-radius: 6px;
+  color: var(--muted); font-size: 18px; font-weight: 400;
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+  -webkit-tap-highlight-color: transparent;
+  transition: border-color 0.12s, color 0.12s;
+}
+#tab-add:active { border-color: var(--accent); color: var(--accent); }
+
 /* ── Terminal ───────────────────────────── */
 #terminal-container {
   position: fixed;
-  top: calc(var(--header-h) + var(--safe-t)); left: 0; right: 0;
+  top: calc(var(--header-h) + var(--tabbar-h) + var(--safe-t)); left: 0; right: 0;
   bottom: calc(var(--input-h) + var(--toolbar-h) + var(--safe-b));
   background: var(--bg);
   opacity: 0; animation: fadeIn 0.3s 0.2s forwards;
@@ -366,6 +441,7 @@ body.keyboard-open #terminal-container { bottom: calc(var(--input-h) + var(--saf
 @media (orientation: landscape) {
   :root {
     --header-h: 36px;
+    --tabbar-h: 32px;
     --input-h: 40px;
     --toolbar-h: 52px;
   }
@@ -472,6 +548,7 @@ const JS = `
     inputBar.classList.remove('hidden');
     toolbar.classList.remove('hidden');
     connected = true;
+    startWindowsPoll();
     setTimeout(doResize, 50);
     showGestureHint();
   }
@@ -480,11 +557,13 @@ const JS = `
     container.classList.add('hidden');
     inputBar.classList.add('hidden');
     toolbar.classList.add('hidden');
+    tabBar.classList.add('hidden');
     disconnect.classList.remove('hidden');
     dcTitle.textContent = title;
     dcReason.textContent = reason;
     dcIcon.className = 'dc-icon' + (iconClass ? ' ' + iconClass : '');
     connected = false;
+    stopWindowsPoll();
   }
 
   function connect() {
@@ -509,6 +588,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 +909,101 @@ const JS = `
     navigator.serviceWorker.register('/sw.js').catch(function() {});
   }
 
+  // ── Tab bar (tmux windows) ──────────────────────────────
+  var tabBar = document.getElementById('tab-bar');
+  var tabsList = document.getElementById('tabs-list');
+  var tabAdd = document.getElementById('tab-add');
+  var windowsCache = [];
+  var windowsPollTimer = null;
+
+  function fetchWindows() {
+    fetch('/windows', { credentials: 'same-origin' })
+      .then(function(r) { return r.json(); })
+      .then(function(wins) {
+        windowsCache = wins;
+        renderTabs(wins);
+      })
+      .catch(function() {});
+  }
+
+  function renderTabs(wins) {
+    // Clear tabs safely (no innerHTML)
+    while (tabsList.firstChild) tabsList.removeChild(tabsList.firstChild);
+    if (!wins || wins.length === 0) return;
+
+    // Show tab bar only when connected
+    if (connected) tabBar.classList.remove('hidden');
+
+    wins.forEach(function(w) {
+      var tab = document.createElement('div');
+      tab.className = 'tab-item' + (w.active ? ' active' : '');
+
+      var label = document.createElement('span');
+      label.textContent = w.index + ':' + (w.name || 'bash');
+      tab.appendChild(label);
+
+      // Close button (only if more than 1 window)
+      if (wins.length > 1) {
+        var closeBtn = document.createElement('button');
+        closeBtn.className = 'tab-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 });
+        });
+        tab.appendChild(closeBtn);
+      }
+
+      // Switch on tap
+      tab.addEventListener('touchstart', function(e) {
+        e.preventDefault();
+        if (navigator.vibrate) navigator.vibrate(VIBRATE);
+        sendWsMsg({ type: 'window-switch', index: w.index });
+      }, { passive: false });
+      tab.addEventListener('click', function() {
+        if (navigator.vibrate) navigator.vibrate(VIBRATE);
+        sendWsMsg({ type: 'window-switch', index: w.index });
+      });
+
+      tabsList.appendChild(tab);
+    });
+  }
+
+  // New window button
+  tabAdd.addEventListener('touchstart', function(e) {
+    e.preventDefault();
+    if (navigator.vibrate) navigator.vibrate(VIBRATE);
+    sendWsMsg({ type: 'window-create' });
+  }, { passive: false });
+  tabAdd.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.1.0",
   "description": "Control your terminal remotely from your phone — mobile PWA with push notifications and zero open ports",
   "type": "module",
   "bin": {