network-terminal 1.0.6 → 1.0.8

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]);
-};

package/src/index.ts

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

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

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

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