pinggy 0.3.5 → 0.3.7

package/src/tui/ink/hooks/useWebDebugger.ts

@@ -1,98 +0,0 @@
-
-import { useEffect, useRef, useState } from "react";
-import WebSocket from "ws";
-import { ReqResPair, WebDebuggerSocketRequest } from "../../../types.js";
-import { logger } from "../../../logger.js";
-
-export function useWebDebugger(webDebuggerUrl?: string) {
-  const [pairs, setPairs] = useState<Map<number, ReqResPair>>(new Map());
-  const socketRef = useRef<WebSocket | null>(null);
-  const reconnectTimeout = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    if (!webDebuggerUrl) return;
-
-    let isStopped = false;
-
-    const connect = () => {
-      const ws = new WebSocket(`ws://${webDebuggerUrl}/introspec/websocket`);
-      socketRef.current = ws;
-
-      ws.on("open", () => {
-       logger.info("Web debugger connected.");
-      });
-
-      ws.on("message", (data) => {
-        try {
-          const raw = data.toString();
-          const parsed = JSON.parse(raw);
-          const msg = {
-            Req: parsed.Req || parsed.req,
-            Res: parsed.Res || parsed.res,
-          } as Partial<WebDebuggerSocketRequest>;
-
-          setPairs((prev) => {
-            const newMap = new Map(prev);
-
-            if (msg.Req) {
-              const { key } = msg.Req;
-              const existing = newMap.get(key) as ReqResPair | undefined;
-              const merged = {
-
-                request: msg.Req,
-                response: existing?.response,
-                reqHeaders: existing?.reqHeaders ?? {},
-                resHeaders: existing?.resHeaders ?? {},
-                headersLoaded: existing?.headersLoaded ?? false,
-              } as ReqResPair;
-              newMap.set(key, merged);
-            }
-
-            if (msg.Res) {
-              const { key } = msg.Res;
-              const existing = newMap.get(key) as ReqResPair | undefined;
-              const merged = {
-                
-                request: existing?.request ?? ({} as any),
-                response: msg.Res,
-                reqHeaders: existing?.reqHeaders ?? {},
-                resHeaders: existing?.resHeaders ?? {},
-                headersLoaded: existing?.headersLoaded ?? false,
-              } as ReqResPair;
-              newMap.set(key, merged);
-            }
-
-            return newMap;
-          });
-        } catch (err: any) {
-          logger.error("Error parsing WebSocket message:", err.message || err);
-        }
-      });
-
-      ws.on("close", () => {
-        logger.warn("Web debugger disconnected. Reconnecting in 5s...");
-        if (!isStopped) {
-          reconnectTimeout.current = setTimeout(connect, 5000);
-        }
-      });
-
-      ws.on("error", (err) => {
-        logger.error(`WebSocket error: ${err.message}`);
-      });
-    };
-
-    connect();
-
-    return () => {
-      isStopped = true;
-      if (socketRef.current) {
-        socketRef.current.close();
-      }
-      if (reconnectTimeout.current) {
-        clearTimeout(reconnectTimeout.current);
-      }
-    };
-  }, [webDebuggerUrl]);
-
-  return { pairs };
-}

package/src/tui/ink/index.tsx

