pinggy 0.3.4 → 0.3.6

package/src/tui/blessed/components/UIComponents.ts

@@ -1,306 +0,0 @@
-import blessed from "blessed";
-import { FinalConfig } from "../../../types.js";
-import { asciiArtPinggyLogo } from "../../ink/asciArt.js";
-
-export const MIN_WIDTH_WARNING = 60;
-export const SIMPLE_LAYOUT_THRESHOLD = 80;
-
-export interface UIElements {
-    mainContainer: blessed.Widgets.BoxElement;
-    logoBox?: blessed.Widgets.BoxElement;
-    contentBox?: blessed.Widgets.BoxElement;
-    urlsBox: blessed.Widgets.BoxElement;
-    statsBox: blessed.Widgets.BoxElement;
-    requestsBox?: blessed.Widgets.BoxElement;
-    qrCodeBox?: blessed.Widgets.BoxElement;
-    footerBox: blessed.Widgets.BoxElement;
-    warningBox?: blessed.Widgets.BoxElement;
-}
-
-/**
- * Colorizes text with a gradient of colors
- */
-export function colorizeGradient(text: string): string {
-    const colors = ["red", "yellow", "green", "cyan", "blue", "magenta"];
-    const lines = text.split("\n");
-    return lines
-        .map((line, i) => {
-            const color = colors[i % colors.length];
-            return `{${color}-fg}${line}{/${color}-fg}`;
-        })
-        .join("\n");
-}
-
-/**
- * Creates the warning UI when terminal is too narrow
- */
-export function createWarningUI(screen: blessed.Widgets.Screen): blessed.Widgets.BoxElement {
-    return blessed.box({
-        parent: screen,
-        top: "center",
-        left: "center",
-        width: "80%",
-        height: 5,
-        content: `{red-fg}{bold}Terminal is too narrow to show TUI (${screen.width} cols).{/bold}{/red-fg}\n{yellow-fg}Please resize your terminal to at least ${MIN_WIDTH_WARNING} columns for proper display.{/yellow-fg}`,
-        tags: true,
-        align: "center",
-        valign: "middle",
-        style: {
-            fg: 'red'
-        }
-    });
-}
-
-/**
- * Creates the full UI layout for wider terminals
- */
-export function createFullUI(
-    screen: blessed.Widgets.Screen,
-    urls: string[],
-    greet: string,
-    tunnelConfig?: FinalConfig
-): UIElements {
-    // Main container
-    const mainContainer = blessed.box({
-        parent: screen,
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        padding: 1,
-    });
-
-    // Logo
-    const logoBox = blessed.box({
-        parent: mainContainer,
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: 7,
-        content: colorizeGradient(asciiArtPinggyLogo),
-        tags: true,
-    });
-
-    // Content box with border
-    const contentBox = blessed.box({
-        parent: mainContainer,
-        top: 8,
-        left: 0,
-        width: "100%-2",
-        height: "100%-10",
-        padding: 0,
-        border: {
-            type: "line",
-        },
-        style: {
-            border: {
-                fg: "green",
-            },
-        },
-        
-    });
-
-    // Greet message
-    let greetHeight = 0;
-    if (greet) {
-        const greetBox = blessed.box({
-            parent: contentBox,
-            top: 0,
-            left: "center",
-            width: "60%",
-            height: 4,
-            content: `{bold}${greet}{/bold}`,
-            tags: true,
-            align: "center",
-            style: {
-                fg: 'green',
-            },
-        });
-        greetHeight = 4; 
-    }
-
-    // Upper section: URLs + Stats
-    const upperSectionTop = greetHeight > 0 ? greetHeight : 0;
-
-    const upperSection = blessed.box({
-        parent: contentBox,
-        top: upperSectionTop,
-        left: 0,
-        width: "100%-2", 
-        height: 10,
-    });
-
-    // URLs section
-    const urlsBox = blessed.box({
-        parent: upperSection,
-        top: 0,
-        left: 0,
-        width: "48%",
-        height: "100%",
-        padding: { left: 1, right: 1 },
-        tags: true,
-       
-    });
-
-
-    // Stats section
-    const statsBox = blessed.box({
-        parent: upperSection,
-        top: 0,
-        right: 0,
-        left: "65%",
-        width: "35%",
-        height: "100%",
-        padding: { left: 1, right: 1 },
-        tags: true,
-        align: "left",
-    });
-
-    // Lower section: Requests + QR Code
-    const lowerSectionTop = greetHeight + 11;
-    const lowerSection = blessed.box({
-        parent: contentBox,
-        top: lowerSectionTop,
-        left: 0,
-        right: 0,
-        bottom: 2,
-        width: "100%-2",
-        height: `100%-${lowerSectionTop + 6}`,
-    });
-
-    const isQrCodeRequested = tunnelConfig?.qrCode || false;
-
-    // Requests section
-    const requestsBox = blessed.box({
-        parent: lowerSection,
-        top: 0,
-        left: 0,
-        width: isQrCodeRequested ? "60%" : "80%",
-        height: "80%",
-        padding: { left: 1, right: 1 },
-        tags: true,
-        scrollable: true,
-        
-    });
-
-    // QR Code section
-    let qrCodeBox: blessed.Widgets.BoxElement | undefined;
-    if (isQrCodeRequested) {
-        qrCodeBox = blessed.box({
-            parent: lowerSection,
-            top: 0,
-            right: 0,
-            width: "40%",
-            height: "100%",
-            tags: true,
-            padding: { left: 1, right: 1 },
-           
-        });
-    }
-
-    // Footer
-    const footerBox = blessed.box({
-        parent: contentBox,
-        bottom: 0,
-        left: "center",
-        width: "shrink",
-        height: 1,
-        content: "Press Ctrl+C to stop the tunnel. Or press h for key bindings.",
-        tags: true,
-    });
-
-    return {
-        mainContainer,
-        logoBox,
-        contentBox,
-        urlsBox,
-        statsBox,
-        requestsBox,
-        qrCodeBox,
-        footerBox,
-    };
-}
-
-/**
- * Creates a simple UI layout for narrower terminals
- */
-export function createSimpleUI(
-    screen: blessed.Widgets.Screen,
-    urls: string[],
-    greet: string
-): UIElements {
-    const mainContainer = blessed.box({
-        parent: screen,
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        padding: { left: 1, right: 1 },
-    });
-
-    let currentTop = 0;
-
-    // Greet message
-    if (greet) {
-        blessed.box({
-            parent: mainContainer,
-            top: currentTop,
-            left: "center",
-            width: "90%",
-            height: "shrink",
-            content: `{bold}${greet}{/bold}`,
-            tags: true,
-            align: "center",
-            style: {
-                fg: 'green'
-            }
-        });
-
-        const lines = Math.ceil(greet.length / ((screen.width as number) * 0.9));
-        currentTop += Math.max(lines, 1) + 1;
-    }
-
-    // URLs section
-    const urlsBox = blessed.box({
-        parent: mainContainer,
-        top: currentTop,
-        left: 0,
-        width: "100%",
-        height: urls.length + 2,
-        tags: true,
-    });
-    currentTop += urls.length + 3;
-
-    // Stats section
-    const statsBox = blessed.box({
-        parent: mainContainer,
-        top: currentTop,
-        left: 0,
-        width: "100%",
-        height: 8,
-        tags: true,
-    });
-    currentTop += 9;
-
-
-    // Footer
-    const footerBox = blessed.box({
-        parent: mainContainer,
-        bottom: 0,
-        left: "center",
-        width: "shrink",
-        height: 1,
-        content: "Press Ctrl+C to stop the tunnel.",
-        tags: true,
-        style: {
-            fg: 'white',
-        }
-    });
-
-    return {
-        mainContainer,
-        urlsBox,
-        statsBox,
-        footerBox,
-    };
-}

