network-terminal 1.0.1 → 1.0.3

package/dist/vite-plugin.js

@@ -24,6 +24,8 @@ __export(vite_plugin_exports, {
   networkTerminal: () => networkTerminal
 });
 module.exports = __toCommonJS(vite_plugin_exports);
+var VIRTUAL_MODULE_ID = "virtual:network-terminal";
+var RESOLVED_VIRTUAL_MODULE_ID = "\0" + VIRTUAL_MODULE_ID;
 function networkTerminal(options = {}) {
   const {
     position = "bottom",
@@ -35,34 +37,59 @@ function networkTerminal(options = {}) {
     name: "vite-plugin-network-terminal",
     apply: "serve",
     // Only apply during development
-    transformIndexHtml(html) {
-      const script = `
-<script type="module">
+    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';
 
-const containerId = '__network-terminal-root__';
-let container = document.getElementById(containerId);
+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);
+  }
 
-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,
+    })
+  );
 }
 
-const root = ReactDOM.createRoot(container);
-root.render(
-  React.createElement(NetworkTerminal, {
-    position: '${position}',
-    maxLogs: ${maxLogs},
-    height: '${height}',
-    zIndex: ${zIndex},
-    defaultVisible: false,
-  })
-);
-</script>`;
-      return html.replace("</body>", `${script}</body>`);
+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"
+          }
+        ]
+      };
     }
   };
 }

