network-terminal 1.0.2 → 1.0.3

package/bin/cli.js

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+
+const { createServer } = require('vite');
+const path = require('path');
+
+const args = process.argv.slice(2);
+const portIndex = args.indexOf('--port');
+const port = portIndex !== -1 ? parseInt(args[portIndex + 1], 10) : 3000;
+
+async function start() {
+  const standalonePath = path.join(__dirname, '..', 'standalone');
+
+  console.log('\x1b[32m%s\x1b[0m', '\n  >_ Network Terminal\n');
+  console.log('  Starting development server...\n');
+
+  try {
+    const server = await createServer({
+      configFile: path.join(standalonePath, 'vite.config.js'),
+      root: standalonePath,
+      server: {
+        port,
+        open: true,
+      },
+    });
+
+    await server.listen();
+
+    const actualPort = server.config.server.port;
+
+    console.log('\x1b[32m%s\x1b[0m', `  Server running at:\n`);
+    console.log(`  > Local:   \x1b[36mhttp://localhost:${actualPort}\x1b[0m`);
+    console.log('\n  Press \x1b[33mCtrl+C\x1b[0m to stop\n');
+
+  } catch (err) {
+    console.error('\x1b[31mError starting server:\x1b[0m', err.message);
+    process.exit(1);
+  }
+}
+
+start();

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "network-terminal",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "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",
   "types": "dist/index.d.ts",
+  "bin": {
+    "network-terminal": "./bin/cli.js"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -18,7 +21,10 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "bin",
+    "standalone",
+    "src"
   ],
   "scripts": {
     "build": "tsup",
@@ -40,18 +46,25 @@
   ],
   "author": "",
   "license": "MIT",
