pinggy 0.4.9 → 0.5.0

package/dist/TunnelTui-QZEWWH2H.js

@@ -0,0 +1,1338 @@
+import {
+  TunnelManager
+} from "./chunk-DLNUDW6G.js";
+import "./chunk-UB26QJ4T.js";
+import {
+  logger
+} from "./chunk-7G6SJEEA.js";
+import "./chunk-GBYF2H4H.js";
+
+// src/tui/blessed/TunnelTui.ts
+import blessed3 from "blessed";
+
+// src/tui/blessed/qrCodeGenerator.ts
+import QRCode from "qrcode";
+async function createQrCodes(urls) {
+  const codes = [];
+  for (const url of urls) {
+    const raw = await QRCode.toString(url, {
+      type: "utf8",
+      margin: 2,
+      errorCorrectionLevel: "L"
+    });
+    codes.push(raw);
+  }
+  return codes;
+}
+
+// src/tui/blessed/webDebuggerConnection.ts
+import WebSocket from "ws";
+
+// src/tui/blessed/config.ts
+var defaultTuiConfig = {
+  maxRequestPairs: 100,
+  visibleRequestCount: 10,
+  visibleUrlCount: 7,
+  viewportScrollMargin: 2,
+  inactivityHttpSelectorTimeoutMs: 1e4
+};
+function getTuiConfig() {
+  return {
+    maxRequestPairs: defaultTuiConfig.maxRequestPairs,
+    visibleRequestCount: defaultTuiConfig.visibleRequestCount,
+    visibleUrlCount: defaultTuiConfig.visibleUrlCount,
+    viewportScrollMargin: defaultTuiConfig.viewportScrollMargin,
+    inactivityHttpSelectorTimeoutMs: defaultTuiConfig.inactivityHttpSelectorTimeoutMs
+  };
+}
+
+// src/tui/blessed/webDebuggerConnection.ts
+function createWebDebuggerConnection(webDebuggerUrl, onUpdate) {
+  const pairs = /* @__PURE__ */ new Map();
+  const pairKeys = [];
+  let socket = null;
+  let reconnectTimeout = null;
+  let isStopped = false;
+  const config = getTuiConfig();
+  const maxPairs = config.maxRequestPairs;
+  const trimPairs = () => {
+    while (pairKeys.length > maxPairs) {
+      const oldestKey = pairKeys.shift();
+      if (oldestKey !== void 0) {
+        pairs.delete(oldestKey);
+      }
+    }
+  };
+  const upsertPair = (key, pair) => {
+    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
+        };
+        if (msg.Req) {
+          const { key } = msg.Req;
+          const existing = pairs.get(key);
+          const merged = {
+            request: msg.Req,
+            response: existing?.response
+          };
+          upsertPair(key, merged);
+        }
+        if (msg.Res) {
+          const { key } = msg.Res;
+          const existing = pairs.get(key);
+          const merged = {
+            request: existing?.request ?? {},
+            response: msg.Res
+          };
+          upsertPair(key, merged);
+        }
+        const reversedPairs = [];
+        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) {
+        logger.error("Error parsing WebSocket message:", err instanceof Error ? err.message : err);
+      }
+    });
+    ws.on("close", () => {
+      logger.warn("Web debugger disconnected. Reconnecting in 5s...");
+      if (!isStopped) {
+        reconnectTimeout = setTimeout(connect, 5e3);
+      }
+    });
+    ws.on("error", (err) => {
+      logger.error(`WebSocket error: ${err.message}`);
+    });
+  };
+  connect();
+  return {
+    close: () => {
+      isStopped = true;
+      if (socket) {
+        socket.close();
+      }
+      if (reconnectTimeout) {
+        clearTimeout(reconnectTimeout);
+      }
+    }
+  };
+}
+
+// src/tui/blessed/components/UIComponents.ts
+import blessed from "blessed";
+
+// src/tui/ink/asciArt.ts
+var asciiArtPinggyLogo = `
+\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2557\u2588\u2588\u2588\u2557   \u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557   \u2588\u2588\u2557
+\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D \u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u255A\u2588\u2588\u2557 \u2588\u2588\u2554\u255D
+\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551\u2588\u2588\u2554\u2588\u2588\u2557 \u2588\u2588\u2551\u2588\u2588\u2551  \u2588\u2588\u2588\u2557\u2588\u2588\u2551  \u2588\u2588\u2588\u2557\u255A\u2588\u2588\u2588\u2588\u2554\u255D 
+\u2588\u2588\u2554\u2550\u2550\u2550\u255D \u2588\u2588\u2551\u2588\u2588\u2551\u255A\u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551   \u2588\u2588\u2551 \u255A\u2588\u2588\u2554\u255D  
+\u2588\u2588\u2551     \u2588\u2588\u2551\u2588\u2588\u2551 \u255A\u2588\u2588\u2588\u2588\u2551\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D  \u2588\u2588\u2551   
+\u255A\u2550\u255D     \u255A\u2550\u255D\u255A\u2550\u255D  \u255A\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D  \u255A\u2550\u2550\u2550\u2550\u2550\u255D   \u255A\u2550\u255D   `;
+
+// src/tui/blessed/components/UIComponents.ts
+var MIN_WIDTH_WARNING = 60;
+var SIMPLE_LAYOUT_THRESHOLD = 80;
+function colorizeGradient(text) {
+  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");
+}
+function createWarningUI(screen) {
+  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}
+{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"
+    }
+  });
+}
+function createFullUI(screen, urls, greet, tunnelConfig) {
+  const mainContainer = blessed.box({
+    parent: screen,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    padding: 1
+  });
+  const logoBox = blessed.box({
+    parent: mainContainer,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: 7,
+    content: colorizeGradient(asciiArtPinggyLogo),
+    tags: true
+  });
+  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"
+      }
+    }
+  });
+  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;
+  }
+  const upperSectionTop = greetHeight > 0 ? greetHeight : 0;
+  const upperSection = blessed.box({
+    parent: contentBox,
+    top: upperSectionTop,
+    left: 0,
+    width: "100%-2",
+    height: 10
+  });
+  const urlsBox = blessed.box({
+    parent: upperSection,
+    top: 0,
+    left: 0,
+    width: "48%",
+    height: "100%",
+    padding: { left: 1, right: 1 },
+    tags: true
+  });
+  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"
+  });
+  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?.isQRCode || false;
+  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
+  });
+  let qrCodeBox;
+  if (isQrCodeRequested) {
+    qrCodeBox = blessed.box({
+      parent: lowerSection,
+      top: 0,
+      right: 0,
+      width: "40%",
+      height: "100%",
+      tags: true,
+      padding: { left: 1, right: 1 }
+    });
+  }
+  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
+  };
+}
+function createSimpleUI(screen, urls, greet) {
+  const mainContainer = blessed.box({
+    parent: screen,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    padding: { left: 1, right: 1 }
+  });
+  let currentTop = 0;
+  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 * 0.9));
+    currentTop += Math.max(lines, 1) + 1;
+  }
+  const urlsBox = blessed.box({
+    parent: mainContainer,
+    top: currentTop,
+    left: 0,
+    width: "100%",
+    height: urls.length + 2,
+    tags: true
+  });
+  currentTop += urls.length + 3;
+  const statsBox = blessed.box({
+    parent: mainContainer,
+    top: currentTop,
+    left: 0,
+    width: "100%",
+    height: 8,
+    tags: true
+  });
+  currentTop += 9;
+  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
+  };
+}
+
+// src/tui/ink/utils/utils.ts
+function getStatusColor(status) {
+  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";
+  }
+}
+function getBytesInt(b) {
+  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)}  `;
+}
+
+// src/tui/blessed/components/DisplayUpdaters.ts
+function updateUrlsDisplay(urlsBox, screen, urls, currentQrIndex) {
+  if (!urlsBox) return;
+  const config = getTuiConfig();
+  const { visibleUrlCount } = config;
+  let viewportStart = 0;
+  if (urls.length > visibleUrlCount) {
+    viewportStart = Math.max(0, Math.min(
+      currentQrIndex - Math.floor(visibleUrlCount / 2),
+      urls.length - visibleUrlCount
+    ));
+  }
+  const viewportEnd = Math.min(viewportStart + visibleUrlCount, urls.length);
+  const visibleUrls = urls.slice(viewportStart, viewportEnd);
+  let content = "{green-fg}{bold}Public URLs{/bold}{/green-fg}";
+  if (viewportStart > 0) {
+    content += ` {gray-fg}\u2191 ${viewportStart} more{/gray-fg}`;
+  }
+  content += "\n";
+  visibleUrls.forEach((url, i) => {
+    const index = viewportStart + i;
+    const isSelected = index === currentQrIndex;
+    const prefix = isSelected ? "\u2192 " : "\u2022 ";
+    const color = isSelected ? "yellow" : "magenta";
+    if (isSelected) {
+      content += `{bold}{${color}-fg}${prefix}${url}{/${color}-fg}{/bold}
+`;
+    } else {
+      content += `{${color}-fg}${prefix}${url}{/${color}-fg}
+`;
+    }
+  });
+  const itemsBelow = urls.length - viewportEnd;
+  if (itemsBelow > 0) {
+    content += `{gray-fg}\u2193 ${itemsBelow} more{/gray-fg}
+`;
+  }
+  urlsBox.setContent(content);
+  screen.render();
+}
+function updateStatsDisplay(statsBox, screen, stats) {
+  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.parseContent();
+  screen.render();
+}
+function updateRequestsDisplay(requestsBox, screen, pairs, selectedIndex) {
+  const config = getTuiConfig();
+  const { maxRequestPairs, visibleRequestCount, viewportScrollMargin } = config;
+  if (!requestsBox) {
+    return { adjustedSelectedIndex: selectedIndex, trimmedPairs: pairs };
+  }
+  let allPairs = pairs;
+  let trimmedPairs = pairs;
+  if (allPairs.length > maxRequestPairs) {
+    allPairs = allPairs.slice(0, maxRequestPairs);
+    trimmedPairs = allPairs;
+  }
+  const totalPairs = allPairs.length;
+  let adjustedSelectedIndex = selectedIndex;
+  if (adjustedSelectedIndex >= totalPairs) {
+    adjustedSelectedIndex = -1;
+  }
+  let viewportStart;
+  if (totalPairs <= visibleRequestCount) {
+    viewportStart = 0;
+  } else if (adjustedSelectedIndex === -1) {
+    viewportStart = 0;
+  } else {
+    viewportStart = 0;
+    if (adjustedSelectedIndex >= visibleRequestCount - viewportScrollMargin) {
+      viewportStart = Math.min(
+        totalPairs - visibleRequestCount,
+        adjustedSelectedIndex - viewportScrollMargin
+      );
+    }
+    if (adjustedSelectedIndex < viewportStart + viewportScrollMargin) {
+      viewportStart = Math.max(0, adjustedSelectedIndex - viewportScrollMargin);
+    }
+  }
+  const viewportEnd = Math.min(viewportStart + visibleRequestCount, totalPairs);
+  const visiblePairs = allPairs.slice(viewportStart, viewportEnd);
+  let content = "{yellow-fg}HTTP Requests:{/yellow-fg}";
+  if (viewportStart > 0) {
+    content += ` {gray-fg}\u2191 ${viewportStart} more{/gray-fg}`;
+  }
+  content += "\n";
+  visiblePairs.forEach((pair, i) => {
+    const globalIndex = viewportStart + i;
+    const isSelected = adjustedSelectedIndex !== -1 && adjustedSelectedIndex === 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}
+`;
+    } else if (pair.response) {
+      content += `{${statusColor}-fg}${prefix}${method} ${status} ${uri}{/${statusColor}-fg}
+`;
+    } else {
+      content += `${prefix}${method} ...${uri}
+`;
+    }
+  });
+  const itemsBelow = totalPairs - viewportEnd;
+  if (itemsBelow > 0) {
+    content += `{gray-fg}  \u2193 ${itemsBelow} more{/gray-fg}
+`;
+  }
+  requestsBox.setContent(content);
+  screen.render();
+  return { adjustedSelectedIndex, trimmedPairs };
+}
+function updateQrCodeDisplay(qrCodeBox, screen, qrCodes, urls, currentQrIndex) {
+  if (!qrCodeBox || qrCodes.length === 0) return;
+  let content = `{green-fg}{bold}QR Code ${currentQrIndex + 1}/${urls.length}{/bold}{/green-fg}
+`;
+  if (urls.length > 1) {
+    content += "\n{yellow-fg}\u2190 \u2192 to switch QR codes{/yellow-fg}\n";
+  }
+  content += qrCodes[currentQrIndex] || "";
+  qrCodeBox.setContent(content);
+  qrCodeBox.style = { ...qrCodeBox.style };
+  qrCodeBox.parseContent();
+  screen.render();
+}
+
+// src/tui/blessed/components/Modals.ts
+import blessed2 from "blessed";
+function showDetailModal(screen, manager, requestText, responseText) {
+  manager.inDetailView = true;
+  manager.detailModal = blessed2.box({
+    parent: screen,
+    top: "center",
+    left: "center",
+    width: "90%",
+    height: "90%",
+    border: {
+      type: "line"
+    },
+    style: {
+      border: {
+        fg: "green"
+      }
+    },
+    padding: { left: 2, right: 2, top: 1, bottom: 1 },
+    tags: true,
+    scrollable: true,
+    keys: true,
+    vi: true,
+    alwaysScroll: true,
+    scrollbar: {
+      ch: " ",
+      track: {
+        bg: "cyan"
+      },
+      style: {
+        inverse: true
+      }
+    }
+  });
+  const content = `{cyan-fg}{bold}Request{/bold}{/cyan-fg}
+${requestText || "(no request data)"}
+
+{magenta-fg}{bold}Response{/bold}{/magenta-fg}
+${responseText || "(no response data)"}
+
+{white-bg}{black-fg}Press ESC to close{/black-fg}{/white-bg}`;
+  manager.detailModal.setContent(content);
+  manager.detailModal.focus();
+  screen.render();
+}
+function closeDetailModal(screen, manager) {
+  if (manager.detailModal) {
+    manager.detailModal.destroy();
+    manager.detailModal = null;
+  }
+  manager.inDetailView = false;
+  screen.render();
+}
+function showKeyBindingsModal(screen, manager) {
+  manager.keyBindingView = true;
+  manager.keyBindingsModal = blessed2.box({
+    parent: screen,
+    top: "center",
+    left: "center",
+    width: "60%",
+    height: "80%",
+    border: {
+      type: "line"
+    },
+    style: {
+      border: {
+        fg: "green"
+      }
+    },
+    padding: { left: 2, right: 2, top: 1, bottom: 1 },
+    tags: true
+  });
+  const content = `{cyan-fg}{bold}Key Bindings{/bold}{/cyan-fg}
+
+{bold}h{/bold}         This page
+{bold}c{/bold}         Copy the selected URL to clipboard
+{bold}Ctrl+c{/bold}    Exit
+
+Enter/Return    Open selected request
+Esc             Return to main page (or close modals)
+UP (\u2191)          Scroll up the requests
+Down (\u2193)        Scroll down the requests
+Left (\u2190)        Show qr code for previous url
+Right (\u2192)       Show qr code for next url
+Home           Jump to top of requests
+End            Jump to bottom of requests
+Ctrl+c          Force Exit
+
+{white-bg}{black-fg}Press ESC to close{/black-fg}{/white-bg}`;
+  manager.keyBindingsModal.setContent(content);
+  manager.keyBindingsModal.focus();
+  screen.render();
+}
+function closeKeyBindingsModal(screen, manager) {
+  if (manager.keyBindingsModal) {
+    manager.keyBindingsModal.destroy();
+    manager.keyBindingsModal = null;
+  }
+  manager.keyBindingView = false;
+  screen.render();
+}
+function showDisconnectModal(screen, manager, message, onClose) {
+  manager.inDisconnectView = true;
+  manager.disconnectModal = blessed2.box({
+    parent: screen,
+    top: "center",
+    left: "center",
+    width: "50%",
+    height: "20%",
+    border: {
+      type: "line"
+    },
+    style: {
+      border: {
+        fg: "red"
+      }
+    },
+    padding: { left: 2, right: 2, top: 1, bottom: 1 },
+    tags: true,
+    align: "center",
+    valign: "middle"
+  });
+  const content = `{red-fg}{bold}Tunnel Disconnected{/bold}{/red-fg}
+
+${message || "Disconnect request received. Tunnel will be closed."}
+
+{white-bg}{black-fg}Closing in 3 seconds... {/black-fg}{/white-bg}`;
+  manager.disconnectModal.setContent(content);
+  manager.disconnectModal.focus();
+  screen.render();
+  const timeout = setTimeout(() => {
+    closeDisconnectModal(screen, manager);
+    if (onClose) onClose();
+  }, 5e3);
+  const keyHandler = () => {
+    clearTimeout(timeout);
+    closeDisconnectModal(screen, manager);
+    if (onClose) onClose();
+  };
+  manager.disconnectModal.key(["escape", "enter", "space"], keyHandler);
+  screen.key(["escape", "enter", "space"], keyHandler);
+}
+function closeDisconnectModal(screen, manager) {
+  if (manager.disconnectModal) {
+    manager.disconnectModal.destroy();
+    manager.disconnectModal = null;
+  }
+  manager.inDisconnectView = false;
+  screen.render();
+}
+function showReconnectingModal(screen, manager, retryCnt, message) {
+  if (manager.reconnectModal) {
+    manager.reconnectModal.destroy();
+    manager.reconnectModal = null;
+  }
+  manager.inReconnectView = true;
+  manager.reconnectModal = blessed2.box({
+    parent: screen,
+    top: "center",
+    left: "center",
+    width: "50%",
+    height: "20%",
+    border: {
+      type: "line"
+    },
+    style: {
+      border: {
+        fg: "yellow"
+      }
+    },
+    padding: { left: 2, right: 2, top: 1, bottom: 1 },
+    tags: true,
+    align: "center",
+    valign: "middle"
+  });
+  const content = `{yellow-fg}{bold}Reconnecting...{/bold}{/yellow-fg}
+
+${message || `Attempt #${retryCnt} \u2014 trying to re-establish tunnel...`}
+
+{gray-fg}Please wait{/gray-fg}`;
+  manager.reconnectModal.setContent(content);
+  manager.reconnectModal.focus();
+  screen.render();
+}
+function closeReconnectingModal(screen, manager) {
+  if (manager.reconnectModal) {
+    manager.reconnectModal.destroy();
+    manager.reconnectModal = null;
+  }
+  manager.inReconnectView = false;
+  screen.render();
+}
+function showReconnectionFailedModal(screen, manager, retryCnt, onClose) {
+  closeReconnectingModal(screen, manager);
+  manager.inReconnectView = true;
+  manager.reconnectModal = blessed2.box({
+    parent: screen,
+    top: "center",
+    left: "center",
+    width: "50%",
+    height: "20%",
+    border: {
+      type: "line"
+    },
+    style: {
+      border: {
+        fg: "red"
+      }
+    },
+    padding: { left: 2, right: 2, top: 1, bottom: 1 },
+    tags: true,
+    align: "center",
+    valign: "middle"
+  });
+  const content = `{red-fg}{bold}Reconnection Failed{/bold}{/red-fg}
+
+Failed to reconnect after ${retryCnt} attempts.
+Tunnel will be closed.
+
+{white-bg}{black-fg}Closing in 5 seconds...{/black-fg}{/white-bg}`;
+  manager.reconnectModal.setContent(content);
+  manager.reconnectModal.focus();
+  screen.render();
+  const timeout = setTimeout(() => {
+    closeReconnectingModal(screen, manager);
+    if (onClose) onClose();
+  }, 5e3);
+  const keyHandler = () => {
+    clearTimeout(timeout);
+    closeReconnectingModal(screen, manager);
+    if (onClose) onClose();
+  };
+  manager.reconnectModal.key(["escape", "enter", "space"], keyHandler);
+  screen.key(["escape", "enter", "space"], keyHandler);
+}
+function showLoadingModal(screen, modalManager, message = "Loading...") {
+  if (modalManager.loadingView) return;
+  modalManager.loadingBox = blessed2.box({
+    parent: screen,
+    top: "center",
+    left: "center",
+    width: "60%",
+    height: 8,
+    border: { type: "line" },
+    style: {
+      border: { fg: "yellow" }
+    },
+    tags: true,
+    content: `{center}{yellow-fg}{bold}${message}{/bold}{/yellow-fg}
+
+{gray-fg}Press ESC to cancel{/gray-fg}{/center}`,
+    valign: "middle"
+  });
+  modalManager.loadingView = true;
+  screen.render();
+}
+function closeLoadingModal(screen, modalManager) {
+  if (!modalManager.loadingView || !modalManager.loadingBox) return;
+  modalManager.loadingBox.destroy();
+  modalManager.loadingBox = null;
+  modalManager.loadingView = false;
+  screen.render();
+}
+function showErrorModal(screen, modalManager, title = "Error", message) {
+  if (modalManager.loadingBox) {
+    modalManager.loadingBox.destroy();
+    modalManager.loadingBox = null;
+  }
+  modalManager.loadingBox = blessed2.box({
+    parent: screen,
+    top: "center",
+    left: "center",
+    width: "60%",
+    height: 9,
+    border: { type: "line" },
+    style: {
+      border: { fg: "red" }
+    },
+    tags: true,
+    content: `{center}{red-fg}{bold}${title}{/bold}{/red-fg}
+
+{white-fg}${message}{/white-fg}
+
+{gray-fg}Press ESC to close{/gray-fg}{/center}`,
+    valign: "middle"
+  });
+  modalManager.loadingView = true;
+  screen.render();
+}
+
+// src/tui/blessed/headerFetcher.ts
+async function fetchReqResHeaders(baseUrl, key, signal) {
+  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) {
+    if (err instanceof Error && err.name === "AbortError") {
+      throw err;
+    }
+    logger.error("Error fetching headers:", err instanceof Error ? err.message : err);
+    throw err;
+  }
+}
+
+// src/tui/blessed/components/KeyBindings.ts
+function setupKeyBindings(screen, modalManager, state, callbacks, tunnelConfig) {
+  let inactivityTimeout = null;
+  const { inactivityHttpSelectorTimeoutMs } = getTuiConfig();
+  const INACTIVITY_TIMEOUT_MS = inactivityHttpSelectorTimeoutMs;
+  const resetInactivityTimer = () => {
+    if (inactivityTimeout) {
+      clearTimeout(inactivityTimeout);
+    }
+    if (state.selectedIndex !== -1) {
+      inactivityTimeout = setTimeout(() => {
+        callbacks.onSelectedIndexChange(-1, null);
+        callbacks.updateRequestsDisplay();
+      }, INACTIVITY_TIMEOUT_MS);
+    }
+  };
+  screen.key(["C-c"], async () => {
+    await callbacks.onDestroy();
+    process.exit(0);
+  });
+  screen.key(["escape"], () => {
+    if (modalManager.loadingView) {
+      if (modalManager.fetchAbortController) {
+        modalManager.fetchAbortController.abort();
+        modalManager.fetchAbortController = null;
+      }
+      closeLoadingModal(screen, modalManager);
+      return;
+    }
+    if (modalManager.inDetailView) {
+      closeDetailModal(screen, modalManager);
+      return;
+    }
+    if (modalManager.keyBindingView) {
+      closeKeyBindingsModal(screen, modalManager);
+      return;
+    }
+    if (state.selectedIndex !== -1) {
+      if (inactivityTimeout) {
+        clearTimeout(inactivityTimeout);
+        inactivityTimeout = null;
+      }
+      callbacks.onSelectedIndexChange(-1, null);
+      callbacks.updateRequestsDisplay();
+    }
+  });
+  screen.key(["up"], () => {
+    if (modalManager.inDetailView || modalManager.keyBindingView || modalManager.loadingView) return;
+    resetInactivityTimer();
+    if (state.selectedIndex === -1) {
+      const requestKey = state.pairs[0]?.request?.key ?? null;
+      callbacks.onSelectedIndexChange(0, requestKey);
+      callbacks.updateRequestsDisplay();
+      resetInactivityTimer();
+    } else if (state.selectedIndex > 0) {
+      const newIndex = state.selectedIndex - 1;
+      const requestKey = state.pairs[newIndex]?.request?.key ?? null;
+      callbacks.onSelectedIndexChange(newIndex, requestKey);
+      callbacks.updateRequestsDisplay();
+    }
+  });
+  screen.key(["down"], () => {
+    if (modalManager.inDetailView || modalManager.keyBindingView || modalManager.loadingView) return;
+    resetInactivityTimer();
+    const config = getTuiConfig();
+    const limitedLength = Math.min(state.pairs.length, config.maxRequestPairs);
+    if (state.selectedIndex === -1) {
+      if (limitedLength > 0) {
+        const requestKey = state.pairs[0]?.request?.key ?? null;
+        callbacks.onSelectedIndexChange(0, requestKey);
+        callbacks.updateRequestsDisplay();
+        resetInactivityTimer();
+      }
+    } else if (state.selectedIndex < limitedLength - 1) {
+      const newIndex = state.selectedIndex + 1;
+      const requestKey = state.pairs[newIndex]?.request?.key ?? null;
+      callbacks.onSelectedIndexChange(newIndex, requestKey);
+      callbacks.updateRequestsDisplay();
+    }
+  });
+  screen.key(["end"], () => {
+    if (modalManager.inDetailView || modalManager.keyBindingView || modalManager.loadingView) return;
+    resetInactivityTimer();
+    const config = getTuiConfig();
+    const limitedLength = Math.min(state.pairs.length, config.maxRequestPairs);
+    const lastIndex = Math.max(0, limitedLength - 1);
+    if (state.selectedIndex !== lastIndex) {
+      const requestKey = state.pairs[lastIndex]?.request?.key ?? null;
+      callbacks.onSelectedIndexChange(lastIndex, requestKey);
+      callbacks.updateRequestsDisplay();
+    }
+  });
+  screen.key(["enter"], async () => {
+    if (modalManager.inDetailView || modalManager.keyBindingView || modalManager.loadingView) return;
+    if (state.selectedIndex === -1) return;
+    resetInactivityTimer();
+    const pair = state.pairs[state.selectedIndex];
+    if (pair?.request?.key !== void 0 && pair?.request?.key !== null) {
+      const abortController = new AbortController();
+      modalManager.fetchAbortController = abortController;
+      showLoadingModal(screen, modalManager, "Fetching request details...");
+      try {
+        const headers = await fetchReqResHeaders(
+          tunnelConfig?.webDebugger || "",
+          pair.request.key,
+          abortController.signal
+        );
+        if (abortController.signal.aborted) {
+          return;
+        }
+        closeLoadingModal(screen, modalManager);
+        modalManager.fetchAbortController = null;
+        showDetailModal(screen, modalManager, headers.req, headers.res);
+      } catch (err) {
+        if (err instanceof Error && err.name === "AbortError" || abortController.signal.aborted) {
+          logger.info("Fetch request cancelled by user");
+          return;
+        }
+        closeLoadingModal(screen, modalManager);
+        modalManager.fetchAbortController = null;
+        const message = err instanceof Error ? err.message : String(err) || "Unknown error occurred";
+        logger.error("Fetch error:", err);
+        showErrorModal(screen, modalManager, "Failed to fetch request details", message);
+      }
+    }
+  });
+  screen.key(["h"], () => {
+    if (modalManager.inDetailView || modalManager.loadingView) return;
+    if (modalManager.keyBindingView) {
+      closeKeyBindingsModal(screen, modalManager);
+    } else {
+      showKeyBindingsModal(screen, modalManager);
+    }
+  });
+  screen.key(["c"], async () => {
+    if (modalManager.inDetailView || modalManager.keyBindingView || modalManager.loadingView) 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);
+      }
+    }
+  });
+  screen.key(["left"], () => {
+    if (modalManager.inDetailView || modalManager.keyBindingView || modalManager.loadingView) return;
+    if (state.currentQrIndex > 0) {
+      callbacks.onQrIndexChange(state.currentQrIndex - 1);
+      callbacks.updateUrlsDisplay();
+      callbacks.updateQrCodeDisplay();
+    }
+  });
+  screen.key(["right"], () => {
+    if (modalManager.inDetailView || modalManager.keyBindingView || modalManager.loadingView) return;
+    if (state.currentQrIndex < state.urls.length - 1) {
+      callbacks.onQrIndexChange(state.currentQrIndex + 1);
+      callbacks.updateUrlsDisplay();
+      callbacks.updateQrCodeDisplay();
+    }
+  });
+}
+
+// src/tui/blessed/TunnelTui.ts
+var TunnelTui = class {
+  constructor(props) {
+    // State
+    this.currentQrIndex = 0;
+    this.selectedIndex = -1;
+    // -1 means no selection
+    this.selectedRequestKey = null;
+    // Track selected request by key
+    this.qrCodes = [];
+    this.stats = {
+      elapsedTime: 0,
+      numLiveConnections: 0,
+      numTotalConnections: 0,
+      numTotalReqBytes: 0,
+      numTotalResBytes: 0,
+      numTotalTxBytes: 0
+    };
+    this.pairs = [];
+    this.webDebuggerConnection = null;
+    this.modalManager = {
+      detailModal: null,
+      keyBindingsModal: null,
+      disconnectModal: null,
+      reconnectModal: null,
+      inDetailView: false,
+      keyBindingView: false,
+      inDisconnectView: false,
+      inReconnectView: false,
+      loadingBox: null,
+      loadingView: false,
+      fetchAbortController: null
+    };
+    this.exitPromiseResolve = null;
+    this.urls = props.urls;
+    this.greet = props.greet || "";
+    this.tunnelConfig = props.tunnelConfig;
+    this.disconnectInfo = props.disconnectInfo;
+    this.onStop = props.onStop;
+    if (props.tunnelInstance) {
+      this.tunnelInstance = props.tunnelInstance;
+    }
+    this.exitPromise = new Promise((resolve) => {
+      this.exitPromiseResolve = resolve;
+    });
+    this.screen = blessed3.screen({
+      smartCSR: true,
+      title: "Pinggy Tunnel",
+      fullUnicode: true
+    });
+    this.setupStatsListener();
+    this.setupWebDebugger();
+    void this.generateQrCodes();
+    this.createUI();
+    this.setupKeyBindings();
+  }
+  setupStatsListener() {
+    globalThis.__PINGGY_TUNNEL_STATS__ = (newStats) => {
+      this.stats = { ...newStats };
+      this.updateStatsDisplay();
+    };
+  }
+  clearSelection() {
+    this.selectedIndex = -1;
+    this.selectedRequestKey = null;
+  }
+  setupWebDebugger() {
+    if (this.tunnelConfig?.webDebugger) {
+      this.webDebuggerConnection = createWebDebuggerConnection(
+        this.tunnelConfig.webDebugger,
+        (pairs) => {
+          this.pairs = pairs;
+          if (this.selectedRequestKey !== null) {
+            const newIndex = pairs.findIndex(
+              (pair) => pair.request?.key === this.selectedRequestKey
+            );
+            if (newIndex !== -1) {
+              this.selectedIndex = newIndex;
+            } else {
+              this.clearSelection();
+            }
+          }
+          this.updateRequestsDisplay();
+        }
+      );
+    }
+  }
+  async generateQrCodes() {
+    if (this.tunnelConfig?.isQRCode && this.urls.length > 0) {
+      this.qrCodes = await createQrCodes(this.urls);
+      this.updateQrCodeDisplay();
+    }
+  }
+  // Create the UI based on terminal size
+  createUI() {
+    this.buildUI();
+    this.screen.on("resize", () => {
+      this.handleResize();
+    });
+  }
+  buildUI() {
+    const width = this.screen.width;
+    if (width < MIN_WIDTH_WARNING) {
+      this.uiElements = {
+        mainContainer: createWarningUI(this.screen),
+        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();
+  }
+  refreshDisplays() {
+    this.updateUrlsDisplay();
+    this.updateStatsDisplay();
+    this.updateRequestsDisplay();
+    this.updateQrCodeDisplay();
+  }
+  updateUrlsDisplay() {
+    updateUrlsDisplay(
+      this.uiElements?.urlsBox,
+      this.screen,
+      this.urls,
+      this.currentQrIndex
+    );
+  }
+  updateStatsDisplay() {
+    updateStatsDisplay(
+      this.uiElements?.statsBox,
+      this.screen,
+      this.stats
+    );
+  }
+  updateRequestsDisplay() {
+    const result = updateRequestsDisplay(
+      this.uiElements?.requestsBox,
+      this.screen,
+      this.pairs,
+      this.selectedIndex
+    );
+    if (result.adjustedSelectedIndex !== this.selectedIndex) {
+      if (result.adjustedSelectedIndex === -1) {
+        this.clearSelection();
+      } else {
+        this.selectedIndex = result.adjustedSelectedIndex;
+      }
+    }
+    if (result.trimmedPairs !== this.pairs) {
+      this.pairs = result.trimmedPairs;
+    }
+  }
+  updateQrCodeDisplay() {
+    updateQrCodeDisplay(
+      this.uiElements?.qrCodeBox,
+      this.screen,
+      this.qrCodes,
+      this.urls,
+      this.currentQrIndex
+    );
+  }
+  setupKeyBindings() {
+    const self = this;
+    const state = {
+      get currentQrIndex() {
+        return self.currentQrIndex;
+      },
+      set currentQrIndex(value) {
+        self.currentQrIndex = value;
+      },
+      get selectedIndex() {
+        return self.selectedIndex;
+      },
+      set selectedIndex(value) {
+        self.selectedIndex = value;
+      },
+      get pairs() {
+        return self.pairs;
+      },
+      get urls() {
+        return self.urls;
+      }
+    };
+    const callbacks = {
+      onQrIndexChange: (index) => {
+        self.currentQrIndex = index;
+      },
+      onSelectedIndexChange: (index, requestKey) => {
+        self.selectedIndex = index;
+        self.selectedRequestKey = requestKey;
+      },
+      onDestroy: () => self.destroy(),
+      updateUrlsDisplay: () => self.updateUrlsDisplay(),
+      updateQrCodeDisplay: () => self.updateQrCodeDisplay(),
+      updateRequestsDisplay: () => self.updateRequestsDisplay()
+    };
+    setupKeyBindings(
+      this.screen,
+      this.modalManager,
+      state,
+      callbacks,
+      this.tunnelConfig
+    );
+  }
+  handleResize() {
+    this.screen.children.forEach((child) => child.destroy());
+    this.buildUI();
+  }
+  updateDisconnectInfo(info) {
+    this.disconnectInfo = info;
+    if (info?.disconnected) {
+      const message = info.error ? `Error: ${info.error}
+Tunnel will be closed.` : info.messages?.join("\n") || "Disconnect request received. Tunnel will be closed.";
+      showDisconnectModal(
+        this.screen,
+        this.modalManager,
+        message,
+        () => this.destroy()
+      );
+    }
+  }
+  updateReconnectingInfo(retryCnt, message) {
+    showReconnectingModal(
+      this.screen,
+      this.modalManager,
+      retryCnt,
+      message
+    );
+  }
+  closeReconnectingInfo() {
+    closeReconnectingModal(this.screen, this.modalManager);
+  }
+  updateReconnectionFailed(retryCnt) {
+    showReconnectionFailedModal(
+      this.screen,
+      this.modalManager,
+      retryCnt,
+      () => this.destroy()
+    );
+  }
+  start() {
+    this.screen.render();
+  }
+  waitUntilExit() {
+    return this.exitPromise;
+  }
+  /**
+   * Update stats externally (used when TUI receives data from daemon WS stream).
+   */
+  updateStats(newStats) {
+    this.stats = { ...newStats };
+    this.updateStatsDisplay();
+  }
+  /**
+   * Update URLs externally (used on reconnect from daemon WS stream).
+   */
+  updateUrls(newUrls) {
+    this.urls = newUrls;
+    this.updateUrlsDisplay();
+    void this.generateQrCodes();
+  }
+  /**
+   * Show disconnect modal externally (from daemon WS stream).
+   */
+  showDisconnectModal(error, messages) {
+    this.updateDisconnectInfo({
+      disconnected: true,
+      error,
+      messages
+    });
+  }
+  /**
+   * Stop TUI without stopping tunnel (used for detach).
+   */
+  stop() {
+    delete globalThis.__PINGGY_TUNNEL_STATS__;
+    if (this.webDebuggerConnection) {
+      this.webDebuggerConnection.close();
+    }
+    this.screen.destroy();
+    if (this.exitPromiseResolve) {
+      this.exitPromiseResolve();
+    }
+  }
+  async destroy() {
+    if (this.onStop) {
+      await this.onStop();
+    } else if (this.tunnelInstance?.tunnelid) {
+      const manager = TunnelManager.getInstance();
+      manager.stopTunnel(this.tunnelInstance.tunnelid);
+    }
+    delete globalThis.__PINGGY_TUNNEL_STATS__;
+    if (this.webDebuggerConnection) {
+      this.webDebuggerConnection.close();
+    }
+    this.screen.destroy();
+    if (this.exitPromiseResolve) {
+      this.exitPromiseResolve();
+    }
+  }
+};
+var TunnelTui_default = TunnelTui;
+export {
+  TunnelTui,
+  TunnelTui_default as default
+};