package/src/tui/blessed/components/index.ts

@@ -1,4 +0,0 @@
-export { createFullUI, createSimpleUI, createWarningUI, UIElements, MIN_WIDTH_WARNING, SIMPLE_LAYOUT_THRESHOLD, colorizeGradient } from './UIComponents.js';
-export { updateUrlsDisplay, updateStatsDisplay, updateRequestsDisplay, updateQrCodeDisplay } from './DisplayUpdaters.js';
-export { showDetailModal, closeDetailModal, showKeyBindingsModal, closeKeyBindingsModal, ModalManager } from './Modals.js';
-export { setupKeyBindings, KeyBindingsState, KeyBindingsCallbacks } from './KeyBindings.js';

package/src/tui/blessed/config.ts

@@ -1,53 +0,0 @@
-/**
- * TUI Configuration Settings
- */
-
-export interface TuiConfig {
-    /**
-     * Maximum number of request/response pairs to keep in memory.
-     * Older requests will be removed when this limit is exceeded.
-     * Default: 100
-     */
-    maxRequestPairs: number;
-
-    /**
-     * Number of visible request items to display in the requests box.
-     * Default: 10
-     */
-    visibleRequestCount: number;
-
-    /**
-     * Margin from the viewport edge when auto-scrolling to keep selector visible.
-     * Default: 2
-     */
-    viewportScrollMargin: number;
-
-    /**
-     * Inactivity timeout in milliseconds to auto-unselect the selected row and adjust viewport to latest request.
-     * Default: 10000 (10 seconds)
-     */
-
-    inactivityHttpSelectorTimeoutMs?: number;
-}
-
-/**
- * Default TUI configuration values
- */
-export const defaultTuiConfig: TuiConfig = {
-    maxRequestPairs: 100,
-    visibleRequestCount: 10,
-    viewportScrollMargin: 2,
-    inactivityHttpSelectorTimeoutMs: 10000,
-};
-
-/**
- * Get the current TUI configuration.
- */
-export function getTuiConfig(): TuiConfig {
-    return {
-        maxRequestPairs: defaultTuiConfig.maxRequestPairs,
-        visibleRequestCount:defaultTuiConfig.visibleRequestCount,
-        viewportScrollMargin: defaultTuiConfig.viewportScrollMargin,
-        inactivityHttpSelectorTimeoutMs: defaultTuiConfig.inactivityHttpSelectorTimeoutMs,
-    };
-}

