cli-tunnel 1.2.0-beta.11 → 1.2.0-beta.13

package/dist/index.js

@@ -338,7 +338,7 @@ const server = http.createServer(async (req, res) => {
                 const baseId = t.tunnelId?.split('.')[0] || t.tunnelId;
                 const token = tokenMap.get(baseId) || tokenMap.get(t.tunnelId);
                 if (token)
-                    session.token = token;
+                    session.hasToken = true;
                 return session;
             });
             res.writeHead(200, { 'Content-Type': 'application/json', 'X-Frame-Options': 'DENY', 'X-Content-Type-Options': 'nosniff' });
@@ -434,8 +434,6 @@ const wss = new WebSocketServer({
     server,
     maxPayload: 1048576,
     verifyClient: (info) => {
-        if (hubMode)
-            return true; // Hub mode doesn't need WS auth
         // F-18: Session expiry
         if (Date.now() - sessionCreatedAt > SESSION_TTL)
             return false;
@@ -738,6 +736,21 @@ async function main() {
         // Keep process alive
         await new Promise(() => { });
     }
+    // Wait for user to scan QR / copy URL before starting the CLI tool
+    if (hasTunnel) {
+        console.log(`  ${BOLD}Press any key to start ${command}...${RESET}`);
+        await new Promise((resolve) => {
+            if (process.stdin.isTTY)
+                process.stdin.setRawMode(true);
+            process.stdin.resume();
+            process.stdin.once('data', () => {
+                if (process.stdin.isTTY)
+                    process.stdin.setRawMode(false);
+                process.stdin.pause();
+                resolve();
+            });
+        });
+    }
     console.log(`  ${DIM}Starting ${command}...${RESET}\n`);
     // Spawn PTY
     const nodePty = await import('node-pty');
@@ -766,7 +779,9 @@ async function main() {
     const DANGEROUS_VARS = new Set(['NODE_OPTIONS', 'NODE_REPL_HISTORY', 'NODE_EXTRA_CA_CERTS',
         'NODE_PATH', 'NODE_REDIRECT_WARNINGS', 'NODE_PENDING_DEPRECATION',
         'UV_THREADPOOL_SIZE', 'LD_PRELOAD', 'DYLD_INSERT_LIBRARIES',
-        'SSH_AUTH_SOCK', 'GPG_TTY']);
+        'SSH_AUTH_SOCK', 'GPG_TTY',
+        'PYTHONPATH', 'BASH_ENV', 'BASH_FUNC', 'JAVA_TOOL_OPTIONS', 'JAVA_OPTIONS', '_JAVA_OPTIONS',
+        'PROMPT_COMMAND', 'ENV', 'ZDOTDIR', 'PERL5OPT', 'RUBYOPT']);
     const sensitivePattern = /token|secret|key|password|credential|api_key|private_key|access_key|connection_string|auth|kubeconfig|docker_host|docker_config/i;
     const safeEnv = {};
     for (const [k, v] of Object.entries(process.env)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cli-tunnel",
-  "version": "1.2.0-beta.11",
+  "version": "1.2.0-beta.13",
   "description": "Tunnel any CLI app to your phone — PTY + devtunnel + xterm.js",
   "type": "module",
   "main": "dist/index.js",

package/remote-ui/app.js

@@ -47,7 +47,10 @@
   const termContainer = $('#terminal-container');
   let currentView = 'terminal'; // 'dashboard', 'terminal', or 'grid'
   let cachedSessions = [];
-  let gridTerminals = []; // { xterm, fitAddon, ws, session }
+  let gridTerminals = []; // { xterm, fitAddon, ws, session, panel }
+  var gridMode = 'thumbnails';
+  var focusedIndex = 0;
+  var tmuxPreset = 'equal';
 
   // ─── xterm.js Terminal ───────────────────────────────────
   let xterm = null;
@@ -148,17 +151,17 @@
         '</div>';
     } else {
       html += filtered.map(s => {
-        const sessionUrl = s.token ? s.url + '?token=' + encodeURIComponent(s.token) : '';
+        const hasAccess = s.hasToken;
         return `
-        <div class="session-card" ${s.online && sessionUrl ? 'data-session-url="' + escapeHtml(sessionUrl) + '"' : ''}>
+        <div class="session-card" ${s.online && hasAccess ? 'data-session-port="' + s.port + '" data-session-base-url="' + escapeHtml(s.url) + '"' : ''}>
           <span class="status-dot ${s.online ? 'online' : 'offline'}"></span>
           <div class="info">
             <div class="session-name">${escapeHtml(s.name)}</div>
             <div class="repo">📦 ${escapeHtml(s.repo)}</div>
             <div class="branch">🌿 ${escapeHtml(s.branch)}</div>
-            <div class="machine">💻 ${escapeHtml(s.machine)}${!s.token && s.online ? ' 🔒' : ''}</div>
+            <div class="machine">💻 ${escapeHtml(s.machine)}${!hasAccess && s.online ? ' 🔒' : ''}</div>
           </div>
-          ${s.online && sessionUrl ? '<span class="arrow">→</span>' :
+          ${s.online && hasAccess ? '<span class="arrow">→</span>' :
             !s.online ? '<button data-delete-id="' + escapeHtml(s.id) + '" style="background:none;border:none;color:var(--red);cursor:pointer;font-size:14px" title="Remove">✕</button>'
             : '<span style="color:var(--text-dim);font-size:11px">remote</span>'}
         </div>`;
@@ -167,8 +170,25 @@
     dashboard.innerHTML = html;
     cachedSessions = sessions;
     // Event delegation
-    dashboard.querySelectorAll('.session-card[data-session-url]').forEach(function(card) {
-      card.addEventListener('click', function() { openSession(card.dataset.sessionUrl); });
+    dashboard.querySelectorAll('.session-card[data-session-port]').forEach(function(card) {
+      card.addEventListener('click', function() {
+        var port = card.dataset.sessionPort;
+        var baseUrl = card.dataset.sessionBaseUrl;
+        var tokenParam = new URLSearchParams(window.location.search).get('token');
+        var proxyUrl = '/api/proxy/ticket/' + port;
+        fetch(proxyUrl, {
+          method: 'POST',
+          headers: tokenParam ? { 'Authorization': 'Bearer ' + tokenParam } : {}
+        }).then(function(r) { return r.json(); }).then(function(data) {
+          if (data.ticket) {
+            window.location.href = baseUrl + '?ticket=' + encodeURIComponent(data.ticket);
+          } else {
+            window.location.href = baseUrl;
+          }
+        }).catch(function() {
+          window.location.href = baseUrl;
+        });
+      });
     });
     dashboard.querySelectorAll('[data-delete-id]').forEach(function(btn) {
       btn.addEventListener('click', function(e) { e.stopPropagation(); deleteSession(btn.dataset.deleteId); });
@@ -207,15 +227,18 @@
     loadSessions();
   };
 
-  // ─── Grid View (tmux-style multi-terminal) ────────────────
+  // ─── Grid View (multi-terminal with layout modes) ───────────
   function showGridView(sessions) {
-    const connectable = sessions.filter(function(s) { return s.online && s.token; });
+    var connectable = sessions.filter(function(s) { return s.online && s.token; });
     if (connectable.length === 0) return;
 
     // Clean up previous grid
     destroyGrid();
 
     currentView = 'grid';
+    gridMode = 'thumbnails';
+    focusedIndex = 0;
+    tmuxPreset = 'equal';
     dashboard.classList.add('hidden');
     terminal.classList.add('hidden');
     termContainer.classList.add('hidden');
@@ -230,30 +253,95 @@
     gridEl.classList.remove('hidden');
     gridEl.innerHTML = '';
 
-    // Calculate grid dimensions
-    var cols = connectable.length <= 2 ? connectable.length : connectable.length <= 4 ? 2 : 3;
-    gridEl.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';
+    // ── Toolbar ──
+    var toolbar = document.createElement('div');
+    toolbar.className = 'grid-toolbar';
+
+    var modes = [
+      { id: 'thumbnails', label: '\u229E Tiles' },
+      { id: 'tmux', label: '\u229F Tmux' },
+      { id: 'focus', label: '\u25C9 Focus' },
+      { id: 'fullscreen', label: '\u2A21 Full' }
+    ];
+    modes.forEach(function(m) {
+      var btn = document.createElement('button');
+      btn.textContent = m.label;
+      btn.dataset.mode = m.id;
+      if (m.id === gridMode) btn.classList.add('active');
+      btn.addEventListener('click', function() { switchGridMode(m.id); });
+      toolbar.appendChild(btn);
+    });
+
+    // Tmux preset buttons (visible only in tmux mode)
+    var presetGroup = document.createElement('span');
+    presetGroup.className = 'grid-toolbar-presets hidden';
+    presetGroup.id = 'tmux-presets';
+    var presets = [
+      { id: 'equal', label: '\u2550 Equal' },
+      { id: 'main-side', label: '\u2590 Main+Side' },
+      { id: 'stacked', label: '\u2261 Stacked' }
+    ];
+    presets.forEach(function(p) {
+      var btn = document.createElement('button');
+      btn.textContent = p.label;
+      btn.dataset.preset = p.id;
+      if (p.id === tmuxPreset) btn.classList.add('active');
+      btn.addEventListener('click', function() { switchTmuxPreset(p.id); });
+      presetGroup.appendChild(btn);
+    });
+    toolbar.appendChild(presetGroup);
+
+    var spacer = document.createElement('span');
+    spacer.className = 'spacer';
+    toolbar.appendChild(spacer);
+
+    var listBtn = document.createElement('button');
+    listBtn.textContent = '\u2190 List';
+    listBtn.addEventListener('click', function() {
+      destroyGrid();
+      currentView = 'dashboard';
+      dashboard.classList.remove('hidden');
+      if ($('#btn-sessions')) $('#btn-sessions').textContent = 'Terminal';
+      loadSessions();
+    });
+    toolbar.appendChild(listBtn);
+    gridEl.appendChild(toolbar);
+
+    // ── Content container ──
+    var contentEl = document.createElement('div');
+    contentEl.id = 'grid-content';
+    gridEl.appendChild(contentEl);
 
-    connectable.forEach(function(s) {
+    // ── Create panels & connect ──
+    connectable.forEach(function(s, index) {
       var panel = document.createElement('div');
       panel.className = 'grid-panel';
+      panel.dataset.index = index;
 
-      // Header
       var header = document.createElement('div');
       header.className = 'grid-panel-header';
-      header.innerHTML = '<span class="grid-panel-name">' + escapeHtml(s.name) + '</span>' +
-        '<span class="grid-panel-machine">' + escapeHtml(s.machine) + '</span>' +
-        '<span class="grid-panel-status">●</span>';
+      var nameSpan = document.createElement('span');
+      nameSpan.className = 'grid-panel-name';
+      nameSpan.textContent = s.name;
+      var machineSpan = document.createElement('span');
+      machineSpan.className = 'grid-panel-machine';
+      machineSpan.textContent = s.machine;
+      var statusDot = document.createElement('span');
+      statusDot.className = 'grid-panel-status';
+      statusDot.textContent = '\u25CF';
+      header.appendChild(nameSpan);
+      header.appendChild(machineSpan);
+      header.appendChild(statusDot);
       panel.appendChild(header);
 
-      // Terminal container
       var termDiv = document.createElement('div');
       termDiv.className = 'grid-panel-terminal';
       panel.appendChild(termDiv);
 
-      gridEl.appendChild(panel);
+      // Append to contentEl so xterm.open has a DOM-attached container
+      contentEl.appendChild(panel);
 
-      // Create xterm instance for this panel
+      // xterm instance
       var panelXterm = new Terminal({
         theme: {
           background: '#0d1117', foreground: '#c9d1d9', cursor: '#3fb950',
@@ -268,13 +356,11 @@
       panelXterm.loadAddon(panelFit);
       panelXterm.open(termDiv);
 
-      // Delay fit to ensure container has size
-      setTimeout(function() { panelFit.fit(); }, 100);
+      // Store entry before async connect so index is stable
+      var entry = { xterm: panelXterm, fitAddon: panelFit, ws: null, session: s, panel: panel };
+      gridTerminals.push(entry);
 
       // Connect WebSocket to this session
-      var statusDot = header.querySelector('.grid-panel-status');
-      var panelWs = null;
-
       (function connectPanel() {
         // Use hub's proxy endpoint to get a ticket for the session
         var tokenParam = new URLSearchParams(window.location.search).get('token');
@@ -288,7 +374,8 @@
           if (!resp.ok) throw new Error('Auth failed');
           return resp.json();
         }).then(function(data) {
-          panelWs = new WebSocket(wsBase + '?ticket=' + encodeURIComponent(data.ticket));
+          var panelWs = new WebSocket(wsBase + '?ticket=' + encodeURIComponent(data.ticket));
+          entry.ws = panelWs;
 
           panelWs.onopen = function() {
             if (statusDot) { statusDot.style.color = 'var(--green)'; statusDot.title = 'Connected'; }
@@ -314,32 +401,183 @@
               panelWs.send(JSON.stringify({ type: 'pty_input', data: data }));
             }
           });
-
-          gridTerminals.push({ xterm: panelXterm, fitAddon: panelFit, ws: panelWs, session: s });
         }).catch(function() {
           if (statusDot) { statusDot.style.color = 'var(--red)'; statusDot.title = 'Auth failed'; }
-          gridTerminals.push({ xterm: panelXterm, fitAddon: panelFit, ws: null, session: s });
         });
       })();
+    });
+
+    // ── Event delegation for panel clicks ──
+    contentEl.addEventListener('click', function(e) {
+      var panel = e.target.closest('.grid-panel');
+      if (!panel) return;
+      var idx = parseInt(panel.dataset.index, 10);
+      if (isNaN(idx)) return;
+
+      if (gridMode === 'thumbnails') {
+        focusedIndex = idx;
+        switchGridMode('fullscreen');
+      } else if (gridMode === 'focus' && panel.classList.contains('focus-strip')) {
+        focusedIndex = idx;
+        applyGridLayout('focus');
+      } else if (gridMode === 'tmux') {
+        focusedIndex = idx;
+        contentEl.querySelectorAll('.grid-panel').forEach(function(p) { p.classList.remove('active'); });
+        panel.classList.add('active');
+      }
+    });
+
+    // Apply initial layout
+    applyGridLayout(gridMode);
+
+    // Handle window resize
+    window.addEventListener('resize', fitGridPanels);
+    if ($('#btn-sessions')) { $('#btn-sessions').textContent = 'List'; }
+  }
+
+  function switchGridMode(mode) {
+    gridMode = mode;
+    if (mode === 'fullscreen') {
+      $('#input-area').classList.remove('hidden');
+      $('#input-form').classList.add('hidden');
+    } else {
+      $('#input-area').classList.add('hidden');
+    }
+    applyGridLayout(mode);
+  }
 
-      // Click header to go full-screen on this session
-      header.addEventListener('click', function() {
-        window.location.href = s.url + '?token=' + encodeURIComponent(s.token);
+  function switchTmuxPreset(preset) {
+    tmuxPreset = preset;
+    var presetGroup = document.getElementById('tmux-presets');
+    if (presetGroup) {
+      presetGroup.querySelectorAll('[data-preset]').forEach(function(btn) {
+        btn.classList.toggle('active', btn.dataset.preset === preset);
       });
+    }
+    if (gridMode === 'tmux') applyGridLayout('tmux');
+  }
+
+  function applyGridLayout(mode) {
+    gridMode = mode;
+    var contentEl = document.getElementById('grid-content');
+    if (!contentEl || gridTerminals.length === 0) return;
 
-      gridTerminals.push({ xterm: panelXterm, fitAddon: panelFit, ws: panelWs, session: s });
+    // Clamp focusedIndex
+    if (focusedIndex >= gridTerminals.length) focusedIndex = 0;
+
+    // Update toolbar button states
+    var toolbar = contentEl.parentElement.querySelector('.grid-toolbar');
+    if (toolbar) {
+      toolbar.querySelectorAll('[data-mode]').forEach(function(btn) {
+        btn.classList.toggle('active', btn.dataset.mode === mode);
+      });
+      var presetsEl = document.getElementById('tmux-presets');
+      if (presetsEl) presetsEl.classList.toggle('hidden', mode !== 'tmux');
+    }
+
+    // Detach all panels without destroying them
+    gridTerminals.forEach(function(gt, i) {
+      if (gt.panel.parentNode) gt.panel.parentNode.removeChild(gt.panel);
+      gt.panel.className = 'grid-panel';
+      gt.panel.dataset.index = i;
+      var termDiv = gt.panel.querySelector('.grid-panel-terminal');
+      if (termDiv) termDiv.style.cssText = '';
+      gt.panel.style.cssText = '';
     });
 
-    // Handle window resize for grid panels
-    window.addEventListener('resize', fitGridPanels);
+    // Remove leftover elements (focus-strips, back-to-grid button)
+    while (contentEl.firstChild) contentEl.removeChild(contentEl.firstChild);
+
+    // Reset content styles
+    contentEl.className = 'mode-' + mode;
+    contentEl.style.cssText = '';
+
+    switch (mode) {
+      case 'thumbnails':
+        gridTerminals.forEach(function(gt) {
+          gt.panel.classList.add('thumbnail');
+          var termDiv = gt.panel.querySelector('.grid-panel-terminal');
+          termDiv.style.width = '560px';
+          termDiv.style.height = '360px';
+          termDiv.style.transform = 'scale(0.5)';
+          termDiv.style.transformOrigin = 'top left';
+          contentEl.appendChild(gt.panel);
+        });
+        break;
 
-    // Add back button
-    if ($('#btn-sessions')) { $('#btn-sessions').textContent = 'List'; }
+      case 'tmux':
+        gridTerminals.forEach(function(gt, i) {
+          if (i === focusedIndex) gt.panel.classList.add('active');
+          contentEl.appendChild(gt.panel);
+        });
+        if (tmuxPreset === 'equal') {
+          var cols = gridTerminals.length <= 2 ? gridTerminals.length : gridTerminals.length <= 4 ? 2 : 3;
+          contentEl.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';
+        } else if (tmuxPreset === 'main-side') {
+          contentEl.style.gridTemplateColumns = '70% 30%';
+          var sideCount = Math.max(gridTerminals.length - 1, 1);
+          contentEl.style.gridTemplateRows = 'repeat(' + sideCount + ', 1fr)';
+          if (gridTerminals.length > 0) gridTerminals[0].panel.style.gridRow = '1 / -1';
+        } else if (tmuxPreset === 'stacked') {
+          contentEl.style.gridTemplateColumns = '1fr';
+        }
+        break;
+
+      case 'focus':
+        var mainGt = gridTerminals[focusedIndex];
+        mainGt.panel.classList.add('focus-main');
+        contentEl.appendChild(mainGt.panel);
+        if (gridTerminals.length > 1) {
+          var stripsEl = document.createElement('div');
+          stripsEl.className = 'focus-strips';
+          gridTerminals.forEach(function(gt, i) {
+            if (i === focusedIndex) return;
+            gt.panel.classList.add('focus-strip');
+            stripsEl.appendChild(gt.panel);
+          });
+          contentEl.appendChild(stripsEl);
+        }
+        break;
+
+      case 'fullscreen':
+        var fullGt = gridTerminals[focusedIndex];
+        fullGt.panel.classList.add('fullscreen');
+        contentEl.appendChild(fullGt.panel);
+        var backBtn = document.createElement('button');
+        backBtn.className = 'back-to-grid';
+        backBtn.textContent = '\u2190 Grid';
+        backBtn.addEventListener('click', function() { switchGridMode('thumbnails'); });
+        contentEl.appendChild(backBtn);
+        break;
+    }
+
+    // Fit visible terminals after DOM settles
+    setTimeout(function() {
+      gridTerminals.forEach(function(gt) {
+        if (!document.contains(gt.panel)) return;
+        if (gt.fitAddon) {
+          try {
+            gt.fitAddon.fit();
+            if (gt.ws && gt.ws.readyState === WebSocket.OPEN && gt.xterm) {
+              gt.ws.send(JSON.stringify({ type: 'pty_resize', cols: gt.xterm.cols, rows: gt.xterm.rows }));
+            }
+          } catch(e) {}
+        }
+      });
+    }, 100);
   }
 
   function fitGridPanels() {
     gridTerminals.forEach(function(gt) {
-      if (gt.fitAddon) { try { gt.fitAddon.fit(); } catch(e) {} }
+      if (!document.contains(gt.panel)) return;
+      if (gt.fitAddon) {
+        try {
+          gt.fitAddon.fit();
+          if (gt.ws && gt.ws.readyState === WebSocket.OPEN && gt.xterm) {
+            gt.ws.send(JSON.stringify({ type: 'pty_resize', cols: gt.xterm.cols, rows: gt.xterm.rows }));
+          }
+        } catch(e) {}
+      }
     });
   }
 
@@ -352,6 +590,10 @@
     window.removeEventListener('resize', fitGridPanels);
     var gridEl = document.getElementById('grid-view');
     if (gridEl) { gridEl.innerHTML = ''; gridEl.classList.add('hidden'); }
+    $('#input-area').classList.add('hidden');
+    gridMode = 'thumbnails';
+    focusedIndex = 0;
+    tmuxPreset = 'equal';
   }
 
   window.toggleView = () => {
@@ -749,10 +991,18 @@
       var btn = e.target;
       if (btn && btn.tagName === 'BUTTON' && btn.dataset.key) {
         var key = keyMap[btn.dataset.key] || btn.dataset.key;
-        if (ws && ws.readyState === WebSocket.OPEN) {
-          ws.send(JSON.stringify({ type: 'pty_input', data: key }));
+        if (currentView === 'grid' && gridMode === 'fullscreen' && gridTerminals[focusedIndex]) {
+          var gt = gridTerminals[focusedIndex];
+          if (gt.ws && gt.ws.readyState === WebSocket.OPEN) {
+            gt.ws.send(JSON.stringify({ type: 'pty_input', data: key }));
+          }
+          if (gt.xterm) gt.xterm.focus();
+        } else {
+          if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ type: 'pty_input', data: key }));
+          }
+          if (xterm) xterm.focus();
         }
-        if (xterm) xterm.focus();
       }
     });
   }
@@ -801,7 +1051,7 @@
     requestAnimationFrame(() => { terminal.scrollTop = terminal.scrollHeight; });
   }
   function escapeHtml(s) {
-    const d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML.replace(/'/g, '&#39;');
+    const d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML.replace(/'/g, '&#39;').replace(/"/g, '&quot;');
   }
   function formatText(text) {
     return escapeHtml(text)

package/remote-ui/styles.css

@@ -247,15 +247,143 @@ header {
 .session-card .machine { color: var(--text-dim); font-size: 11px; }
 .session-card .arrow { color: var(--text-dim); }
 
-/* Grid View (tmux-style multi-terminal) */
+/* Grid View (multi-terminal with layout modes) */
 #grid-view {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Grid toolbar */
+.grid-toolbar {
+  display: flex;
+  gap: 4px;
+  padding: 4px 8px;
+  background: var(--bg-tool);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.grid-toolbar button {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  font-family: var(--font);
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.grid-toolbar button.active {
+  border-color: var(--blue);
+  color: var(--blue);
+}
+.grid-toolbar .spacer { flex: 1; }
+.grid-toolbar-presets { display: flex; gap: 4px; margin-left: 8px; }
+.grid-toolbar-presets.hidden { display: none; }
+
+/* Grid content area */
+#grid-content {
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* Thumbnail mode */
+#grid-content.mode-thumbnails {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 8px;
+  align-content: flex-start;
+  overflow-y: auto;
+}
+.grid-panel.thumbnail {
+  width: 280px;
+  height: 200px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  cursor: pointer;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.grid-panel.thumbnail:hover {
+  border-color: var(--blue);
+}
+.grid-panel.thumbnail .grid-panel-terminal {
+  overflow: hidden;
+}
+
+/* Tmux mode */
+#grid-content.mode-tmux {
   display: grid;
   gap: 2px;
-  padding: 2px;
-  overflow: hidden;
   background: var(--border);
 }
+.grid-panel.active {
+  outline: 2px solid var(--blue);
+  outline-offset: -2px;
+}
+
+/* Focus mode */
+#grid-content.mode-focus {
+  display: flex;
+  flex-direction: column;
+}
+.grid-panel.focus-main {
+  flex: 1;
+  min-height: 0;
+}
+.grid-panel.focus-main .grid-panel-header {
+  background: var(--blue);
+}
+.grid-panel.focus-main .grid-panel-name {
+  color: #fff;
+}
+.focus-strips {
+  display: flex;
+  flex-shrink: 0;
+  overflow-x: auto;
+}
+.grid-panel.focus-strip {
+  height: 80px;
+  cursor: pointer;
+  border-top: 1px solid var(--border);
+  flex: 1;
+  min-width: 120px;
+}
+.grid-panel.focus-strip:hover {
+  background: var(--bg-tool);
+}
+
+/* Fullscreen mode */
+#grid-content.mode-fullscreen {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.grid-panel.fullscreen {
+  flex: 1;
+  min-height: 0;
+}
+.back-to-grid {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  background: var(--bg-tool);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  font-family: var(--font);
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  z-index: 10;
+}
+.back-to-grid:hover {
+  border-color: var(--blue);
+  color: var(--blue);
+}
 .grid-panel {
   display: flex;
   flex-direction: column;