network-terminal 1.0.5 → 1.0.7

package/src/components/LogEntry.tsx

@@ -1,121 +0,0 @@
-import React from 'react';
-import { LogEntryProps } from '../types';
-import { formatJson, formatTime } from '../utils/formatters';
-import { getStatusColor, getMethodColor } from '../utils/colors';
-
-const styles = {
-  container: {
-    marginBottom: '16px',
-    borderBottom: '1px solid #1f2937',
-    paddingBottom: '16px',
-  },
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '8px',
-    marginBottom: '4px',
-    flexWrap: 'wrap' as const,
-  },
-  timestamp: {
-    color: '#6b7280',
-    fontSize: '12px',
-    fontFamily: 'monospace',
-  },
-  method: {
-    fontWeight: 'bold',
-    fontFamily: 'monospace',
-  },
-  status: {
-    fontWeight: 'bold',
-    fontFamily: 'monospace',
-  },
-  duration: {
-    color: '#6b7280',
-    fontSize: '12px',
-    fontFamily: 'monospace',
-  },
-  url: {
-    color: '#60a5fa',
-    wordBreak: 'break-all' as const,
-    marginBottom: '8px',
-    fontFamily: 'monospace',
-    fontSize: '13px',
-  },
-  bodyContainer: {
-    marginTop: '8px',
-  },
-  bodyLabel: {
-    color: '#a78bfa',
-    fontSize: '12px',
-    marginBottom: '4px',
-    fontFamily: 'monospace',
-  },
-  pre: {
-    backgroundColor: '#1f2937',
-    padding: '8px',
-    borderRadius: '4px',
-    color: '#86efac',
-    overflowX: 'auto' as const,
-    fontSize: '12px',
-    whiteSpace: 'pre-wrap' as const,
-    fontFamily: 'monospace',
-    maxHeight: '192px',
-    overflowY: 'auto' as const,
-    margin: 0,
-  },
-  errorPre: {
-    backgroundColor: '#1f2937',
-    padding: '8px',
-    borderRadius: '4px',
-    color: '#fca5a5',
-    overflowX: 'auto' as const,
-    fontSize: '12px',
-    whiteSpace: 'pre-wrap' as const,
-    fontFamily: 'monospace',
-    margin: 0,
-  },
-} as const;
-
-export const LogEntry: React.FC<LogEntryProps> = ({ log, type }) => {
-  return (
-    <div style={styles.container}>
-      <div style={styles.header}>
-        <span style={styles.timestamp}>[{formatTime(log.timestamp)}]</span>
-        <span style={{ ...styles.method, color: getMethodColor(log.method) }}>
-          {log.method}
-        </span>
-        {type === 'response' && log.status && (
-          <span style={{ ...styles.status, color: getStatusColor(log.status) }}>
-            {log.status} {log.statusText}
-          </span>
-        )}
-        {log.duration !== undefined && type === 'response' && (
-          <span style={styles.duration}>({log.duration}ms)</span>
-        )}
-      </div>
-
-      <div style={styles.url}>{log.url}</div>
-
-      {type === 'request' ? (
-        log.requestBody ? (
-          <div style={styles.bodyContainer}>
-            <div style={styles.bodyLabel}>{'\u25B8'} Payload:</div>
-            <pre style={styles.pre}>{formatJson(log.requestBody)}</pre>
-          </div>
-        ) : null
-      ) : log.error ? (
-        <div style={styles.bodyContainer}>
-          <div style={{ ...styles.bodyLabel, color: '#f87171' }}>
-            {'\u25B8'} Error:
-          </div>
-          <pre style={styles.errorPre}>{log.error}</pre>
-        </div>
-      ) : log.responseBody ? (
-        <div style={styles.bodyContainer}>
-          <div style={styles.bodyLabel}>{'\u25B8'} Response:</div>
-          <pre style={styles.pre}>{formatJson(log.responseBody)}</pre>
-        </div>
-      ) : null}
-    </div>
-  );
-};

package/src/components/NetworkTerminal.tsx