package/src/tui/blessed/headerFetcher.ts

@@ -1,42 +0,0 @@
-import { logger } from "../../logger.js";
-
-export interface HeadersResult {
-    req: string;
-    res: string;
-}
-
-/**
- * Fetch request/response headers from the web debugger
- */
-export async function fetchReqResHeaders(
-    baseUrl: string,
-    key: number,
-    signal?: AbortSignal
-): Promise<HeadersResult> {
-    if (!baseUrl) {
-        return { req: "", res: "" };
-    }
-
-    try {
-        const [reqRes, resRes] = await Promise.all([
-            fetch(`http://${baseUrl}/introspec/getrawrequestheader`, {
-                headers: { "X-Introspec-Key": key.toString() },
-                signal,
-            }),
-            fetch(`http://${baseUrl}/introspec/getrawresponseheader`, {
-                headers: { "X-Introspec-Key": key.toString() },
-                signal,
-            }),
-        ]);
-
-        const [req, res] = await Promise.all([reqRes.text(), resRes.text()]);
-        return { req, res };
-    } catch (err: any) {
-        // Re-throw abort errors so caller can handle cancellation
-        if (err?.name === 'AbortError') {
-            throw err;
-        }
-        logger.error("Error fetching headers:", err.message || err);
-        throw err;
-    }
-}

package/src/tui/blessed/index.ts

@@ -1,2 +0,0 @@
-export { TunnelTui, default } from "./TunnelTui.js";
-

package/src/tui/blessed/qrCodeGenerator.ts