@@ -1,243 +0,0 @@
-/**
- * Pinggy TUI Main Component - Ink Version
- * As of now not in use, kept for future reference.
- * Now We are using the blessed based TUI located in src/tui/blessed
- * Ink has some packaging issues with pkg it hard to bundle properly.
- * If you want to use ink install ink and react as dependencies.
- * Check this issue for more details:
- * https://github.com/vadimdemedes/ink/issues/844
- */
-
-import React, { useEffect, useState } from "react";
-import { Box, Text, useApp, useInput } from "ink";
-import { useTerminalSize } from "./hooks/useTerminalSize.js";
-import { FinalConfig } from "../../types.js";
-import { Container } from "./layout/Container.js";
-import { Borders } from "./layout/Borders.js";
-import { useQrCodes } from "./hooks/useQrCodes.js";
-import { useTunnelStats } from "./hooks/useTerminalStats.js";
-import { URLsSection } from "./sections/URLsSection.js";
-import { QrCodeSection } from "./sections/QrCodeSection.js";
-import { StatsSection } from "./sections/StatsSection.js";
-import { useWebDebugger } from "./hooks/useWebDebugger.js";
-import { DebuggerDetailModal } from "./sections/DebuggerDetailModal.js";
-import { useReqResHeaders } from "./hooks/useReqResHeaders.js";
-import { logger } from "../../logger.js";
-import { getStatusColor } from "./utils/utils.js";
-import { KeyBindings } from "./sections/KeyBindings.js";
-
-
-interface TunnelAppProps {
-	urls: string[];
-	greet?: string;
-	tunnelConfig?: FinalConfig;
-	disconnectInfo?: {
-		disconnected: boolean;
-		error?: string;
-		messages?: string[];
-	} | null;
-}
-
-const MIN_WIDTH_WARNING = 60;
-const SIMPLE_LAYOUT_THRESHOLD = 80;
-
-const TunnelTui = ({ urls, greet, tunnelConfig, disconnectInfo }: TunnelAppProps) => {
-	const { exit } = useApp();
-	const { columns: terminalWidth } = useTerminalSize();
-	const isQrCodeRequested = tunnelConfig?.qrCode || false;
-
-	// States
-	const [currentQrIndex, setCurrentQrIndex] = useState(0);
-	const [selectedIndex, setSelectedIndex] = useState(0);
-	const [inDetailView, setInDetailView] = useState(false);
-	const [keyBindingView, setKeyBindingView] = useState(false);
-
-	// Hooks
-	const qrCodes = useQrCodes(urls, isQrCodeRequested);
-	const stats = useTunnelStats();
-	const { pairs } = useWebDebugger(tunnelConfig?.webDebugger);
-	const { headers, fetchHeaders, clear } = useReqResHeaders(tunnelConfig?.webDebugger);
-
-	const allPairs = [...pairs.values()];
-
-	useEffect(() => {
-		if (disconnectInfo?.disconnected) {
-			exit();
-		}
-	}, [disconnectInfo, exit]);
-
-	// Key handling
-	useInput((input, key) => {
-		if (inDetailView && key.escape) {
-			setInDetailView(false);
-			clear();
-			return;
-		}
-		if (keyBindingView && key.escape) {
-			setKeyBindingView(false);
-			return;
-		}
-
-		if (key.upArrow && selectedIndex > 0) setSelectedIndex((i) => i - 1);
-		if (key.downArrow && selectedIndex < allPairs.length - 1) setSelectedIndex((i) => i + 1);
-
-		if (key.return) {
-			const pair = allPairs[selectedIndex];
-			if (pair && pair.request && pair.request.key !== undefined && pair.request.key !== null) {
-				(async () => {
-					try {
-						await fetchHeaders(pair.request.key);
-						setInDetailView(true);
-					} catch (err) {
-						logger.error("Fetch error:", err);
-					}
-				})();
-			}
-		}
-		if (input === 'h') {
-			setKeyBindingView(i => !i);
-			return;
-		}
-		if (qrCodes.length > 1 || urls.length > 1) {
-			if (key.rightArrow && currentQrIndex < urls.length - 1) setCurrentQrIndex(i => i + 1);
-			if (key.leftArrow && currentQrIndex > 0) setCurrentQrIndex(i => i - 1);
-		}
-	});
-
-	const visiblePairs = allPairs.slice(-10);
-	const startIndex = allPairs.length - visiblePairs.length;
-
-	if (terminalWidth < MIN_WIDTH_WARNING) {
-		return (
-			<Box flexDirection="column" alignItems="center" justifyContent="center" height="100%">
-				<Text color="redBright" bold>
-					Terminal is too narrow to show TUI ({terminalWidth} cols).
-				</Text>
-				<Text color="yellow">
-					Please resize your terminal to at least {MIN_WIDTH_WARNING} columns for proper display.
-				</Text>
-			</Box>
-		);
-	}
-
-	// === Simplified layout for narrow terminals ===
-	if (terminalWidth < SIMPLE_LAYOUT_THRESHOLD) {
-		return (
-			<Box flexDirection="column" paddingX={1} height={"100%"}>
-				{greet && (
-					<Box justifyContent="center" marginBottom={1}>
-						<Text color="cyanBright" bold>{greet}</Text>
-					</Box>
-				)}
-
-				<URLsSection urls={urls} currentQrIndex={currentQrIndex} width="100%" />
-
-				<Box marginTop={1}>
-					<StatsSection stats={stats} />
-				</Box>
-
-				<Box flexDirection="column" marginTop={1}>
-					<Text color="yellowBright">HTTP Requests:</Text>
-					{visiblePairs.map((pair, i) => (
-						<Text key={i} color={selectedIndex === startIndex + i ? "greenBright" : "white"}>
-							{selectedIndex === startIndex + i ? "> " : "  "}
-							{pair.request?.method || ""}
-							{" "}
-							{pair.response ? (
-								<Text color="cyan"> {pair.response.status}</Text>
-							) : (
-								<Text dimColor>...</Text>
-							)}
-							{" "}{pair.request?.uri || ""}
-						</Text>
-					))}
-				</Box>
-
-				{/* Qr codes are removed for small terminals */}
-
-				<Box marginTop={1} justifyContent="center">
-					<Text dimColor>Press Ctrl+C to stop the tunnel.Or h for key bindings</Text>
-				</Box>
-
-				{inDetailView && (
-					<DebuggerDetailModal
-						requestText={headers?.req}
-						responseText={headers?.res}
-						onClose={() => setInDetailView(false)}
-					/>
-				)}
-			</Box>
-		);
-	}
-
-
-	return (
-		<>
-			<Container>
-				<Borders>
-					<Box flexDirection="column" height="100%" justifyContent="space-between">
-						{/* ===== Top content ===== */}
-						<Box flexDirection="column">
-							{greet && (
-								<Box justifyContent="center" width="94%" marginBottom={1}>
-									<Text color="cyanBright" bold>
-										{greet}
-									</Text>
-								</Box>
-							)}
-
-							{/* Upper Box (URL + stats) */}
-							<Box flexDirection="row" justifyContent="space-evenly" width="100%" paddingY={1}>
-								<URLsSection urls={urls} currentQrIndex={currentQrIndex} />
-								<StatsSection stats={stats} />
-							</Box>
-
-							{/* Lower Box (Requests + QR code) */}
-							<Box flexDirection="row" justifyContent="space-evenly" width="100%" paddingY={1}>
-								<Box flexDirection="column" marginBottom={1} width={isQrCodeRequested ? "60%" : "80%"}>
-									<Text color="yellowBright">HTTP Requests:</Text>
-									{visiblePairs.map((pair, i) => (
-										<Text key={i}>
-											<Text color={selectedIndex === startIndex + i ? "cyanBright" : getStatusColor(pair.response?.status || "")}>
-
-												{selectedIndex === startIndex + i ? "> " : "  "}
-												{pair.request?.method || ""}
-												{pair.response ? (
-													<Text color={selectedIndex === startIndex + i ? "cyanBright" : getStatusColor(pair.response?.status || "")}>{" "}  {pair.response.status}</Text>
-												) : (
-													<Text dimColor>...</Text>
-												)}
-												{" "}{pair.request?.uri || ""}
-											</Text>
-										</Text>
-									))}
-								</Box>
-
-								{isQrCodeRequested && (
-									<QrCodeSection qrCodes={qrCodes} urls={urls} currentQrIndex={currentQrIndex} />
-								)}
-							</Box>
-						</Box>
-
-						{/* ===== Bottom sticky message ===== */}
-						<Box justifyContent="center" marginTop={1}>
-							<Text dimColor>Press Ctrl+C twice to stop the tunnel. Or press h for key bindings.</Text>
-						</Box>
-					</Box>
-				</Borders>
-			</Container>
-			{inDetailView && (
-				<DebuggerDetailModal
-					requestText={headers?.req}
-					responseText={headers?.res}
-					onClose={() => setInDetailView(false)}
-				/>
-			)}
-			{
-				keyBindingView && <KeyBindings />
-			}
-		</>
-	);
-};
-
-export default TunnelTui;

