pinggy 0.3.0 → 0.3.2

package/src/tui/blessed/TunnelTui.ts

@@ -0,0 +1,298 @@
+import blessed from "blessed";
+import { FinalConfig, ReqResPair } from "../../types.js";
+import { TunnelUsageType } from "@pinggy/pinggy";
+import { createQrCodes } from "./qrCodeGenerator.js";
+import { createWebDebuggerConnection, WebDebuggerConnection } from "./webDebuggerConnection.js";
+import { ManagedTunnel, TunnelManager } from "../../tunnel_manager/TunnelManager.js";
+import {
+    createFullUI,
+    createSimpleUI,
+    createWarningUI,
+    UIElements,
+    MIN_WIDTH_WARNING,
+    SIMPLE_LAYOUT_THRESHOLD,
+} from "./components/UIComponents.js";
+import {
+    updateUrlsDisplay,
+    updateStatsDisplay,
+    updateRequestsDisplay,
+    updateQrCodeDisplay,
+} from "./components/DisplayUpdaters.js";
+import {
+    ModalManager,
+    showDisconnectModal,
+} from "./components/Modals.js";
+import {
+    setupKeyBindings,
+    KeyBindingsState,
+    KeyBindingsCallbacks,
+} from "./components/KeyBindings.js";
+
+interface TunnelAppProps {
+    urls: string[];
+    greet?: string;
+    tunnelConfig?: FinalConfig;
+    disconnectInfo?: {
+        disconnected: boolean;
+        error?: string;
+        messages?: string[];
+    } | null;
+    tunnelInstance?:ManagedTunnel
+}
+
+export class TunnelTui {
+    private screen: blessed.Widgets.Screen;
+    private urls: string[];
+    private greet: string;
+    private tunnelConfig: FinalConfig | undefined;
+    private disconnectInfo: TunnelAppProps["disconnectInfo"];
+
+    // State
+    private currentQrIndex: number = 0;
+    private selectedIndex: number = 0;
+    private qrCodes: string[] = [];
+    private stats: TunnelUsageType = {
+        elapsedTime: 0,
+        numLiveConnections: 0,
+        numTotalConnections: 0,
+        numTotalReqBytes: 0,
+        numTotalResBytes: 0,
+        numTotalTxBytes: 0,
+    };
+    private pairs: Map<number, ReqResPair> = new Map();
+    private webDebuggerConnection: WebDebuggerConnection | null = null;
+
+    // UI Elements
+    private uiElements!: UIElements;
+    private modalManager: ModalManager = {
+        detailModal: null,
+        keyBindingsModal: null,
+        disconnectModal: null,
+        inDetailView: false,
+        keyBindingView: false,
+        inDisconnectView: false,
+    };
+    private tunnelInstance?: ManagedTunnel
+
+    private exitPromiseResolve: (() => void) | null = null;
+    private exitPromise: Promise<void>;
+
+    constructor(props: TunnelAppProps) {
+        this.urls = props.urls;
+        this.greet = props.greet || "";
+        this.tunnelConfig = props.tunnelConfig;
+        this.disconnectInfo = props.disconnectInfo;
+        if(props.tunnelInstance){
+            this.tunnelInstance=props.tunnelInstance
+        }
+
+        this.exitPromise = new Promise((resolve) => {
+            this.exitPromiseResolve = resolve;
+        });
+
+        this.screen = blessed.screen({
+            smartCSR: true,
+            title: "Pinggy Tunnel",
+            fullUnicode: true,
+        });
+
+        this.setupStatsListener();
+        this.setupWebDebugger();
+        this.generateQrCodes();
+        this.createUI();
+        this.setupKeyBindings();
+    }
+
+    private setupStatsListener() {
+        globalThis.__PINGGY_TUNNEL_STATS__ = (newStats: TunnelUsageType) => {
+            this.stats = { ...newStats };
+            this.updateStatsDisplay();
+        };
+    }
+
+    private setupWebDebugger() {
+        if (this.tunnelConfig?.webDebugger) {
+            this.webDebuggerConnection = createWebDebuggerConnection(
+                this.tunnelConfig.webDebugger,
+                (pairs) => {
+                    this.pairs = pairs;
+                    this.updateRequestsDisplay();
+                }
+            );
+        }
+    }
+
+    private async generateQrCodes() {
+        if (this.tunnelConfig?.qrCode && this.urls.length > 0) {
+            this.qrCodes = await createQrCodes(this.urls);
+            this.updateQrCodeDisplay();
+        }
+    }
+
+    // Create the UI based on terminal size
+    private createUI() {
+        this.buildUI();
+        
+        this.screen.on("resize", () => {
+            this.handleResize();
+        });
+    }
+
+    private buildUI() {
+        const width = this.screen.width as number;
+
+        if (width < MIN_WIDTH_WARNING) {
+            this.uiElements = {
+                mainContainer: createWarningUI(this.screen),
+                urlsBox: null as any,
+                statsBox: null as any,
+                requestsBox: null as any,
+                footerBox: null as any,
+                warningBox: createWarningUI(this.screen),
+            };
+            this.screen.render();
+            return;
+        }
+
+        if (width < SIMPLE_LAYOUT_THRESHOLD) {
+            this.uiElements = createSimpleUI(this.screen, this.urls, this.greet);
+        } else {
+            this.uiElements = createFullUI(this.screen, this.urls, this.greet, this.tunnelConfig);
+        }
+
+        this.refreshDisplays();
+        this.screen.render();
+    }
+
+    private refreshDisplays() {
+        this.updateUrlsDisplay();
+        this.updateStatsDisplay();
+        this.updateRequestsDisplay();
+        this.updateQrCodeDisplay();
+    }
+
+    private updateUrlsDisplay() {
+        updateUrlsDisplay(
+            this.uiElements?.urlsBox,
+            this.screen,
+            this.urls,
+            this.currentQrIndex
+        );
+    }
+
+    private updateStatsDisplay() {
+        updateStatsDisplay(
+            this.uiElements?.statsBox,
+            this.screen,
+            this.stats
+        );
+    }
+
+    private updateRequestsDisplay() {
+        updateRequestsDisplay(
+            this.uiElements?.requestsBox,
+            this.screen,
+            this.pairs,
+            this.selectedIndex
+        );
+    }
+
+    private updateQrCodeDisplay() {
+        updateQrCodeDisplay(
+            this.uiElements?.qrCodeBox,
+            this.screen,
+            this.qrCodes,
+            this.urls,
+            this.currentQrIndex
+        );
+    }
+
+    private setupKeyBindings() {
+        const self = this;
+
+        // Create a state object with getters to always get current values
+        const state: KeyBindingsState = {
+            get currentQrIndex() { return self.currentQrIndex; },
+            set currentQrIndex(value: number) { self.currentQrIndex = value; },
+            get selectedIndex() { return self.selectedIndex; },
+            set selectedIndex(value: number) { self.selectedIndex = value; },
+            get pairs() { return self.pairs; },
+            get urls() { return self.urls; },
+        };
+
+        const callbacks: KeyBindingsCallbacks = {
+            onQrIndexChange: (index: number) => {
+                self.currentQrIndex = index;
+            },
+            onSelectedIndexChange: (index: number) => {
+                self.selectedIndex = index;
+            },
+            onDestroy: () => self.destroy(),
+            updateUrlsDisplay: () => self.updateUrlsDisplay(),
+            updateQrCodeDisplay: () => self.updateQrCodeDisplay(),
+            updateRequestsDisplay: () => self.updateRequestsDisplay(),
+        };
+
+        setupKeyBindings(
+            this.screen,
+            this.modalManager,
+            state,
+            callbacks,
+            this.tunnelConfig,
+            this.tunnelInstance
+        );
+    }
+
+    private handleResize() {
+        // Destroy current UI and recreate based on new size
+        this.screen.children.forEach((child) => child.destroy());
+        this.buildUI();
+    }
+
+    public updateDisconnectInfo(info: TunnelAppProps["disconnectInfo"]) {
+        this.disconnectInfo = info;
+        if (info?.disconnected) {
+            const message = info.error 
+                ? `Error: ${info.error}\nTunnel will be closed.`
+                : info.messages?.join('\n') || 'Disconnect request received. Tunnel will be closed.';
+            
+            showDisconnectModal(
+                this.screen,
+                this.modalManager,
+                message,
+                () => this.destroy()
+            );
+        }
+    }
+
+    public start() {
+        this.screen.render();
+    }
+
+    public waitUntilExit(): Promise<void> {
+        return this.exitPromise;
+    }
+
+    public destroy() {
+        // Stop the tunnel first
+        if (this.tunnelInstance?.tunnelid) {
+            const manager = TunnelManager.getInstance();
+            manager.stopTunnel(this.tunnelInstance.tunnelid);
+        }
+
+        // Cleanup
+        delete globalThis.__PINGGY_TUNNEL_STATS__;
+
+        if (this.webDebuggerConnection) {
+            this.webDebuggerConnection.close();
+        }
+
+        this.screen.destroy();
+
+        if (this.exitPromiseResolve) {
+            this.exitPromiseResolve();
+        }
+    }
+}
+
+export default TunnelTui;

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