@@ -1,20 +0,0 @@
-import QRCode from "qrcode";
-
-/**
- * Generate QR codes for a list of URLs
- */
-export async function createQrCodes(urls: string[]): Promise<string[]> {
-    const codes: string[] = [];
-    
-     for (const url of urls) {
-        const qr = await QRCode.toString(url, {
-            type: "terminal",
-            small: true,                  
-            margin: 0,                    
-            errorCorrectionLevel: "L",    
-
-        });
-        codes.push(qr);
-    }
-    return codes;
-}

package/src/tui/blessed/webDebuggerConnection.ts

@@ -1,128 +0,0 @@
-import WebSocket from "ws";
-import { ReqResPair, WebDebuggerSocketRequest } from "../../types.js";
-import { logger } from "../../logger.js";
-import { getTuiConfig } from "./config.js";
-
-export interface WebDebuggerConnection {
-    close: () => void;
-}
-
-/**
- * We are using a WebSocket connection to the web debugger endpoint
- * to receive real-time HTTP request and response data.
- * @param webDebuggerUrl 
- * @param onUpdate 
- * @returns 
- */
-export function createWebDebuggerConnection(
-    webDebuggerUrl: string,
-    onUpdate: (pairs: ReqResPair[]) => void
-): WebDebuggerConnection {
-    const pairs = new Map<number, ReqResPair>();
-    const pairKeys: number[] = [];
-    let socket: WebSocket | null = null;
-    let reconnectTimeout: NodeJS.Timeout | null = null;
-    let isStopped = false;
-
-    const config = getTuiConfig();
-    const maxPairs = config.maxRequestPairs;
-
-
-    // Trim pairs to keep only the latest maxPairs entries
-    const trimPairs = () => {
-        while (pairKeys.length > maxPairs) {
-            const oldestKey = pairKeys.shift();
-            if (oldestKey !== undefined) {
-                pairs.delete(oldestKey);
-            }
-        }
-    };
-
-
-    // Add or update a pair and track its key for ordering
-    const upsertPair = (key: number, pair: ReqResPair) => {
-        if (!pairs.has(key)) {
-            pairKeys.push(key);
-        }
-        pairs.set(key, pair);
-        trimPairs();
-    };
-
-    const connect = () => {
-        const ws = new WebSocket(`ws://${webDebuggerUrl}/introspec/websocket`);
-        socket = 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,
-                    Res: parsed.res,
-                } as Partial<WebDebuggerSocketRequest>;
-
-                if (msg.Req) {
-                    const { key } = msg.Req;
-                    const existing = pairs.get(key) as ReqResPair | undefined;
-                    const merged: ReqResPair = {
-                        request: msg.Req,
-                        response: existing?.response,
-                    } as ReqResPair;
-                    upsertPair(key, merged);
-                }
-
-                if (msg.Res) {
-                    const { key } = msg.Res;
-                    const existing = pairs.get(key) as ReqResPair | undefined;
-                    const merged: ReqResPair = {
-                        request: existing?.request ?? ({} as any),
-                        response: msg.Res,
-                    } as ReqResPair;
-                    upsertPair(key, merged);
-                }
-
-                // Notify listener with reversed array (latest first)
-                const reversedPairs: ReqResPair[] = [];
-                for (let i = pairKeys.length - 1; i >= 0; i--) {
-                    const key = pairKeys[i];
-                    const pair = pairs.get(key);
-                    if (pair) {
-                        reversedPairs.push(pair);
-                    }
-                }
-                onUpdate(reversedPairs);
-            } 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 = setTimeout(connect, 5000);
-            }
-        });
-
-        ws.on("error", (err) => {
-            logger.error(`WebSocket error: ${err.message}`);
-        });
-    };
-
-    connect();
-
-    return {
-        close: () => {
-            isStopped = true;
-            if (socket) {
-                socket.close();
-            }
-            if (reconnectTimeout) {
-                clearTimeout(reconnectTimeout);
-            }
-        },
-    };
-}

package/src/tui/ink/asciArt.ts

