network-terminal 1.0.9 → 1.0.11

package/bin/cli.js

@@ -1,20 +1,13 @@
 #!/usr/bin/env node
 
 const http = require('http');
-const path = require('path');
 
 const args = process.argv.slice(2);
-
-// Parse arguments
 const portIndex = args.indexOf('--port');
-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 dashboardPort = port + 1000; // Dashboard on separate port
+const port = portIndex !== -1 ? parseInt(args[portIndex + 1], 10) : 4001;
 
 // Store network logs
 const networkLogs = [];
-let logId = 0;
 
 // SSE clients for real-time updates
 const sseClients = new Set();
@@ -26,7 +19,132 @@ function broadcastLog(log) {
   });
 }
 
-// Dashboard HTML with two terminals
+// Monitor script that users add to their app
+const monitorScript = `
+(function() {
+  if (window.__networkTerminalActive) return;
+  window.__networkTerminalActive = true;
+
+  const DASHBOARD_URL = 'http://localhost:${port}';
+
+  function sendLog(log) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('POST', DASHBOARD_URL + '/log', true);
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.send(JSON.stringify(log));
+  }
+
+  function tryParse(data) {
+    if (!data) return null;
+    if (typeof data === 'object') return data;
+    try { return JSON.parse(data); } catch (e) { return data; }
+  }
+
+  // Intercept Fetch
+  var originalFetch = window.fetch;
+  window.fetch = function() {
+    var args = arguments;
+    var startTime = Date.now();
+    var input = args[0];
+    var options = args[1] || {};
+    var url = typeof input === 'string' ? input : (input.url || input.toString());
+    var method = (options.method || 'GET').toUpperCase();
+
+    // Skip our own requests
+    if (url.includes('localhost:${port}')) {
+      return originalFetch.apply(this, args);
+    }
+
+    var log = {
+      id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
+      method: method,
+      url: url,
+      timestamp: new Date().toISOString(),
+      requestBody: options.body ? tryParse(options.body) : null,
+      status: null,
+      responseBody: null,
+      duration: null,
+    };
+
+    sendLog(log);
+
+    return originalFetch.apply(this, args).then(function(response) {
+      log.status = response.status;
+      log.duration = Date.now() - startTime;
+
+      var cloned = response.clone();
+      cloned.text().then(function(text) {
+        log.responseBody = tryParse(text);
+        sendLog(log);
+      }).catch(function() {
+        sendLog(log);
+      });
+
+      return response;
+    }).catch(function(error) {
+      log.status = 0;
+      log.duration = Date.now() - startTime;
+      log.error = error.message;
+      sendLog(log);
+      throw error;
+    });
+  };
+
+  // Intercept XMLHttpRequest
+  var OriginalXHR = window.XMLHttpRequest;
+  window.XMLHttpRequest = function() {
+    var xhr = new OriginalXHR();
+    var method, url, requestBody, startTime, logId;
+
+    var originalOpen = xhr.open;
+    xhr.open = function(m, u) {
+      method = m;
+      url = u;
+      return originalOpen.apply(this, arguments);
+    };
+
+    var originalSend = xhr.send;
+    xhr.send = function(body) {
+      // Skip our own requests
+      if (url && url.includes('localhost:${port}')) {
+        return originalSend.apply(this, arguments);
+      }
+
+      startTime = Date.now();
+      requestBody = body;
+      logId = Date.now().toString() + Math.random().toString(36).substr(2, 9);
+
+      var log = {
+        id: logId,
+        method: (method || 'GET').toUpperCase(),
+        url: url,
+        timestamp: new Date().toISOString(),
+        requestBody: tryParse(requestBody),
+        status: null,
+        responseBody: null,
+        duration: null,
+      };
+
+      sendLog(log);
+
+      xhr.addEventListener('loadend', function() {
+        log.status = xhr.status;
+        log.duration = Date.now() - startTime;
+        log.responseBody = tryParse(xhr.responseText);
+        sendLog(log);
+      });
+
+      return originalSend.apply(this, arguments);
+    };
+
+    return xhr;
+  };
+
+  console.log('[Network Terminal] ✓ Monitoring active - Dashboard: http://localhost:${port}');
+})();
+`;
+
+// Dashboard HTML
 const dashboardHTML = `
 <!DOCTYPE html>
 <html lang="en">
@@ -51,19 +169,9 @@ const dashboardHTML = `
       justify-content: space-between;
       align-items: center;
     }