@@ -0,0 +1,118 @@
+import blessed from "blessed";
+import { TunnelUsageType } from "@pinggy/pinggy";
+import { ReqResPair } from "../../../types.js";
+import { getBytesInt, getStatusColor } from "../../ink/utils/utils.js";
+
+/**
+ * Updates the URLs display box
+ */
+export function updateUrlsDisplay(
+    urlsBox: blessed.Widgets.BoxElement | undefined,
+    screen: blessed.Widgets.Screen,
+    urls: string[],
+    currentQrIndex: number
+): void {
+    if (!urlsBox) return;
+
+    let content = "{green-fg}{bold}Public URLs{/bold}{/green-fg}\n";
+    urls.forEach((url, index) => {
+        const isSelected = index === currentQrIndex;
+        const prefix = isSelected ? "→ " : "• ";
+        const color = isSelected ? "yellow" : "magenta";
+
+        if (isSelected) {
+            content += `{bold}{${color}-fg}${prefix}${url}{/${color}-fg}{/bold}\n`;
+        } else {
+            content += `{${color}-fg}${prefix}${url}{/${color}-fg}\n`;
+        }
+    });
+
+    urlsBox.setContent(content);
+    screen.render();
+}
+
+/**
+ * Updates the stats display box
+ */
+export function updateStatsDisplay(
+    statsBox: blessed.Widgets.BoxElement | undefined,
+    screen: blessed.Widgets.Screen,
+    stats: TunnelUsageType
+): void {
+    if (!statsBox) return;
+
+    const content = `{green-fg}{bold}Live Stats{/bold}{/green-fg}
+Elapsed: ${stats.elapsedTime}s
+Live Connections: ${stats.numLiveConnections}
+Total Connections: ${stats.numTotalConnections}
+Request: ${getBytesInt(stats.numTotalReqBytes)}
+Response: ${getBytesInt(stats.numTotalResBytes)}
+Total Transfer: ${getBytesInt(stats.numTotalTxBytes)}`;
+
+    statsBox.setContent(content);
+    statsBox.style = { ...statsBox.style };
+    (statsBox as any).parseContent();
+    screen.render();
+}
+
+/**
+ * Updates the requests display box
+ */
+export function updateRequestsDisplay(
+    requestsBox: blessed.Widgets.BoxElement | undefined,
+    screen: blessed.Widgets.Screen,
+    pairs: Map<number, ReqResPair>,
+    selectedIndex: number
+): void {
+    if (!requestsBox) return;
+
+    const allPairs = [...pairs.values()];
+    const visiblePairs = allPairs.slice(-10);
+    const startIndex = allPairs.length - visiblePairs.length;
+
+    let content = "{yellow-fg}HTTP Requests:{/yellow-fg}\n";
+
+    visiblePairs.forEach((pair, i) => {
+        const globalIndex = startIndex + i;
+        const isSelected = selectedIndex === globalIndex;
+        const prefix = isSelected ? "> " : "  ";
+        const method = pair.request?.method || "";
+        const uri = pair.request?.uri || "";
+        const status = pair.response?.status || "";
+        const statusColor = getStatusColor(String(status));
+
+        if (isSelected) {
+            content += `{cyan-fg}${prefix}${method} ${status} ${uri}{/cyan-fg}\n`;
+        } else if (pair.response) {
+            content += `{${statusColor}-fg}${prefix}${method} ${status} ${uri}{/${statusColor}-fg}\n`;
+        } else {
+            content += `${prefix}${method} ...${uri}\n`;
+        }
+    });
+
+    requestsBox.setContent(content);
+    screen.render();
+}
+
+/**
+ * Updates the QR code display box
+ */
+export function updateQrCodeDisplay(
+    qrCodeBox: blessed.Widgets.BoxElement | undefined,
+    screen: blessed.Widgets.Screen,
+    qrCodes: string[],
+    urls: string[],
+    currentQrIndex: number
+): void {
+    if (!qrCodeBox || qrCodes.length === 0) return;
+
+    let content = `{green-fg}{bold}QR Code ${currentQrIndex + 1}/${urls.length}{/bold}{/green-fg}\n`;
+    if (urls.length > 1) {
+        content += "\n{yellow-fg}← → to switch QR codes{/yellow-fg}\n";
+    }
+    content += qrCodes[currentQrIndex] || "";
+    qrCodeBox.setContent(content);
+    qrCodeBox.style = { ...qrCodeBox.style };
+    (qrCodeBox as any).parseContent();
+    screen.render();
+}

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

