@mjasano/devtunnel 1.2.0 → 1.5.0

package/public/index.html

@@ -5,766 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>DevTunnel</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css">
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      background-color: #0d1117;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-      color: #c9d1d9;
-    }
-
-    .header {
-      background-color: #161b22;
-      padding: 12px 20px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      border-bottom: 1px solid #30363d;
-    }
-
-    .header h1 {
-      color: #fff;
-      font-size: 18px;
-      font-weight: 600;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-
-    .header h1 .logo {
-      width: 24px;
-      height: 24px;
-      background: linear-gradient(135deg, #58a6ff, #8b5cf6);
-      border-radius: 6px;
-    }
-
-    .header-right {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-    }
-
-    .session-indicator {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 6px 12px;
-      background-color: #21262d;
-      border-radius: 6px;
-      font-size: 12px;
-      color: #8b949e;
-    }
-
-    .session-indicator .dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background-color: #3fb950;
-    }
-
-    .status {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      color: #8b949e;
-      font-size: 13px;
-    }
-
-    .status-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background-color: #f85149;
-    }
-
-    .status-dot.connected {
-      background-color: #3fb950;
-    }
-
-    .main-container {
-      flex: 1;
-      display: flex;
-      overflow: hidden;
-    }
-
-    #terminal-container {
-      flex: 1;
-      padding: 10px;
-      background-color: #0d1117;
-      overflow: hidden;
-    }
-
-    #terminal {
-      height: 100%;
-    }
-
-    .sidebar {
-      width: 320px;
-      background-color: #161b22;
-      border-left: 1px solid #30363d;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .sidebar-section {
-      border-bottom: 1px solid #30363d;
-    }
-
-    .sidebar-header {
-      padding: 12px 16px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      cursor: pointer;
-    }
-
-    .sidebar-header:hover {
-      background-color: #21262d;
-    }
-
-    .sidebar-header h2 {
-      font-size: 13px;
-      font-weight: 600;
-      color: #c9d1d9;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-
-    .sidebar-header .count {
-      background-color: #30363d;
-      padding: 2px 8px;
-      border-radius: 10px;
-      font-size: 11px;
-      color: #8b949e;
-    }
-
-    .sidebar-content {
-      padding: 8px;
-      max-height: 200px;
-      overflow-y: auto;
-    }
-
-    .tunnel-form {
-      padding: 12px;
-      display: flex;
-      gap: 8px;
-    }
-
-    .tunnel-form input {
-      flex: 1;
-      padding: 8px 12px;
-      background-color: #0d1117;
-      border: 1px solid #30363d;
-      border-radius: 6px;
-      color: #c9d1d9;
-      font-size: 13px;
-    }
-
-    .tunnel-form input:focus {
-      outline: none;
-      border-color: #58a6ff;
-    }
-
-    .tunnel-form input::placeholder {
-      color: #6e7681;
-    }
-
-    .btn {
-      padding: 8px 16px;
-      border-radius: 6px;
-      border: none;
-      font-size: 13px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.15s ease;
-    }
-
-    .btn-primary {
-      background-color: #238636;
-      color: #fff;
-    }
-
-    .btn-primary:hover {
-      background-color: #2ea043;
-    }
-
-    .btn-primary:disabled {
-      background-color: #21262d;
-      color: #484f58;
-      cursor: not-allowed;
-    }
-
-    .btn-sm {
-      padding: 4px 8px;
-      font-size: 12px;
-    }
-
-    .btn-danger {
-      background-color: transparent;
-      color: #f85149;
-    }
-
-    .btn-danger:hover {
-      background-color: rgba(248, 81, 73, 0.1);
-    }
-
-    .btn-ghost {
-      background-color: transparent;
-      color: #8b949e;
-    }
-
-    .btn-ghost:hover {
-      background-color: #21262d;
-      color: #c9d1d9;
-    }
-
-    .item-card {
-      background-color: #0d1117;
-      border: 1px solid #30363d;
-      border-radius: 8px;
-      padding: 10px 12px;
-      margin-bottom: 8px;
-    }
-
-    .item-card.active {
-      border-color: #58a6ff;
-    }
-
-    .item-card-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 6px;
-    }
-
-    .item-title {
-      font-weight: 600;
-      font-size: 13px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .item-status {
-      font-size: 10px;
-      padding: 2px 6px;
-      border-radius: 10px;
-      font-weight: 500;
-    }
-
-    .item-status.active {
-      background-color: rgba(46, 160, 67, 0.2);
-      color: #3fb950;
-    }
-
-    .item-status.connecting {
-      background-color: rgba(187, 128, 9, 0.2);
-      color: #d29922;
-    }
-
-    .item-status.error, .item-status.stopped {
-      background-color: rgba(110, 118, 129, 0.2);
-      color: #8b949e;
-    }
-
-    .item-meta {
-      font-size: 11px;
-      color: #6e7681;
-    }
-
-    .item-url {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      margin-top: 8px;
-    }
-
-    .item-url input {
-      flex: 1;
-      padding: 5px 8px;
-      background-color: #161b22;
-      border: 1px solid #30363d;
-      border-radius: 4px;
-      color: #58a6ff;
-      font-size: 11px;
-      font-family: monospace;
-    }
-
-    .item-url input:focus {
-      outline: none;
-    }
-
-    .btn-copy {
-      padding: 5px 8px;
-      background-color: #21262d;
-      color: #c9d1d9;
-      border: 1px solid #30363d;
-      border-radius: 4px;
-      font-size: 11px;
-      cursor: pointer;
-    }
-
-    .btn-copy:hover {
-      background-color: #30363d;
-    }
-
-    .btn-copy.copied {
-      background-color: #238636;
-      border-color: #238636;
-    }
-
-    .empty-state {
-      padding: 24px 16px;
-      text-align: center;
-      color: #6e7681;
-      font-size: 12px;
-    }
-
-    .reconnect-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: rgba(0, 0, 0, 0.8);
-      display: none;
-      justify-content: center;
-      align-items: center;
-      z-index: 1000;
-    }
-
-    .reconnect-overlay.show {
-      display: flex;
-    }
-
-    .reconnect-box {
-      background-color: #161b22;
-      padding: 30px 40px;
-      border-radius: 12px;
-      text-align: center;
-      border: 1px solid #30363d;
-    }
-
-    .reconnect-box h2 {
-      color: #fff;
-      margin-bottom: 12px;
-      font-size: 18px;
-    }
-
-    .reconnect-box p {
-      color: #8b949e;
-      margin-bottom: 20px;
-      font-size: 14px;
-    }
-
-    .reconnect-btn {
-      background-color: #238636;
-      color: #fff;
-      border: none;
-      padding: 10px 24px;
-      border-radius: 6px;
-      cursor: pointer;
-      font-size: 14px;
-      font-weight: 500;
-    }
-
-    .reconnect-btn:hover {
-      background-color: #2ea043;
-    }
-
-    .toast {
-      position: fixed;
-      bottom: 20px;
-      right: 340px;
-      background-color: #161b22;
-      border: 1px solid #30363d;
-      padding: 12px 16px;
-      border-radius: 8px;
-      display: none;
-      align-items: center;
-      gap: 10px;
-      z-index: 1001;
-      animation: slideIn 0.3s ease;
-    }
-
-    .toast.show {
-      display: flex;
-    }
-
-    .toast.success {
-      border-color: #238636;
-    }
-
-    .toast.error {
-      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);
-        opacity: 0;
-      }
-      to {
-        transform: translateY(0);
-        opacity: 1;
-      }
-    }
-
-    @media (max-width: 768px) {
-      .main-container {
-        flex-direction: column;
-      }
-
-      .sidebar {
-        width: 100%;
-        max-height: 250px;
-        border-left: none;
-        border-top: 1px solid #30363d;
-      }
-
-      .toast {
-        right: 20px;
-      }
-    }
-  </style>
+  <link rel="stylesheet" href="/styles.css">
 </head>
 <body>
   <div class="header">
