@mjasano/devtunnel 1.0.0 → 1.2.0

package/public/index.html

@@ -407,6 +407,336 @@
       border-color: #f85149;
     }
 
+    /* Tab Bar */
+    .tab-bar {
+      display: flex;
+      background-color: #161b22;
+      border-bottom: 1px solid #30363d;
+      padding: 0 12px;
+    }
+
+    .tab {
+      padding: 10px 20px;
+      font-size: 13px;
+      color: #8b949e;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      transition: all 0.15s ease;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .tab:hover {
+      color: #c9d1d9;
+      background-color: #21262d;
+    }
+
+    .tab.active {
+      color: #c9d1d9;
+      border-bottom-color: #58a6ff;
+    }
+
+    .tab-icon {
+      font-size: 14px;
+    }
+
+    /* Editor Container */
+    #editor-container {
+      flex: 1;
+      display: none;
+      flex-direction: column;
+      background-color: #0d1117;
+      overflow: hidden;
+    }
+
+    #editor-container.active {
+      display: flex;
+    }
+
+    #terminal-container.hidden {
+      display: none;
+    }
+
+    /* Terminal Tabs */
+    .terminal-tabs {
+      display: flex;
+      background-color: #161b22;
+      border-bottom: 1px solid #30363d;
+      overflow-x: auto;
+      min-height: 35px;
+      align-items: center;
+    }
+
+    .terminal-tab {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      font-size: 12px;
+      color: #8b949e;
+      background-color: #0d1117;
+      border-right: 1px solid #30363d;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .terminal-tab:hover {
+      background-color: #161b22;
+    }
+
+    .terminal-tab.active {
+      color: #c9d1d9;
+      background-color: #161b22;
+    }
+
+    .terminal-tab-close {
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      font-size: 14px;
+      line-height: 1;
+    }
+
+    .terminal-tab-close:hover {
+      background-color: #30363d;
+    }
+
+    .terminal-tab-new {
+      width: 28px;
+      height: 28px;
+      margin: 0 4px;
+      background-color: transparent;
+      border: 1px solid #30363d;
+      border-radius: 4px;
+      color: #8b949e;
+      font-size: 16px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .terminal-tab-new:hover {
+      background-color: #21262d;
+      color: #c9d1d9;
+    }
+
+    .terminal-tab .tmux-badge {
+      color: #3fb950;
+      font-size: 10px;
+    }
+
+    .editor-tabs {
+      display: flex;
+      background-color: #161b22;
+      border-bottom: 1px solid #30363d;
+      overflow-x: auto;
+      min-height: 35px;
+    }
+
+    .editor-tab {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      font-size: 12px;
+      color: #8b949e;
+      background-color: #0d1117;
+      border-right: 1px solid #30363d;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .editor-tab:hover {
+      background-color: #161b22;
+    }
+
+    .editor-tab.active {
+      color: #c9d1d9;
+      background-color: #161b22;
+    }
+
+    .editor-tab.modified::after {
+      content: '';
+      width: 6px;
+      height: 6px;
+      background-color: #d29922;
+      border-radius: 50%;
+    }
+
+    .editor-tab-close {
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      font-size: 14px;
+      line-height: 1;
+    }
+
+    .editor-tab-close:hover {
+      background-color: #30363d;
+    }
+
+    #monaco-editor {
+      flex: 1;
+      min-height: 0;
+    }
+
+    .editor-empty {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #6e7681;
+      font-size: 14px;
+    }
+
+    .editor-empty-icon {
+      font-size: 48px;
+      margin-bottom: 16px;
+      opacity: 0.5;
+    }
+
+    /* File Tree */
+    .file-tree {
+      font-size: 12px;
+    }
+
+    .file-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 8px;
+      cursor: pointer;
+      border-radius: 4px;
+    }
+
+    .file-item:hover {
+      background-color: #21262d;
+    }
+
+    .file-item.active {
+      background-color: rgba(56, 139, 253, 0.15);
+    }
+
+    .file-item-icon {
+      width: 16px;
+      text-align: center;
+      flex-shrink: 0;
+    }
+
+    .file-item-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .file-item.directory > .file-item-icon {
+      color: #58a6ff;
+    }
+
+    .file-item.file > .file-item-icon {
+      color: #8b949e;
+    }
+
+    .file-children {
+      margin-left: 12px;
+    }
+
+    .breadcrumb {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 8px 12px;
+      font-size: 11px;
+      color: #8b949e;
+      border-bottom: 1px solid #30363d;
+      overflow-x: auto;
+    }
+
+    .breadcrumb-item {
+      cursor: pointer;
+      padding: 2px 4px;
+      border-radius: 4px;
+    }
+
+    .breadcrumb-item:hover {
+      background-color: #21262d;
+      color: #c9d1d9;
+    }
+
+    .breadcrumb-sep {
+      color: #484f58;
+    }
+
+    /* System Monitor */
+    .system-stats {
+      padding: 8px 12px;
+    }
+
+    .stat-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 6px 0;
+      font-size: 12px;
+      border-bottom: 1px solid #21262d;
+    }
+
+    .stat-row:last-child {
+      border-bottom: none;
+    }
+
+    .stat-label {
+      color: #8b949e;
+    }
+
+    .stat-value {
+      color: #c9d1d9;
+      font-family: monospace;
+    }
+
+    .stat-bar {
+      width: 100%;
+      height: 6px;
+      background-color: #21262d;
+      border-radius: 3px;
+      margin-top: 4px;
+      overflow: hidden;
+    }
+
+    .stat-bar-fill {
+      height: 100%;
+      border-radius: 3px;
+      transition: width 0.3s ease;
+    }
+
+    .stat-bar-fill.cpu {
+      background: linear-gradient(90deg, #58a6ff, #8b5cf6);
+    }
+
+    .stat-bar-fill.memory {
+      background: linear-gradient(90deg, #3fb950, #58a6ff);
+    }
+
+    .stat-bar-fill.high {
+      background: linear-gradient(90deg, #d29922, #f85149);
+    }
+
+    .system-hostname {
+      font-size: 11px;
+      color: #6e7681;
+      padding: 4px 12px 8px;
+      border-bottom: 1px solid #21262d;
+    }
+
     @keyframes slideIn {
       from {
         transform: translateY(20px);
@@ -454,22 +784,80 @@
     </div>
   </div>
 
+  <!-- Tab Bar -->
+  <div class="tab-bar">
+    <div class="tab active" data-tab="terminal" onclick="switchTab('terminal')">
+      <span class="tab-icon">></span>
+      Terminal
+    </div>
+    <div class="tab" data-tab="editor" onclick="switchTab('editor')">
+      <span class="tab-icon">{}</span>
+      Editor
+    </div>
+  </div>
+
   <div class="main-container">
     <div id="terminal-container">
+      <div class="terminal-tabs" id="terminal-tabs">
+        <button class="terminal-tab-new" onclick="createNewSession()" title="New Shell">+</button>
+      </div>
       <div id="terminal"></div>
     </div>
 
+    <div id="editor-container">
+      <div class="editor-tabs" id="editor-tabs"></div>
+      <div id="monaco-editor"></div>
+      <div class="editor-empty" id="editor-empty">
+        <div class="editor-empty-icon">{}</div>
+        <div>Select a file to edit</div>
+        <div style="margin-top: 8px; font-size: 12px; color: #484f58;">
+          Ctrl+S to save
+        </div>
+      </div>
+    </div>
+
     <div class="sidebar">
-      <!-- Sessions Section -->
+      <!-- System Monitor Section -->
+      <div class="sidebar-section">
+        <div class="sidebar-header" onclick="toggleSection('system')">
+          <h2>System</h2>
+        </div>
+        <div id="system-content">
+          <div class="system-hostname" id="system-hostname">Loading...</div>
+          <div class="system-stats" id="system-stats">
+            <div class="stat-row">
+              <span class="stat-label">CPU</span>
+              <span class="stat-value" id="cpu-value">--%</span>
+            </div>
+            <div class="stat-bar"><div class="stat-bar-fill cpu" id="cpu-bar" style="width: 0%"></div></div>
+            <div class="stat-row" style="margin-top: 8px;">
+              <span class="stat-label">Memory</span>
+              <span class="stat-value" id="mem-value">--%</span>
+            </div>
+            <div class="stat-bar"><div class="stat-bar-fill memory" id="mem-bar" style="width: 0%"></div></div>
+            <div class="stat-row" style="margin-top: 8px;">
+              <span class="stat-label">Uptime</span>
+              <span class="stat-value" id="uptime-value">--</span>
+            </div>
+            <div class="stat-row">
+              <span class="stat-label">Load</span>
+              <span class="stat-value" id="load-value">--</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Files Section -->
       <div class="sidebar-section">
-        <div class="sidebar-header" onclick="toggleSection('sessions')">
-          <h2>Sessions</h2>
-          <span class="count" id="session-count">0</span>
+        <div class="sidebar-header" onclick="toggleSection('files')">
+          <h2>Files</h2>
         </div>
-        <div class="sidebar-content" id="sessions-content">
-          <button class="btn btn-primary btn-sm" style="width: 100%; margin-bottom: 8px;" onclick="createNewSession()">+ New Session</button>
-          <div id="session-list">
-            <div class="empty-state">No sessions</div>
+        <div class="breadcrumb" id="file-breadcrumb">
+          <span class="breadcrumb-item" onclick="navigateToPath('')">~</span>
+        </div>
+        <div class="sidebar-content" id="files-content" style="max-height: 300px;">
+          <div class="file-tree" id="file-tree">
+            <div class="empty-state">Loading...</div>
           </div>
         </div>
       </div>
@@ -508,6 +896,7 @@
   <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/xterm-addon-web-links@0.9.0/lib/xterm-addon-web-links.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs/loader.js"></script>
   <script>
     const terminalContainer = document.getElementById('terminal');
     const statusDot = document.getElementById('status-dot');
@@ -522,8 +911,312 @@
 
     let tunnels = [];
     let sessions = [];
+    let tmuxSessions = [];
     let currentSessionId = localStorage.getItem('devtunnel-session-id');
 
+    // Editor state
+    let monacoEditor = null;
+    let openFiles = new Map(); // path -> { content, originalContent, model }
+    let activeFilePath = null;
+    let currentBrowsePath = '';
+
+    // Initialize Monaco Editor
+    require.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs' }});
+    require(['vs/editor/editor.main'], function() {
+      monaco.editor.defineTheme('github-dark', {
+        base: 'vs-dark',
+        inherit: true,
+        rules: [],
+        colors: {
+          'editor.background': '#0d1117',
+          'editor.foreground': '#c9d1d9',
+          'editorCursor.foreground': '#58a6ff',
+          'editor.lineHighlightBackground': '#161b22',
+          'editorLineNumber.foreground': '#6e7681',
+          'editor.selectionBackground': '#264f78',
+          'editorIndentGuide.background': '#21262d',
+        }
+      });
+
+      monacoEditor = monaco.editor.create(document.getElementById('monaco-editor'), {
+        value: '',
+        language: 'plaintext',
+        theme: 'github-dark',
+        fontSize: 14,
+        fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+        minimap: { enabled: false },
+        automaticLayout: true,
+        scrollBeyondLastLine: false,
+        wordWrap: 'on',
+        tabSize: 2,
+      });
+
+      // Ctrl+S to save
+      monacoEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+        if (activeFilePath) saveFile(activeFilePath);
+      });
+
+      // Track changes
+      monacoEditor.onDidChangeModelContent(() => {
+        if (activeFilePath && openFiles.has(activeFilePath)) {
+          const file = openFiles.get(activeFilePath);
+          file.content = monacoEditor.getValue();
+          renderEditorTabs();
+        }
+      });
+
+      // Hide editor initially
+      document.getElementById('monaco-editor').style.display = 'none';
+    });
+
+    // Tab switching
+    function switchTab(tab) {
+      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+      document.querySelector(`.tab[data-tab="${tab}"]`).classList.add('active');
+
+      const terminalContainer = document.getElementById('terminal-container');
+      const editorContainer = document.getElementById('editor-container');
+
+      if (tab === 'terminal') {
+        terminalContainer.classList.remove('hidden');
+        editorContainer.classList.remove('active');
+        setTimeout(() => fitAddon.fit(), 0);
+        term.focus();
+      } else {
+        terminalContainer.classList.add('hidden');
+        editorContainer.classList.add('active');
+        if (monacoEditor) monacoEditor.focus();
+      }
+    }
+
+    // File browser functions
+    async function loadFiles(path = '') {
+      try {
+        const res = await fetch(`/api/files?path=${encodeURIComponent(path)}`);
+        const data = await res.json();
+
+        if (data.error) {
+          showToast(data.error, 'error');
+          return;
+        }
+
+        currentBrowsePath = path;
+        renderBreadcrumb(path);
+        renderFileTree(data.items || []);
+      } catch (err) {
+        showToast('Failed to load files', 'error');
+      }
+    }
+
+    function renderBreadcrumb(path) {
+      const container = document.getElementById('file-breadcrumb');
+      const parts = path ? path.split('/').filter(Boolean) : [];
+
+      let html = '<span class="breadcrumb-item" onclick="navigateToPath(\'\')">~</span>';
+
+      let currentPath = '';
+      parts.forEach((part, i) => {
+        currentPath += (currentPath ? '/' : '') + part;
+        const p = currentPath;
+        html += `<span class="breadcrumb-sep">/</span>`;
+        html += `<span class="breadcrumb-item" onclick="navigateToPath('${p}')">${part}</span>`;
+      });
+
+      container.innerHTML = html;
+    }
+
+    let currentFileItems = []; // Store current items for click handling
+
+    function renderFileTree(items) {
+      const container = document.getElementById('file-tree');
+      currentFileItems = items;
+
+      if (items.length === 0) {
+        container.innerHTML = '<div class="empty-state">Empty directory</div>';
+        return;
+      }
+
+      container.innerHTML = items.map((item, index) => `
+        <div class="file-item ${item.isDirectory ? 'directory' : 'file'} ${activeFilePath === item.path ? 'active' : ''}"
+             data-index="${index}">
+          <span class="file-item-icon">${item.isDirectory ? '&#128193;' : '&#128196;'}</span>
+          <span class="file-item-name">${item.name}</span>
+        </div>
+      `).join('');
+    }
+
+    // Event delegation for file tree clicks
+    document.getElementById('file-tree').addEventListener('click', (e) => {
+      const fileItem = e.target.closest('.file-item');
+      if (!fileItem) return;
+
+      const index = parseInt(fileItem.dataset.index);
+      const item = currentFileItems[index];
+      if (!item) return;
+
+      if (item.isDirectory) {
+        navigateToPath(item.path);
+      } else {
+        openFile(item.path);
+      }
+    });
+
+    function navigateToPath(path) {
+      loadFiles(path);
+    }
+
+    // File operations
+    async function openFile(path) {
+      // Switch to editor tab
+      switchTab('editor');
+
+      // Check if already open
+      if (openFiles.has(path)) {
+        activateFile(path);
+        return;
+      }
+
+      try {
+        const res = await fetch(`/api/files/read?path=${encodeURIComponent(path)}`);
+        const data = await res.json();
+
+        if (data.error) {
+          showToast(data.error, 'error');
+          return;
+        }
+
+        // Detect language
+        const ext = path.split('.').pop().toLowerCase();
+        const langMap = {
+          js: 'javascript', ts: 'typescript', jsx: 'javascript', tsx: 'typescript',
+          py: 'python', rb: 'ruby', go: 'go', rs: 'rust', java: 'java',
+          c: 'c', cpp: 'cpp', h: 'c', hpp: 'cpp',
+          html: 'html', css: 'css', scss: 'scss', less: 'less',
+          json: 'json', xml: 'xml', yaml: 'yaml', yml: 'yaml',
+          md: 'markdown', sql: 'sql', sh: 'shell', bash: 'shell',
+          dockerfile: 'dockerfile', makefile: 'makefile'
+        };
+        const language = langMap[ext] || 'plaintext';
+
+        // Create model
+        const model = monaco.editor.createModel(data.content, language);
+
+        openFiles.set(path, {
+          content: data.content,
+          originalContent: data.content,
+          model,
+          language
+        });
+
+        activateFile(path);
+        showToast(`Opened ${path.split('/').pop()}`);
+      } catch (err) {
+        showToast('Failed to open file', 'error');
+      }
+    }
+
+    function activateFile(path) {
+      activeFilePath = path;
+      const file = openFiles.get(path);
+
+      if (file && monacoEditor) {
+        monacoEditor.setModel(file.model);
+        document.getElementById('monaco-editor').style.display = 'block';
+        document.getElementById('editor-empty').style.display = 'none';
+      }
+
+      renderEditorTabs();
+      // Re-render file tree to update active state
+      if (currentFileItems.length > 0) {
+        renderFileTree(currentFileItems);
+      }
+    }
+
+    function renderEditorTabs() {
+      const container = document.getElementById('editor-tabs');
+
+      if (openFiles.size === 0) {
+        container.innerHTML = '';
+        document.getElementById('monaco-editor').style.display = 'none';
+        document.getElementById('editor-empty').style.display = 'flex';
+        return;
+      }
+
+      container.innerHTML = Array.from(openFiles.entries()).map(([path, file]) => {
+        const name = path.split('/').pop();
+        const isModified = file.content !== file.originalContent;
+        const isActive = path === activeFilePath;
+
+        return `
+          <div class="editor-tab ${isActive ? 'active' : ''} ${isModified ? 'modified' : ''}" onclick="activateFile('${path}')">
+            <span>${name}</span>
+            <span class="editor-tab-close" onclick="event.stopPropagation(); closeFile('${path}')">x</span>
+          </div>
+        `;
+      }).join('');
+    }
+
+    async function saveFile(path) {
+      const file = openFiles.get(path);
+      if (!file) return;
+
+      try {
+        const res = await fetch('/api/files/write', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ path, content: file.content })
+        });
+
+        const data = await res.json();
+
+        if (data.error) {
+          showToast(data.error, 'error');
+          return;
+        }
+
+        file.originalContent = file.content;
+        renderEditorTabs();
+        showToast(`Saved ${path.split('/').pop()}`);
+      } catch (err) {
+        showToast('Failed to save file', 'error');
+      }
+    }
+
+    function closeFile(path) {
+      const file = openFiles.get(path);
+      if (!file) return;
+
+      // Check for unsaved changes
+      if (file.content !== file.originalContent) {
+        if (!confirm(`${path.split('/').pop()} has unsaved changes. Close anyway?`)) {
+          return;
+        }
+      }
+
+      file.model.dispose();
+      openFiles.delete(path);
+
+      if (activeFilePath === path) {
+        const remaining = Array.from(openFiles.keys());
+        if (remaining.length > 0) {
+          activateFile(remaining[remaining.length - 1]);
+        } else {
+          activeFilePath = null;
+          renderEditorTabs();
+        }
+      } else {
+        renderEditorTabs();
+      }
+    }
+
+    // Export functions
+    window.switchTab = switchTab;
+    window.navigateToPath = navigateToPath;
+    window.openFile = openFile;
+    window.activateFile = activateFile;
+    window.closeFile = closeFile;
+    window.saveFile = saveFile;
+
     // Initialize xterm.js
     const term = new Terminal({
       cursorBlink: true,
@@ -580,33 +1273,119 @@
       return date.toLocaleTimeString();
     }
 
-    function renderSessions() {
-      const list = document.getElementById('session-list');
-      document.getElementById('session-count').textContent = sessions.length;
+    function formatUptime(seconds) {
+      const days = Math.floor(seconds / 86400);
+      const hours = Math.floor((seconds % 86400) / 3600);
+      const mins = Math.floor((seconds % 3600) / 60);
+      if (days > 0) return `${days}d ${hours}h`;
+      if (hours > 0) return `${hours}h ${mins}m`;
+      return `${mins}m`;
+    }
 
-      if (sessions.length === 0) {
-        list.innerHTML = '<div class="empty-state">No sessions</div>';
-        return;
+    function formatBytes(bytes) {
+      const gb = bytes / (1024 * 1024 * 1024);
+      return gb.toFixed(1) + ' GB';
+    }
+
+    async function updateSystemInfo() {
+      try {
+        const res = await fetch('/api/system');
+        const data = await res.json();
+
+        document.getElementById('system-hostname').textContent =
+          `${data.hostname} (${data.platform}/${data.arch})`;
+
+        // CPU
+        const cpuValue = document.getElementById('cpu-value');
+        const cpuBar = document.getElementById('cpu-bar');
+        cpuValue.textContent = `${data.cpu.usage}%`;
+        cpuBar.style.width = `${data.cpu.usage}%`;
+        cpuBar.className = `stat-bar-fill ${data.cpu.usage > 80 ? 'high' : 'cpu'}`;
+
+        // Memory
+        const memValue = document.getElementById('mem-value');
+        const memBar = document.getElementById('mem-bar');
+        memValue.textContent = `${data.memory.usage}% (${formatBytes(data.memory.used)}/${formatBytes(data.memory.total)})`;
+        memBar.style.width = `${data.memory.usage}%`;
+        memBar.className = `stat-bar-fill ${data.memory.usage > 80 ? 'high' : 'memory'}`;
+
+        // Uptime
+        document.getElementById('uptime-value').textContent = formatUptime(data.uptime);
+
+        // Load average
+        document.getElementById('load-value').textContent =
+          data.loadavg.map(l => l.toFixed(2)).join(' ');
+      } catch (err) {
+        console.error('Failed to fetch system info:', err);
       }
+    }
 
-      list.innerHTML = sessions.map(session => `
-        <div class="item-card ${session.id === currentSessionId ? 'active' : ''}" onclick="attachToSession('${session.id}')">
-          <div class="item-card-header">
-            <span class="item-title">
-              ${session.id.slice(0, 8)}...
-            </span>
-            <div style="display: flex; gap: 4px; align-items: center;">
-              <span class="item-status ${session.alive ? 'active' : 'stopped'}">${session.alive ? 'alive' : 'ended'}</span>
-              <button class="btn btn-danger btn-sm" onclick="event.stopPropagation(); killSession('${session.id}')">x</button>
-            </div>
+    // Update system info every 3 seconds
+    updateSystemInfo();
+    setInterval(updateSystemInfo, 3000);
+
+    function renderTerminalTabs() {
+      const container = document.getElementById('terminal-tabs');
+
+      // Build tabs HTML
+      let tabsHtml = '';
+
+      // Tmux sessions first
+      tmuxSessions.forEach(session => {
+        const isActive = currentSessionId && sessionIdDisplay.textContent === `tmux:${session.name}`;
+        tabsHtml += `
+          <div class="terminal-tab ${isActive ? 'active' : ''}" onclick="attachToTmux('${session.name}')">
+            <span class="tmux-badge">tmux</span>
+            <span>${session.name}</span>
           </div>
-          <div class="item-meta">
-            ${session.clients} client(s) connected | Last: ${formatTime(session.lastAccess)}
+        `;
+      });
+
+      // Shell sessions
+      sessions.forEach(session => {
+        const isActive = session.id === currentSessionId;
+        tabsHtml += `
+          <div class="terminal-tab ${isActive ? 'active' : ''}" onclick="attachToSession('${session.id}')">
+            <span>${session.id.slice(0, 8)}</span>
+            <span class="terminal-tab-close" onclick="event.stopPropagation(); killSession('${session.id}')">×</span>
           </div>
-        </div>
-      `).join('');
+        `;
+      });
+
+      // Add new button at the end
+      tabsHtml += `<button class="terminal-tab-new" onclick="createNewSession()" title="New Shell">+</button>`;
+      tabsHtml += `<button class="terminal-tab-new" onclick="refreshTmuxSessions()" title="Refresh tmux" style="font-size: 12px;">↻</button>`;
+
+      container.innerHTML = tabsHtml;
+    }
+
+    function renderSessions() {
+      renderTerminalTabs();
+    }
+
+    function renderTmuxSessions() {
+      renderTerminalTabs();
     }
 
+    function attachToTmux(sessionName) {
+      // Detach from current session first
+      if (currentSessionId) {
+        ws.send(JSON.stringify({ type: 'detach' }));
+      }
+      currentSessionId = null;
+      localStorage.removeItem('devtunnel-session-id');
+      term.clear();
+      ws.send(JSON.stringify({ type: 'attach-tmux', tmuxSession: sessionName }));
+      switchTab('terminal');
+    }
+
+    function refreshTmuxSessions() {
+      ws.send(JSON.stringify({ type: 'refresh-tmux' }));
+    }
+
+    window.attachToTmux = attachToTmux;
+    window.refreshTmuxSessions = refreshTmuxSessions;
+
     function renderTunnels() {
       const list = document.getElementById('tunnel-list');
       document.getElementById('tunnel-count').textContent = tunnels.length;
@@ -665,18 +1444,28 @@
     }
 
     function createNewSession() {
+      // Detach from current session first
+      if (currentSessionId) {
+        ws.send(JSON.stringify({ type: 'detach' }));
+      }
       currentSessionId = null;
       localStorage.removeItem('devtunnel-session-id');
       term.clear();
       ws.send(JSON.stringify({ type: 'attach', sessionId: null }));
+      switchTab('terminal');
     }
 
     function attachToSession(sessionId) {
       if (sessionId === currentSessionId) return;
+      // Detach from current session first
+      if (currentSessionId) {
+        ws.send(JSON.stringify({ type: 'detach' }));
+      }
       currentSessionId = sessionId;
       localStorage.setItem('devtunnel-session-id', sessionId);
       term.clear();
       ws.send(JSON.stringify({ type: 'attach', sessionId }));
+      switchTab('terminal');
     }
 
     function killSession(sessionId) {
@@ -705,8 +1494,8 @@
         statusText.textContent = 'Connected';
         reconnectOverlay.classList.remove('show');
 
-        // Attach to existing or new session
-        ws.send(JSON.stringify({ type: 'attach', sessionId: currentSessionId }));
+        // Don't auto-attach - let user choose session manually
+        term.write('\x1b[90mClick + to create a new session.\x1b[0m\r\n');
       };
 
       ws.onmessage = (event) => {
@@ -718,7 +1507,7 @@
               currentSessionId = msg.sessionId;
               localStorage.setItem('devtunnel-session-id', msg.sessionId);
               sessionIndicator.style.display = 'flex';
-              sessionIdDisplay.textContent = msg.sessionId.slice(0, 8);
+              sessionIdDisplay.textContent = msg.tmuxSession ? `tmux:${msg.tmuxSession}` : msg.sessionId.slice(0, 8);
 
               // Send initial size
               ws.send(JSON.stringify({
@@ -727,7 +1516,10 @@
                 rows: term.rows
               }));
 
-              showToast('Session attached');
+              // Update terminal tabs to show active state
+              renderTerminalTabs();
+
+              showToast(msg.tmuxSession ? `Attached to tmux: ${msg.tmuxSession}` : 'Session attached');
               break;
 
             case 'output':
@@ -748,6 +1540,11 @@
               renderTunnels();
               break;
 
+            case 'tmux-sessions':
+              tmuxSessions = msg.data;
+              renderTmuxSessions();
+              break;
+
             case 'tunnel-created':
               showToast(`Tunnel created for port ${msg.data.port}`);
               createTunnelBtn.disabled = false;
@@ -809,6 +1606,7 @@
 
     connect();
     term.focus();
+    loadFiles(); // Load initial file list
   </script>
 </body>
 </html>