network-terminal 1.0.7 → 1.0.8

package/bin/cli.js

@@ -5,82 +5,464 @@ const fs = require('fs');
 const path = require('path');
 
 const args = process.argv.slice(2);
+
+// Parse arguments
 const portIndex = args.indexOf('--port');
-let port = portIndex !== -1 ? parseInt(args[portIndex + 1], 10) : 3000;
+const proxyIndex = args.indexOf('--proxy');
+const port = portIndex !== -1 ? parseInt(args[portIndex + 1], 10) : 3001;
+const targetPort = proxyIndex !== -1 ? parseInt(args[proxyIndex + 1], 10) : 3000;
 
 const distPath = path.join(__dirname, '..', 'standalone-dist');
 
-const mimeTypes = {
-  '.html': 'text/html',
-  '.js': 'application/javascript',
-  '.css': 'text/css',
-  '.json': 'application/json',
-  '.png': 'image/png',
-  '.svg': 'image/svg+xml',
-  '.ico': 'image/x-icon',
-};
-
-function serve(filePath, res) {
-  const ext = path.extname(filePath);
-  const contentType = mimeTypes[ext] || 'application/octet-stream';
-
-  fs.readFile(filePath, (err, content) => {
-    if (err) {
-      if (err.code === 'ENOENT') {
-        // Serve index.html for SPA routing
-        fs.readFile(path.join(distPath, 'index.html'), (err2, html) => {
-          if (err2) {
-            res.writeHead(500);
-            res.end('Error loading page');
-            return;
-          }
-          res.writeHead(200, { 'Content-Type': 'text/html' });
-          res.end(html);
-        });
-      } else {
-        res.writeHead(500);
-        res.end('Server error');
-      }
+// Read the built JS file to inline it
+let inlineScript = '';
+try {
+  const assetsDir = path.join(distPath, 'assets');
+  const files = fs.readdirSync(assetsDir);
+  const jsFile = files.find(f => f.endsWith('.js'));
+  if (jsFile) {
+    inlineScript = fs.readFileSync(path.join(assetsDir, jsFile), 'utf-8');
+  }
+} catch (e) {
+  // Will use CDN fallback
+}
+
+// Script to inject Network Terminal
+const injectionScript = `
+<script type="module">
+// Network Terminal Injection
+(function() {
+  // Create container for Network Terminal
+  const container = document.createElement('div');
+  container.id = 'network-terminal-root';
+  document.body.appendChild(container);
+
+  // Store original fetch and XHR
+  const originalFetch = window.fetch;
+  const originalXHR = window.XMLHttpRequest;
+
+  // Network logs storage
+  window.__networkLogs = [];
+  window.__networkTerminalUpdate = null;
+
+  // Intercept Fetch
+  window.fetch = async function(...args) {
+    const startTime = Date.now();
+    const [url, options = {}] = args;
+    const method = options.method || 'GET';
+
+    const log = {
+      id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
+      method: method.toUpperCase(),
+      url: typeof url === 'string' ? url : url.toString(),
+      timestamp: new Date().toISOString(),
+      requestBody: options.body ? tryParse(options.body) : null,
+      status: null,
+      responseBody: null,
+      duration: null,
+    };
+
+    try {
+      const response = await originalFetch.apply(this, args);
+      log.status = response.status;
+      log.duration = Date.now() - startTime;
+
+      // Clone response to read body
+      const cloned = response.clone();
+      try {
+        const text = await cloned.text();
+        log.responseBody = tryParse(text);
+      } catch (e) {}
+
+      addLog(log);
+      return response;
+    } catch (error) {
+      log.status = 0;
+      log.duration = Date.now() - startTime;
+      log.error = error.message;
+      addLog(log);
+      throw error;
+    }
+  };
+
+  // Intercept XHR
+  window.XMLHttpRequest = function() {
+    const xhr = new originalXHR();
+    const startTime = Date.now();
+    let method, url, requestBody;
+
+    const originalOpen = xhr.open;
+    xhr.open = function(m, u, ...rest) {
+      method = m;
+      url = u;
+      return originalOpen.apply(this, [m, u, ...rest]);
+    };
+
+    const originalSend = xhr.send;
+    xhr.send = function(body) {
+      requestBody = body;
+
+      xhr.addEventListener('loadend', function() {
+        const log = {
+          id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
+          method: (method || 'GET').toUpperCase(),
+          url: url,
+          timestamp: new Date().toISOString(),
+          requestBody: tryParse(requestBody),
+          status: xhr.status,
+          responseBody: tryParse(xhr.responseText),
+          duration: Date.now() - startTime,
+        };
+        addLog(log);
+      });
+
+      return originalSend.apply(this, arguments);
+    };
+
+    return xhr;
+  };
+
+  function tryParse(data) {
+    if (!data) return null;
+    if (typeof data === 'object') return data;
+    try {
+      return JSON.parse(data);
+    } catch (e) {
+      return data;
+    }
+  }
+
+  function addLog(log) {
+    window.__networkLogs.unshift(log);
+    if (window.__networkLogs.length > 100) {
+      window.__networkLogs.pop();
+    }
+    if (window.__networkTerminalUpdate) {
+      window.__networkTerminalUpdate([...window.__networkLogs]);
+    }
+    // Also log to console for CLI visibility
+    console.log('[Network]', log.method, log.status || '...', log.url, log.duration ? log.duration + 'ms' : '');
+  }
+
+  // Styles
+  const styles = document.createElement('style');
+  styles.textContent = \`
+    #network-terminal-panel {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 300px;
+      background: #0f172a;
+      border-top: 2px solid #4ade80;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      font-size: 12px;
+      color: #e2e8f0;
+      z-index: 999999;
+      display: flex;
+      flex-direction: column;
+      transition: transform 0.3s ease;
+    }
+    #network-terminal-panel.collapsed {
+      transform: translateY(calc(100% - 36px));
+    }
+    .nt-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 16px;
+      background: #1e293b;
+      border-bottom: 1px solid #334155;
+      cursor: pointer;
+      user-select: none;
+    }
+    .nt-title {
+      color: #4ade80;
+      font-weight: bold;
+    }
+    .nt-controls {
+      display: flex;
+      gap: 12px;
+    }
+    .nt-btn {
+      background: #334155;
+      border: none;
+      color: #94a3b8;
+      padding: 4px 8px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 11px;
+    }
+    .nt-btn:hover {
+      background: #475569;
+      color: #e2e8f0;
+    }
+    .nt-logs {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px 0;
+    }
+    .nt-log {
+      display: flex;
+      align-items: flex-start;
+      padding: 6px 16px;
+      border-bottom: 1px solid #1e293b;
+      cursor: pointer;
+    }
+    .nt-log:hover {
+      background: #1e293b;
+    }
+    .nt-log.expanded {
+      flex-direction: column;
+      background: #1e293b;
+    }
+    .nt-log-main {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      width: 100%;
+    }
+    .nt-method {
+      font-weight: bold;
+      width: 60px;
+      flex-shrink: 0;
+    }
+    .nt-method.GET { color: #22c55e; }
+    .nt-method.POST { color: #3b82f6; }
+    .nt-method.PUT { color: #f59e0b; }
+    .nt-method.DELETE { color: #ef4444; }
+    .nt-method.PATCH { color: #a855f7; }
+    .nt-status {
+      width: 40px;
+      flex-shrink: 0;
+      text-align: center;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 11px;
+    }
+    .nt-status.success { background: #166534; color: #4ade80; }
+    .nt-status.error { background: #991b1b; color: #fca5a5; }
+    .nt-status.pending { background: #374151; color: #9ca3af; }
+    .nt-url {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #94a3b8;
+    }
+    .nt-duration {
+      color: #64748b;
+      font-size: 11px;
+      width: 60px;
+      text-align: right;
+      flex-shrink: 0;
+    }
+    .nt-details {
+      margin-top: 8px;
+      padding: 8px;
+      background: #0f172a;
+      border-radius: 4px;
+      width: 100%;
+      max-height: 200px;
+      overflow: auto;
+    }
+    .nt-details pre {
+      margin: 0;
+      white-space: pre-wrap;
+      word-break: break-all;
+      color: #cbd5e1;
+      font-size: 11px;
+    }
+    .nt-detail-label {
+      color: #4ade80;
+      font-weight: bold;
+      margin-top: 8px;
+      margin-bottom: 4px;
+    }
+    .nt-detail-label:first-child {
+      margin-top: 0;
+    }
+    .nt-empty {
+      text-align: center;
+      padding: 40px;
+      color: #64748b;
+    }
+  \`;
+  document.head.appendChild(styles);
+
+  // Create UI
+  function createUI() {
+    const panel = document.createElement('div');
+    panel.id = 'network-terminal-panel';
+    panel.innerHTML = \`
+      <div class="nt-header">
+        <span class="nt-title">>_ Network Terminal</span>
+        <div class="nt-controls">
+          <button class="nt-btn" id="nt-clear">Clear</button>
+          <button class="nt-btn" id="nt-toggle">_</button>
+        </div>
+      </div>
+      <div class="nt-logs" id="nt-logs">
+        <div class="nt-empty">Waiting for network requests...</div>
+      </div>
+    \`;
+    document.body.appendChild(panel);
+
+    // Toggle collapse
+    document.getElementById('nt-toggle').addEventListener('click', (e) => {
+      e.stopPropagation();
+      panel.classList.toggle('collapsed');
+      e.target.textContent = panel.classList.contains('collapsed') ? '▲' : '_';
+    });
+
+    // Clear logs
+    document.getElementById('nt-clear').addEventListener('click', (e) => {
+      e.stopPropagation();
+      window.__networkLogs = [];
+      renderLogs([]);
+    });
+
+    // Header click to toggle
+    panel.querySelector('.nt-header').addEventListener('click', () => {
+      panel.classList.toggle('collapsed');
+      document.getElementById('nt-toggle').textContent = panel.classList.contains('collapsed') ? '▲' : '_';
+    });
+  }
+
+  let expandedId = null;
+
+  function renderLogs(logs) {
+    const container = document.getElementById('nt-logs');
+    if (!logs.length) {
+      container.innerHTML = '<div class="nt-empty">Waiting for network requests...</div>';
       return;
     }
-    res.writeHead(200, { 'Content-Type': contentType });
-    res.end(content);
-  });
-}
 
-function startServer(port) {
-  const server = http.createServer((req, res) => {
-    let filePath = path.join(distPath, req.url === '/' ? 'index.html' : req.url);
-    serve(filePath, res);
-  });
+    container.innerHTML = logs.map(log => {
+      const isExpanded = expandedId === log.id;
+      const statusClass = !log.status ? 'pending' : log.status < 400 ? 'success' : 'error';
+
+      return \`
+        <div class="nt-log \${isExpanded ? 'expanded' : ''}" data-id="\${log.id}">
+          <div class="nt-log-main">
+            <span class="nt-method \${log.method}">\${log.method}</span>
+            <span class="nt-status \${statusClass}">\${log.status || '...'}</span>
+            <span class="nt-url">\${log.url}</span>
+            <span class="nt-duration">\${log.duration ? log.duration + 'ms' : ''}</span>
+          </div>
+          \${isExpanded ? \`
+            <div class="nt-details">
+              \${log.requestBody ? \`<div class="nt-detail-label">Request Body:</div><pre>\${formatJson(log.requestBody)}</pre>\` : ''}
+              \${log.responseBody ? \`<div class="nt-detail-label">Response:</div><pre>\${formatJson(log.responseBody)}</pre>\` : ''}
+            </div>
+          \` : ''}
+        </div>
+      \`;
+    }).join('');
+
+    // Add click handlers
+    container.querySelectorAll('.nt-log').forEach(el => {
+      el.addEventListener('click', () => {
+        const id = el.dataset.id;
+        expandedId = expandedId === id ? null : id;
+        renderLogs(window.__networkLogs);
+      });
+    });
+  }
+
+  function formatJson(data) {
+    if (typeof data === 'string') return escapeHtml(data);
+    try {
+      return escapeHtml(JSON.stringify(data, null, 2));
+    } catch (e) {
+      return escapeHtml(String(data));
+    }
+  }
+
+  function escapeHtml(str) {
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  // Initialize
+  createUI();
+  window.__networkTerminalUpdate = renderLogs;
+})();
+</script>
+`;
+
+console.log('\x1b[32m%s\x1b[0m', '\n  >_ Network Terminal (Proxy Mode)\n');
+console.log(`  Proxying requests from port ${port} → ${targetPort}`);
+console.log('  Starting proxy server...\n');
+
+const server = http.createServer((req, res) => {
+  const options = {
+    hostname: 'localhost',
+    port: targetPort,
+    path: req.url,
+    method: req.method,
+    headers: req.headers,
+  };
 
-  server.on('error', (err) => {
-    if (err.code === 'EADDRINUSE') {
-      console.log(`  Port ${port} is in use, trying ${port + 1}...`);
-      startServer(port + 1);
+  const proxyReq = http.request(options, (proxyRes) => {
+    const contentType = proxyRes.headers['content-type'] || '';
+    const isHtml = contentType.includes('text/html');
+
+    if (isHtml) {
+      // Collect the response body
+      let body = '';
+      proxyRes.on('data', chunk => body += chunk);
+      proxyRes.on('end', () => {
+        // Inject the Network Terminal before </body>
+        let modified = body;
+        if (body.includes('</body>')) {
+          modified = body.replace('</body>', injectionScript + '</body>');
+        } else if (body.includes('</html>')) {
+          modified = body.replace('</html>', injectionScript + '</html>');
+        } else {
+          modified = body + injectionScript;
+        }
+
+        // Update content-length
+        const newHeaders = { ...proxyRes.headers };
+        delete newHeaders['content-length'];
+        delete newHeaders['content-encoding']; // Remove encoding since we modified content
+
+        res.writeHead(proxyRes.statusCode, newHeaders);
+        res.end(modified);
+      });
     } else {
-      console.error('Server error:', err);
-      process.exit(1);
+      // Pass through non-HTML responses
+      res.writeHead(proxyRes.statusCode, proxyRes.headers);
+      proxyRes.pipe(res);
     }
   });
 
-  server.listen(port, () => {
-    console.log('\x1b[32m%s\x1b[0m', '\n  >_ Network Terminal\n');
-    console.log('\x1b[32m%s\x1b[0m', `  Server running at:\n`);
-    console.log(`  > Local:   \x1b[36mhttp://localhost:${port}\x1b[0m`);
-    console.log('\n  Press \x1b[33mCtrl+C\x1b[0m to stop\n');
-
-    // Open browser
-    const open = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
-    require('child_process').exec(`${open} http://localhost:${port}`);
+  proxyReq.on('error', (err) => {
+    console.error(`  \x1b[31mProxy error:\x1b[0m ${err.message}`);
+    res.writeHead(502);
+    res.end(`Proxy Error: Could not connect to localhost:${targetPort}\n\nMake sure your app is running on port ${targetPort}`);
   });
-}
 
-// Check if standalone-dist exists
-if (!fs.existsSync(distPath)) {
-  console.error('\x1b[31mError: standalone-dist folder not found.\x1b[0m');
-  console.error('Please rebuild the package with: npm run build');
+  req.pipe(proxyReq);
+});
+
+server.on('error', (err) => {
+  if (err.code === 'EADDRINUSE') {
+    console.error(`\x1b[31m  Error: Port ${port} is already in use\x1b[0m`);
+    console.error(`  Try: npx network-terminal --port ${port + 1} --proxy ${targetPort}`);
+    process.exit(1);
+  }
+  console.error('Server error:', err);
   process.exit(1);
-}
+});
+
+server.listen(port, () => {
+  console.log('\x1b[32m%s\x1b[0m', `  Proxy server running!\n`);
+  console.log(`  Open your app at:  \x1b[36mhttp://localhost:${port}\x1b[0m`);
+  console.log(`  (instead of http://localhost:${targetPort})\n`);
+  console.log('  Press \x1b[33mCtrl+C\x1b[0m to stop\n');
 
-startServer(port);
+  // Open browser
+  const open = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
+  require('child_process').exec(`${open} http://localhost:${port}`);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "network-terminal",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A browser-based terminal UI for monitoring Fetch/XHR requests with real-time display of routes, payloads, and responses",
   "main": "dist/index.js",
   "module": "dist/index.mjs",