@sandeepk1729/porter 1.1.0 → 1.2.0

package/dist/index.js

@@ -15,6 +15,7 @@ const commander_1 = __nccwpck_require__(909);
 const package_json_1 = __importDefault(__nccwpck_require__(330));
 const agent_1 = __nccwpck_require__(257);
 const config_1 = __nccwpck_require__(750);
+const server_1 = __nccwpck_require__(127);
 const porter = new commander_1.Command();
 porter.name("porter").description(package_json_1.default.description).version(package_json_1.default.version); // <-- Dynamically injected
 // 1. add alias
@@ -22,9 +23,18 @@ porter
     .command("http")
     .arguments("<local-port>")
     .description("Add http port forwarding")
-    .action(async (localPort) => {
+    .option("--ui-port <port>", "Port for the web UI dashboard", "7676")
+    .action(async (localPort, options) => {
+    const uiPort = parseInt(options.uiPort, 10);
+    if (isNaN(uiPort) || uiPort < 1 || uiPort > 65535) {
+        console.error(`Invalid --ui-port value: "${options.uiPort}". Must be a number between 1 and 65535.`);
+        process.exit(1);
+    }
+    (0, server_1.startUIServer)(uiPort);
     console.log(`Connecting to porter server and forwarding to local port ${localPort}`);
     config_1.caller.request(config_1.REQ_BODY)
+        .on("error", (err) => console.error(`Connection to porter server failed: ${err.message}\n` +
+        `Make sure the porter server is reachable and try again.`))
         .on("upgrade", (0, agent_1.upgradeHandler)(localPort))
         .end();
 });
@@ -92,6 +102,728 @@ if (!process.argv.slice(2).length) {
 command_1.default.parse(process.argv);
 
 
+/***/ }),
+
+/***/ 418:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+class Channel {
+    clients;
+    /// Constructor
+    constructor() {
+        this.clients = new Set();
+    }
+    subscribe = (res) => {
+        this.clients.add(res);
+    };
+    unsubscribe(res) {
+        this.clients.delete(res);
+    }
+    broadcast = (event, html) => {
+        const payload = Array.isArray(html) ? html.join("\n") : html;
+        for (const client of this.clients) {
+            this.send(client, event, payload);
+        }
+    };
+    /**
+     * Write a single SSE message. Multi-line HTML is split into multiple
+     * `data:` lines so no double-newline accidentally terminates the frame.
+     */
+    send = (client, event, html) => {
+        const safe = html.trim().replace(/\n{2,}/g, "\n");
+        const dataLines = safe
+            .split("\n")
+            .map((l) => `data: ${l}`)
+            .join("\n");
+        client.write(`event: ${event}\n${dataLines}\n\n`);
+    };
+}
+exports["default"] = Channel;
+
+
+/***/ }),
+
+/***/ 265:
+/***/ ((__unused_webpack_module, exports, __nccwpck_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.agentEvents = void 0;
+const node_events_1 = __nccwpck_require__(474);
+const agentEvents = new node_events_1.EventEmitter();
+exports.agentEvents = agentEvents;
+agentEvents.setMaxListeners(100);
+
+
+/***/ }),
+
+/***/ 823:
+/***/ ((__unused_webpack_module, exports, __nccwpck_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.INDEX_HTML = exports.EMPTY_DETAIL_HTML = exports.EMPTY_MSG_HTML = void 0;
+exports.rowHtml = rowHtml;
+exports.countOobHtml = countOobHtml;
+exports.detailHtml = detailHtml;
+exports.detailInnerHtml = detailInnerHtml;
+const utils_1 = __nccwpck_require__(448);
+/**
+ * A single request row. If `oobSpec` is provided the element gets
+ * `hx-swap-oob` so HTMX applies it as an out-of-band DOM patch.
+ *
+ * Click behaviour is handled by a delegated listener on #list-panel
+ * (see the inline script at the bottom of the page) so that it works
+ * correctly even when rows are continuously added/replaced via SSE OOB
+ * swaps – per-element hx-* attributes would require htmx.process() to
+ * be called after every OOB swap, which the SSE extension does not
+ * guarantee.
+ */
+function rowHtml(r, oobSpec) {
+    const dur = r.endTime ? `${r.endTime - r.startTime}ms` : "&hellip;";
+    const stHtml = r.responseStatus
+        ? `<div class="st ${(0, utils_1.stClass)(r.responseStatus)}">${r.responseStatus}</div>`
+        : `<div class="st st-p">&hellip;</div>`;
+    const oob = oobSpec ? ` hx-swap-oob="${(0, utils_1.esc)(oobSpec)}"` : "";
+    const cls = `req-row${r.done ? "" : " pending"}`;
+    return (`<div ${oob}>
+      <div id="row-${r.requestId}" class="${cls}">
+        <span class="mth ${(0, utils_1.mthClass)(r.method)}">${(0, utils_1.esc)(r.method)}</span>
+        <span class="req-path" title="${(0, utils_1.esc)(r.path)}">${(0, utils_1.esc)(r.path)}</span>
+        <div class="req-meta">
+          ${stHtml}
+          <div class="dur">${dur}</div>
+        </div>
+      </div>
+    </div>`);
+}
+/** Request count badge, returned as an OOB outerHTML swap. */
+function countOobHtml(n) {
+    return `<span id="req-count" hx-swap-oob="outerHTML">${n} ${n === 1 ? "request" : "requests"}</span>`;
+}
+/** Empty-state placeholder for #list-panel. */
+const EMPTY_MSG_HTML = `<div id="empty-msg" class="empty-list">` +
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">` +
+    `<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>` +
+    `</svg><span>Waiting for requests&hellip;</span></div>`;
+exports.EMPTY_MSG_HTML = EMPTY_MSG_HTML;
+/** Empty-state for #detail-panel (used by the clear response OOB). */
+const EMPTY_DETAIL_HTML = `<div id="detail-panel" hx-swap-oob="outerHTML" class="center">` +
+    `<div class="ph">` +
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">` +
+    `<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>` +
+    `</svg><span>Select a request to view details</span></div></div>`;
+exports.EMPTY_DETAIL_HTML = EMPTY_DETAIL_HTML;
+/**
+ * Inner HTML of the detail panel for request `r`.
+ * Served both by `GET /request/:id` and as the payload of
+ * `response-end-{id}` SSE events (the `.detail-content` wrapper
+ * already has `sse-swap="response-end-{id}"` so HTMX replaces
+ * its innerHTML automatically when that event arrives).
+ */
+function detailInnerHtml(r) {
+    const dur = r.endTime ? `${r.endTime - r.startTime} ms` : "pending&hellip;";
+    const stHtml = r.responseStatus
+        ? `<span class="st ${(0, utils_1.stClass)(r.responseStatus)}">${r.responseStatus}</span>`
+        : `<span class="st st-p">Pending&hellip;</span>`;
+    let html = `<div class="summary">` +
+        `<span class="mth ${(0, utils_1.mthClass)(r.method)}">${(0, utils_1.esc)(r.method)}</span>` +
+        `<span class="s-path">${(0, utils_1.esc)(r.path)}</span>` +
+        `${stHtml}<span class="s-dur">${dur}</span>` +
+        `</div>` +
+        `<div class="section"><div class="section-hdr">Request Headers</div>` +
+        `${(0, utils_1.headersHtml)(r.reqHeaders)}</div>` +
+        `<div class="section"><div class="section-hdr">Request Body</div>` +
+        `${(0, utils_1.bodyHtml)(r.reqBodyChunks)}</div>`;
+    if (r.responseStatus !== null) {
+        html +=
+            `<div class="section"><div class="section-hdr">Response Headers</div>` +
+                `${(0, utils_1.headersHtml)(r.resHeaders)}</div>` +
+                `<div class="section"><div class="section-hdr">Response Body</div>` +
+                `${(0, utils_1.bodyHtml)(r.resBodyChunks)}</div>`;
+    }
+    return html;
+}
+/**
+ * Full detail panel content for `GET /request/:id`.
+ * The `.detail-content` wrapper carries `sse-swap="response-end-{id}"`
+ * so HTMX's SSE extension auto-updates the detail panel when the
+ * response completes without any client-side JavaScript.
+ */
+function detailHtml(r) {
+    return (`<div class="detail-content"` +
+        ` sse-swap="response-end-${r.requestId}"` +
+        ` hx-swap="innerHTML">` +
+        detailInnerHtml(r) +
+        `</div>`);
+}
+// ── Embedded HTML dashboard ───────────────────────────────────────────────────
+//
+// Technology choices:
+//   HTMX (htmx.org) – SSE live-swap via hx-ext="sse", REST actions via
+//     hx-get / hx-delete, out-of-band (OOB) DOM patches from the server.
+//   htmx-ext-sse – official SSE extension for HTMX.
+//   Hyperscript (_hyperscript.org) – declarative DOM interactions via `_=`
+//     attributes: active-row selection, connection status dot, no JS block.
+//
+//   All three libraries are loaded from unpkg CDN via <script> tags so the
+//   dashboard works without any bundled assets or local file serving.
+//
+// Key patterns:
+//   • <body hx-ext="sse" sse-connect="/events"> – body is the SSE root.
+//   • #sse-sink (hidden) absorbs `ui-update` SSE events; OOB fragments in
+//     those events patch #list-panel rows, #req-count, #empty-msg in-place.
+//   • A delegated click listener on #list-panel uses htmx.ajax() to fetch
+//     server-rendered detail HTML into #detail-panel when a row is clicked.
+//     Using delegation rather than per-row hx-get/hx-trigger avoids the
+//     need for htmx.process() to be called after every SSE OOB swap.
+//   • The .detail-content wrapper returned by GET /request/:id carries
+//     sse-swap="response-end-{id}" so HTMX auto-refreshes the detail panel
+//     when that per-request SSE event fires – zero client JS needed.
+//   • Clear button uses hx-delete="/requests"; the server response carries
+//     OOB patches to reset #detail-panel and #req-count.
+// ─────────────────────────────────────────────────────────────────────────────
+const INDEX_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Porter Agent \u2014 Live Traffic</title>
+<script src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js"
+        integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+"
+        crossorigin="anonymous"><\/script>
+<script src="https://unpkg.com/htmx-ext-sse@2.2.2/sse.js"
+        integrity="sha384-fw+eTlCc7suMV/1w/7fr2/PmwElUIt5i82bi+qTiLXvjRXZ2/FkiTNA/w0MhXnGI"
+        crossorigin="anonymous"><\/script>
+<script src="https://unpkg.com/hyperscript.org@0.9.13/dist/_hyperscript.min.js"
+        integrity="sha384-5yQ5JTatiFEgeiEB4mfkRI3oTGtaNpbJGdcciZ4IEYFpLGt8yDsGAd7tKiMwnX9b"
+        crossorigin="anonymous"><\/script>
+<style>
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+body{font-family:'Segoe UI',system-ui,sans-serif;background:#0f172a;color:#e2e8f0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
+header{background:#1e293b;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #334155;flex-shrink:0}
+.logo{font-size:1.1rem;font-weight:700;color:#38bdf8;letter-spacing:-0.3px}
+.conn-status{display:flex;align-items:center;gap:8px;font-size:0.8125rem;color:#94a3b8}
+.dot{width:8px;height:8px;border-radius:50%;background:#22c55e}
+.dot.off{background:#ef4444}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:0.4}}
+.dot.live{animation:blink 1.8s ease-in-out infinite}
+.toolbar{background:#1e293b;padding:6px 20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #334155;flex-shrink:0}
+.btn{padding:5px 12px;border-radius:5px;border:1px solid #475569;background:transparent;color:#94a3b8;cursor:pointer;font-size:0.8rem;transition:all .15s}
+.btn:hover{background:#334155;color:#e2e8f0}
+#req-count{margin-left:auto;font-size:0.8rem;color:#475569}
+main{display:flex;flex:1;overflow:hidden}
+#list-panel{width:360px;min-width:240px;overflow-y:auto;border-right:1px solid #334155;flex-shrink:0}
+.empty-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;gap:10px;color:#475569;font-size:0.875rem;padding:20px;text-align:center}
+.req-row{padding:8px 14px;border-bottom:1px solid #1e293b;cursor:pointer;display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:center;transition:background .1s}
+.req-row:hover{background:#1a2744}
+.req-row.active{background:#1e3a5f;border-left:3px solid #38bdf8;padding-left:11px}
+.req-row.pending{opacity:.75}
+.mth{font-size:.65rem;font-weight:800;padding:2px 5px;border-radius:4px;text-align:center;letter-spacing:.4px;white-space:nowrap}
+.mth-GET{background:#0c4a6e;color:#38bdf8}
+.mth-POST{background:#14532d;color:#4ade80}
+.mth-PUT{background:#78350f;color:#fbbf24}
+.mth-PATCH{background:#4c1d95;color:#a78bfa}
+.mth-DELETE{background:#7f1d1d;color:#f87171}
+.mth-HEAD,.mth-OPTIONS{background:#1e3a5f;color:#93c5fd}
+.mth-other{background:#1e293b;color:#94a3b8}
+.req-path{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cbd5e1}
+.req-meta{text-align:right;white-space:nowrap}
+.st{font-size:.75rem;font-weight:600}
+.st-2{color:#4ade80}.st-3{color:#60a5fa}.st-4{color:#fbbf24}.st-5{color:#f87171}.st-p{color:#64748b}
+.dur{font-size:.7rem;color:#475569;margin-top:2px}
+#detail-panel{flex:1;overflow-y:auto;padding:16px 20px}
+#detail-panel.center{display:flex;align-items:center;justify-content:center}
+.ph{display:flex;flex-direction:column;align-items:center;gap:10px;color:#475569;font-size:.9rem}
+.summary{display:flex;align-items:center;gap:10px;background:#1e293b;padding:10px 14px;border-radius:8px;margin-bottom:16px;font-size:.875rem;flex-wrap:wrap}
+.summary .s-path{color:#94a3b8;flex:1;word-break:break-all;font-family:monospace;font-size:.8rem}
+.summary .s-dur{font-size:.75rem;color:#64748b}
+.section{margin-bottom:18px}
+.section-hdr{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
+.section-hdr::after{content:"";flex:1;height:1px;background:#334155}
+.hdr-tbl{width:100%;border-collapse:collapse;font-size:.78rem}
+.hdr-tbl tr:nth-child(odd) td{background:#111827}
+.hdr-tbl td{padding:4px 8px;vertical-align:top;word-break:break-word}
+.hdr-tbl td:first-child{color:#7dd3fc;font-family:monospace;white-space:nowrap;width:36%;padding-right:12px}
+.hdr-tbl td:last-child{color:#e2e8f0;font-family:monospace}
+.body-box{background:#111827;border:1px solid #334155;border-radius:6px}
+.body-pre{padding:10px 12px;font-family:'Cascadia Code',Consolas,monospace;font-size:.78rem;line-height:1.65;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow-y:auto;color:#e2e8f0}
+.body-none{padding:10px 12px;color:#475569;font-style:italic;font-size:.8rem}
+.no-data{color:#475569;font-size:.8rem;font-style:italic}
+::-webkit-scrollbar{width:5px;height:5px}
+::-webkit-scrollbar-track{background:#0f172a}
+::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}
+::-webkit-scrollbar-thumb:hover{background:#475569}
+</style>
+</head>
+<!--
+  hx-ext="sse"        – enable the HTMX SSE extension on the whole page
+  sse-connect="/events" – open an EventSource to our /events endpoint
+  _="..."             – Hyperscript: update the connection-status dot/label
+                        when HTMX fires htmx:sseOpen / htmx:sseError on body
+-->
+<body hx-ext="sse" sse-connect="/events"
+  _="on htmx:sseOpen
+       remove .off from #dot
+       add .live to #dot
+       set the textContent of #conn-label to 'Connected'
+     on htmx:sseError
+       remove .live from #dot
+       add .off to #dot
+       set the textContent of #conn-label to 'Disconnected \u2014 retrying\u2026'">
+
+<header>
+  <div class="logo">&#9889; Porter Agent &mdash; Live Traffic</div>
+  <div class="conn-status">
+    <div class="dot off" id="dot"></div>
+    <span id="conn-label">Connecting&hellip;</span>
+  </div>
+</header>
+
+<div class="toolbar">
+  <!--
+    hx-delete="/requests" – DELETE /requests clears server state
+    hx-target / hx-swap   – main response goes into #list-panel innerHTML
+    The server response also carries OOB patches for #detail-panel and
+    #req-count so everything resets in one round-trip, no JS needed.
+  -->
+  <button class="btn"
+          hx-delete="/requests"
+          hx-target="#list-panel"
+          hx-swap="innerHTML">Clear</button>
+  <span id="req-count">0 requests</span>
+</div>
+
+<main>
+  <div id="list-panel">
+    <div class="empty-list" id="empty-msg">
+      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+      <span>Waiting for requests&hellip;</span>
+    </div>
+  </div>
+  <div id="detail-panel" class="center">
+    <div class="ph">
+      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
+      <span>Select a request to view details</span>
+    </div>
+  </div>
+</main>
+
+<!--
+  Hidden SSE sink: absorbs "ui-update" events from the server.
+  Each "ui-update" message body carries one or more hx-swap-oob fragments
+  that HTMX applies directly to matching elements in the DOM
+  (new rows, count badge, row status patches, etc.).
+-->
+<div id="sse-sink" sse-swap="ui-update" hx-swap="innerHTML" style="display:none"></div>
+
+<!--
+  Row click delegation
+  ───────────────────
+  Rows are injected/replaced continuously via SSE OOB swaps.  The SSE
+  extension does not guarantee that htmx.process() is called on every
+  new/replaced element, so per-element hx-get/hx-trigger attributes
+  are unreliable.  A single delegated listener on the stable #list-panel
+  container works regardless of how many times rows are swapped.
+-->
+<script>
+(function () {
+  document.getElementById('list-panel').addEventListener('click', function (e) {
+    var row = e.target.closest('[id^="row-"]');
+    if (!row) return;
+    document.querySelectorAll('.req-row').forEach(function (r) { r.classList.remove('active'); });
+    row.classList.add('active');
+    document.getElementById('detail-panel').classList.remove('center');
+    htmx.ajax('GET', '/request/' + row.id.replace(/^row-/, ''), {
+      target: '#detail-panel',
+      swap: 'innerHTML',
+    });
+  });
+}());
+<\/script>
+
+</body>
+</html>`;
+exports.INDEX_HTML = INDEX_HTML;
+
+
+/***/ }),
+
+/***/ 366:
+/***/ (function(__unused_webpack_module, exports, __nccwpck_require__) {
+
+"use strict";
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__exportStar(__nccwpck_require__(823), exports);
+
+
+/***/ }),
+
+/***/ 448:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+// ── HTML rendering helpers ────────────────────────────────────────────────────
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.bodyHtml = exports.headersHtml = exports.stClass = exports.mthClass = exports.esc = void 0;
+const esc = (s) => {
+    return String(s ?? "")
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#x27;");
+};
+exports.esc = esc;
+const mthClass = (m) => {
+    return ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"].includes(m)
+        ? `mth-${m}`
+        : "mth-other";
+};
+exports.mthClass = mthClass;
+const stClass = (s) => {
+    if (!s)
+        return "st-p";
+    if (s >= 500)
+        return "st-5";
+    if (s >= 400)
+        return "st-4";
+    if (s >= 300)
+        return "st-3";
+    return "st-2";
+};
+exports.stClass = stClass;
+const decodeBodyChunks = (chunks) => {
+    if (!chunks.length)
+        return "";
+    try {
+        return chunks
+            .map((c) => Buffer.from(c, "base64").toString("utf8"))
+            .join("");
+    }
+    catch {
+        return chunks.join("");
+    }
+};
+const prettyBody = (raw) => {
+    try {
+        return JSON.stringify(JSON.parse(raw), null, 2);
+    }
+    catch {
+        return raw;
+    }
+};
+const headersHtml = (headers) => {
+    const entries = Object.entries(headers ?? {});
+    if (!entries.length) {
+        return `<span class="no-data">No headers</span>`;
+    }
+    const rows = entries
+        .map(([k, v]) => `<tr><td>${esc(k)}</td><td>${esc(String(v))}</td></tr>`)
+        .join("");
+    return `<table class="hdr-tbl"><tbody>${rows}</tbody></table>`;
+};
+exports.headersHtml = headersHtml;
+const bodyHtml = (chunks) => {
+    const raw = decodeBodyChunks(chunks);
+    if (!raw) {
+        return `<div class="body-box"><div class="body-none">No body</div></div>`;
+    }
+    return `<div class="body-box"><pre class="body-pre">${esc(prettyBody(raw))}</pre></div>`;
+};
+exports.bodyHtml = bodyHtml;
+
+
+/***/ }),
+
+/***/ 127:
+/***/ (function(__unused_webpack_module, exports, __nccwpck_require__) {
+
+"use strict";
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.startUIServer = startUIServer;
+const node_http_1 = __importDefault(__nccwpck_require__(67));
+const events_1 = __nccwpck_require__(265);
+const storage_1 = __importDefault(__nccwpck_require__(892));
+const types_1 = __nccwpck_require__(888);
+const channel_1 = __importDefault(__nccwpck_require__(418));
+const buffer_1 = __nccwpck_require__(88);
+const html_1 = __nccwpck_require__(366);
+const channel = new channel_1.default();
+const records = new storage_1.default();
+const processEvent = (event, data) => {
+    const channelEvents = [];
+    switch (event) {
+        case "request-start": {
+            const record = new types_1.RequestRecord(data);
+            records.set(record.requestId, record);
+            channelEvents.push({
+                event: "ui-update",
+                fragments: [
+                    // Prepend the new row into #list-panel
+                    (0, html_1.rowHtml)(record, "afterbegin:#list-panel"),
+                    // Update the request count badge
+                    (0, html_1.countOobHtml)(records.size()),
+                ],
+            });
+            // On the very first request hide the "waiting" placeholder
+            if (records.size() === 1) {
+                channelEvents.push({
+                    event: "ui-update",
+                    fragments: [
+                        `<div id="empty-msg" hx-swap-oob="outerHTML" style="display:none"></div>`,
+                    ],
+                });
+            }
+            break;
+        }
+        case "request-data": {
+            records.get(data.requestId)?.addRequestBody(data);
+            break;
+        }
+        case "request-end": {
+            // Nothing to broadcast; detail updates happen on response-end
+            break;
+        }
+        case "response-start": {
+            const r = records.get(data.requestId);
+            if (!r)
+                break;
+            r.setResponseStart(data);
+            // Patch the row in-place (status badge update)
+            channelEvents.push({
+                event: "ui-update",
+                fragments: [(0, html_1.rowHtml)(r, `outerHTML:#row-${r.requestId}`)],
+            });
+            break;
+        }
+        case "response-data": {
+            records.get(data.requestId)?.addResponseBody(data);
+            break;
+        }
+        case "response-end": {
+            const r = records.get(data.requestId);
+            if (!r)
+                break;
+            r.setResponseEnd(data);
+            // Patch the row (timing + remove .pending)
+            channelEvents.push({
+                event: "ui-update",
+                fragments: [(0, html_1.rowHtml)(r, `outerHTML:#row-${r.requestId}`)],
+            });
+            // Push updated detail content to any open detail panel for this request
+            channelEvents.push({
+                event: `response-end-${r.requestId}`,
+                fragments: [(0, html_1.detailHtml)(r)],
+            });
+            break;
+        }
+    }
+    channelEvents.forEach(({ event, fragments }) => {
+        channel.broadcast(event, fragments);
+    });
+};
+Object.values(buffer_1.EventType).forEach((event) => {
+    events_1.agentEvents.on(event, (data) => processEvent(event, data));
+});
+// ── HTTP server ───────────────────────────────────────────────────────────────
+function startUIServer(port = 7676) {
+    const server = node_http_1.default.createServer((req, res) => {
+        const url = req.url ?? "/";
+        // ── GET /events  (SSE stream) ─────────────────────────────────────────
+        if (url === "/events") {
+            res.writeHead(200, {
+                "Content-Type": "text/event-stream",
+                "Cache-Control": "no-cache",
+                Connection: "keep-alive",
+                "Access-Control-Allow-Origin": "*",
+            });
+            res.write(": connected\n\n");
+            // Replay current state so late-joining browsers see existing traffic
+            if (records.hasData()) {
+                const rows = records.getValues()
+                    .reverse()
+                    .map((r) => (0, html_1.rowHtml)(r))
+                    .join("\n");
+                channel.send(res, "ui-update", [
+                    `<div id="list-panel" hx-swap-oob="innerHTML">${rows}</div>`,
+                    (0, html_1.countOobHtml)(records.size()),
+                    `<div id="empty-msg" hx-swap-oob="outerHTML" style="display:none"></div>`,
+                ].join("\n"));
+            }
+            channel.subscribe(res);
+            req.on("close", () => channel.unsubscribe(res));
+            return;
+        }
+        // ── GET /request/:id  (detail panel fragment) ─────────────────────────
+        const detailMatch = url.match(/^\/request\/([a-f0-9]+)$/);
+        if (req.method === "GET" && detailMatch) {
+            const r = records.get(detailMatch[1] ?? "");
+            if (!r) {
+                res.writeHead(404);
+                res.end();
+                return;
+            }
+            res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+            res.end((0, html_1.detailHtml)(r));
+            return;
+        }
+        // ── DELETE /requests  (clear all) ────────────────────────────────────
+        if (req.method === "DELETE" && url === "/requests") {
+            records.clear();
+            // Main response → replaces #list-panel innerHTML (hx-target on button)
+            // OOB responses → reset #detail-panel and #req-count in the same trip
+            const body = html_1.EMPTY_MSG_HTML +
+                html_1.EMPTY_DETAIL_HTML +
+                `<span id="req-count" hx-swap-oob="outerHTML">0 requests</span>`;
+            res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+            res.end(body);
+            return;
+        }
+        // ── GET /  (main page) ────────────────────────────────────────────────
+        res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+        res.end(html_1.INDEX_HTML);
+    });
+    server.on("error", (err) => {
+        if (err.code === "EADDRINUSE") {
+            console.error(`⚠️  Web UI port ${port} is already in use. UI will not be available.`);
+        }
+        else {
+            console.error("Web UI server error:", err.message);
+        }
+    });
+    server.listen(port, "127.0.0.1", () => {
+        console.log(`\uD83C\uDF10 Web UI available at http://localhost:${port}`);
+    });
+    return server;
+}
+
+
+/***/ }),
+
+/***/ 892:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+class Storage {
+    store;
+    constructor() {
+        this.store = new Map();
+    }
+    size = () => {
+        return this.store.size;
+    };
+    hasData = () => {
+        return this.store.size > 0;
+    };
+    has = (key) => {
+        return this.store.has(key);
+    };
+    get = (key) => {
+        return this.store.get(key);
+    };
+    getValues = () => {
+        return Array.from(this.store.values());
+    };
+    set = (key, value) => {
+        this.store.set(key, value);
+    };
+    delete = (key) => {
+        this.store.delete(key);
+    };
+    clear = () => {
+        this.store.clear();
+    };
+}
+exports["default"] = Storage;
+
+
+/***/ }),
+
+/***/ 888:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.RequestRecord = void 0;
+class RequestRecord {
+    requestId;
+    method;
+    path;
+    reqHeaders;
+    reqBodyChunks; // base64 encoded chunks
+    responseStatus;
+    resHeaders;
+    resBodyChunks; // base64 encoded chunks
+    startTime;
+    endTime;
+    done;
+    constructor({ requestId, payload, timestamp }) {
+        this.requestId = requestId;
+        this.method = payload.method;
+        this.path = payload.path;
+        this.reqHeaders = payload.headers;
+        this.startTime = timestamp;
+        this.reqBodyChunks = [];
+        this.resHeaders = {};
+        this.resBodyChunks = [];
+        this.responseStatus = null;
+        this.endTime = null;
+        this.done = false;
+    }
+    log(x) {
+        console.log(`[${this.requestId}]`, x, 'json:', JSON.stringify(x));
+    }
+    addRequestBody = ({ payload }) => {
+        if (!payload)
+            return;
+        this.reqBodyChunks.push(payload);
+    };
+    addResponseBody = ({ payload }) => {
+        if (!payload)
+            return;
+        this.resBodyChunks.push(payload);
+    };
+    setResponseStart = ({ payload }) => {
+        this.responseStatus = payload?.status;
+        this.resHeaders = payload?.headers || {};
+    };
+    setResponseEnd = ({ timestamp }) => {
+        this.endTime = timestamp;
+        this.done = true;
+    };
+}
+exports.RequestRecord = RequestRecord;
+
+
 /***/ }),
 
 /***/ 257:
@@ -107,6 +839,7 @@ exports.upgradeHandler = void 0;
 const node_http_1 = __importDefault(__nccwpck_require__(67));
 const buffer_1 = __nccwpck_require__(88);
 const config_1 = __nccwpck_require__(750);
+const events_1 = __nccwpck_require__(265);
 const requests = new Map();
 const upgradeHandler = (localPort) => (res, socket) => {
     let tunnelId = null;
@@ -136,51 +869,68 @@ const upgradeHandler = (localPort) => (res, socket) => {
                 // console.log(`➡️  Incoming request for tunnel ${tunnelId}: `, options);
                 // Using ANSI escape codes
                 console.log(`- \x1b[32m${options.method}\x1b[0m \x1b[34m${options.path}\x1b[0m`);
+                tunnelFrame({
+                    requestId: frame.requestId,
+                    type: buffer_1.FrameType.REQUEST_START,
+                    payload: frame.payload,
+                });
                 const proxy = node_http_1.default.request(options, (res) => {
                     // send response start
-                    socket.write((0, buffer_1.encodeFrame)({
-                        type: buffer_1.FrameType.RESPONSE_START,
+                    tunnelFrame({
                         requestId: frame.requestId,
+                        type: buffer_1.FrameType.RESPONSE_START,
                         payload: {
                             status: res.statusCode || 500,
                             headers: res.headers,
                         },
-                    }));
+                    });
                     // pipe response data
-                    res.on("data", (c) => socket.write((0, buffer_1.encodeFrame)({
-                        type: buffer_1.FrameType.RESPONSE_DATA,
-                        requestId: frame.requestId,
-                        payload: c,
-                    })));
+                    res.on("data", (c) => {
+                        // send response data
+                        tunnelFrame({
+                            requestId: frame.requestId,
+                            type: buffer_1.FrameType.RESPONSE_DATA,
+                            payload: c,
+                        });
+                    });
                     // response end
                     res.on("end", () => {
-                        socket.write((0, buffer_1.encodeFrame)({
-                            type: buffer_1.FrameType.RESPONSE_END,
+                        tunnelFrame({
                             requestId: frame.requestId,
-                        }));
+                            type: buffer_1.FrameType.RESPONSE_END,
+                        });
                     });
                 });
                 proxy.on("error", (err) => {
-                    socket.write((0, buffer_1.encodeFrame)({
-                        type: buffer_1.FrameType.RESPONSE_START,
+                    tunnelFrame({
                         requestId: frame.requestId,
+                        type: buffer_1.FrameType.RESPONSE_START,
                         payload: {
                             status: 502,
                             headers: {},
                             body: "Bad Gateway: " + err.message,
                         },
-                    }));
-                    socket.write((0, buffer_1.encodeFrame)({
-                        type: buffer_1.FrameType.RESPONSE_END,
+                    });
+                    tunnelFrame({
                         requestId: frame.requestId,
-                    }));
+                        type: buffer_1.FrameType.RESPONSE_END,
+                    });
                 });
                 requests.set(frame.requestId, proxy);
             }
             else if (frame.type === buffer_1.FrameType.REQUEST_DATA) {
+                tunnelFrame({
+                    requestId: frame.requestId,
+                    type: buffer_1.FrameType.REQUEST_DATA,
+                    payload: frame.payload,
+                });
                 requests.get(frame.requestId)?.write(frame.payload);
             }
             else if (frame.type === buffer_1.FrameType.REQUEST_END) {
+                tunnelFrame({
+                    requestId: frame.requestId,
+                    type: buffer_1.FrameType.REQUEST_END,
+                });
                 requests.get(frame.requestId)?.end();
                 requests.delete(frame.requestId);
             }
@@ -192,6 +942,19 @@ const upgradeHandler = (localPort) => (res, socket) => {
     socket.on("close", () => {
         console.log("🚪 Agent disconnected");
     });
+    const tunnelFrame = (frame) => {
+        // Only allow response frames to be sent back to the agent to prevent request spoofing
+        if ((frame.type === buffer_1.FrameType.RESPONSE_START ||
+            frame.type === buffer_1.FrameType.RESPONSE_DATA ||
+            frame.type === buffer_1.FrameType.RESPONSE_END)) {
+            socket.write((0, buffer_1.encodeFrame)(frame));
+        }
+        const eventPayload = {
+            ...frame,
+            timestamp: Date.now(),
+        };
+        events_1.agentEvents.emit((0, buffer_1.getEventName)(frame.type), eventPayload);
+    };
 };
 exports.upgradeHandler = upgradeHandler;
 const sanitizeHeaders = (headers, port) => {
@@ -222,11 +985,8 @@ const sanitizeHeaders = (headers, port) => {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.decodeTunnelId = exports.decodeFrames = exports.encodeFrame = exports.FrameType = void 0;
+exports.decodeTunnelId = exports.decodeFrames = exports.encodeFrame = exports.getEventName = exports.EventType = exports.FrameType = void 0;
 const node_buffer_1 = __nccwpck_require__(573);
-const LENGTH = {
-    LENGTH_FIELD: 4,
-};
 var FrameType;
 (function (FrameType) {
     // Tunnel initialization
@@ -240,6 +1000,32 @@ var FrameType;
     FrameType[FrameType["RESPONSE_DATA"] = 5] = "RESPONSE_DATA";
     FrameType[FrameType["RESPONSE_END"] = 6] = "RESPONSE_END";
 })(FrameType || (exports.FrameType = FrameType = {}));
+var EventType;
+(function (EventType) {
+    EventType["REQUEST_START"] = "request-start";
+    EventType["REQUEST_DATA"] = "request-data";
+    EventType["REQUEST_END"] = "request-end";
+    EventType["RESPONSE_START"] = "response-start";
+    EventType["RESPONSE_DATA"] = "response-data";
+    EventType["RESPONSE_END"] = "response-end";
+    EventType["UNKNOWN"] = "unknown-event";
+})(EventType || (exports.EventType = EventType = {}));
+const FrameName = {
+    [FrameType.TUNNEL_INIT]: EventType.REQUEST_START, // Not really an event, but we can reuse the payload structure
+    [FrameType.REQUEST_START]: EventType.REQUEST_START,
+    [FrameType.REQUEST_DATA]: EventType.REQUEST_DATA,
+    [FrameType.REQUEST_END]: EventType.REQUEST_END,
+    [FrameType.RESPONSE_START]: EventType.RESPONSE_START,
+    [FrameType.RESPONSE_DATA]: EventType.RESPONSE_DATA,
+    [FrameType.RESPONSE_END]: EventType.RESPONSE_END,
+};
+const getEventName = (type) => {
+    if (type in FrameName) {
+        return FrameName[type];
+    }
+    return EventType.UNKNOWN;
+};
+exports.getEventName = getEventName;
 /**
  * Frame format:
  * [4 bytes length][1 byte type][8 bytes requestId][payload...]
@@ -4628,7 +5414,7 @@ exports.suggestSimilar = suggestSimilar;
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@sandeepk1729/porter","version":"1.1.0","description":"a port forwarding agent","main":"./dist/index.js","bin":{"porter":"dist/index.js"},"scripts":{"dev":"tsc -w & ncc build src/index.ts --out dist --watch","unlink":"npm unlink @sandeepk1729/jarvis -g","build":"tsc && ncc build src/index.ts --out dist","prepublishOnly":"npm run build","lint":"eslint \'src/**/*.ts\'"},"keywords":["port","agent","node","cli"],"homepage":"https://github.com/SandeepK1729/porter-agent#readme","bugs":{"url":"https://github.com/SandeepK1729/porter-agent/issues"},"repository":{"type":"git","url":"git+https://github.com/SandeepK1729/porter-agent.git"},"author":"SandeepK1729 <SandeepK1729+user@users.noreply.github.com>","license":"MIT","devDependencies":{"@types/node":"^24.3.0","@vercel/ncc":"^0.38.3","eslint":"^9.35.0","prettier":"^3.6.2","typescript":"^5.9.2"},"publishConfig":{"access":"public","directory":"dist","registry":"https://registry.npmjs.org"},"files":["dist/","README.md","package.json"],"dependencies":{"commander":"^14.0.0"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@sandeepk1729/porter","version":"1.2.0","description":"a port forwarding agent","main":"./dist/index.js","bin":{"porter":"dist/index.js"},"scripts":{"dev":"tsc -w & ncc build src/index.ts --out dist --watch","unlink":"npm unlink @sandeepk1729/porter -g","build":"tsc && ncc build src/index.ts --out dist","prepublishOnly":"npm run build","lint":"eslint \'src/**/*.ts\'"},"keywords":["port","agent","node","cli"],"homepage":"https://github.com/SandeepK1729/porter-agent#readme","bugs":{"url":"https://github.com/SandeepK1729/porter-agent/issues"},"repository":{"type":"git","url":"git+https://github.com/SandeepK1729/porter-agent.git"},"author":"SandeepK1729 <SandeepK1729+user@users.noreply.github.com>","license":"MIT","devDependencies":{"@types/node":"^24.3.0","@vercel/ncc":"^0.38.3","eslint":"^9.35.0","prettier":"^3.6.2","typescript":"^5.9.2"},"publishConfig":{"access":"public","directory":"dist","registry":"https://registry.npmjs.org"},"files":["dist/","README.md","package.json"],"dependencies":{"commander":"^14.0.0"}}');
 
 /***/ })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sandeepk1729/porter",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "a port forwarding agent",
   "main": "./dist/index.js",
   "bin": {
@@ -8,7 +8,7 @@
   },
   "scripts": {
     "dev": "tsc -w & ncc build src/index.ts --out dist --watch",
-    "unlink": "npm unlink @sandeepk1729/jarvis -g",
+    "unlink": "npm unlink @sandeepk1729/porter -g",
     "build": "tsc && ncc build src/index.ts --out dist",
     "prepublishOnly": "npm run build",
     "lint": "eslint 'src/**/*.ts'"