package/src/tui/ink/layout/Borders.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { Box } from "ink";
-
-export const Borders = ({ children }: { children: React.ReactNode }) => (
-	<Box
-		borderStyle="round"
-		borderColor="green"
-		padding={1}
-		flexDirection="column"
-		width="100%"
-		alignItems="center"
-	>
-		{children}
-	</Box>
-);

package/src/tui/ink/layout/Container.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { Box, Text } from "ink";
-import Gradient from "ink-gradient";
-import { asciiArtPinggyLogo } from "../asciArt.js";
-
-export const Container = ({ children }: { children: React.ReactNode }) => (
-	<Box flexDirection="column" height="100%" width="100%" padding={1}>
-		<Gradient name="fruit">
-			<Text>{asciiArtPinggyLogo}</Text>
-		</Gradient>
-		<Box marginTop={1} flexGrow={1} width="100%">
-			{children}
-		</Box>
-	</Box>
-);

package/src/tui/ink/sections/DebuggerDetailModal.tsx

@@ -1,53 +0,0 @@
-import React from "react";
-import { Box, Text } from "ink";
-
-interface DebuggerDetailModalProps {
-	requestText?: string;
-	responseText?: string;
-	onClose: () => void;
-}
-
-export const DebuggerDetailModal = ({
-	requestText,
-	responseText,
-	onClose,
-}: DebuggerDetailModalProps) => {
-	return (
-		<Box
-			flexDirection="column"
-			width="100%"
-			height="100%"
-			position="absolute"
-			alignItems="center"
-			justifyContent="center"
-		>
-			<Box
-				flexDirection="column"
-				paddingX={2}
-				paddingY={1}
-				width="90%"
-				height="90%"
-				overflow="hidden"
-				backgroundColor="default"
-				borderStyle="round"
-				borderColor="green"
-			>
-				<Text color="cyanBright" bold>
-					Request
-				</Text>
-				<Text wrap="truncate-end">{requestText || "(no request data)"}</Text>
-
-				<Box marginTop={1} />
-
-				<Text color="magentaBright" bold>
-					Response
-				</Text>
-				<Text wrap="truncate-end">{responseText || "(no response data)"}</Text>
-
-				<Box marginTop={1} justifyContent="center">
-					<Text dimColor>Press ESC to close</Text>
-				</Box>
-			</Box>
-		</Box>
-	);
-};