@@ -0,0 +1,134 @@
+import blessed from "blessed";
+import { ReqResPair, FinalConfig } from "../../../types.js";
+import { ManagedTunnel, TunnelManager } from "../../../tunnel_manager/TunnelManager.js";
+import { fetchReqResHeaders } from "../headerFetcher.js";
+import { logger } from "../../../logger.js";
+import { ModalManager, showDetailModal, closeDetailModal, showKeyBindingsModal, closeKeyBindingsModal } from "./Modals.js";
+
+export interface KeyBindingsState {
+    currentQrIndex: number;
+    selectedIndex: number;
+    pairs: Map<number, ReqResPair>;
+    urls: string[];
+}
+
+export interface KeyBindingsCallbacks {
+    onQrIndexChange: (index: number) => void;
+    onSelectedIndexChange: (index: number) => void;
+    onDestroy: () => void;
+    updateUrlsDisplay: () => void;
+    updateQrCodeDisplay: () => void;
+    updateRequestsDisplay: () => void;
+}
+
+/**
+ * Sets up all key bindings for the TUI
+ */
+export function setupKeyBindings(
+    screen: blessed.Widgets.Screen,
+    modalManager: ModalManager,
+    state: KeyBindingsState,
+    callbacks: KeyBindingsCallbacks,
+    tunnelConfig?: FinalConfig,
+    tunnelInstance?: ManagedTunnel
+): void {
+    // Exit on Ctrl+C
+    screen.key(["C-c"], () => {
+        const manager = TunnelManager.getInstance();
+        manager.stopTunnel(tunnelInstance?.tunnelid || "");
+        callbacks.onDestroy();
+        process.exit(0);
+    });
+
+    // Escape key
+    screen.key(["escape"], () => {
+        if (modalManager.inDetailView) {
+            closeDetailModal(screen, modalManager);
+            return;
+        }
+        if (modalManager.keyBindingView) {
+            closeKeyBindingsModal(screen, modalManager);
+            return;
+        }
+    });
+
+    // Navigation - Up
+    screen.key(["up"], () => {
+        if (modalManager.inDetailView || modalManager.keyBindingView) return;
+        if (state.selectedIndex > 0) {
+            callbacks.onSelectedIndexChange(state.selectedIndex - 1);
+            callbacks.updateRequestsDisplay();
+        }
+    });
+
+    // Navigation - Down
+    screen.key(["down"], () => {
+        if (modalManager.inDetailView || modalManager.keyBindingView) return;
+        const allPairs = [...state.pairs.values()];
+        if (state.selectedIndex < allPairs.length - 1) {
+            callbacks.onSelectedIndexChange(state.selectedIndex + 1);
+            callbacks.updateRequestsDisplay();
+        }
+    });
+
+    // Enter to view details
+    screen.key(["enter"], async () => {
+        if (modalManager.inDetailView || modalManager.keyBindingView) return;
+        const allPairs = [...state.pairs.values()];
+        const pair = allPairs[state.selectedIndex];
+        if (pair?.request?.key !== undefined && pair?.request?.key !== null) {
+            try {
+                const headers = await fetchReqResHeaders(
+                    tunnelConfig?.webDebugger || "",
+                    pair.request.key
+                );
+                showDetailModal(screen, modalManager, headers.req, headers.res);
+            } catch (err) {
+                logger.error("Fetch error:", err);
+            }
+        }
+    });
+
+    // Help toggle
+    screen.key(["h"], () => {
+        if (modalManager.inDetailView) return;
+        if (modalManager.keyBindingView) {
+            closeKeyBindingsModal(screen, modalManager);
+        } else {
+            showKeyBindingsModal(screen, modalManager);
+        }
+    });
+
+    // Copy URL
+    screen.key(["c"], async () => {
+        if (modalManager.inDetailView || modalManager.keyBindingView) return;
+        if (state.urls.length > 0) {
+            try {
+                const clipboardy = await import("clipboardy");
+                clipboardy.default.writeSync(state.urls[state.currentQrIndex]);
+            } catch (err) {
+                logger.error("Failed to copy to clipboard:", err);
+            }
+        }
+    });
+
+    // QR code navigation - Left
+    screen.key(["left"], () => {
+        if (modalManager.inDetailView || modalManager.keyBindingView) return;
+        if (state.currentQrIndex > 0) {
+            callbacks.onQrIndexChange(state.currentQrIndex - 1);
+            callbacks.updateUrlsDisplay();
+            callbacks.updateQrCodeDisplay();
+        }
+    });
+
+    // QR code navigation - Right
+    screen.key(["right"], () => {
+        if (modalManager.inDetailView || modalManager.keyBindingView) return;
+        if (state.currentQrIndex < state.urls.length - 1) {
+            callbacks.onQrIndexChange(state.currentQrIndex + 1);
+            callbacks.updateUrlsDisplay();
+            callbacks.updateQrCodeDisplay();
+        }
+    });
+}