@mjasano/devtunnel 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -0,0 +1,44 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.2.0] - 2025-01-02
+
+### Added
+- Terminal tabs UI for managing multiple sessions
+- tmux session integration (attach to existing tmux sessions)
+- System monitor in sidebar (CPU, Memory, Uptime, Load average)
+- Auto port detection (finds next available port if default is in use)
+- Session detach functionality
+
+### Changed
+- Sessions section moved from sidebar to terminal tabs
+- Improved session switching with proper detach handling
+
+## [1.1.0] - 2025-01-02
+
+### Added
+- Tab-based UI for switching between Terminal and Editor
+- Code editor powered by Monaco Editor (VS Code engine)
+- File explorer in sidebar with breadcrumb navigation
+- File system API endpoints (`/api/files`, `/api/files/read`, `/api/files/write`)
+- Multiple file tabs with unsaved changes indicator
+- Auto-detect syntax highlighting for 20+ languages
+- Keyboard shortcut `Ctrl+S` to save files
+
+### Fixed
+- File click handling with special characters in paths
+
+## [1.0.0] - 2025-01-01
+
+### Added
+- Web-based terminal with xterm.js
+- Persistent sessions (24h timeout)
+- Multiple session management
+- Cloudflare tunnel integration for public URL exposure
+- Session reconnection with output buffer
+- CLI tool (`devtunnel`) with auto-setup
+- Docker support

package/CLAUDE.md

@@ -0,0 +1,18 @@
+# Project Rules
+
+## Release Process
+
+새 버전 출시 시 아래 순서를 따를 것:
+
+1. `CHANGELOG.md` 업데이트 (변경사항 기록)
+2. `package.json` 버전 올리기
+3. `npm publish --access public`
+4. `git add . && git commit && git push`
+5. `gh release create vX.X.X` (GitHub Release 생성)
+
+## Version Convention
+
+- Semantic Versioning 사용 (MAJOR.MINOR.PATCH)
+- MAJOR: 호환성 깨지는 변경
+- MINOR: 새 기능 추가
+- PATCH: 버그 수정

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjasano/devtunnel",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Web terminal with code editor and tunnel manager - access your dev environment from anywhere",
   "main": "server.js",
   "bin": {

package/public/index.html

@@ -458,6 +458,78 @@
       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;
@@ -604,6 +676,67 @@
       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);
@@ -665,6 +798,9 @@
 
   <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>
 
@@ -681,6 +817,36 @@
     </div>
 
     <div class="sidebar">
+      <!-- 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('files')">
@@ -696,20 +862,6 @@
         </div>
       </div>
 
-      <!-- Sessions Section -->
-      <div class="sidebar-section">
-        <div class="sidebar-header" onclick="toggleSection('sessions')">
-          <h2>Sessions</h2>
-          <span class="count" id="session-count">0</span>
-        </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>
-        </div>
-      </div>
-
       <!-- Tunnels Section -->
       <div class="sidebar-section">
         <div class="sidebar-header" onclick="toggleSection('tunnels')">
@@ -759,6 +911,7 @@
 
     let tunnels = [];
     let sessions = [];
+    let tmuxSessions = [];
     let currentSessionId = localStorage.getItem('devtunnel-session-id');
 
     // Editor state