package/src/tui/ink/sections/KeyBindings.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-import { Box, Text } from "ink";
-
-
-export const KeyBindings = () => {
-	return (
-		<Box
-			flexDirection="column"
-			width="100%"
-			height="100%"
-			position="absolute"
-			alignItems="center"
-			justifyContent="center"
-
-		>
-			<Box
-				flexDirection="column"
-				paddingX={2}
-				paddingY={1}
-				width="60%"
-				height="80%"
-				overflow="hidden"
-				backgroundColor="default"
-				borderStyle="round"
-				borderColor="green"
-
-			>
-				<Box justifyContent="center" marginBottom={1} >
-					<Text color="cyanBright" bold> Key Bindings </Text>
-				</Box>
-				<Box flexDirection="column" padding={1} justifyContent="space-evenly" gap={2} >
-					{/* Header */}
-					<Box flexDirection="column">
-						<Text>
-							<Text bold>h</Text>         This page
-						</Text>
-						<Text>
-							<Text bold>c</Text>         Copy the selected URL to clipboard
-						</Text>
-						<Text>
-							<Text bold>Ctrl+c</Text>    Exit
-						</Text>
-					</Box>
-
-					<Box marginTop={1} flexDirection="column">
-						<Text>Enter/Return    Open selected request</Text>
-						<Text>Esc             Return to main page</Text>
-						<Text>UP (↑)          Scroll up the requests</Text>
-						<Text>Down (↓)        Scroll down the requests</Text>
-						<Text>Left (←)        Show qr code for previous url</Text>
-						<Text>Right (→)       Show qr code for next url</Text>
-						<Text>Ctrl+c          Force Exit</Text>
-					</Box>
-				</Box>
-			</Box>
-		</Box>
-	);
-};

