rms-devremote 3.1.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,12 +48,9 @@ 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>
+  <!-- Window selector (dropdown from header) -->
+  <div id="win-dropdown" class="hidden">
+    <div id="win-list"></div>
   </div>
 
   <!-- Terminal -->
@@ -133,7 +132,7 @@ const CSS = `
   --muted: #888888;
   --border: #333333;
   --header-h: 44px;
-  --tabbar-h: 38px;
+  --tabbar-h: 0px;
   --input-h: 48px;
   --toolbar-h: 104px;
   --safe-t: env(safe-area-inset-top, 0px);
@@ -209,7 +208,7 @@ body { touch-action: none; }
 /* ── Info panel ──────────────────────────── */
 #info-panel {
   position: fixed;
-  top: calc(var(--header-h) + var(--tabbar-h) + var(--safe-t));
+  top: calc(var(--header-h) + var(--safe-t));
   left: 0; right: 0;
   background: var(--surface);
   border-bottom: 2px solid var(--border);
@@ -230,76 +229,53 @@ 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 {
+/* ── 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));
-  left: 0; right: 0;
-  height: var(--tabbar-h);
+  right: 0; left: 0;
   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;
+  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;
 }
-.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;
+#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: background 0.12s, border-color 0.12s, color 0.12s;
-  white-space: nowrap;
+  transition: border-color 0.12s, background 0.12s;
 }
-.tab-item:active { background: #222; }
-.tab-item.active {
-  background: rgba(0,255,170,0.1);
-  border-color: var(--accent);
-  color: var(--accent);
+.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;
 }
-.tab-close {
+.win-row.active .win-name { color: var(--accent); }
+.win-close {
+  width: 24px; height: 24px;
   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;
+  font-size: 16px; font-weight: 700;
+  color: var(--muted); background: none; border: none;
+  border-radius: 4px; cursor: pointer;
   -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); }
+.win-close:active { background: rgba(255,51,85,0.3); color: var(--danger); }
 
 /* ── Terminal ───────────────────────────── */
 #terminal-container {
   position: fixed;
-  top: calc(var(--header-h) + var(--tabbar-h) + var(--safe-t)); left: 0; right: 0;
+  top: calc(var(--header-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;
@@ -441,7 +417,6 @@ 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;
   }
@@ -557,7 +532,7 @@ const JS = `
     container.classList.add('hidden');
     inputBar.classList.add('hidden');
     toolbar.classList.add('hidden');
-    tabBar.classList.add('hidden');
+    toggleWinDropdown(false);
     disconnect.classList.remove('hidden');
     dcTitle.textContent = title;
     dcReason.textContent = reason;
@@ -909,48 +884,54 @@ 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');
+  // ── 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;
-        renderTabs(wins);
+        updateWinLabel(wins);
+        if (winDropdownOpen) renderWinDropdown(wins);
       })
       .catch(function() {});
   }
 
-  function renderTabs(wins) {
-    // Clear tabs safely (no innerHTML)
-    while (tabsList.firstChild) tabsList.removeChild(tabsList.firstChild);
-    if (!wins || wins.length === 0) return;
+  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;
+  }
 
-    // Show tab bar only when connected
-    if (connected) tabBar.classList.remove('hidden');
+  function renderWinDropdown(wins) {
+    while (winList.firstChild) winList.removeChild(winList.firstChild);
+    if (!wins) return;
 
     wins.forEach(function(w) {
-      var tab = document.createElement('div');
-      tab.className = 'tab-item' + (w.active ? ' active' : '');
+      var row = document.createElement('div');
+      row.className = 'win-row' + (w.active ? ' active' : '');
 
-      var label = document.createElement('span');
-      label.textContent = w.index + ':' + (w.name || 'bash');
-      tab.appendChild(label);
+      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 = 'tab-close';
+        closeBtn.className = 'win-close';
         closeBtn.textContent = '\\u00d7';
         closeBtn.setAttribute('tabindex', '-1');
         closeBtn.addEventListener('touchstart', function(e) {
-          e.stopPropagation();
-          e.preventDefault();
+          e.stopPropagation(); e.preventDefault();
           if (navigator.vibrate) navigator.vibrate(VIBRATE);
           sendWsMsg({ type: 'window-close', index: w.index });
         }, { passive: false });
@@ -959,31 +940,44 @@ const JS = `
           if (navigator.vibrate) navigator.vibrate(VIBRATE);
           sendWsMsg({ type: 'window-close', index: w.index });
         });
-        tab.appendChild(closeBtn);
+        row.appendChild(closeBtn);
       }
 
       // Switch on tap
-      tab.addEventListener('touchstart', function(e) {
+      row.addEventListener('touchstart', function(e) {
         e.preventDefault();
         if (navigator.vibrate) navigator.vibrate(VIBRATE);
         sendWsMsg({ type: 'window-switch', index: w.index });
+        toggleWinDropdown(false);
       }, { passive: false });
-      tab.addEventListener('click', function() {
+      row.addEventListener('click', function() {
         if (navigator.vibrate) navigator.vibrate(VIBRATE);
         sendWsMsg({ type: 'window-switch', index: w.index });
+        toggleWinDropdown(false);
       });
 
-      tabsList.appendChild(tab);
+      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
-  tabAdd.addEventListener('touchstart', function(e) {
+  btnNewWin.addEventListener('touchstart', function(e) {
     e.preventDefault();
     if (navigator.vibrate) navigator.vibrate(VIBRATE);
     sendWsMsg({ type: 'window-create' });
   }, { passive: false });
-  tabAdd.addEventListener('click', function() {
+  btnNewWin.addEventListener('click', function() {
     if (navigator.vibrate) navigator.vibrate(VIBRATE);
     sendWsMsg({ type: 'window-create' });
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rms-devremote",
-  "version": "3.1.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": {