@@ -1120,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;
@@ -1205,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) {
@@ -1245,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) => {
@@ -1258,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({
@@ -1267,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':
@@ -1288,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;

package/server.js

@@ -30,6 +30,98 @@ function generateSessionId() {
   return crypto.randomBytes(16).toString('hex');
 }
 
+// Get list of tmux sessions
+async function getTmuxSessions() {
+  return new Promise((resolve) => {
+    const tmux = spawn('tmux', ['list-sessions', '-F', '#{session_name}:#{session_windows}:#{session_attached}']);
+    let output = '';
+
+    tmux.stdout.on('data', (data) => {
+      output += data.toString();
+    });
+
+    tmux.on('close', (code) => {
+      if (code !== 0 || !output.trim()) {
+        resolve([]);
+        return;
+      }
+
+      const sessions = output.trim().split('\n').map(line => {
+        const [name, windows, attached] = line.split(':');
+        return {
+          name,
+          windows: parseInt(windows) || 1,
+          attached: attached === '1'
+        };
+      });
+
+      resolve(sessions);
+    });
+
+    tmux.on('error', () => {
+      resolve([]);
+    });
+  });
+}
+
+// Create session attached to tmux
+function createTmuxSession(tmuxSessionName) {
+  const id = `tmux-${tmuxSessionName}-${Date.now()}`;
+
+  const ptyProcess = pty.spawn('tmux', ['attach-session', '-t', tmuxSessionName], {
+    name: 'xterm-256color',
+    cols: 80,
+    rows: 24,
+    cwd: process.env.WORKSPACE || os.homedir(),
+    env: { ...process.env, TERM: 'xterm-256color' }
+  });
+
+  const session = {
+    id,
+    pty: ptyProcess,
+    outputBuffer: '',
+    clients: new Set(),
+    lastAccess: Date.now(),
+    createdAt: Date.now(),
+    alive: true,
+    type: 'tmux',
+    tmuxSession: tmuxSessionName
+  };
+
+  ptyProcess.onData((data) => {
+    session.outputBuffer += data;
+    if (session.outputBuffer.length > OUTPUT_BUFFER_SIZE) {
+      session.outputBuffer = session.outputBuffer.slice(-OUTPUT_BUFFER_SIZE);
+    }
+
+    session.clients.forEach(ws => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: 'output', data }));
+      }
+    });
+  });
+
+  ptyProcess.onExit(({ exitCode, signal }) => {
+    console.log(`Tmux session ${tmuxSessionName} detached with code ${exitCode}`);
+    session.alive = false;
+
+    session.clients.forEach(ws => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: 'exit', exitCode, signal }));
+      }
+    });
+
+    setTimeout(() => {
+      sessions.delete(id);
+      broadcastSessionList();
+    }, 5000);
+  });
+
+  sessions.set(id, session);
+  console.log(`Tmux session attached: ${tmuxSessionName}`);
+  return session;
+}
+
 // Create or get existing session
 function getOrCreateSession(sessionId = null) {
   // If sessionId provided and exists, return it
@@ -120,7 +212,9 @@ function broadcastSessionList() {
     createdAt: s.createdAt,
     lastAccess: s.lastAccess,
     alive: s.alive,
-    clients: s.clients.size
+    clients: s.clients.size,
+    type: s.type || 'shell',
+    tmuxSession: s.tmuxSession
   }));
 
   wss.clients.forEach(client => {
@@ -234,7 +328,7 @@ function stopTunnel(id) {
 }
 
 // WebSocket handling
-wss.on('connection', (ws) => {
+wss.on('connection', async (ws) => {
   console.log('Client connected');
 
   let currentSession = null;
@@ -254,16 +348,38 @@ wss.on('connection', (ws) => {
     createdAt: s.createdAt,
     lastAccess: s.lastAccess,
     alive: s.alive,
-    clients: s.clients.size
+    clients: s.clients.size,
+    type: s.type || 'shell',
+    tmuxSession: s.tmuxSession
   }));
   ws.send(JSON.stringify({ type: 'sessions', data: sessionList }));
 
+  // Send tmux sessions list
+  const tmuxSessions = await getTmuxSessions();
+  ws.send(JSON.stringify({ type: 'tmux-sessions', data: tmuxSessions }));
+
   ws.on('message', (message) => {
     try {
       const msg = JSON.parse(message.toString());
 
       switch (msg.type) {
+        case 'detach':
+          // Detach from current session
+          if (currentSession) {
+            currentSession.clients.delete(ws);
+            currentSession.lastAccess = Date.now();
+            broadcastSessionList();
+            console.log(`Client detached from session ${currentSession.id}`);
+            currentSession = null;
+          }
+          break;
+
         case 'attach':
+          // Detach from current session first if any
+          if (currentSession) {
+            currentSession.clients.delete(ws);
+            currentSession.lastAccess = Date.now();
+          }
           // Attach to existing or new session
           try {
             currentSession = getOrCreateSession(msg.sessionId);
@@ -339,6 +455,43 @@ wss.on('connection', (ws) => {
           }
           break;
 
+        case 'attach-tmux':
+          if (msg.tmuxSession) {
+            try {
+              // Detach from current session if any
+              if (currentSession) {
+                currentSession.clients.delete(ws);
+                currentSession.lastAccess = Date.now();
+                broadcastSessionList();
+              }
+
+              currentSession = createTmuxSession(msg.tmuxSession);
+              currentSession.clients.add(ws);
+
+              ws.send(JSON.stringify({
+                type: 'attached',
+                sessionId: currentSession.id,
+                alive: currentSession.alive,
+                tmuxSession: msg.tmuxSession
+              }));
+
+              broadcastSessionList();
+              console.log(`Client attached to tmux session: ${msg.tmuxSession}`);
+            } catch (err) {
+              ws.send(JSON.stringify({
+                type: 'error',
+                message: err.message
+              }));
+            }
+          }
+          break;
+
+        case 'refresh-tmux':
+          getTmuxSessions().then(tmuxSessions => {
+            ws.send(JSON.stringify({ type: 'tmux-sessions', data: tmuxSessions }));
+          });
+          break;
+
         default:
           console.log('Unknown message type:', msg.type);
       }
@@ -365,6 +518,119 @@ wss.on('connection', (ws) => {
   });
 });
 
+// System Monitoring API
+async function getMemoryInfo() {
+  const totalMem = os.totalmem();
+
+  // macOS: use vm_stat for accurate memory info
+  if (os.platform() === 'darwin') {
+    return new Promise((resolve) => {
+      const vmstat = spawn('vm_stat');
+      let output = '';
+
+      vmstat.stdout.on('data', (data) => {
+        output += data.toString();
+      });
+
+      vmstat.on('close', () => {
+        try {
+          const pageSize = 16384; // macOS default page size (16KB on Apple Silicon)
+          const lines = output.split('\n');
+
+          let free = 0, active = 0, inactive = 0, wired = 0, compressed = 0, purgeable = 0;
+
+          lines.forEach(line => {
+            const match = line.match(/^(.+):\s+(\d+)/);
+            if (match) {
+              const value = parseInt(match[2]) * pageSize;
+              const key = match[1].toLowerCase();
+              if (key.includes('free')) free = value;
+              else if (key.includes('active')) active = value;
+              else if (key.includes('inactive')) inactive = value;
+              else if (key.includes('wired')) wired = value;
+              else if (key.includes('compressed')) compressed = value;
+              else if (key.includes('purgeable')) purgeable = value;
+            }
+          });
+
+          // App Memory = Active + Wired + Compressed (what Activity Monitor shows)
+          const appMemory = active + wired + compressed;
+          const usage = Math.round((appMemory / totalMem) * 100);
+
+          resolve({
+            total: totalMem,
+            used: appMemory,
+            free: totalMem - appMemory,
+            usage
+          });
+        } catch {
+          // Fallback to os.freemem()
+          const freeMem = os.freemem();
+          resolve({
+            total: totalMem,
+            used: totalMem - freeMem,
+            free: freeMem,
+            usage: Math.round(((totalMem - freeMem) / totalMem) * 100)
+          });
+        }
+      });
+
+      vmstat.on('error', () => {
+        const freeMem = os.freemem();
+        resolve({
+          total: totalMem,
+          used: totalMem - freeMem,
+          free: freeMem,
+          usage: Math.round(((totalMem - freeMem) / totalMem) * 100)
+        });
+      });
+    });
+  }
+
+  // Other platforms: use os.freemem()
+  const freeMem = os.freemem();
+  return {
+    total: totalMem,
+    used: totalMem - freeMem,
+    free: freeMem,
+    usage: Math.round(((totalMem - freeMem) / totalMem) * 100)
+  };
+}
+
+async function getSystemInfo() {
+  const cpus = os.cpus();
+  const memory = await getMemoryInfo();
+
+  // Calculate CPU usage
+  let totalIdle = 0;
+  let totalTick = 0;
+  cpus.forEach(cpu => {
+    for (const type in cpu.times) {
+      totalTick += cpu.times[type];
+    }
+    totalIdle += cpu.times.idle;
+  });
+  const cpuUsage = Math.round((1 - totalIdle / totalTick) * 100);
+
+  return {
+    hostname: os.hostname(),
+    platform: os.platform(),
+    arch: os.arch(),
+    uptime: os.uptime(),
+    cpu: {
+      model: cpus[0]?.model || 'Unknown',
+      cores: cpus.length,
+      usage: cpuUsage
+    },
+    memory,
+    loadavg: os.loadavg()
+  };
+}
+
+app.get('/api/system', async (req, res) => {
+  res.json(await getSystemInfo());
+});
+
 // File System API
 const WORKSPACE_ROOT = process.env.WORKSPACE || os.homedir();
 
@@ -569,9 +835,51 @@ app.get('/health', (req, res) => {
   });
 });
 
-const PORT = process.env.PORT || 3000;
-server.listen(PORT, '0.0.0.0', () => {
-  console.log(`DevTunnel server running on http://localhost:${PORT}`);
+const DEFAULT_PORT = process.env.PORT || 3000;
+
+function findAvailablePort(startPort, maxAttempts = 10) {
+  return new Promise((resolve, reject) => {
+    let port = startPort;
+    let attempts = 0;
+
+    const tryPort = () => {
+      if (attempts >= maxAttempts) {
+        reject(new Error(`No available port found after ${maxAttempts} attempts`));
+        return;
+      }
+
+      const testServer = require('net').createServer();
+      testServer.once('error', (err) => {
+        if (err.code === 'EADDRINUSE') {
+          console.log(`Port ${port} is in use, trying ${port + 1}...`);
+          port++;
+          attempts++;
+          tryPort();
+        } else {
+          reject(err);
+        }
+      });
+
+      testServer.once('listening', () => {
+        testServer.close(() => {
+          resolve(port);
+        });
+      });
+
+      testServer.listen(port, '0.0.0.0');
+    };
+
+    tryPort();
+  });
+}
+
+findAvailablePort(DEFAULT_PORT).then((PORT) => {
+  server.listen(PORT, '0.0.0.0', () => {
+    console.log(`DevTunnel server running on http://localhost:${PORT}`);
+  });
+}).catch((err) => {
+  console.error('Failed to start server:', err.message);
+  process.exit(1);
 });
 
 // Graceful shutdown