-    .title {
-      color: #4ade80;
-      font-size: 18px;
-      font-weight: bold;
-    }
-    .subtitle {
-      color: #64748b;
-      font-size: 12px;
-    }
-    .controls {
-      display: flex;
-      gap: 12px;
-    }
+    .title { color: #4ade80; font-size: 18px; font-weight: bold; }
+    .subtitle { color: #64748b; font-size: 12px; margin-top: 4px; }
+    .controls { display: flex; gap: 12px; align-items: center; }
     .btn {
       background: #1e293b;
       border: 1px solid #334155;
@@ -74,23 +182,15 @@ const dashboardHTML = `
       font-size: 12px;
       font-family: inherit;
     }
-    .btn:hover {
-      background: #334155;
-      color: #e2e8f0;
-    }
-    .container {
-      display: flex;
-      height: calc(100vh - 60px);
-    }
+    .btn:hover { background: #334155; color: #e2e8f0; }
+    .container { display: flex; height: calc(100vh - 80px); }
     .panel {
       flex: 1;
       display: flex;
       flex-direction: column;
       border-right: 1px solid #1e293b;
     }
-    .panel:last-child {
-      border-right: none;
-    }
+    .panel:last-child { border-right: none; }
     .panel-header {
       background: #0f172a;
       padding: 12px 16px;
@@ -99,10 +199,7 @@ const dashboardHTML = `
       justify-content: space-between;
       align-items: center;
     }
-    .panel-title {
-      font-weight: bold;
-      font-size: 14px;
-    }
+    .panel-title { font-weight: bold; font-size: 14px; }
     .panel-title.request { color: #3b82f6; }
     .panel-title.response { color: #22c55e; }
     .panel-count {
@@ -112,11 +209,7 @@ const dashboardHTML = `
       font-size: 11px;
       color: #64748b;
     }
-    .logs {
-      flex: 1;
-      overflow-y: auto;
-      padding: 8px;
-    }
+    .logs { flex: 1; overflow-y: auto; padding: 8px; }
     .log-entry {
       background: #0f172a;
       border: 1px solid #1e293b;
@@ -126,12 +219,8 @@ const dashboardHTML = `
       cursor: pointer;
       transition: border-color 0.2s;
     }
-    .log-entry:hover {
-      border-color: #334155;
-    }
-    .log-entry.selected {
-      border-color: #4ade80;
-    }
+    .log-entry:hover { border-color: #334155; }
+    .log-entry.selected { border-color: #4ade80; }
     .log-header {
       display: flex;
       align-items: center;
@@ -150,11 +239,7 @@ const dashboardHTML = `
     .method.PUT { background: #a16207; color: #fcd34d; }
     .method.DELETE { background: #991b1b; color: #fca5a5; }
     .method.PATCH { background: #7c3aed; color: #c4b5fd; }
-    .status {
-      font-size: 11px;
-      padding: 3px 8px;
-      border-radius: 4px;
-    }
+    .status { font-size: 11px; padding: 3px 8px; border-radius: 4px; }
     .status.success { background: #166534; color: #4ade80; }
     .status.error { background: #991b1b; color: #fca5a5; }
     .status.pending { background: #374151; color: #9ca3af; }
@@ -166,20 +251,9 @@ const dashboardHTML = `
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    .duration {
-      font-size: 11px;
-      color: #64748b;
-    }
-    .timestamp {
-      font-size: 10px;
-      color: #475569;
-    }
-    .log-body {
-      padding: 12px;
-      font-size: 11px;
-      max-height: 300px;
-      overflow: auto;
-    }
+    .duration { font-size: 11px; color: #64748b; }
+    .timestamp { font-size: 10px; color: #475569; }
+    .log-body { padding: 12px; font-size: 11px; max-height: 300px; overflow: auto; }
     .log-body pre {
       margin: 0;
       white-space: pre-wrap;
@@ -187,10 +261,7 @@ const dashboardHTML = `
       color: #cbd5e1;
       line-height: 1.5;
     }
-    .log-body.empty {
-      color: #475569;
-      font-style: italic;
-    }
+    .log-body.empty { color: #475569; font-style: italic; }
     .empty-state {
       display: flex;
       flex-direction: column;
@@ -198,27 +269,27 @@ const dashboardHTML = `
       justify-content: center;
       height: 100%;
       color: #475569;
+      text-align: center;
+      padding: 20px;
     }
-    .empty-state svg {
-      width: 48px;
-      height: 48px;
-      margin-bottom: 16px;
-      opacity: 0.5;
-    }
-    .connection-status {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 12px;
-    }
+    .empty-state svg { width: 48px; height: 48px; margin-bottom: 16px; opacity: 0.5; }
     .status-dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: #22c55e;
+      animation: pulse 2s infinite;
     }
-    .status-dot.disconnected {
-      background: #ef4444;
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+    .status-dot.disconnected { background: #ef4444; animation: none; }
+    .code-box {
+      background: #1e293b;
+      padding: 12px;
+      border-radius: 6px;
+      margin-top: 12px;
+      font-size: 11px;
+      color: #4ade80;
+      word-break: break-all;
     }
   </style>
 </head>
@@ -226,13 +297,10 @@ const dashboardHTML = `
   <div class="header">
     <div>
       <div class="title">>_ Network Terminal</div>
-      <div class="subtitle">Monitoring localhost:${targetPort} via proxy :${port}</div>
+      <div class="subtitle">Add this to your app's HTML: &lt;script src="http://localhost:${port}/monitor.js"&gt;&lt;/script&gt;</div>
     </div>
     <div class="controls">
-      <div class="connection-status">
-        <div class="status-dot" id="statusDot"></div>
-        <span id="statusText">Connected</span>
-      </div>
+      <div class="status-dot" id="statusDot"></div>
       <button class="btn" onclick="clearLogs()">Clear All</button>
     </div>
   </div>
@@ -249,7 +317,8 @@ const dashboardHTML = `
             <path d="M12 19V5M5 12l7-7 7 7"/>
           </svg>
           <div>Waiting for requests...</div>
-          <div style="margin-top: 8px; font-size: 11px;">Make requests in your app at localhost:${port}</div>
+          <div style="margin-top: 12px; font-size: 11px;">Add this script tag to your HTML:</div>
+          <div class="code-box">&lt;script src="http://localhost:${port}/monitor.js"&gt;&lt;/script&gt;</div>
         </div>
       </div>
     </div>
@@ -271,17 +340,14 @@ const dashboardHTML = `
   </div>
 
   <script>
-    const logs = [];
+    const logs = new Map();
     let selectedId = null;
 
     function formatJson(data) {
       if (!data) return null;
       if (typeof data === 'string') {
-        try {
-          data = JSON.parse(data);
-        } catch (e) {
-          return escapeHtml(data);
-        }
+        try { data = JSON.parse(data); }
+        catch (e) { return escapeHtml(data.substring(0, 2000)); }
       }
       return escapeHtml(JSON.stringify(data, null, 2));
     }
@@ -297,21 +363,29 @@ const dashboardHTML = `
              String(date.getMilliseconds()).padStart(3, '0');
     }
 
+    function getLogsArray() {
+      return Array.from(logs.values()).sort((a, b) =>
+        new Date(b.timestamp) - new Date(a.timestamp)
+      );
+    }
+
     function renderLogs() {
+      const logsArray = getLogsArray();
       const requestContainer = document.getElementById('requestLogs');
       const responseContainer = document.getElementById('responseLogs');
 
-      document.getElementById('requestCount').textContent = logs.length;
-      document.getElementById('responseCount').textContent = logs.filter(l => l.status).length;
+      document.getElementById('requestCount').textContent = logsArray.length;
+      document.getElementById('responseCount').textContent = logsArray.filter(l => l.status).length;
 
-      if (logs.length === 0) {
+      if (logsArray.length === 0) {
         requestContainer.innerHTML = \`
           <div class="empty-state">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M12 19V5M5 12l7-7 7 7"/>
             </svg>
             <div>Waiting for requests...</div>
-            <div style="margin-top: 8px; font-size: 11px;">Make requests in your app at localhost:${port}</div>
+            <div style="margin-top: 12px; font-size: 11px;">Add this script tag to your HTML:</div>
+            <div class="code-box">&lt;script src="http://localhost:${port}/monitor.js"&gt;&lt;/script&gt;</div>
           </div>
         \`;
         responseContainer.innerHTML = \`
@@ -325,45 +399,33 @@ const dashboardHTML = `
         return;
       }
 
-      // Render requests
-      requestContainer.innerHTML = logs.map(log => {
+      requestContainer.innerHTML = logsArray.map(log => {
         const isSelected = selectedId === log.id;
         const bodyContent = formatJson(log.requestBody);
-
         return \`
           <div class="log-entry \${isSelected ? 'selected' : ''}" onclick="selectLog('\${log.id}')">
             <div class="log-header">
               <span class="method \${log.method}">\${log.method}</span>
-              <span class="url">\${log.url}</span>
+              <span class="url" title="\${escapeHtml(log.url)}">\${log.url}</span>
               <span class="timestamp">\${formatTime(log.timestamp)}</span>
             </div>
-            \${isSelected ? \`
-              <div class="log-body \${!bodyContent ? 'empty' : ''}">
-                \${bodyContent ? \`<pre>\${bodyContent}</pre>\` : 'No request body'}
-              </div>
-            \` : ''}
+            \${isSelected ? \`<div class="log-body \${!bodyContent ? 'empty' : ''}">\${bodyContent ? '<pre>'+bodyContent+'</pre>' : 'No request body'}</div>\` : ''}
           </div>
         \`;
       }).join('');
 
-      // Render responses
-      responseContainer.innerHTML = logs.map(log => {
+      responseContainer.innerHTML = logsArray.map(log => {
         const isSelected = selectedId === log.id;
         const statusClass = !log.status ? 'pending' : log.status < 400 ? 'success' : 'error';
         const bodyContent = formatJson(log.responseBody);
-
         return \`
           <div class="log-entry \${isSelected ? 'selected' : ''}" onclick="selectLog('\${log.id}')">
             <div class="log-header">
               <span class="status \${statusClass}">\${log.status || '...'}</span>
-              <span class="url">\${log.url}</span>
+              <span class="url" title="\${escapeHtml(log.url)}">\${log.url}</span>
               <span class="duration">\${log.duration ? log.duration + 'ms' : ''}</span>
             </div>
-            \${isSelected ? \`
-              <div class="log-body \${!bodyContent ? 'empty' : ''}">
-                \${bodyContent ? \`<pre>\${bodyContent}</pre>\` : log.status ? 'No response body' : 'Pending...'}
-              </div>
-            \` : ''}
+            \${isSelected ? \`<div class="log-body \${!bodyContent ? 'empty' : ''}">\${bodyContent ? '<pre>'+bodyContent+'</pre>' : (log.status ? 'No response body' : 'Pending...')}</div>\` : ''}
           </div>
         \`;
       }).join('');
@@ -375,40 +437,32 @@ const dashboardHTML = `
     }
 
     function clearLogs() {
-      logs.length = 0;
+      logs.clear();
       selectedId = null;
       renderLogs();
-      fetch('/__network-terminal__/clear', { method: 'POST' });
+      fetch('/clear', { method: 'POST' });
     }
 
     function addLog(log) {
-      const existingIndex = logs.findIndex(l => l.id === log.id);
-      if (existingIndex >= 0) {
-        logs[existingIndex] = log;
-      } else {
-        logs.unshift(log);
-        if (logs.length > 100) logs.pop();
+      logs.set(log.id, log);
+      if (logs.size > 100) {
+        const oldest = getLogsArray().pop();
+        if (oldest) logs.delete(oldest.id);
       }
       renderLogs();
     }
 
-    // SSE connection for real-time updates
     function connect() {
-      const evtSource = new EventSource('/__network-terminal__/events');
-
+      const evtSource = new EventSource('/events');
       evtSource.onopen = () => {
         document.getElementById('statusDot').classList.remove('disconnected');
-        document.getElementById('statusText').textContent = 'Connected';
       };
-
       evtSource.onmessage = (event) => {
         const log = JSON.parse(event.data);
         addLog(log);
       };
-
       evtSource.onerror = () => {
         document.getElementById('statusDot').classList.add('disconnected');
-        document.getElementById('statusText').textContent = 'Reconnecting...';
         evtSource.close();
         setTimeout(connect, 2000);
       };
@@ -422,161 +476,91 @@ const dashboardHTML = `
 `;
 
 console.log('\x1b[32m%s\x1b[0m', '\n  >_ Network Terminal\n');
-console.log(`  Proxy:     http://localhost:${port} → localhost:${targetPort}`);
-console.log(`  Dashboard: http://localhost:${dashboardPort}\n`);
-console.log('  Starting servers...\n');
-
-// Dashboard server
-const dashboardServer = http.createServer((req, res) => {
-  if (req.url === '/__network-terminal__/events') {
-    // SSE endpoint
+
+const server = http.createServer((req, res) => {
+  // CORS headers
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+
+  if (req.method === 'OPTIONS') {
+    res.writeHead(204);
+    res.end();
+    return;
+  }
+
+  // Serve monitor script
+  if (req.url === '/monitor.js') {
+    res.writeHead(200, { 'Content-Type': 'application/javascript' });
+    res.end(monitorScript);
+    return;
+  }
+
+  // SSE endpoint
+  if (req.url === '/events') {
     res.writeHead(200, {
       'Content-Type': 'text/event-stream',
       'Cache-Control': 'no-cache',
       'Connection': 'keep-alive',
-      'Access-Control-Allow-Origin': '*',
     });
-
     sseClients.add(res);
-
-    // Send existing logs
     networkLogs.forEach(log => {
       res.write(`data: ${JSON.stringify(log)}\n\n`);
     });
+    req.on('close', () => sseClients.delete(res));
+    return;
+  }
 
-    req.on('close', () => {
-      sseClients.delete(res);
+  // Receive logs
+  if (req.url === '/log' && req.method === 'POST') {
+    let body = '';
+    req.on('data', chunk => body += chunk);
+    req.on('end', () => {
+      try {
+        const log = JSON.parse(body);
+        const existingIndex = networkLogs.findIndex(l => l.id === log.id);
+        if (existingIndex >= 0) {
+          networkLogs[existingIndex] = log;
+        } else {
+          networkLogs.unshift(log);
+          if (networkLogs.length > 100) networkLogs.pop();
+        }
+        broadcastLog(log);
+      } catch (e) {}
+      res.writeHead(200);
+      res.end('OK');
     });
     return;
   }
 
-  if (req.url === '/__network-terminal__/clear' && req.method === 'POST') {
+  // Clear logs
+  if (req.url === '/clear' && req.method === 'POST') {
     networkLogs.length = 0;
     res.writeHead(200);
     res.end('OK');
     return;
   }
 
+  // Serve dashboard
   res.writeHead(200, { 'Content-Type': 'text/html' });
   res.end(dashboardHTML);
 });
 
-// Proxy server
-const proxyServer = http.createServer((req, res) => {
-  const startTime = Date.now();
-  const currentLogId = ++logId;
-
-  // Create log entry for request
-  const log = {
-    id: String(currentLogId),
-    method: req.method,
-    url: req.url,
-    timestamp: new Date().toISOString(),
-    requestBody: null,
-    status: null,
-    responseBody: null,
-    duration: null,
-  };
-
-  // Collect request body
-  let requestBody = '';
-  req.on('data', chunk => requestBody += chunk);
-  req.on('end', () => {
-    if (requestBody) {
-      try {
-        log.requestBody = JSON.parse(requestBody);
-      } catch (e) {
-        log.requestBody = requestBody;
-      }
-    }
-
-    // Add to logs and broadcast
-    networkLogs.unshift(log);
-    if (networkLogs.length > 100) networkLogs.pop();
-    broadcastLog(log);
-
-    // Forward request to target
-    const options = {
-      hostname: 'localhost',
-      port: targetPort,
-      path: req.url,
-      method: req.method,
-      headers: req.headers,
-    };
+server.listen(port, () => {
+  console.log(`  Dashboard: \x1b[36mhttp://localhost:${port}\x1b[0m\n`);
+  console.log('  Add this to your app\'s HTML (in <head> or before </body>):\n');
+  console.log(`  \x1b[33m<script src="http://localhost:${port}/monitor.js"></script>\x1b[0m\n`);
+  console.log('  Press \x1b[33mCtrl+C\x1b[0m to stop\n');
 
-    const proxyReq = http.request(options, (proxyRes) => {
-      const contentType = proxyRes.headers['content-type'] || '';
-
-      // Collect response body
-      let responseBody = '';
-      proxyRes.on('data', chunk => responseBody += chunk);
-      proxyRes.on('end', () => {
-        // Update log with response
-        log.status = proxyRes.statusCode;
-        log.duration = Date.now() - startTime;
-
-        if (responseBody && contentType.includes('application/json')) {
-          try {
-            log.responseBody = JSON.parse(responseBody);
-          } catch (e) {
-            log.responseBody = responseBody;
-          }
-        } else if (responseBody && !contentType.includes('text/html')) {
-          log.responseBody = responseBody.substring(0, 1000);
-        }
-
-        // Broadcast updated log
-        broadcastLog(log);
-
-        // Send response to client
-        res.writeHead(proxyRes.statusCode, proxyRes.headers);
-        res.end(responseBody);
-      });
-    });
-
-    proxyReq.on('error', (err) => {
-      log.status = 502;
-      log.duration = Date.now() - startTime;
-      log.error = err.message;
-      broadcastLog(log);
-
-      res.writeHead(502);
-      res.end(`Proxy Error: ${err.message}`);
-    });
-
-    if (requestBody) {
-      proxyReq.write(requestBody);
-    }
-    proxyReq.end();
-  });
+  // Open dashboard
+  const open = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
+  require('child_process').exec(`${open} http://localhost:${port}`);
 });
 
-// Start servers
-dashboardServer.listen(dashboardPort, () => {
-  proxyServer.listen(port, () => {
-    console.log('\x1b[32m%s\x1b[0m', '  Servers running!\n');
-    console.log(`  Your app:    \x1b[36mhttp://localhost:${port}\x1b[0m`);
-    console.log(`  Dashboard:   \x1b[36mhttp://localhost:${dashboardPort}\x1b[0m\n`);
-    console.log('  Press \x1b[33mCtrl+C\x1b[0m to stop\n');
-
-    // Open dashboard in browser
-    const open = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
-    require('child_process').exec(`${open} http://localhost:${dashboardPort}`);
-  });
-});
-
-proxyServer.on('error', (err) => {
+server.on('error', (err) => {
   if (err.code === 'EADDRINUSE') {
     console.error(`\x1b[31m  Error: Port ${port} is already in use\x1b[0m`);
     process.exit(1);
   }
-  console.error('Proxy server error:', err);
-});
-
-dashboardServer.on('error', (err) => {
-  if (err.code === 'EADDRINUSE') {
-    console.error(`\x1b[31m  Error: Port ${dashboardPort} is already in use\x1b[0m`);
-    process.exit(1);
-  }
-  console.error('Dashboard server error:', err);
+  console.error('Server error:', err);
 });