@mjasano/devtunnel 1.0.0 → 1.1.0

package/package.json

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

package/public/index.html

@@ -407,6 +407,203 @@
       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;
+    }
+
+    .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;
+    }
+
     @keyframes slideIn {
       from {
         transform: translateY(20px);
@@ -454,12 +651,51 @@
     </div>
   </div>
 
+  <!-- Tab Bar -->
+  <div class="tab-bar">
+    <div class="tab active" data-tab="terminal" onclick="switchTab('terminal')">
+      <span class="tab-icon">></span>
+      Terminal
+    </div>
+    <div class="tab" data-tab="editor" onclick="switchTab('editor')">
+      <span class="tab-icon">{}</span>
+      Editor
+    </div>
+  </div>
+
   <div class="main-container">
     <div id="terminal-container">
       <div id="terminal"></div>
     </div>
 
+    <div id="editor-container">
+      <div class="editor-tabs" id="editor-tabs"></div>
+      <div id="monaco-editor"></div>
+      <div class="editor-empty" id="editor-empty">
+        <div class="editor-empty-icon">{}</div>
+        <div>Select a file to edit</div>
+        <div style="margin-top: 8px; font-size: 12px; color: #484f58;">
+          Ctrl+S to save
+        </div>
+      </div>
+    </div>
+
     <div class="sidebar">
+      <!-- Files Section -->
+      <div class="sidebar-section">
+        <div class="sidebar-header" onclick="toggleSection('files')">
+          <h2>Files</h2>
+        </div>
+        <div class="breadcrumb" id="file-breadcrumb">
+          <span class="breadcrumb-item" onclick="navigateToPath('')">~</span>
+        </div>
+        <div class="sidebar-content" id="files-content" style="max-height: 300px;">
+          <div class="file-tree" id="file-tree">
+            <div class="empty-state">Loading...</div>
+          </div>
+        </div>
+      </div>
+
       <!-- Sessions Section -->
       <div class="sidebar-section">
         <div class="sidebar-header" onclick="toggleSection('sessions')">
@@ -508,6 +744,7 @@
   <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/xterm-addon-web-links@0.9.0/lib/xterm-addon-web-links.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs/loader.js"></script>
   <script>
     const terminalContainer = document.getElementById('terminal');
     const statusDot = document.getElementById('status-dot');
@@ -524,6 +761,309 @@
     let sessions = [];
     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,
@@ -809,6 +1349,7 @@
 
     connect();
     term.focus();
+    loadFiles(); // Load initial file list
   </script>
 </body>
 </html>

package/server.js

@@ -4,6 +4,7 @@ const WebSocket = require('ws');
 const pty = require('@homebridge/node-pty-prebuilt-multiarch');
 const path = require('path');
 const os = require('os');
+const fs = require('fs').promises;
 const { spawn } = require('child_process');
 const crypto = require('crypto');
 
@@ -364,6 +365,144 @@ wss.on('connection', (ws) => {
   });
 });
 
+// File System API
+const WORKSPACE_ROOT = process.env.WORKSPACE || os.homedir();
+
+// Get file/directory listing
+app.get('/api/files', async (req, res) => {
+  try {
+    const requestedPath = req.query.path || '';
+    const fullPath = path.join(WORKSPACE_ROOT, requestedPath);
+
+    // Security: ensure path is within workspace
+    const normalizedPath = path.normalize(fullPath);
+    if (!normalizedPath.startsWith(WORKSPACE_ROOT)) {
+      return res.status(403).json({ error: 'Access denied' });
+    }
+
+    const stats = await fs.stat(normalizedPath);
+
+    if (stats.isDirectory()) {
+      const entries = await fs.readdir(normalizedPath, { withFileTypes: true });
+      const items = await Promise.all(
+        entries
+          .filter(entry => !entry.name.startsWith('.')) // Hide hidden files
+          .map(async (entry) => {
+            const itemPath = path.join(normalizedPath, entry.name);
+            try {
+              const itemStats = await fs.stat(itemPath);
+              return {
+                name: entry.name,
+                path: path.join(requestedPath, entry.name),
+                isDirectory: entry.isDirectory(),
+                size: itemStats.size,
+                modified: itemStats.mtime
+              };
+            } catch {
+              return null;
+            }
+          })
+      );
+
+      // Sort: directories first, then files
+      const validItems = items.filter(Boolean).sort((a, b) => {
+        if (a.isDirectory !== b.isDirectory) {
+          return a.isDirectory ? -1 : 1;
+        }
+        return a.name.localeCompare(b.name);
+      });
+
+      res.json({
+        path: requestedPath,
+        items: validItems
+      });
+    } else {
+      res.json({
+        path: requestedPath,
+        isFile: true,
+        size: stats.size,
+        modified: stats.mtime
+      });
+    }
+  } catch (err) {
+    if (err.code === 'ENOENT') {
+      res.status(404).json({ error: 'Path not found' });
+    } else {
+      res.status(500).json({ error: err.message });
+    }
+  }
+});
+
+// Read file content
+app.get('/api/files/read', async (req, res) => {
+  try {
+    const requestedPath = req.query.path;
+    if (!requestedPath) {
+      return res.status(400).json({ error: 'Path required' });
+    }
+
+    const fullPath = path.join(WORKSPACE_ROOT, requestedPath);
+    const normalizedPath = path.normalize(fullPath);
+
+    if (!normalizedPath.startsWith(WORKSPACE_ROOT)) {
+      return res.status(403).json({ error: 'Access denied' });
+    }
+
+    const stats = await fs.stat(normalizedPath);
+
+    // Limit file size (5MB)
+    if (stats.size > 5 * 1024 * 1024) {
+      return res.status(413).json({ error: 'File too large' });
+    }
+
+    const content = await fs.readFile(normalizedPath, 'utf-8');
+    res.json({
+      path: requestedPath,
+      content,
+      size: stats.size,
+      modified: stats.mtime
+    });
+  } catch (err) {
+    if (err.code === 'ENOENT') {
+      res.status(404).json({ error: 'File not found' });
+    } else {
+      res.status(500).json({ error: err.message });
+    }
+  }
+});
+
+// Write file content
+app.post('/api/files/write', async (req, res) => {
+  try {
+    const { path: filePath, content } = req.body;
+
+    if (!filePath) {
+      return res.status(400).json({ error: 'Path required' });
+    }
+
+    const fullPath = path.join(WORKSPACE_ROOT, filePath);
+    const normalizedPath = path.normalize(fullPath);
+
+    if (!normalizedPath.startsWith(WORKSPACE_ROOT)) {
+      return res.status(403).json({ error: 'Access denied' });
+    }
+
+    // Ensure parent directory exists
+    await fs.mkdir(path.dirname(normalizedPath), { recursive: true });
+
+    await fs.writeFile(normalizedPath, content, 'utf-8');
+    const stats = await fs.stat(normalizedPath);
+
+    res.json({
+      path: filePath,
+      size: stats.size,
+      modified: stats.mtime
+    });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 // REST API
 app.get('/api/sessions', (req, res) => {
   const sessionList = Array.from(sessions.values()).map(s => ({