pinggy 0.3.2 → 0.3.3

package/dist/index.cjs

@@ -402,7 +402,7 @@ var TunnelManager = class _TunnelManager {
       for (const rule of additionalForwarding) {
         if (rule && rule.localDomain && rule.localPort && rule.remoteDomain && isValidPort(rule.localPort)) {
           const forwardingRule = {
-            type: import_pinggy2.TunnelType.Http,
+            type: rule.protocol,
             // In Future we can make this dynamic based on user input
             address: `${rule.localDomain}:${rule.localPort}`,
             listenAddress: rule.remotePort && isValidPort(rule.remotePort) ? `${rule.remoteDomain}:${rule.remotePort}` : rule.remoteDomain
@@ -1580,7 +1580,8 @@ function ipv6SafeSplitColon(s) {
   result.push(buf);
   return result;
 }
-function parseForwarding(forwarding) {
+var VALID_PROTOCOLS = ["http", "tcp", "udp", "tls"];
+function parseDefaultForwarding(forwarding) {
   const parts = ipv6SafeSplitColon(forwarding);
   if (parts.length === 3) {
     const remotePort = parseInt(parts[0], 10);
@@ -1597,6 +1598,83 @@ function parseForwarding(forwarding) {
   }
   return new Error("forwarding address incorrect");
 }
+function parseAdditionalForwarding(forwarding) {
+  const toPort = (v) => {
+    const n = parseInt(v, 10);
+    return Number.isNaN(n) ? null : n;
+  };
+  const validateDomain = (d) => d && domainRegex.test(d) ? d : null;
+  let protocol = "http";
+  let remoteDomainRaw;
+  const protocolsRequiringDomainPort = ["tcp", "udp"];
+  const lowForwarding = forwarding.toLowerCase();
+  let remaining = forwarding;
+  for (const p of VALID_PROTOCOLS) {
+    if (lowForwarding.startsWith(p + "//")) {
+      protocol = p;
+      remaining = forwarding.slice(p.length + 2);
+      break;
+    }
+  }
+  if (protocol === "http" && remaining === forwarding) {
+    const parts2 = ipv6SafeSplitColon(remaining);
+    if (parts2.length !== 4) {
+      return new Error(
+        "forwarding must be in format: domain:remotePort:localDomain:localPort"
+      );
+    }
+    const remoteDomain = validateDomain(removeIPv6Brackets(parts2[0]));
+    const localDomain2 = removeIPv6Brackets(parts2[2] || "localhost");
+    const localPort2 = toPort(parts2[3]);
+    if (!remoteDomain) {
+      return new Error("forwarding address incorrect: invalid domain");
+    }
+    if (localPort2 === null || !isValidPort(localPort2)) {
+      return new Error("forwarding address incorrect: invalid local port");
+    }
+    return {
+      protocol: "http",
+      remoteDomain,
+      remotePort: 0,
+      localDomain: localDomain2,
+      localPort: localPort2
+    };
+  }
+  const domainPortMatch = remaining.match(/^([^:]+)\/(\d+):(.+)$/);
+  if (!domainPortMatch) {
+    return new Error(`forwarding must be in format: ${protocol}//domain/remotePort:localDomain:localPort`);
+  }
+  remoteDomainRaw = removeIPv6Brackets(domainPortMatch[1]);
+  const remotePortNum = toPort(domainPortMatch[2]);
+  const restParts = domainPortMatch[3];
+  if (!remoteDomainRaw || !domainRegex.test(remoteDomainRaw)) {
+    return new Error("forwarding address incorrect: invalid domain or remote port");
+  }
+  if (!remoteDomainRaw || remotePortNum === null || !isValidPort(remotePortNum)) {
+    return new Error(`${protocol} forwarding: invalid domain or port in format ${protocol}//domain/remotePort`);
+  }
+  const parts = ipv6SafeSplitColon(restParts);
+  if (parts.length !== 3) {
+    return new Error(`forwarding format incorrect: expected ${protocol}//domain/remotePort:placeholder:localDomain:localPort`);
+  }
+  const localDomain = removeIPv6Brackets(parts[1] || "localhost");
+  const localPort = toPort(parts[2]);
+  if (localPort === null || !isValidPort(localPort)) {
+    return new Error("forwarding address incorrect: invalid local port");
+  }
+  if (protocolsRequiringDomainPort.includes(protocol)) {
+    if (!remoteDomainRaw || !remotePortNum) {
+      return new Error(`${protocol} forwarding requires domain and port in format: ${protocol}//domain/remotePort:localDomain:localPort`);
+    }
+  }
+  return {
+    protocol,
+    remoteDomain: remoteDomainRaw,
+    remotePort: remotePortNum,
+    localDomain,
+    localPort
+  };
+}
 function parseReverseTunnelAddr(finalConfig, values) {
   const reverseTunnel = values.R;
   if ((!Array.isArray(reverseTunnel) || reverseTunnel.length === 0) && !values.localport && !finalConfig.forwarding) {
@@ -1605,7 +1683,7 @@ function parseReverseTunnelAddr(finalConfig, values) {
   if (!Array.isArray(reverseTunnel) || reverseTunnel.length === 0) {
     return null;
   }
-  const forwarding = parseForwarding(reverseTunnel[0]);
+  const forwarding = parseDefaultForwarding(reverseTunnel[0]);
   if (forwarding instanceof Error) {
     return forwarding;
   }
@@ -1613,7 +1691,7 @@ function parseReverseTunnelAddr(finalConfig, values) {
   if (reverseTunnel.length > 1) {
     finalConfig.additionalForwarding = [];
     for (const t of reverseTunnel.slice(1)) {
-      const f = parseForwarding(t);
+      const f = parseAdditionalForwarding(t);
       if (f instanceof Error) {
         return f;
       }
@@ -2563,11 +2641,47 @@ async function createQrCodes(urls) {
 
 // src/tui/blessed/webDebuggerConnection.ts
 var import_ws2 = __toESM(require("ws"), 1);
+
+// src/tui/blessed/config.ts
+var defaultTuiConfig = {
+  maxRequestPairs: 100,
+  visibleRequestCount: 10,
+  viewportScrollMargin: 2,
+  inactivityHttpSelectorTimeoutMs: 1e4
+};
+function getTuiConfig() {
+  return {
+    maxRequestPairs: defaultTuiConfig.maxRequestPairs,
+    visibleRequestCount: defaultTuiConfig.visibleRequestCount,
+    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 import_ws2.default(`ws://${webDebuggerUrl}/introspec/websocket`);
     socket = ws;
@@ -2579,34 +2693,36 @@ function createWebDebuggerConnection(webDebuggerUrl, onUpdate) {
         const raw = data.toString();
         const parsed = JSON.parse(raw);
         const msg = {
-          Req: parsed.Req || parsed.req,
-          Res: parsed.Res || parsed.res
+          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,
-            reqHeaders: existing?.reqHeaders ?? {},
-            resHeaders: existing?.resHeaders ?? {},
-            headersLoaded: existing?.headersLoaded ?? false
+            response: existing?.response
           };
-          pairs.set(key, merged);
+          upsertPair(key, merged);
         }
         if (msg.Res) {
           const { key } = msg.Res;
           const existing = pairs.get(key);
           const merged = {
             request: existing?.request ?? {},
-            response: msg.Res,
-            reqHeaders: existing?.reqHeaders ?? {},
-            resHeaders: existing?.resHeaders ?? {},
-            headersLoaded: existing?.headersLoaded ?? false
+            response: msg.Res
           };
-          pairs.set(key, merged);
+          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(new Map(pairs));
+        onUpdate(reversedPairs);
       } catch (err) {
         logger.error("Error parsing WebSocket message:", err.message || err);
       }
@@ -2878,7 +2994,7 @@ function getStatusColor(status) {
   const statusCode = match ? parseInt(match[1], 10) : 0;
   switch (true) {
     case (statusCode >= 100 && statusCode < 200):
-      return "orange";
+      return "yellow";
     case (statusCode >= 200 && statusCode < 300):
       return "green";
     case (statusCode >= 300 && statusCode < 400):
@@ -2938,14 +3054,49 @@ Total Transfer: ${getBytesInt(stats.numTotalTxBytes)}`;
   screen.render();
 }
 function updateRequestsDisplay(requestsBox, screen, pairs, selectedIndex) {
-  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";
+  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 = startIndex + i;
-    const isSelected = selectedIndex === globalIndex;
+    const globalIndex = viewportStart + i;
+    const isSelected = adjustedSelectedIndex !== -1 && adjustedSelectedIndex === globalIndex;
     const prefix = isSelected ? "> " : "  ";
     const method = pair.request?.method || "";
     const uri = pair.request?.uri || "";
@@ -2962,8 +3113,14 @@ function updateRequestsDisplay(requestsBox, screen, pairs, selectedIndex) {
 `;
     }
   });
+  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;
@@ -3058,11 +3215,13 @@ function showKeyBindingsModal(screen, manager) {
 {bold}Ctrl+c{/bold}    Exit
 
 Enter/Return    Open selected request
-Esc             Return to main page
+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}`;
@@ -3127,38 +3286,117 @@ function closeDisconnectModal(screen, manager) {
   manager.inDisconnectView = false;
   screen.render();
 }
+function showLoadingModal(screen, modalManager, message = "Loading...") {
+  if (modalManager.loadingView) return;
+  modalManager.loadingBox = import_blessed2.default.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 = import_blessed2.default.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) {
+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() }
+        headers: { "X-Introspec-Key": key.toString() },
+        signal
       }),
       fetch(`http://${baseUrl}/introspec/getrawresponseheader`, {
-        headers: { "X-Introspec-Key": key.toString() }
+        headers: { "X-Introspec-Key": key.toString() },
+        signal
       })
     ]);
     const [req, res] = await Promise.all([reqRes.text(), resRes.text()]);
     return { req, res };
   } catch (err) {
+    if (err?.name === "AbortError") {
+      throw err;
+    }
     logger.error("Error fetching headers:", err.message || err);
-    return { req: "", res: "" };
+    throw err;
   }
 }
 
 // src/tui/blessed/components/KeyBindings.ts
-function setupKeyBindings(screen, modalManager, state, callbacks, tunnelConfig, tunnelInstance) {
+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"], () => {
-    const manager = TunnelManager.getInstance();
-    manager.stopTunnel(tunnelInstance?.tunnelid || "");
     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;
@@ -3167,40 +3405,97 @@ function setupKeyBindings(screen, modalManager, state, callbacks, tunnelConfig,
       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) return;
-    if (state.selectedIndex > 0) {
-      callbacks.onSelectedIndexChange(state.selectedIndex - 1);
+    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) return;
-    const allPairs = [...state.pairs.values()];
-    if (state.selectedIndex < allPairs.length - 1) {
-      callbacks.onSelectedIndexChange(state.selectedIndex + 1);
+    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) return;
-    const allPairs = [...state.pairs.values()];
-    const pair = allPairs[state.selectedIndex];
+    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
+          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?.name === "AbortError" || abortController.signal.aborted) {
+          logger.info("Fetch request cancelled by user");
+          return;
+        }
+        closeLoadingModal(screen, modalManager);
+        modalManager.fetchAbortController = null;
+        const errorMessage = err?.message || String(err) || "Unknown error occurred";
         logger.error("Fetch error:", err);
+        showErrorModal(screen, modalManager, "Failed to fetch request details", errorMessage);
       }
     }
   });
   screen.key(["h"], () => {
-    if (modalManager.inDetailView) return;
+    if (modalManager.inDetailView || modalManager.loadingView) return;
     if (modalManager.keyBindingView) {
       closeKeyBindingsModal(screen, modalManager);
     } else {
@@ -3208,7 +3503,7 @@ function setupKeyBindings(screen, modalManager, state, callbacks, tunnelConfig,
     }
   });
   screen.key(["c"], async () => {
-    if (modalManager.inDetailView || modalManager.keyBindingView) return;
+    if (modalManager.inDetailView || modalManager.keyBindingView || modalManager.loadingView) return;
     if (state.urls.length > 0) {
       try {
         const clipboardy = await import("clipboardy");
@@ -3219,7 +3514,7 @@ function setupKeyBindings(screen, modalManager, state, callbacks, tunnelConfig,
     }
   });
   screen.key(["left"], () => {
-    if (modalManager.inDetailView || modalManager.keyBindingView) return;
+    if (modalManager.inDetailView || modalManager.keyBindingView || modalManager.loadingView) return;
     if (state.currentQrIndex > 0) {
       callbacks.onQrIndexChange(state.currentQrIndex - 1);
       callbacks.updateUrlsDisplay();
@@ -3227,7 +3522,7 @@ function setupKeyBindings(screen, modalManager, state, callbacks, tunnelConfig,
     }
   });
   screen.key(["right"], () => {
-    if (modalManager.inDetailView || modalManager.keyBindingView) return;
+    if (modalManager.inDetailView || modalManager.keyBindingView || modalManager.loadingView) return;
     if (state.currentQrIndex < state.urls.length - 1) {
       callbacks.onQrIndexChange(state.currentQrIndex + 1);
       callbacks.updateUrlsDisplay();
@@ -3241,7 +3536,10 @@ var TunnelTui = class {
   constructor(props) {
     // State
     this.currentQrIndex = 0;
-    this.selectedIndex = 0;
+    this.selectedIndex = -1;
+    // -1 means no selection
+    this.selectedRequestKey = null;
+    // Track selected request by key
     this.qrCodes = [];
     this.stats = {
       elapsedTime: 0,
@@ -3251,7 +3549,7 @@ var TunnelTui = class {
       numTotalResBytes: 0,
       numTotalTxBytes: 0
     };
-    this.pairs = /* @__PURE__ */ new Map();
+    this.pairs = [];
     this.webDebuggerConnection = null;
     this.modalManager = {
       detailModal: null,
@@ -3259,7 +3557,10 @@ var TunnelTui = class {
       disconnectModal: null,
       inDetailView: false,
       keyBindingView: false,
-      inDisconnectView: false
+      inDisconnectView: false,
+      loadingBox: null,
+      loadingView: false,
+      fetchAbortController: null
     };
     this.exitPromiseResolve = null;
     this.urls = props.urls;
@@ -3289,12 +3590,26 @@ var TunnelTui = class {
       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();
         }
       );
@@ -3357,12 +3672,22 @@ var TunnelTui = class {
     );
   }
   updateRequestsDisplay() {
-    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(
@@ -3399,8 +3724,9 @@ var TunnelTui = class {
       onQrIndexChange: (index) => {
         self.currentQrIndex = index;
       },
-      onSelectedIndexChange: (index) => {
+      onSelectedIndexChange: (index, requestKey) => {
         self.selectedIndex = index;
+        self.selectedRequestKey = requestKey;
       },
       onDestroy: () => self.destroy(),
       updateUrlsDisplay: () => self.updateUrlsDisplay(),
@@ -3412,8 +3738,7 @@ var TunnelTui = class {
       this.modalManager,
       state,
       callbacks,
-      this.tunnelConfig,
-      this.tunnelInstance
+      this.tunnelConfig
     );
   }
   handleResize() {

package/dist/index.d.cts

@@ -5,10 +5,11 @@ import { z } from 'zod';
 import winston from 'winston';
 
 interface AdditionalForwarding {
-    remoteDomain?: string;
-    remotePort?: number;
     localDomain: string;
     localPort: number;
+    remoteDomain?: string;
+    remotePort?: number;
+    protocol?: 'http' | 'tcp' | 'udp' | 'tls';
 }
 declare enum TunnelStateType {
     New = "idle",