@@ -773,6 +14,10 @@
       DevTunnel
     </h1>
     <div class="header-right">
+      <div class="system-info" id="system-info">
+        <span class="system-stat"><span class="stat-icon">CPU</span> <span id="cpu-value">--%</span></span>
+        <span class="system-stat"><span class="stat-icon">MEM</span> <span id="mem-value">--%</span></span>
+      </div>
       <div class="session-indicator" id="session-indicator" style="display: none;">
         <span class="dot"></span>
         <span>Session: <span id="session-id-display">-</span></span>
@@ -781,6 +26,8 @@
         <div class="status-dot" id="status-dot"></div>
         <span id="status-text">Connecting...</span>
       </div>
+      <button class="btn-logout" id="logout-btn" style="display: none;" onclick="logout()">Logout</button>
+      <button class="mobile-sidebar-toggle" id="sidebar-toggle" onclick="toggleMobileSidebar()">&#9776;</button>
     </div>
   </div>
 
@@ -796,6 +43,7 @@
     </div>
   </div>
 
+  <div class="sidebar-overlay" id="sidebar-overlay" onclick="toggleMobileSidebar()"></div>
   <div class="main-container">
     <div id="terminal-container">
       <div class="terminal-tabs" id="terminal-tabs">
@@ -817,41 +65,15 @@
     </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>
-
+      <button class="sidebar-close" onclick="toggleMobileSidebar()">&times;</button>
       <!-- Files Section -->
       <div class="sidebar-section">
         <div class="sidebar-header" onclick="toggleSection('files')">
           <h2>Files</h2>
         </div>
+        <div class="file-search">
+          <input type="text" id="file-search-input" placeholder="Search files..." oninput="handleFileSearch(this.value)">
+        </div>
         <div class="breadcrumb" id="file-breadcrumb">
           <span class="breadcrumb-item" onclick="navigateToPath('')">~</span>
         </div>
@@ -897,716 +119,6 @@
   <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');
-    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');
-
-    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,
-      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);
-    }
-
-    function formatTime(timestamp) {
-      const date = new Date(timestamp);
-      return date.toLocaleTimeString();
-    }
-
-    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`;
-    }
-
-    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);
-      }
-    }
-
-    // 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>
-        `;
-      });
-
-      // 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>
-        `;
-      });
-
-      // 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;
-
-      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() {
-      // 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) {
-      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';
-    }
-
-    // Make functions globally available
-    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');
-
-        // 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) => {
-        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);
-
-              // Send initial size
-              ws.send(JSON.stringify({
-                type: 'resize',
-                cols: term.cols,
-                rows: term.rows
-              }));
-
-              // Update terminal tabs to show active state
-              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(); // Load initial file list
-  </script>
+  <script src="/app.js"></script>
 </body>
 </html>