+  "dependencies": {
+    "@vitejs/plugin-react": "^4.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vite": "^5.0.0"
+  },
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "react-dom": { "optional": true }
+  },
   "devDependencies": {
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "tsup": "^8.0.0",
-    "typescript": "^5.0.0",
-    "vite": "^7.3.1"
+    "typescript": "^5.0.0"
   },
   "repository": {
     "type": "git",

package/src/components/LogEntry.tsx

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

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

@@ -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>

package/standalone/main.tsx

@@ -0,0 +1,216 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import { NetworkTerminal } from '../src';
+
+const styles = {
+  container: {
+    padding: '40px',
+    maxWidth: '800px',
+    margin: '0 auto',
+  },
+  header: {
+    marginBottom: '40px',
+  },
+  title: {
+    fontSize: '32px',
+    fontWeight: 'bold',
+    color: '#4ade80',
+    fontFamily: 'monospace',
+    marginBottom: '8px',
+  },
+  subtitle: {
+    color: '#94a3b8',
+    fontSize: '16px',
+  },
+  section: {
+    background: '#1e293b',
+    borderRadius: '12px',
+    padding: '24px',
+    marginBottom: '24px',
+  },
+  sectionTitle: {
+    fontSize: '18px',
+    fontWeight: '600',
+    marginBottom: '16px',
+    color: '#f1f5f9',
+  },
+  buttonGroup: {
+    display: 'flex',
+    gap: '12px',
+    flexWrap: 'wrap' as const,
+  },
+  button: {
+    padding: '10px 20px',
+    borderRadius: '8px',
+    border: 'none',
+    cursor: 'pointer',
+    fontWeight: '500',
+    fontSize: '14px',
+    transition: 'all 0.2s',
+  },
+  getButton: {
+    background: '#22c55e',
+    color: '#000',
+  },
+  postButton: {
+    background: '#3b82f6',
+    color: '#fff',
+  },
+  putButton: {
+    background: '#f59e0b',
+    color: '#000',
+  },
+  deleteButton: {
+    background: '#ef4444',
+    color: '#fff',
+  },
+  errorButton: {
+    background: '#6b7280',
+    color: '#fff',
+  },
+  inputGroup: {
+    display: 'flex',
+    gap: '12px',
+    marginBottom: '16px',
+  },
+  input: {
+    flex: 1,
+    padding: '10px 16px',
+    borderRadius: '8px',
+    border: '1px solid #374151',
+    background: '#0f172a',
+    color: '#e2e8f0',
+    fontSize: '14px',
+  },
+  hint: {
+    marginTop: '24px',
+    padding: '16px',
+    background: '#0f172a',
+    borderRadius: '8px',
+    borderLeft: '4px solid #4ade80',
+  },
+  hintText: {
+    color: '#94a3b8',
+    fontSize: '14px',
+    fontFamily: 'monospace',
+  },
+  kbd: {
+    background: '#374151',
+    padding: '2px 8px',
+    borderRadius: '4px',
+    fontSize: '12px',
+    color: '#4ade80',
+  },
+};
+
+function App() {
+  const [customUrl, setCustomUrl] = useState('https://jsonplaceholder.typicode.com/posts/1');
+
+  const makeRequest = async (method: string, url: string, body?: object) => {
+    try {
+      const options: RequestInit = {
+        method,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      };
+      if (body) {
+        options.body = JSON.stringify(body);
+      }
+      await fetch(url, options);
+    } catch (error) {
+      console.error('Request failed:', error);
+    }
+  };
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.header}>
+        <h1 style={styles.title}>&gt;_ Network Terminal</h1>
+        <p style={styles.subtitle}>Monitor your Fetch/XHR requests in real-time</p>
+      </div>
+
+      <div style={styles.section}>
+        <h2 style={styles.sectionTitle}>Quick Actions</h2>
+        <div style={styles.buttonGroup}>
+          <button
+            style={{ ...styles.button, ...styles.getButton }}
+            onClick={() => makeRequest('GET', 'https://jsonplaceholder.typicode.com/posts/1')}
+          >
+            GET Request
+          </button>
+          <button
+            style={{ ...styles.button, ...styles.postButton }}
+            onClick={() =>
+              makeRequest('POST', 'https://jsonplaceholder.typicode.com/posts', {
+                title: 'Test Post',
+                body: 'This is a test post body',
+                userId: 1,
+              })
+            }
+          >
+            POST Request
+          </button>
+          <button
+            style={{ ...styles.button, ...styles.putButton }}
+            onClick={() =>
+              makeRequest('PUT', 'https://jsonplaceholder.typicode.com/posts/1', {
+                id: 1,
+                title: 'Updated Title',
+                body: 'Updated body content',
+                userId: 1,
+              })
+            }
+          >
+            PUT Request
+          </button>
+          <button
+            style={{ ...styles.button, ...styles.deleteButton }}
+            onClick={() => makeRequest('DELETE', 'https://jsonplaceholder.typicode.com/posts/1')}
+          >
+            DELETE Request
+          </button>
+          <button
+            style={{ ...styles.button, ...styles.errorButton }}
+            onClick={() => makeRequest('GET', 'https://jsonplaceholder.typicode.com/invalid-endpoint')}
+          >
+            404 Error
+          </button>
+        </div>
+      </div>
+
+      <div style={styles.section}>
+        <h2 style={styles.sectionTitle}>Custom Request</h2>
+        <div style={styles.inputGroup}>
+          <input
+            type="text"
+            value={customUrl}
+            onChange={(e) => setCustomUrl(e.target.value)}
+            placeholder="Enter URL..."
+            style={styles.input}
+          />
+          <button
+            style={{ ...styles.button, ...styles.getButton }}
+            onClick={() => makeRequest('GET', customUrl)}
+          >
+            Send GET
+          </button>
+        </div>
+      </div>
+
+      <div style={styles.hint}>
+        <p style={styles.hintText}>
+          Press <span style={styles.kbd}>Ctrl+Shift+N</span> to toggle the Network Terminal
+        </p>
+      </div>
+
+      <NetworkTerminal defaultVisible={true} position="bottom" maxLogs={50} />
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/standalone/vite.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      'network-terminal': path.resolve(__dirname, '../src'),
+    },
+  },
+});