@mjasano/devtunnel 1.2.0 → 1.5.0

package/public/app.js

@@ -0,0 +1,849 @@
+// DOM Elements
+const terminalContainer = document.getElementById('terminal');
+const statusDot = document.getElementById('status-dot');
+const statusText = document.getElementById('status-text');
+const reconnectOverlay = document.getElementById('reconnect-overlay');
+const portInput = document.getElementById('port-input');
+const createTunnelBtn = document.getElementById('create-tunnel-btn');
+const sessionIndicator = document.getElementById('session-indicator');
+const sessionIdDisplay = document.getElementById('session-id-display');
+const toast = document.getElementById('toast');
+const toastMessage = document.getElementById('toast-message');
+const logoutBtn = document.getElementById('logout-btn');
+
+// Check authentication status
+async function checkAuth() {
+  try {
+    const res = await fetch('/api/auth/status');
+    const data = await res.json();
+
+    if (data.requiresAuth) {
+      logoutBtn.style.display = 'block';
+
+      if (!data.authenticated) {
+        window.location.href = '/login';
+        return false;
+      }
+    }
+    return true;
+  } catch (err) {
+    console.error('Auth check failed:', err);
+    return true;
+  }
+}
+
+// Logout function
+async function logout() {
+  try {
+    await fetch('/api/auth/logout', { method: 'POST' });
+    window.location.href = '/login';
+  } catch (err) {
+    console.error('Logout failed:', err);
+    window.location.href = '/login';
+  }
+}
+
+window.logout = logout;
+
+// Initialize auth check
+checkAuth();
+
+// State
+let tunnels = [];
+let sessions = [];
+let tmuxSessions = [];
+let currentSessionId = localStorage.getItem('devtunnel-session-id');
+
+// Editor state
+let monacoEditor = null;
+let openFiles = new Map();
+let activeFilePath = null;
+let currentBrowsePath = '';
+let currentFileItems = [];
+
+// File search state
+let fileSearchQuery = '';
+
+// 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,
+  });
+
+  monacoEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+    if (activeFilePath) saveFile(activeFilePath);
+  });
+
+  monacoEditor.onDidChangeModelContent(() => {
+    if (activeFilePath && openFiles.has(activeFilePath)) {
+      const file = openFiles.get(activeFilePath);
+      file.content = monacoEditor.getValue();
+      renderEditorTabs();
+    }
+  });
+
+  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;
+}
+
+function renderFileTree(items) {
+  const container = document.getElementById('file-tree');
+  currentFileItems = items;
+
+  // Filter by search query
+  let filteredItems = items;
+  if (fileSearchQuery) {
+    const query = fileSearchQuery.toLowerCase();
+    filteredItems = items.filter(item => item.name.toLowerCase().includes(query));
+  }
+
+  if (filteredItems.length === 0) {
+    container.innerHTML = `<div class="empty-state">${fileSearchQuery ? 'No matching files' : 'Empty directory'}</div>`;
+    return;
+  }
+
+  container.innerHTML = filteredItems.map((item, index) => {
+    const originalIndex = items.indexOf(item);
+    return `
+      <div class="file-item ${item.isDirectory ? 'directory' : 'file'} ${activeFilePath === item.path ? 'active' : ''}"
+           data-index="${originalIndex}"
+           data-path="${item.path}"
+           oncontextmenu="showFileContextMenu(event, '${item.path}', ${item.isDirectory})">
+        <span class="file-item-icon">${item.isDirectory ? '&#128193;' : '&#128196;'}</span>
+        <span class="file-item-name">${item.name}</span>
+      </div>
+    `;
+  }).join('');
+}
+
+// File search
+function handleFileSearch(query) {
+  fileSearchQuery = query;
+  renderFileTree(currentFileItems);
+}
+
+// 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) {
+  fileSearchQuery = '';
+  const searchInput = document.getElementById('file-search-input');
+  if (searchInput) searchInput.value = '';
+  loadFiles(path);
+}
+
+// File operations
+async function openFile(path) {
+  switchTab('editor');
+
+  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;
+    }
+
+    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';
+
+    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();
+  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;
+
+  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();
+  }
+}
+
+// File management (delete/rename)
+async function deleteFile(path) {
+  if (!confirm(`Are you sure you want to delete "${path.split('/').pop()}"?`)) {
+    return;
+  }
+
+  try {
+    const res = await fetch(`/api/files/delete`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path })
+    });
+
+    const data = await res.json();
+
+    if (data.error) {
+      showToast(data.error, 'error');
+      return;
+    }
+
+    // Close file if open
+    if (openFiles.has(path)) {
+      const file = openFiles.get(path);
+      file.model.dispose();
+      openFiles.delete(path);
+      if (activeFilePath === path) {
+        activeFilePath = null;
+        renderEditorTabs();
+      }
+    }
+
+    showToast(`Deleted ${path.split('/').pop()}`);
+    loadFiles(currentBrowsePath);
+  } catch (err) {
+    showToast('Failed to delete file', 'error');
+  }
+}
+
+async function renameFile(oldPath, newName) {
+  const dir = oldPath.substring(0, oldPath.lastIndexOf('/'));
+  const newPath = dir ? `${dir}/${newName}` : newName;
+
+  try {
+    const res = await fetch(`/api/files/rename`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ oldPath, newPath })
+    });
+
+    const data = await res.json();
+
+    if (data.error) {
+      showToast(data.error, 'error');
+      return;
+    }
+
+    // Update open file reference
+    if (openFiles.has(oldPath)) {
+      const file = openFiles.get(oldPath);
+      openFiles.delete(oldPath);
+      openFiles.set(newPath, file);
+      if (activeFilePath === oldPath) {
+        activeFilePath = newPath;
+      }
+      renderEditorTabs();
+    }
+
+    showToast(`Renamed to ${newName}`);
+    loadFiles(currentBrowsePath);
+  } catch (err) {
+    showToast('Failed to rename file', 'error');
+  }
+}
+
+// Context Menu
+let contextMenu = null;
+
+function showFileContextMenu(event, path, isDirectory) {
+  event.preventDefault();
+  event.stopPropagation();
+
+  hideContextMenu();
+
+  contextMenu = document.createElement('div');
+  contextMenu.className = 'context-menu';
+  contextMenu.innerHTML = `
+    ${!isDirectory ? `<div class="context-menu-item" onclick="openFile('${path}'); hideContextMenu();">Open</div>` : ''}
+    <div class="context-menu-item" onclick="promptRename('${path}'); hideContextMenu();">Rename</div>
+    <div class="context-menu-divider"></div>
+    <div class="context-menu-item danger" onclick="deleteFile('${path}'); hideContextMenu();">Delete</div>
+  `;
+
+  contextMenu.style.left = `${event.clientX}px`;
+  contextMenu.style.top = `${event.clientY}px`;
+  document.body.appendChild(contextMenu);
+
+  // Adjust position if menu goes off screen
+  const rect = contextMenu.getBoundingClientRect();
+  if (rect.right > window.innerWidth) {
+    contextMenu.style.left = `${window.innerWidth - rect.width - 10}px`;
+  }
+  if (rect.bottom > window.innerHeight) {
+    contextMenu.style.top = `${window.innerHeight - rect.height - 10}px`;
+  }
+}
+
+function hideContextMenu() {
+  if (contextMenu) {
+    contextMenu.remove();
+    contextMenu = null;
+  }
+}
+
+document.addEventListener('click', hideContextMenu);
+
+function promptRename(path) {
+  const currentName = path.split('/').pop();
+  const newName = prompt('Enter new name:', currentName);
+  if (newName && newName !== currentName) {
+    renameFile(path, newName);
+  }
+}
+
+// Export functions
+window.switchTab = switchTab;
+window.navigateToPath = navigateToPath;
+window.openFile = openFile;
+window.activateFile = activateFile;
+window.closeFile = closeFile;
+window.saveFile = saveFile;
+window.deleteFile = deleteFile;
+window.renameFile = renameFile;
+window.showFileContextMenu = showFileContextMenu;
+window.hideContextMenu = hideContextMenu;
+window.promptRename = promptRename;
+window.handleFileSearch = handleFileSearch;
+
+// Initialize xterm.js
+const term = new Terminal({
+  cursorBlink: true,
+  fontSize: 14,
+  fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+  theme: {
+    background: '#0d1117',
+    foreground: '#c9d1d9',
+    cursor: '#58a6ff',
+    cursorAccent: '#0d1117',
+    selection: 'rgba(56, 139, 253, 0.3)',
+    black: '#484f58',
+    red: '#ff7b72',
+    green: '#3fb950',
+    yellow: '#d29922',
+    blue: '#58a6ff',
+    magenta: '#bc8cff',
+    cyan: '#39c5cf',
+    white: '#b1bac4',
+    brightBlack: '#6e7681',
+    brightRed: '#ffa198',
+    brightGreen: '#56d364',
+    brightYellow: '#e3b341',
+    brightBlue: '#79c0ff',
+    brightMagenta: '#d2a8ff',
+    brightCyan: '#56d4dd',
+    brightWhite: '#f0f6fc'
+  }
+});
+
+const fitAddon = new FitAddon.FitAddon();
+term.loadAddon(fitAddon);
+
+const webLinksAddon = new WebLinksAddon.WebLinksAddon();
+term.loadAddon(webLinksAddon);
+
+term.open(terminalContainer);
+fitAddon.fit();
+
+const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+const wsUrl = `${protocol}//${window.location.host}`;
+let ws;
+
+function showToast(message, type = 'success') {
+  toastMessage.textContent = message;
+  toast.className = `toast show ${type}`;
+  setTimeout(() => {
+    toast.classList.remove('show');
+  }, 3000);
+}
+
+async function updateSystemInfo() {
+  try {
+    const res = await fetch('/api/system');
+    const data = await res.json();
+
+    document.getElementById('cpu-value').textContent = `${data.cpu.usage}%`;
+    document.getElementById('mem-value').textContent = `${data.memory.usage}%`;
+  } catch (err) {
+    console.error('Failed to fetch system info:', err);
+  }
+}
+
+updateSystemInfo();
+setInterval(updateSystemInfo, 3000);
+
+function renderTerminalTabs() {
+  const container = document.getElementById('terminal-tabs');
+
+  let tabsHtml = '';
+
+  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>
+    `;
+  });
+
+  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}')">x</span>
+      </div>
+    `;
+  });
+
+  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;">&#8635;</button>`;
+
+  container.innerHTML = tabsHtml;
+}
+
+function renderSessions() {
+  renderTerminalTabs();
+}
+
+function renderTmuxSessions() {
+  renderTerminalTabs();
+}
+
+function attachToTmux(sessionName) {
+  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;
+
+  if (tunnels.length === 0) {
+    list.innerHTML = '<div class="empty-state">No active tunnels</div>';
+    return;
+  }
+
+  list.innerHTML = tunnels.map(tunnel => `
+    <div class="item-card">
+      <div class="item-card-header">
+        <span class="item-title">Port ${tunnel.port}</span>
+        <div style="display: flex; gap: 4px; align-items: center;">
+          <span class="item-status ${tunnel.status}">${tunnel.status}</span>
+          <button class="btn btn-danger btn-sm" onclick="stopTunnel('${tunnel.id}')" ${tunnel.status !== 'active' ? 'disabled' : ''}>x</button>
+        </div>
+      </div>
+      ${tunnel.url ? `
+      <div class="item-url">
+        <input type="text" value="${tunnel.url}" readonly onclick="this.select()">
+        <button class="btn-copy" onclick="copyUrl('${tunnel.url}', this)">Copy</button>
+      </div>
+      ` : '<div class="item-meta">Connecting...</div>'}
+    </div>
+  `).join('');
+}
+
+function copyUrl(url, button) {
+  navigator.clipboard.writeText(url).then(() => {
+    button.textContent = 'Copied!';
+    button.classList.add('copied');
+    setTimeout(() => {
+      button.textContent = 'Copy';
+      button.classList.remove('copied');
+    }, 2000);
+  });
+}
+
+function createTunnel() {
+  const port = parseInt(portInput.value);
+  if (!port || port < 1 || port > 65535) {
+    showToast('Please enter a valid port (1-65535)', 'error');
+    return;
+  }
+
+  createTunnelBtn.disabled = true;
+  createTunnelBtn.textContent = 'Creating...';
+
+  ws.send(JSON.stringify({ type: 'create-tunnel', port }));
+  portInput.value = '';
+}
+
+function stopTunnel(id) {
+  ws.send(JSON.stringify({ type: 'stop-tunnel', id }));
+}
+
+function createNewSession() {
+  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;
+  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) {
+  ws.send(JSON.stringify({ type: 'kill-session', sessionId }));
+}
+
+function toggleSection(section) {
+  const content = document.getElementById(`${section}-content`);
+  content.style.display = content.style.display === 'none' ? 'block' : 'none';
+}
+
+// Mobile sidebar toggle
+function toggleMobileSidebar() {
+  const sidebar = document.querySelector('.sidebar');
+  const overlay = document.getElementById('sidebar-overlay');
+  sidebar.classList.toggle('open');
+  overlay.classList.toggle('show');
+}
+
+window.toggleMobileSidebar = toggleMobileSidebar;
+
+window.copyUrl = copyUrl;
+window.stopTunnel = stopTunnel;
+window.createNewSession = createNewSession;
+window.attachToSession = attachToSession;
+window.killSession = killSession;
+window.toggleSection = toggleSection;
+
+function connect() {
+  ws = new WebSocket(wsUrl);
+
+  ws.onopen = () => {
+    console.log('WebSocket connected');
+    statusDot.classList.add('connected');
+    statusText.textContent = 'Connected';
+    reconnectOverlay.classList.remove('show');
+
+    term.write('\x1b[90mClick + to create a new session.\x1b[0m\r\n');
+  };
+
+  ws.onmessage = (event) => {
+    try {
+      const msg = JSON.parse(event.data);
+
+      switch (msg.type) {
+        case 'attached':
+          currentSessionId = msg.sessionId;
+          localStorage.setItem('devtunnel-session-id', msg.sessionId);
+          sessionIndicator.style.display = 'flex';
+          sessionIdDisplay.textContent = msg.tmuxSession ? `tmux:${msg.tmuxSession}` : msg.sessionId.slice(0, 8);
+
+          ws.send(JSON.stringify({
+            type: 'resize',
+            cols: term.cols,
+            rows: term.rows
+          }));
+
+          renderTerminalTabs();
+          showToast(msg.tmuxSession ? `Attached to tmux: ${msg.tmuxSession}` : 'Session attached');
+          break;
+
+        case 'output':
+          term.write(msg.data);
+          break;
+
+        case 'exit':
+          term.write('\r\n\x1b[31mSession ended.\x1b[0m\r\n');
+          break;
+
+        case 'sessions':
+          sessions = msg.data;
+          renderSessions();
+          break;
+
+        case 'tunnels':
+          tunnels = msg.data;
+          renderTunnels();
+          break;
+
+        case 'tmux-sessions':
+          tmuxSessions = msg.data;
+          renderTmuxSessions();
+          break;
+
+        case 'tunnel-created':
+          showToast(`Tunnel created for port ${msg.data.port}`);
+          createTunnelBtn.disabled = false;
+          createTunnelBtn.textContent = 'Expose';
+          break;
+
+        case 'tunnel-error':
+          showToast(msg.error, 'error');
+          createTunnelBtn.disabled = false;
+          createTunnelBtn.textContent = 'Expose';
+          break;
+
+        case 'error':
+          showToast(msg.message, 'error');
+          break;
+      }
+    } catch (err) {
+      console.error('Error parsing message:', err);
+    }
+  };
+
+  ws.onclose = () => {
+    console.log('WebSocket disconnected');
+    statusDot.classList.remove('connected');
+    statusText.textContent = 'Disconnected';
+    reconnectOverlay.classList.add('show');
+  };
+
+  ws.onerror = (error) => {
+    console.error('WebSocket error:', error);
+  };
+}
+
+term.onData((data) => {
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify({ type: 'input', data }));
+  }
+});
+
+function handleResize() {
+  fitAddon.fit();
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify({
+      type: 'resize',
+      cols: term.cols,
+      rows: term.rows
+    }));
+  }
+}
+
+window.addEventListener('resize', handleResize);
+
+createTunnelBtn.addEventListener('click', createTunnel);
+portInput.addEventListener('keypress', (e) => {
+  if (e.key === 'Enter') {
+    createTunnel();
+  }
+});
+
+connect();
+term.focus();
+loadFiles();