network-terminal 1.0.1 → 1.0.3

package/src/components/Terminal.tsx

@@ -0,0 +1,86 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { TerminalProps } from '../types';
+import { TerminalHeader } from './TerminalHeader';
+import { LogEntry } from './LogEntry';
+
+const styles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    backgroundColor: '#111827',
+    borderRadius: '8px',
+    border: '1px solid #374151',
+    overflow: 'hidden',
+    transition: 'all 0.2s',
+    flex: 1,
+  },
+  collapsed: {
+    height: '48px',
+    flex: 'none' as const,
+  },
+  body: {
+    flex: 1,
+    overflow: 'auto',
+    padding: '16px',
+    fontFamily: 'monospace',
+    fontSize: '14px',
+    minHeight: '200px',
+    maxHeight: '400px',
+  },
+  empty: {
+    color: '#6b7280',
+    fontStyle: 'italic',
+  },
+} as const;
+
+export const Terminal: React.FC<TerminalProps> = ({
+  title,
+  logs,
+  type,
+  onClear,
+  expanded,
+  onToggleExpand,
+}) => {
+  const terminalRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  useEffect(() => {
+    if (autoScroll && terminalRef.current) {
+      terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
+    }
+  }, [logs, autoScroll]);
+
+  const handleScroll = () => {
+    if (terminalRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = terminalRef.current;
+      setAutoScroll(scrollHeight - scrollTop - clientHeight < 50);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        ...styles.container,
+        ...(expanded ? {} : styles.collapsed),
+      }}
+    >
+      <TerminalHeader
+        title={title}
+        count={logs.length}
+        expanded={expanded}
+        onClear={onClear}
+        onToggleExpand={onToggleExpand}
+      />
+
+      {expanded && (
+        <div ref={terminalRef} onScroll={handleScroll} style={styles.body}>
+          {logs.length === 0 ? (
+            <div style={styles.empty}>Waiting for network requests...</div>
+          ) : (
+            logs.map((log) => <LogEntry key={log.id} log={log} type={type} />)
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/TerminalHeader.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { TerminalHeaderProps } from '../types';
+
+const styles = {
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '8px 16px',
+    backgroundColor: '#1f2937',
+    borderBottom: '1px solid #374151',
+  },
+  left: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+  },
+  trafficLights: {
+    display: 'flex',
+    gap: '6px',
+  },
+  dot: {
+    width: '12px',
+    height: '12px',
+    borderRadius: '50%',
+  },
+  title: {
+    color: '#d1d5db',
+    fontFamily: 'monospace',
+    fontSize: '14px',
+    marginLeft: '8px',
+  },
+  count: {
+    color: '#6b7280',
+    fontFamily: 'monospace',
+    fontSize: '12px',
+  },
+  right: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+  },
+  button: {
+    color: '#9ca3af',
+    fontSize: '12px',
+    fontFamily: 'monospace',
+    padding: '4px 8px',
+    borderRadius: '4px',
+    border: 'none',
+    background: 'transparent',
+    cursor: 'pointer',
+  },
+} as const;
+
+export const TerminalHeader: React.FC<TerminalHeaderProps> = ({
+  title,
+  count,
+  expanded,
+  onClear,
+  onToggleExpand,
+}) => {
+  return (
+    <div style={styles.header}>
+      <div style={styles.left}>
+        <div style={styles.trafficLights}>
+          <div style={{ ...styles.dot, backgroundColor: '#ef4444' }} />
+          <div style={{ ...styles.dot, backgroundColor: '#eab308' }} />
+          <div style={{ ...styles.dot, backgroundColor: '#22c55e' }} />
+        </div>
+        <span style={styles.title}>{title}</span>
+        <span style={styles.count}>({count} entries)</span>
+      </div>
+      <div style={styles.right}>
+        <button
+          onClick={onClear}
+          style={styles.button}
+          onMouseEnter={(e) => (e.currentTarget.style.color = '#fff')}
+          onMouseLeave={(e) => (e.currentTarget.style.color = '#9ca3af')}
+        >
+          Clear
+        </button>
+        <button
+          onClick={onToggleExpand}
+          style={styles.button}
+          onMouseEnter={(e) => (e.currentTarget.style.color = '#fff')}
+          onMouseLeave={(e) => (e.currentTarget.style.color = '#9ca3af')}
+        >
+          {expanded ? '\u25BC' : '\u25B2'}
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/hooks/useNetworkInterceptor.ts

@@ -0,0 +1,190 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { NetworkLog, UseNetworkInterceptorProps } from '../types';
+
+export const useNetworkInterceptor = ({
+  enabled,
+  onLogAdd,
+  onLogUpdate,
+}: UseNetworkInterceptorProps) => {
+  const originalFetch = useRef<typeof fetch | null>(null);
+  const originalXHROpen = useRef<typeof XMLHttpRequest.prototype.open | null>(null);
+  const originalXHRSend = useRef<typeof XMLHttpRequest.prototype.send | null>(null);
+
+  const generateId = useCallback((prefix: string) => {
+    return `${prefix}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }, []);
+
+  // Intercept Fetch
+  useEffect(() => {
+    if (!enabled) return;
+
+    originalFetch.current = window.fetch;
+
+    window.fetch = async function (input, init) {
+      const id = generateId('fetch');
+      const startTime = performance.now();
+
+      const url =
+        typeof input === 'string'
+          ? input
+          : input instanceof URL
+            ? input.href
+            : input.url;
+
+      const method = init?.method || 'GET';
+
+      let requestBody: unknown = null;
+      if (init?.body) {
+        try {
+          requestBody =
+            typeof init.body === 'string' ? JSON.parse(init.body) : init.body;
+        } catch {
+          requestBody = init.body;
+        }
+      }
+
+      onLogAdd({
+        id,
+        timestamp: new Date(),
+        method: method.toUpperCase(),
+        url,
+        requestBody,
+        type: 'fetch',
+      });
+
+      try {
+        const response = await originalFetch.current!(input, init);
+        const duration = Math.round(performance.now() - startTime);
+
+        const clonedResponse = response.clone();
+        let responseBody: unknown = null;
+
+        try {
+          responseBody = await clonedResponse.json();
+        } catch {
+          try {
+            responseBody = await clonedResponse.text();
+          } catch {
+            responseBody = '[Could not read response body]';
+          }
+        }
+
+        onLogUpdate(id, {
+          status: response.status,
+          statusText: response.statusText,
+          responseBody,
+          duration,
+        });
+
+        return response;
+      } catch (error: unknown) {
+        const duration = Math.round(performance.now() - startTime);
+        const errorMessage =
+          error instanceof Error ? error.message : 'Network Error';
+        onLogUpdate(id, {
+          error: errorMessage,
+          duration,
+        });
+        throw error;
+      }
+    };
+
+    return () => {
+      if (originalFetch.current) {
+        window.fetch = originalFetch.current;
+      }
+    };
+  }, [enabled, onLogAdd, onLogUpdate, generateId]);
+
+  // Intercept XHR
+  useEffect(() => {
+    if (!enabled) return;
+
+    originalXHROpen.current = XMLHttpRequest.prototype.open;
+    originalXHRSend.current = XMLHttpRequest.prototype.send;
+
+    XMLHttpRequest.prototype.open = function (
+      method: string,
+      url: string | URL
+    ) {
+      (this as XMLHttpRequest & { _networkTerminal: NetworkLog & { startTime: number } })._networkTerminal = {
+        id: generateId('xhr'),
+        method: method.toUpperCase(),
+        url: url.toString(),
+        startTime: 0,
+        timestamp: new Date(),
+        type: 'xhr',
+      };
+      return originalXHROpen.current!.apply(
+        this,
+        arguments as unknown as Parameters<typeof XMLHttpRequest.prototype.open>
+      );
+    };
+
+    XMLHttpRequest.prototype.send = function (body?: Document | XMLHttpRequestBodyInit | null) {
+      const meta = (this as XMLHttpRequest & { _networkTerminal?: NetworkLog & { startTime: number } })._networkTerminal;
+
+      if (meta) {
+        meta.startTime = performance.now();
+
+        let requestBody: unknown = null;
+        if (body) {
+          try {
+            requestBody = typeof body === 'string' ? JSON.parse(body) : body;
+          } catch {
+            requestBody = body;
+          }
+        }
+
+        onLogAdd({
+          id: meta.id,
+          timestamp: new Date(),
+          method: meta.method,
+          url: meta.url,
+          requestBody,
+          type: 'xhr',
+        });
+
+        this.addEventListener('load', function () {
+          const duration = Math.round(performance.now() - meta.startTime);
+
+          let responseBody: unknown = null;
+          try {
+            responseBody = JSON.parse(this.responseText);
+          } catch {
+            responseBody = this.responseText;
+          }
+
+          onLogUpdate(meta.id, {
+            status: this.status,
+            statusText: this.statusText,
+            responseBody,
+            duration,
+          });
+        });
+
+        this.addEventListener('error', function () {
+          const duration = Math.round(performance.now() - meta.startTime);
+          onLogUpdate(meta.id, {
+            error: 'Network Error',
+            duration,
+          });
+        });
+      }
+
+      return originalXHRSend.current!.apply(
+        this,
+        arguments as unknown as Parameters<typeof XMLHttpRequest.prototype.send>
+      );
+    };
+
+    return () => {
+      if (originalXHROpen.current) {
+        XMLHttpRequest.prototype.open = originalXHROpen.current;
+      }
+      if (originalXHRSend.current) {
+        XMLHttpRequest.prototype.send = originalXHRSend.current;
+      }
+    };
+  }, [enabled, onLogAdd, onLogUpdate, generateId]);
+};

package/src/index.ts

@@ -0,0 +1,17 @@
+export { NetworkTerminal } from './components/NetworkTerminal';
+export { Terminal } from './components/Terminal';
+export { TerminalHeader } from './components/TerminalHeader';
+export { LogEntry } from './components/LogEntry';
+export { useNetworkInterceptor } from './hooks/useNetworkInterceptor';
+export { formatJson, truncate, formatTime } from './utils/formatters';
+export { getStatusColor, getMethodColor } from './utils/colors';
+export { networkTerminal } from './vite-plugin';
+export type {
+  NetworkLog,
+  NetworkTerminalProps,
+  TerminalProps,
+  TerminalHeaderProps,
+  LogEntryProps,
+  UseNetworkInterceptorProps,
+} from './types';
+export type { NetworkTerminalPluginOptions } from './vite-plugin';

package/src/types.ts

@@ -0,0 +1,50 @@
+export interface NetworkLog {
+  id: string;
+  timestamp: Date;
+  method: string;
+  url: string;
+  status?: number;
+  statusText?: string;
+  requestHeaders?: Record<string, string>;
+  requestBody?: unknown;
+  responseBody?: unknown;
+  duration?: number;
+  error?: string;
+  type: 'fetch' | 'xhr';
+}
+
+export interface TerminalProps {
+  title: string;
+  logs: NetworkLog[];
+  type: 'request' | 'response';
+  onClear: () => void;
+  expanded: boolean;
+  onToggleExpand: () => void;
+}
+
+export interface LogEntryProps {
+  log: NetworkLog;
+  type: 'request' | 'response';
+}
+
+export interface TerminalHeaderProps {
+  title: string;
+  count: number;
+  expanded: boolean;
+  onClear: () => void;
+  onToggleExpand: () => void;
+}
+
+export interface UseNetworkInterceptorProps {
+  enabled: boolean;
+  onLogAdd: (log: NetworkLog) => void;
+  onLogUpdate: (id: string, updates: Partial<NetworkLog>) => void;
+}
+
+export interface NetworkTerminalProps {
+  maxLogs?: number;
+  defaultVisible?: boolean;
+  position?: 'bottom' | 'top';
+  height?: string;
+  zIndex?: number;
+}

package/src/utils/colors.ts

@@ -0,0 +1,18 @@
+export const getStatusColor = (status?: number): string => {
+  if (!status) return '#9ca3af'; // gray-400
+  if (status >= 200 && status < 300) return '#4ade80'; // green-400
+  if (status >= 300 && status < 400) return '#facc15'; // yellow-400
+  if (status >= 400 && status < 500) return '#fb923c'; // orange-400
+  return '#f87171'; // red-400
+};
+
+export const getMethodColor = (method: string): string => {
+  const colors: Record<string, string> = {
+    GET: '#22d3ee', // cyan-400
+    POST: '#4ade80', // green-400
+    PUT: '#facc15', // yellow-400
+    PATCH: '#fb923c', // orange-400
+    DELETE: '#f87171', // red-400
+  };
+  return colors[method.toUpperCase()] || '#9ca3af';
+};

package/src/utils/formatters.ts

@@ -0,0 +1,26 @@
+export const formatJson = (data: unknown): string => {
+  if (!data) return '';
+  try {
+    if (typeof data === 'string') {
+      const parsed = JSON.parse(data);
+      return JSON.stringify(parsed, null, 2);
+    }
+    return JSON.stringify(data, null, 2);
+  } catch {
+    return String(data);
+  }
+};
+
+export const truncate = (str: string, maxLength: number): string => {
+  if (str.length <= maxLength) return str;
+  return str.slice(0, maxLength) + '...';
+};
+
+export const formatTime = (date: Date): string => {
+  return date.toLocaleTimeString('en-US', {
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+};

package/src/vite-plugin.ts

@@ -0,0 +1,88 @@
+import type { Plugin } from 'vite';
+
+export interface NetworkTerminalPluginOptions {
+  /** Position of the terminal: 'top' or 'bottom' (default: 'bottom') */
+  position?: 'top' | 'bottom';
+  /** Maximum number of logs to keep (default: 100) */
+  maxLogs?: number;
+  /** Terminal height (default: '450px') */
+  height?: string;
+  /** CSS z-index (default: 9999) */
+  zIndex?: number;
+}
+
+const VIRTUAL_MODULE_ID = 'virtual:network-terminal';
+const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID;
+
+export function networkTerminal(options: NetworkTerminalPluginOptions = {}): Plugin {
+  const {
+    position = 'bottom',
+    maxLogs = 100,
+    height = '450px',
+    zIndex = 9999,
+  } = options;
+
+  return {
+    name: 'vite-plugin-network-terminal',
+    apply: 'serve', // Only apply during development
+
+    resolveId(id) {
+      if (id === VIRTUAL_MODULE_ID) {
+        return RESOLVED_VIRTUAL_MODULE_ID;
+      }
+    },
+
+    load(id) {
+      if (id === RESOLVED_VIRTUAL_MODULE_ID) {
+        return `
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { NetworkTerminal } from 'network-terminal';
+
+function initNetworkTerminal() {
+  const containerId = '__network-terminal-root__';
+  let container = document.getElementById(containerId);
+
+  if (!container) {
+    container = document.createElement('div');
+    container.id = containerId;
+    document.body.appendChild(container);
+  }
+
+  const root = ReactDOM.createRoot(container);
+  root.render(
+    React.createElement(NetworkTerminal, {
+      position: '${position}',
+      maxLogs: ${maxLogs},
+      height: '${height}',
+      zIndex: ${zIndex},
+      defaultVisible: false,
+    })
+  );
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initNetworkTerminal);
+} else {
+  initNetworkTerminal();
+}
+`;
+      }
+    },
+
+    transformIndexHtml(html) {
+      return {
+        html,
+        tags: [
+          {
+            tag: 'script',
+            attrs: { type: 'module', src: '/@id/__x00__virtual:network-terminal' },
+            injectTo: 'body',
+          },
+        ],
+      };
+    },
+  };
+}
+
+export default networkTerminal;

package/standalone/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Network Terminal</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        background: #0f172a;
+        color: #e2e8f0;
+        min-height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>