network-terminal 1.0.0

package/dist/index.mjs

@@ -0,0 +1,723 @@
+// src/components/NetworkTerminal.tsx
+import { useState as useState2, useCallback as useCallback2, useEffect as useEffect3 } from "react";
+
+// src/components/Terminal.tsx
+import { useRef, useState, useEffect } from "react";
+
+// src/components/TerminalHeader.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var 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"
+  }
+};
+var TerminalHeader = ({
+  title,
+  count,
+  expanded,
+  onClear,
+  onToggleExpand
+}) => {
+  return /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles.left, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles.trafficLights, children: [
+        /* @__PURE__ */ jsx("div", { style: { ...styles.dot, backgroundColor: "#ef4444" } }),
+        /* @__PURE__ */ jsx("div", { style: { ...styles.dot, backgroundColor: "#eab308" } }),
+        /* @__PURE__ */ jsx("div", { style: { ...styles.dot, backgroundColor: "#22c55e" } })
+      ] }),
+      /* @__PURE__ */ jsx("span", { style: styles.title, children: title }),
+      /* @__PURE__ */ jsxs("span", { style: styles.count, children: [
+        "(",
+        count,
+        " entries)"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: styles.right, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onClear,
+          style: styles.button,
+          onMouseEnter: (e) => e.currentTarget.style.color = "#fff",
+          onMouseLeave: (e) => e.currentTarget.style.color = "#9ca3af",
+          children: "Clear"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onToggleExpand,
+          style: styles.button,
+          onMouseEnter: (e) => e.currentTarget.style.color = "#fff",
+          onMouseLeave: (e) => e.currentTarget.style.color = "#9ca3af",
+          children: expanded ? "\u25BC" : "\u25B2"
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/utils/formatters.ts
+var formatJson = (data) => {
+  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);
+  }
+};
+var truncate = (str, maxLength) => {
+  if (str.length <= maxLength) return str;
+  return str.slice(0, maxLength) + "...";
+};
+var formatTime = (date) => {
+  return date.toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+};
+
+// src/utils/colors.ts
+var getStatusColor = (status) => {
+  if (!status) return "#9ca3af";
+  if (status >= 200 && status < 300) return "#4ade80";
+  if (status >= 300 && status < 400) return "#facc15";
+  if (status >= 400 && status < 500) return "#fb923c";
+  return "#f87171";
+};
+var getMethodColor = (method) => {
+  const colors = {
+    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";
+};
+
+// src/components/LogEntry.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var styles2 = {
+  container: {
+    marginBottom: "16px",
+    borderBottom: "1px solid #1f2937",
+    paddingBottom: "16px"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    marginBottom: "4px",
+    flexWrap: "wrap"
+  },
+  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",
+    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",
+    fontSize: "12px",
+    whiteSpace: "pre-wrap",
+    fontFamily: "monospace",
+    maxHeight: "192px",
+    overflowY: "auto",
+    margin: 0
+  },
+  errorPre: {
+    backgroundColor: "#1f2937",
+    padding: "8px",
+    borderRadius: "4px",
+    color: "#fca5a5",
+    overflowX: "auto",
+    fontSize: "12px",
+    whiteSpace: "pre-wrap",
+    fontFamily: "monospace",
+    margin: 0
+  }
+};
+var LogEntry = ({ log, type }) => {
+  return /* @__PURE__ */ jsxs2("div", { style: styles2.container, children: [
+    /* @__PURE__ */ jsxs2("div", { style: styles2.header, children: [
+      /* @__PURE__ */ jsxs2("span", { style: styles2.timestamp, children: [
+        "[",
+        formatTime(log.timestamp),
+        "]"
+      ] }),
+      /* @__PURE__ */ jsx2("span", { style: { ...styles2.method, color: getMethodColor(log.method) }, children: log.method }),
+      type === "response" && log.status && /* @__PURE__ */ jsxs2("span", { style: { ...styles2.status, color: getStatusColor(log.status) }, children: [
+        log.status,
+        " ",
+        log.statusText
+      ] }),
+      log.duration !== void 0 && type === "response" && /* @__PURE__ */ jsxs2("span", { style: styles2.duration, children: [
+        "(",
+        log.duration,
+        "ms)"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { style: styles2.url, children: log.url }),
+    type === "request" ? log.requestBody ? /* @__PURE__ */ jsxs2("div", { style: styles2.bodyContainer, children: [
+      /* @__PURE__ */ jsxs2("div", { style: styles2.bodyLabel, children: [
+        "\u25B8",
+        " Payload:"
+      ] }),
+      /* @__PURE__ */ jsx2("pre", { style: styles2.pre, children: formatJson(log.requestBody) })
+    ] }) : null : log.error ? /* @__PURE__ */ jsxs2("div", { style: styles2.bodyContainer, children: [
+      /* @__PURE__ */ jsxs2("div", { style: { ...styles2.bodyLabel, color: "#f87171" }, children: [
+        "\u25B8",
+        " Error:"
+      ] }),
+      /* @__PURE__ */ jsx2("pre", { style: styles2.errorPre, children: log.error })
+    ] }) : log.responseBody ? /* @__PURE__ */ jsxs2("div", { style: styles2.bodyContainer, children: [
+      /* @__PURE__ */ jsxs2("div", { style: styles2.bodyLabel, children: [
+        "\u25B8",
+        " Response:"
+      ] }),
+      /* @__PURE__ */ jsx2("pre", { style: styles2.pre, children: formatJson(log.responseBody) })
+    ] }) : null
+  ] });
+};
+
+// src/components/Terminal.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var styles3 = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: "#111827",
+    borderRadius: "8px",
+    border: "1px solid #374151",
+    overflow: "hidden",
+    transition: "all 0.2s",
+    flex: 1
+  },
+  collapsed: {
+    height: "48px",
+    flex: "none"
+  },
+  body: {
+    flex: 1,
+    overflow: "auto",
+    padding: "16px",
+    fontFamily: "monospace",
+    fontSize: "14px",
+    minHeight: "200px",
+    maxHeight: "400px"
+  },
+  empty: {
+    color: "#6b7280",
+    fontStyle: "italic"
+  }
+};
+var Terminal = ({
+  title,
+  logs,
+  type,
+  onClear,
+  expanded,
+  onToggleExpand
+}) => {
+  const terminalRef = useRef(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 /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        ...styles3.container,
+        ...expanded ? {} : styles3.collapsed
+      },
+      children: [
+        /* @__PURE__ */ jsx3(
+          TerminalHeader,
+          {
+            title,
+            count: logs.length,
+            expanded,
+            onClear,
+            onToggleExpand
+          }
+        ),
+        expanded && /* @__PURE__ */ jsx3("div", { ref: terminalRef, onScroll: handleScroll, style: styles3.body, children: logs.length === 0 ? /* @__PURE__ */ jsx3("div", { style: styles3.empty, children: "Waiting for network requests..." }) : logs.map((log) => /* @__PURE__ */ jsx3(LogEntry, { log, type }, log.id)) })
+      ]
+    }
+  );
+};
+
+// src/hooks/useNetworkInterceptor.ts
+import { useEffect as useEffect2, useRef as useRef2, useCallback } from "react";
+var useNetworkInterceptor = ({
+  enabled,
+  onLogAdd,
+  onLogUpdate
+}) => {
+  const originalFetch = useRef2(null);
+  const originalXHROpen = useRef2(null);
+  const originalXHRSend = useRef2(null);
+  const generateId = useCallback((prefix) => {
+    return `${prefix}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }, []);
+  useEffect2(() => {
+    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 = null;
+      if (init?.body) {
+        try {
+          requestBody = typeof init.body === "string" ? JSON.parse(init.body) : init.body;
+        } catch {
+          requestBody = init.body;
+        }
+      }
+      onLogAdd({
+        id,
+        timestamp: /* @__PURE__ */ 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 = 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) {
+        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]);
+  useEffect2(() => {
+    if (!enabled) return;
+    originalXHROpen.current = XMLHttpRequest.prototype.open;
+    originalXHRSend.current = XMLHttpRequest.prototype.send;
+    XMLHttpRequest.prototype.open = function(method, url) {
+      this._networkTerminal = {
+        id: generateId("xhr"),
+        method: method.toUpperCase(),
+        url: url.toString(),
+        startTime: 0,
+        timestamp: /* @__PURE__ */ new Date(),
+        type: "xhr"
+      };
+      return originalXHROpen.current.apply(
+        this,
+        arguments
+      );
+    };
+    XMLHttpRequest.prototype.send = function(body) {
+      const meta = this._networkTerminal;
+      if (meta) {
+        meta.startTime = performance.now();
+        let requestBody = null;
+        if (body) {
+          try {
+            requestBody = typeof body === "string" ? JSON.parse(body) : body;
+          } catch {
+            requestBody = body;
+          }
+        }
+        onLogAdd({
+          id: meta.id,
+          timestamp: /* @__PURE__ */ 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 = 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
+      );
+    };
+    return () => {
+      if (originalXHROpen.current) {
+        XMLHttpRequest.prototype.open = originalXHROpen.current;
+      }
+      if (originalXHRSend.current) {
+        XMLHttpRequest.prototype.send = originalXHRSend.current;
+      }
+    };
+  }, [enabled, onLogAdd, onLogUpdate, generateId]);
+};
+
+// src/components/NetworkTerminal.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var styles4 = {
+  floatingButton: {
+    position: "fixed",
+    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",
+    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",
+    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"
+  }
+};
+var NetworkTerminal = ({
+  maxLogs = 100,
+  defaultVisible = false,
+  position = "bottom",
+  height = "450px",
+  zIndex = 9999
+}) => {
+  const [logs, setLogs] = useState2([]);
+  const [isVisible, setIsVisible] = useState2(defaultVisible);
+  const [requestExpanded, setRequestExpanded] = useState2(true);
+  const [responseExpanded, setResponseExpanded] = useState2(true);
+  const addLog = useCallback2(
+    (log) => {
+      setLogs((prev) => [...prev.slice(-(maxLogs - 1)), log]);
+    },
+    [maxLogs]
+  );
+  const updateLog = useCallback2((id, updates) => {
+    setLogs(
+      (prev) => prev.map((log) => log.id === id ? { ...log, ...updates } : log)
+    );
+  }, []);
+  useNetworkInterceptor({
+    enabled: isVisible,
+    onLogAdd: addLog,
+    onLogUpdate: updateLog
+  });
+  useEffect3(() => {
+    const handleKeyDown = (e) => {
+      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 /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        onClick: () => setIsVisible(true),
+        style: {
+          ...styles4.floatingButton,
+          zIndex
+        },
+        title: "Open Network Terminal (Ctrl+Shift+N)",
+        children: [
+          ">",
+          "_ Network"
+        ]
+      }
+    );
+  }
+  const containerStyle = position === "top" ? { ...styles4.containerTop, zIndex } : { ...styles4.container, zIndex };
+  return /* @__PURE__ */ jsxs4("div", { style: containerStyle, children: [
+    /* @__PURE__ */ jsxs4("div", { style: styles4.mainHeader, children: [
+      /* @__PURE__ */ jsxs4("div", { style: styles4.headerLeft, children: [
+        /* @__PURE__ */ jsxs4("span", { style: styles4.title, children: [
+          ">",
+          "_ Network Terminal"
+        ] }),
+        /* @__PURE__ */ jsx4("span", { style: styles4.hint, children: "Press Ctrl+Shift+N to toggle" })
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { style: styles4.headerRight, children: [
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: clearLogs,
+            style: styles4.clearButton,
+            onMouseEnter: (e) => e.currentTarget.style.color = "#fff",
+            onMouseLeave: (e) => e.currentTarget.style.color = "#9ca3af",
+            children: "Clear All"
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: () => setIsVisible(false),
+            style: styles4.closeButton,
+            onMouseEnter: (e) => e.currentTarget.style.color = "#f87171",
+            onMouseLeave: (e) => e.currentTarget.style.color = "#9ca3af",
+            children: "\xD7"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { style: { ...styles4.terminalsContainer, height }, children: [
+      /* @__PURE__ */ jsx4("div", { style: styles4.terminalWrapper, children: /* @__PURE__ */ jsx4(
+        Terminal,
+        {
+          title: "Requests",
+          logs,
+          type: "request",
+          onClear: clearLogs,
+          expanded: requestExpanded,
+          onToggleExpand: () => setRequestExpanded(!requestExpanded)
+        }
+      ) }),
+      /* @__PURE__ */ jsx4("div", { style: styles4.terminalWrapper, children: /* @__PURE__ */ jsx4(
+        Terminal,
+        {
+          title: "Responses",
+          logs,
+          type: "response",
+          onClear: clearLogs,
+          expanded: responseExpanded,
+          onToggleExpand: () => setResponseExpanded(!responseExpanded)
+        }
+      ) })
+    ] })
+  ] });
+};
+export {
+  LogEntry,
+  NetworkTerminal,
+  Terminal,
+  TerminalHeader,
+  formatJson,
+  formatTime,
+  getMethodColor,
+  getStatusColor,
+  truncate,
+  useNetworkInterceptor
+};
+//# sourceMappingURL=index.mjs.map