@@ -1,219 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { NetworkLog, NetworkTerminalProps } from '../types';
-import { Terminal } from './Terminal';
-import { useNetworkInterceptor } from '../hooks/useNetworkInterceptor';
-
-const styles = {
-  floatingButton: {
-    position: 'fixed' as const,
-    bottom: '16px',
-    right: '16px',
-    zIndex: 9999,
-    backgroundColor: '#1f2937',
-    color: '#4ade80',
-    padding: '8px 16px',
-    borderRadius: '8px',
-    fontFamily: 'monospace',
-    fontSize: '14px',
-    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
-    border: '1px solid #374151',
-    cursor: 'pointer',
-  },
-  container: {
-    position: 'fixed' as const,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    zIndex: 9999,
-    backgroundColor: '#111827',
-    borderTop: '2px solid #22c55e',
-    boxShadow: '0 -10px 15px -3px rgba(0, 0, 0, 0.1)',
-  },
-  containerTop: {
-    position: 'fixed' as const,
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 9999,
-    backgroundColor: '#111827',
-    borderBottom: '2px solid #22c55e',
-    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
-  },
-  mainHeader: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: '8px 16px',
-    backgroundColor: '#1f2937',
-    borderBottom: '1px solid #374151',
-  },
-  headerLeft: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '12px',
-  },
-  title: {
-    color: '#4ade80',
-    fontFamily: 'monospace',
-    fontWeight: 'bold',
-  },
-  hint: {
-    color: '#6b7280',
-    fontFamily: 'monospace',
-    fontSize: '12px',
-  },
-  headerRight: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '8px',
-  },
-  clearButton: {
-    color: '#9ca3af',
-    fontSize: '14px',
-    fontFamily: 'monospace',
-    padding: '4px 12px',
-    borderRadius: '4px',
-    border: 'none',
-    background: 'transparent',
-    cursor: 'pointer',
-  },
-  closeButton: {
-    color: '#9ca3af',
-    fontSize: '18px',
-    fontWeight: 'bold',
-    padding: '0 8px',
-    border: 'none',
-    background: 'transparent',
-    cursor: 'pointer',
-    borderRadius: '4px',
-  },
-  terminalsContainer: {
-    display: 'flex',
-    gap: '8px',
-    padding: '8px',
-    height: '450px',
-  },
-  terminalWrapper: {
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'column' as const,
-  },
-} as const;
-
-export const NetworkTerminal: React.FC<NetworkTerminalProps> = ({
-  maxLogs = 100,
-  defaultVisible = false,
-  position = 'bottom',
-  height = '450px',
-  zIndex = 9999,
-}) => {
-  const [logs, setLogs] = useState<NetworkLog[]>([]);
-  const [isVisible, setIsVisible] = useState(defaultVisible);
-  const [requestExpanded, setRequestExpanded] = useState(true);
-  const [responseExpanded, setResponseExpanded] = useState(true);
-
-  const addLog = useCallback(
-    (log: NetworkLog) => {
-      setLogs((prev) => [...prev.slice(-(maxLogs - 1)), log]);
-    },
-    [maxLogs]
-  );
-
-  const updateLog = useCallback((id: string, updates: Partial<NetworkLog>) => {
-    setLogs((prev) =>
-      prev.map((log) => (log.id === id ? { ...log, ...updates } : log))
-    );
-  }, []);
-
-  useNetworkInterceptor({
-    enabled: isVisible,
-    onLogAdd: addLog,
-    onLogUpdate: updateLog,
-  });
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.ctrlKey && e.shiftKey && e.key === 'N') {
-        e.preventDefault();
-        setIsVisible((prev) => !prev);
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, []);
-
-  const clearLogs = () => setLogs([]);
-
-  if (!isVisible) {
-    return (
-      <button
-        onClick={() => setIsVisible(true)}
-        style={{
-          ...styles.floatingButton,
-          zIndex,
-        }}
-        title="Open Network Terminal (Ctrl+Shift+N)"
-      >
-        {'>'}_ Network
-      </button>
-    );
-  }
-
-  const containerStyle =
-    position === 'top'
-      ? { ...styles.containerTop, zIndex }
-      : { ...styles.container, zIndex };
-
-  return (
-    <div style={containerStyle}>
-      <div style={styles.mainHeader}>
-        <div style={styles.headerLeft}>
-          <span style={styles.title}>{'>'}_ Network Terminal</span>
-          <span style={styles.hint}>Press Ctrl+Shift+N to toggle</span>
-        </div>
-        <div style={styles.headerRight}>
-          <button
-            onClick={clearLogs}
-            style={styles.clearButton}
-            onMouseEnter={(e) => (e.currentTarget.style.color = '#fff')}
-            onMouseLeave={(e) => (e.currentTarget.style.color = '#9ca3af')}
-          >
-            Clear All
-          </button>
-          <button
-            onClick={() => setIsVisible(false)}
-            style={styles.closeButton}
-            onMouseEnter={(e) => (e.currentTarget.style.color = '#f87171')}
-            onMouseLeave={(e) => (e.currentTarget.style.color = '#9ca3af')}
-          >
-            {'\u00D7'}
-          </button>
-        </div>
-      </div>
-
-      <div style={{ ...styles.terminalsContainer, height }}>
-        <div style={styles.terminalWrapper}>
-          <Terminal
-            title="Requests"
-            logs={logs}
-            type="request"
-            onClear={clearLogs}
-            expanded={requestExpanded}
-            onToggleExpand={() => setRequestExpanded(!requestExpanded)}
-          />
-        </div>
-        <div style={styles.terminalWrapper}>
-          <Terminal
-            title="Responses"
-            logs={logs}
-            type="response"
-            onClear={clearLogs}
-            expanded={responseExpanded}
-            onToggleExpand={() => setResponseExpanded(!responseExpanded)}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/Terminal.tsx

@@ -1,86 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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]);
-};