package/dist/vite-plugin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/vite-plugin.ts"],"sourcesContent":["import type { Plugin } from 'vite';\n\nexport interface NetworkTerminalPluginOptions {\n  /** Position of the terminal: 'top' or 'bottom' (default: 'bottom') */\n  position?: 'top' | 'bottom';\n  /** Maximum number of logs to keep (default: 100) */\n  maxLogs?: number;\n  /** Terminal height (default: '450px') */\n  height?: string;\n  /** CSS z-index (default: 9999) */\n  zIndex?: number;\n}\n\nexport function networkTerminal(options: NetworkTerminalPluginOptions = {}): Plugin {\n  const {\n    position = 'bottom',\n    maxLogs = 100,\n    height = '450px',\n    zIndex = 9999,\n  } = options;\n\n  return {\n    name: 'vite-plugin-network-terminal',\n    apply: 'serve', // Only apply during development\n    transformIndexHtml(html) {\n      const script = `\n<script type=\"module\">\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { NetworkTerminal } from 'network-terminal';\n\nconst containerId = '__network-terminal-root__';\nlet container = document.getElementById(containerId);\n\nif (!container) {\n  container = document.createElement('div');\n  container.id = containerId;\n  document.body.appendChild(container);\n}\n\nconst root = ReactDOM.createRoot(container);\nroot.render(\n  React.createElement(NetworkTerminal, {\n    position: '${position}',\n    maxLogs: ${maxLogs},\n    height: '${height}',\n    zIndex: ${zIndex},\n    defaultVisible: false,\n  })\n);\n</script>`;\n\n      // Inject before closing body tag\n      return html.replace('</body>', `${script}</body>`);\n    },\n  };\n}\n\nexport default networkTerminal;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaO,SAAS,gBAAgB,UAAwC,CAAC,GAAW;AAClF,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,EACX,IAAI;AAEJ,SAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA;AAAA,IACP,mBAAmB,MAAM;AACvB,YAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAkBJ,QAAQ;AAAA,eACV,OAAO;AAAA,eACP,MAAM;AAAA,cACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAOd,aAAO,KAAK,QAAQ,WAAW,GAAG,MAAM,SAAS;AAAA,IACnD;AAAA,EACF;AACF;AAEA,IAAO,sBAAQ;","names":[]}
+{"version":3,"sources":["../src/vite-plugin.ts"],"sourcesContent":["import type { Plugin } from 'vite';\n\nexport interface NetworkTerminalPluginOptions {\n  /** Position of the terminal: 'top' or 'bottom' (default: 'bottom') */\n  position?: 'top' | 'bottom';\n  /** Maximum number of logs to keep (default: 100) */\n  maxLogs?: number;\n  /** Terminal height (default: '450px') */\n  height?: string;\n  /** CSS z-index (default: 9999) */\n  zIndex?: number;\n}\n\nconst VIRTUAL_MODULE_ID = 'virtual:network-terminal';\nconst RESOLVED_VIRTUAL_MODULE_ID = '\\0' + VIRTUAL_MODULE_ID;\n\nexport function networkTerminal(options: NetworkTerminalPluginOptions = {}): Plugin {\n  const {\n    position = 'bottom',\n    maxLogs = 100,\n    height = '450px',\n    zIndex = 9999,\n  } = options;\n\n  return {\n    name: 'vite-plugin-network-terminal',\n    apply: 'serve', // Only apply during development\n\n    resolveId(id) {\n      if (id === VIRTUAL_MODULE_ID) {\n        return RESOLVED_VIRTUAL_MODULE_ID;\n      }\n    },\n\n    load(id) {\n      if (id === RESOLVED_VIRTUAL_MODULE_ID) {\n        return `\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { NetworkTerminal } from 'network-terminal';\n\nfunction initNetworkTerminal() {\n  const containerId = '__network-terminal-root__';\n  let container = document.getElementById(containerId);\n\n  if (!container) {\n    container = document.createElement('div');\n    container.id = containerId;\n    document.body.appendChild(container);\n  }\n\n  const root = ReactDOM.createRoot(container);\n  root.render(\n    React.createElement(NetworkTerminal, {\n      position: '${position}',\n      maxLogs: ${maxLogs},\n      height: '${height}',\n      zIndex: ${zIndex},\n      defaultVisible: false,\n    })\n  );\n}\n\nif (document.readyState === 'loading') {\n  document.addEventListener('DOMContentLoaded', initNetworkTerminal);\n} else {\n  initNetworkTerminal();\n}\n`;\n      }\n    },\n\n    transformIndexHtml(html) {\n      return {\n        html,\n        tags: [\n          {\n            tag: 'script',\n            attrs: { type: 'module', src: '/@id/__x00__virtual:network-terminal' },\n            injectTo: 'body',\n          },\n        ],\n      };\n    },\n  };\n}\n\nexport default networkTerminal;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA,IAAM,oBAAoB;AAC1B,IAAM,6BAA6B,OAAO;AAEnC,SAAS,gBAAgB,UAAwC,CAAC,GAAW;AAClF,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,EACX,IAAI;AAEJ,SAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA;AAAA,IAEP,UAAU,IAAI;AACZ,UAAI,OAAO,mBAAmB;AAC5B,eAAO;AAAA,MACT;AAAA,IACF;AAAA,IAEA,KAAK,IAAI;AACP,UAAI,OAAO,4BAA4B;AACrC,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAkBI,QAAQ;AAAA,iBACV,OAAO;AAAA,iBACP,MAAM;AAAA,gBACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYhB;AAAA,IACF;AAAA,IAEA,mBAAmB,MAAM;AACvB,aAAO;AAAA,QACL;AAAA,QACA,MAAM;AAAA,UACJ;AAAA,YACE,KAAK;AAAA,YACL,OAAO,EAAE,MAAM,UAAU,KAAK,uCAAuC;AAAA,YACrE,UAAU;AAAA,UACZ;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/vite-plugin.mjs

@@ -1,4 +1,6 @@
 // src/vite-plugin.ts
+var VIRTUAL_MODULE_ID = "virtual:network-terminal";
+var RESOLVED_VIRTUAL_MODULE_ID = "\0" + VIRTUAL_MODULE_ID;
 function networkTerminal(options = {}) {
   const {
     position = "bottom",
@@ -10,34 +12,59 @@ function networkTerminal(options = {}) {
     name: "vite-plugin-network-terminal",
     apply: "serve",
     // Only apply during development
-    transformIndexHtml(html) {
-      const script = `
-<script type="module">
+    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';
 
-const containerId = '__network-terminal-root__';
-let container = document.getElementById(containerId);
+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);
+  }
 
-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,
+    })
+  );
 }
 
-const root = ReactDOM.createRoot(container);
-root.render(
-  React.createElement(NetworkTerminal, {
-    position: '${position}',
-    maxLogs: ${maxLogs},
-    height: '${height}',
-    zIndex: ${zIndex},
-    defaultVisible: false,
-  })
-);
-</script>`;
-      return html.replace("</body>", `${script}</body>`);
+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"
+          }
+        ]
+      };
     }
   };
 }

package/dist/vite-plugin.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/vite-plugin.ts"],"sourcesContent":["import type { Plugin } from 'vite';\n\nexport interface NetworkTerminalPluginOptions {\n  /** Position of the terminal: 'top' or 'bottom' (default: 'bottom') */\n  position?: 'top' | 'bottom';\n  /** Maximum number of logs to keep (default: 100) */\n  maxLogs?: number;\n  /** Terminal height (default: '450px') */\n  height?: string;\n  /** CSS z-index (default: 9999) */\n  zIndex?: number;\n}\n\nexport function networkTerminal(options: NetworkTerminalPluginOptions = {}): Plugin {\n  const {\n    position = 'bottom',\n    maxLogs = 100,\n    height = '450px',\n    zIndex = 9999,\n  } = options;\n\n  return {\n    name: 'vite-plugin-network-terminal',\n    apply: 'serve', // Only apply during development\n    transformIndexHtml(html) {\n      const script = `\n<script type=\"module\">\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { NetworkTerminal } from 'network-terminal';\n\nconst containerId = '__network-terminal-root__';\nlet container = document.getElementById(containerId);\n\nif (!container) {\n  container = document.createElement('div');\n  container.id = containerId;\n  document.body.appendChild(container);\n}\n\nconst root = ReactDOM.createRoot(container);\nroot.render(\n  React.createElement(NetworkTerminal, {\n    position: '${position}',\n    maxLogs: ${maxLogs},\n    height: '${height}',\n    zIndex: ${zIndex},\n    defaultVisible: false,\n  })\n);\n</script>`;\n\n      // Inject before closing body tag\n      return html.replace('</body>', `${script}</body>`);\n    },\n  };\n}\n\nexport default networkTerminal;\n"],"mappings":";AAaO,SAAS,gBAAgB,UAAwC,CAAC,GAAW;AAClF,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,EACX,IAAI;AAEJ,SAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA;AAAA,IACP,mBAAmB,MAAM;AACvB,YAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAkBJ,QAAQ;AAAA,eACV,OAAO;AAAA,eACP,MAAM;AAAA,cACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAOd,aAAO,KAAK,QAAQ,WAAW,GAAG,MAAM,SAAS;AAAA,IACnD;AAAA,EACF;AACF;AAEA,IAAO,sBAAQ;","names":[]}
+{"version":3,"sources":["../src/vite-plugin.ts"],"sourcesContent":["import type { Plugin } from 'vite';\n\nexport interface NetworkTerminalPluginOptions {\n  /** Position of the terminal: 'top' or 'bottom' (default: 'bottom') */\n  position?: 'top' | 'bottom';\n  /** Maximum number of logs to keep (default: 100) */\n  maxLogs?: number;\n  /** Terminal height (default: '450px') */\n  height?: string;\n  /** CSS z-index (default: 9999) */\n  zIndex?: number;\n}\n\nconst VIRTUAL_MODULE_ID = 'virtual:network-terminal';\nconst RESOLVED_VIRTUAL_MODULE_ID = '\\0' + VIRTUAL_MODULE_ID;\n\nexport function networkTerminal(options: NetworkTerminalPluginOptions = {}): Plugin {\n  const {\n    position = 'bottom',\n    maxLogs = 100,\n    height = '450px',\n    zIndex = 9999,\n  } = options;\n\n  return {\n    name: 'vite-plugin-network-terminal',\n    apply: 'serve', // Only apply during development\n\n    resolveId(id) {\n      if (id === VIRTUAL_MODULE_ID) {\n        return RESOLVED_VIRTUAL_MODULE_ID;\n      }\n    },\n\n    load(id) {\n      if (id === RESOLVED_VIRTUAL_MODULE_ID) {\n        return `\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { NetworkTerminal } from 'network-terminal';\n\nfunction initNetworkTerminal() {\n  const containerId = '__network-terminal-root__';\n  let container = document.getElementById(containerId);\n\n  if (!container) {\n    container = document.createElement('div');\n    container.id = containerId;\n    document.body.appendChild(container);\n  }\n\n  const root = ReactDOM.createRoot(container);\n  root.render(\n    React.createElement(NetworkTerminal, {\n      position: '${position}',\n      maxLogs: ${maxLogs},\n      height: '${height}',\n      zIndex: ${zIndex},\n      defaultVisible: false,\n    })\n  );\n}\n\nif (document.readyState === 'loading') {\n  document.addEventListener('DOMContentLoaded', initNetworkTerminal);\n} else {\n  initNetworkTerminal();\n}\n`;\n      }\n    },\n\n    transformIndexHtml(html) {\n      return {\n        html,\n        tags: [\n          {\n            tag: 'script',\n            attrs: { type: 'module', src: '/@id/__x00__virtual:network-terminal' },\n            injectTo: 'body',\n          },\n        ],\n      };\n    },\n  };\n}\n\nexport default networkTerminal;\n"],"mappings":";AAaA,IAAM,oBAAoB;AAC1B,IAAM,6BAA6B,OAAO;AAEnC,SAAS,gBAAgB,UAAwC,CAAC,GAAW;AAClF,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,EACX,IAAI;AAEJ,SAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA;AAAA,IAEP,UAAU,IAAI;AACZ,UAAI,OAAO,mBAAmB;AAC5B,eAAO;AAAA,MACT;AAAA,IACF;AAAA,IAEA,KAAK,IAAI;AACP,UAAI,OAAO,4BAA4B;AACrC,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAkBI,QAAQ;AAAA,iBACV,OAAO;AAAA,iBACP,MAAM;AAAA,gBACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYhB;AAAA,IACF;AAAA,IAEA,mBAAmB,MAAM;AACvB,aAAO;AAAA,QACL;AAAA,QACA,MAAM;AAAA,UACJ;AAAA,YACE,KAAK;AAAA,YACL,OAAO,EAAE,MAAM,UAAU,KAAK,uCAAuC;AAAA,YACrE,UAAU;AAAA,UACZ;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,sBAAQ;","names":[]}

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "network-terminal",
-  "version": "1.0.1",
+  "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>
+  );
+};