package/src/tui/ink/sections/QrCodeSection.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import { Box, Text } from "ink";
-
-interface Props {
-	qrCodes: string[];
-	urls: string[];
-	currentQrIndex: number;
-}
-
-export const QrCodeSection = ({ qrCodes, urls, currentQrIndex }: Props) => {
-	if (qrCodes.length === 0) return null;
-
-	return (
-		<Box flexDirection="column" alignItems="center" flexGrow={1} paddingX={1} width="40%" >
-			<Text color="greenBright" bold>
-				QR Code {currentQrIndex + 1}/{urls.length}
-			</Text>
-
-			<Box marginY={1} flexDirection="column" alignItems="center">
-				<Text>{qrCodes[currentQrIndex]}</Text>
-			</Box>
-
-			{urls.length > 1 && (
-				<Text color="yellow">← → to switch QR codes</Text>
-			)}
-		</Box>
-	);
-};

package/src/tui/ink/sections/StatsSection.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { Box, Text } from "ink";
-import { TunnelUsageType } from "@pinggy/pinggy";
-import { getBytesInt } from "../utils/utils.js";
-
-export const StatsSection = ({ stats }: { stats: TunnelUsageType }) => (
-	<Box flexDirection="column" paddingX={1} alignItems="center" width="40%">
-		<Box flexDirection="column" alignItems="flex-start">
-			<Text color="greenBright" bold>
-				Live Stats
-			</Text>
-			<Text>Elapsed: {stats.elapsedTime}s</Text>
-			<Text>Live Connections: {stats.numLiveConnections}</Text>
-			<Text>Total Connections: {stats.numTotalConnections}</Text>
-			<Text>Request : {getBytesInt(stats.numTotalReqBytes)}</Text>
-			<Text>Response : {getBytesInt(stats.numTotalResBytes)}</Text>
-			<Text>Total Transfer: {getBytesInt(stats.numTotalTxBytes)}</Text>
-		</Box>
-	</Box>
-);

package/src/tui/ink/sections/URLsSection.tsx