@@ -1,7 +0,0 @@
-export const asciiArtPinggyLogo = `
-██████╗ ██╗███╗   ██╗ ██████╗  ██████╗██╗   ██╗
-██╔══██╗██║████╗  ██║██╔════╝ ██╔════╝╚██╗ ██╔╝
-██████╔╝██║██╔██╗ ██║██║  ███╗██║  ███╗╚████╔╝ 
-██╔═══╝ ██║██║╚██╗██║██║   ██║██║   ██║ ╚██╔╝  
-██║     ██║██║ ╚████║╚██████╔╝╚██████╔╝  ██║   
-╚═╝     ╚═╝╚═╝  ╚═══╝ ╚═════╝  ╚═════╝   ╚═╝   `;

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

@@ -1,27 +0,0 @@
-import { useEffect, useState } from "react";
-import qrcode from "qrcode-terminal";
-
-export function useQrCodes(urls: string[], isQrCodeRequested: boolean) {
-	const [qrCodes, setQrCodes] = useState<string[]>([]);
-
-	useEffect(() => {
-		if (!isQrCodeRequested || urls.length === 0) return;
-
-		const generateAll = async () => {
-			const codes: string[] = [];
-			for (const url of urls) {
-				await new Promise<void>((resolve) => {
-					qrcode.generate(url, { small: true }, (qr) => {
-						codes.push(qr);
-						resolve();
-					});
-				});
-			}
-			setQrCodes(codes);
-		};
-
-		generateAll();
-	}, [urls, isQrCodeRequested]);
-
-	return qrCodes;
-}

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

@@ -1,27 +0,0 @@
-import { useState } from "react";
-import { logger } from "../../../logger.js";
-
-export function useReqResHeaders(baseUrl?: string) {
-  const [headers, setHeaders] = useState<{ req: string; res: string } | null>(null);
-
-  async function fetchHeaders(key: number) {
-    if (!baseUrl) return;
-    try {
-      const [reqRes, resRes] = await Promise.all([
-        fetch(`http://${baseUrl}/introspec/getrawrequestheader`, {
-          headers: { "X-Introspec-Key": key.toString() },
-        }),
-        fetch(`http://${baseUrl}/introspec/getrawresponseheader`, {
-          headers: { "X-Introspec-Key": key.toString() },
-        }),
-      ]);
-
-      const [req, res] = await Promise.all([reqRes.text(), resRes.text()]);
-      setHeaders({ req, res });
-    } catch (err: any) {
-      logger.error("Error fetching headers:", err.message || err);
-    }
-  }
-
-  return { headers, fetchHeaders, clear: () => setHeaders(null) };
-}

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

@@ -1,26 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const TERMINAL_PADDING_X = 1;
-
-export function useTerminalSize(): { columns: number; rows: number } {
-  const [size, setSize] = useState({
-    columns: (process.stdout.columns || 60) - TERMINAL_PADDING_X,
-    rows: process.stdout.rows || 20,
-  });
-
-  useEffect(() => {
-    function updateSize() {
-      setSize({
-        columns: (process.stdout.columns || 60) - TERMINAL_PADDING_X,
-        rows: process.stdout.rows || 20,
-      });
-    }
-
-    process.stdout.on('resize', updateSize);
-    return () => {
-      process.stdout.off('resize', updateSize);
-    };
-  }, []);
-
-  return size;
-}

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

@@ -1,24 +0,0 @@
-import { useEffect, useState } from "react";
-import { TunnelUsageType } from "@pinggy/pinggy";
-
-export function useTunnelStats() {
-	const [stats, setStats] = useState<TunnelUsageType>({
-		elapsedTime: 0,
-		numLiveConnections: 0,
-		numTotalConnections: 0,
-		numTotalReqBytes: 0,
-		numTotalResBytes: 0,
-		numTotalTxBytes: 0,
-	});
-
-	useEffect(() => {
-		globalThis.__PINGGY_TUNNEL_STATS__ = (newStats: TunnelUsageType) => {
-			setStats({ ...newStats });
-		};
-		return () => {
-			delete globalThis.__PINGGY_TUNNEL_STATS__;
-		};
-	}, []);
-
-	return stats;
-}