@@ -1,53 +0,0 @@
-import React from "react";
-import { Box, Text, useInput } from "ink";
-import clipboardy from "clipboardy";
-
-interface Props {
-	urls: string[];
-	currentQrIndex: number;
-	width?: string;
-}
-
-export const URLsSection = ({ urls, currentQrIndex, width = "60%" }: Props) => {
-	const [copiedIndex, setCopiedIndex] = React.useState<number | null>(null);
-
-	useInput((input, key) => {
-		// Press 'c' to copy current URL
-		if (input === "c" && urls.length > 0) {
-			const urlToCopy = urls[currentQrIndex];
-			clipboardy.writeSync(urlToCopy);
-			setCopiedIndex(currentQrIndex);
-
-			// reset feedback after a second
-			setTimeout(() => setCopiedIndex(null), 1000);
-		}
-	});
-
-	return (<Box flexDirection="column" paddingX={1} alignItems="flex-start" width={width} >
-		<Text color="greenBright" bold>
-			Public URLs
-		</Text>
-		{urls.map((url, index) => {
-			const isSelected = index === currentQrIndex;
-			const isCopied = copiedIndex === index;
-
-			return (
-				<Text
-					key={`url-${url}-${index}`}
-					color={
-						isCopied
-							? "cyanBright"
-							: isSelected
-								? "yellowBright"
-								: "magentaBright"
-					}
-					bold={isSelected || isCopied}
-				>
-					{isSelected ? "→ " : "• "}
-					{url}
-					{isCopied && <Text color="greenBright">  [Copied!]</Text>}
-				</Text>
-			);
-		})}
-	</Box>);
-};

package/src/tui/ink/utils/utils.ts

@@ -1,35 +0,0 @@
-export function getStatusColor(status: string): string {
-
-    const match = status.match(/\b(\d{3})\b/);
-    const statusCode = match ? parseInt(match[1], 10) : 0;
-
-
-    switch (true) {
-        case statusCode >= 100 && statusCode < 200:
-            return "yellow";
-        case statusCode >= 200 && statusCode < 300:
-            return "green";
-        case statusCode >= 300 && statusCode < 400:
-            return "yellow";
-        case statusCode >= 400 && statusCode < 500:
-            return "red";
-        case statusCode >= 500:
-            return "pink";
-        default:
-            return "yellow";
-    }
-}
-
-export function getBytesInt(b: number): string {
-    if (b >= 1024 * 1024 * 1024) {
-        return `${(b / (1024 * 1024 * 1024)).toFixed(2)} G`;
-    }
-    if (b >= 1024 * 1024) {
-        return `${(b / (1024 * 1024)).toFixed(2)} M`;
-    }
-    if (b >= 1024) {
-        return `${(b / 1024).toFixed(2)} K`;
-    }
-    return `${b.toFixed(2)}  `;
-}
-

package/src/tui/spinner/spinner.ts

@@ -1,64 +0,0 @@
-import pico from 'picocolors';
-
-interface Spinner {
-    interval: number;
-    frames: string[];
-}
-
-interface Spinners {
-    [key: string]: Spinner;
-}
-
-export const spinners: Spinners = {
-    dots: {
-        interval: 80,
-        frames: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'],
-    },
-};
-
-let currentTimer: NodeJS.Timeout | null = null;
-let currentText = '';
-
-export function startSpinner(name = 'dots', text = 'Loading') {
-    const spinner = spinners[name];
-    let i = 0;
-    currentText = text;
-
-    // Clear any existing spinner
-    if (currentTimer) {
-        clearInterval(currentTimer);
-    }
-
-    currentTimer = setInterval(() => {
-        const frame = spinner.frames[i = ++i % spinner.frames.length];
-        process.stdout.write(`\r${pico.cyan(frame)} ${text}`);
-    }, spinner.interval);
-
-    return () => stopSpinner();
-}
-
-export function stopSpinner() {
-    if (currentTimer) {
-        clearInterval(currentTimer);
-        currentTimer = null;
-        process.stdout.write('\r\x1b[K'); // Clear the line
-    }
-}
-
-export function stopSpinnerSuccess(message?: string) {
-    if (currentTimer) {
-        clearInterval(currentTimer);
-        currentTimer = null;
-        const finalMessage = message || currentText;
-        process.stdout.write(`\r${pico.green('✔')} ${finalMessage}\n`);
-    }
-}
-
-export function stopSpinnerFail(message?: string) {
-    if (currentTimer) {
-        clearInterval(currentTimer);
-        currentTimer = null;
-        const finalMessage = message || currentText;
-        process.stdout.write(`\r${pico.red('✖')} ${finalMessage}\n`);
-    }
-}