feat(web): rewrite tunnel monitor preview
This commit is contained in:
@@ -1,231 +1,17 @@
|
||||
package pages
|
||||
|
||||
import (
|
||||
g "maragu.dev/gomponents"
|
||||
h "maragu.dev/gomponents/html"
|
||||
import _ "embed"
|
||||
|
||||
_ "embed"
|
||||
)
|
||||
//go:embed network.html
|
||||
var networkHTML string
|
||||
|
||||
//go:embed networkScript.js
|
||||
var alpineScript string
|
||||
var networkScript string
|
||||
|
||||
func NetworkPage() g.Node {
|
||||
return h.Doctype(
|
||||
h.HTML(
|
||||
h.Head(
|
||||
h.Script(g.Raw(alpineScript)),
|
||||
h.Script(g.Attr("src", "//cdn.tailwindcss.com")),
|
||||
h.Script(g.Attr("src", "//cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js")),
|
||||
),
|
||||
h.Body(
|
||||
h.Div(h.Class("bg-gray-900 text-gray-100"),
|
||||
networkMonitor(),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
func NetworkHTML() string {
|
||||
return networkHTML
|
||||
}
|
||||
|
||||
func networkMonitor() g.Node {
|
||||
return h.Div(
|
||||
g.Attr("x-data", "networkMonitor()"),
|
||||
h.Class("h-dvh flex flex-col"),
|
||||
|
||||
// Header
|
||||
h.Div(
|
||||
h.Class("bg-gray-800 border-b border-gray-700 px-4 py-2 flex items-center gap-4"),
|
||||
h.H1(h.Class("text-lg font-semibold"), g.Text("Network")),
|
||||
h.Button(
|
||||
g.Attr("@click", "clear()"),
|
||||
h.Class("px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm"),
|
||||
g.Text("Clear"),
|
||||
),
|
||||
h.Div(
|
||||
h.Class("ml-auto text-sm text-gray-400"),
|
||||
h.Span(g.Attr("x-text", "requests.length")),
|
||||
g.Text(" requests"),
|
||||
),
|
||||
),
|
||||
|
||||
// Table
|
||||
h.Div(
|
||||
h.Class("flex-1 overflow-auto"),
|
||||
h.Table(
|
||||
h.Class("w-full text-sm"),
|
||||
networkTableHeader(),
|
||||
networkTableBody(),
|
||||
),
|
||||
),
|
||||
|
||||
// Details Panel
|
||||
networkDetailsPanel(),
|
||||
)
|
||||
}
|
||||
|
||||
func networkTableHeader() g.Node {
|
||||
return h.THead(
|
||||
h.Class("bg-gray-800 sticky top-0 border-b border-gray-700"),
|
||||
h.Tr(
|
||||
h.Class("text-left"),
|
||||
h.Th(h.Class("px-4 py-2 font-medium"), g.Text("Name")),
|
||||
h.Th(h.Class("px-4 py-2 font-medium w-20"), g.Text("Method")),
|
||||
h.Th(h.Class("px-4 py-2 font-medium w-20"), g.Text("Status")),
|
||||
h.Th(h.Class("px-4 py-2 font-medium w-32"), g.Text("Type")),
|
||||
h.Th(h.Class("px-4 py-2 font-medium w-32"), g.Text("Time")),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
func networkTableBody() g.Node {
|
||||
return h.TBody(
|
||||
h.Template(
|
||||
g.Attr("x-for", "req in requests"),
|
||||
g.Attr(":key", "req.ID"),
|
||||
h.Tr(
|
||||
g.Attr("@click", "selected = req"),
|
||||
g.Attr(":class", "selected?.ID === req.ID ? 'bg-blue-900' : 'hover:bg-gray-800'"),
|
||||
h.Class("border-b border-gray-800 cursor-pointer"),
|
||||
h.Td(
|
||||
h.Class("px-4 py-2 truncate max-w-md"),
|
||||
g.Attr("x-text", "req.URL?.Path || req.URL"),
|
||||
),
|
||||
h.Td(h.Class("px-4 py-2"), g.Attr("x-text", "req.Method")),
|
||||
h.Td(
|
||||
h.Class("px-4 py-2"),
|
||||
h.Span(
|
||||
g.Attr(":class", "statusColor(req.Status)"),
|
||||
g.Attr("x-text", "req.Status || '-'"),
|
||||
),
|
||||
),
|
||||
h.Td(
|
||||
h.Class("px-4 py-2 text-gray-400"),
|
||||
g.Attr("x-text", "req.ResponseBodyType || '-'"),
|
||||
),
|
||||
h.Td(
|
||||
h.Class("px-4 py-2 text-gray-400"),
|
||||
g.Attr("x-text", "formatTime(req.Time)"),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
func networkDetailsPanel() g.Node {
|
||||
return h.Div(
|
||||
g.Attr("x-show", "selected"),
|
||||
g.Attr("x-data", "{ activeTab: 'general' }"),
|
||||
h.Class("fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"),
|
||||
g.Attr("@click.self", "selected = null"),
|
||||
h.Div(
|
||||
h.Class("bg-gray-800 rounded-lg shadow-xl w-3/4 h-3/4 flex flex-col"),
|
||||
g.Attr("@click.stop", ""),
|
||||
// Header
|
||||
h.Div(
|
||||
h.Class("flex items-center justify-between p-4 border-b border-gray-700"),
|
||||
h.H2(
|
||||
h.Class("text-lg font-semibold"),
|
||||
g.Attr("x-text", "selected?.URL"),
|
||||
),
|
||||
h.Button(
|
||||
g.Attr("@click", "selected = null"),
|
||||
h.Class("text-gray-400 hover:text-gray-200"),
|
||||
g.Text("X"),
|
||||
),
|
||||
),
|
||||
// Tabs
|
||||
h.Div(
|
||||
h.Class("flex border-b border-gray-700"),
|
||||
tab("general", "General"),
|
||||
tab("request", "Request"),
|
||||
tab("response", "Response"),
|
||||
),
|
||||
// Content
|
||||
h.Div(
|
||||
h.Class("flex-1 overflow-auto p-4"),
|
||||
generalTabContent(),
|
||||
requestTabContent(),
|
||||
responseTabContent(),
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
func tab(name, label string) g.Node {
|
||||
return h.Button(
|
||||
g.Attr("@click", "activeTab = '"+name+"'"),
|
||||
g.Attr(":class", "activeTab === '"+name+"' ? 'border-b-2 border-blue-500 text-blue-500' : 'text-gray-400 hover:text-gray-200'"),
|
||||
h.Class("px-4 py-2 font-medium"),
|
||||
g.Text(label),
|
||||
)
|
||||
}
|
||||
|
||||
func generalTabContent() g.Node {
|
||||
return h.Div(
|
||||
g.Attr("x-show", "activeTab === 'general'"),
|
||||
h.Class("space-y-4"),
|
||||
h.H3(h.Class("font-medium"), g.Text("Details")),
|
||||
h.Div(
|
||||
h.Class("text-sm space-y-1 text-gray-300"),
|
||||
detailRow("URL:", "selected?.URL"),
|
||||
detailRow("Source:", "selected?.SourceAddr"),
|
||||
detailRow("Method:", "selected?.Method"),
|
||||
detailRow("Status:", "selected?.Status"),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
func requestTabContent() g.Node {
|
||||
return h.Div(
|
||||
g.Attr("x-show", "activeTab === 'request'"),
|
||||
h.Class("space-y-4"),
|
||||
h.H3(h.Class("font-medium"), g.Text("Headers")),
|
||||
h.Div(
|
||||
h.Class("text-sm space-y-1 text-gray-300 font-mono"),
|
||||
h.Template(
|
||||
g.Attr("x-for", "(values, key) in selected?.RequestHeaders"),
|
||||
h.Div(
|
||||
h.Span(h.Class("text-gray-500"), g.Attr("x-text", "key + ':'")),
|
||||
g.Text(" "),
|
||||
h.Span(g.Attr("x-text", "values.join(', ')")),
|
||||
),
|
||||
),
|
||||
),
|
||||
h.H3(h.Class("font-medium"), g.Text("Body")),
|
||||
h.Pre(
|
||||
h.Class("text-sm text-gray-300 font-mono bg-gray-900 p-3 rounded overflow-auto max-h-96"),
|
||||
h.Code(g.Attr("x-text", "formatData(selected?.RequestBody)")),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
func responseTabContent() g.Node {
|
||||
return h.Div(
|
||||
g.Attr("x-show", "activeTab === 'response'"),
|
||||
h.Class("space-y-4"),
|
||||
h.H3(h.Class("font-medium"), g.Text("Headers")),
|
||||
h.Div(
|
||||
h.Class("text-sm space-y-1 text-gray-300 font-mono mb-4"),
|
||||
h.Template(
|
||||
g.Attr("x-for", "(values, key) in selected?.ResponseHeaders"),
|
||||
h.Div(
|
||||
h.Span(h.Class("text-gray-500"), g.Attr("x-text", "key + ':'")),
|
||||
g.Text(" "),
|
||||
h.Span(g.Attr("x-text", "values.join(', ')")),
|
||||
),
|
||||
),
|
||||
),
|
||||
h.H3(h.Class("font-medium"), g.Text("Body")),
|
||||
h.Pre(
|
||||
h.Class("text-sm text-gray-300 font-mono bg-gray-900 p-3 rounded overflow-auto max-h-96"),
|
||||
h.Code(g.Attr("x-text", "formatData(selected?.ResponseBody)")),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
func detailRow(label, value string) g.Node {
|
||||
return h.Div(
|
||||
h.Span(h.Class("text-gray-500"), g.Text(label)),
|
||||
g.Text(" "),
|
||||
h.Span(g.Attr("x-text", value)),
|
||||
)
|
||||
func NetworkScript() string {
|
||||
return networkScript
|
||||
}
|
||||
|
||||
13
web/pages/network.html
Normal file
13
web/pages/network.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="h-full bg-slate-950">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Conduit Monitor</title>
|
||||
<script src="//cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="h-full bg-slate-950 text-slate-100">
|
||||
<main id="app" class="min-h-full"></main>
|
||||
<script src="/assets/network.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,47 +1,444 @@
|
||||
function networkMonitor() {
|
||||
return {
|
||||
requests: [],
|
||||
selected: null,
|
||||
const state = {
|
||||
requests: [],
|
||||
selectedID: null,
|
||||
activeTab: "preview",
|
||||
query: "",
|
||||
streamStatus: "connecting",
|
||||
};
|
||||
|
||||
init() {
|
||||
const es = new EventSource("/stream");
|
||||
es.onmessage = (e) => {
|
||||
const record = JSON.parse(e.data);
|
||||
const foundIdx = this.requests.findIndex((r) => r.ID === record.ID);
|
||||
if (foundIdx >= 0) {
|
||||
this.requests[foundIdx] = record;
|
||||
} else {
|
||||
this.requests.unshift(record);
|
||||
}
|
||||
};
|
||||
},
|
||||
const app = document.getElementById("app");
|
||||
|
||||
clear() {
|
||||
this.requests = [];
|
||||
this.selected = null;
|
||||
},
|
||||
function init() {
|
||||
render();
|
||||
connectStream();
|
||||
}
|
||||
|
||||
statusColor(status) {
|
||||
if (!status) return "text-gray-400";
|
||||
if (status < 300) return "text-green-400";
|
||||
if (status < 400) return "text-blue-400";
|
||||
if (status < 500) return "text-yellow-400";
|
||||
return "text-red-400";
|
||||
},
|
||||
function connectStream() {
|
||||
const es = new EventSource("/stream");
|
||||
|
||||
formatTime(time) {
|
||||
return new Date(time).toLocaleTimeString();
|
||||
},
|
||||
es.onopen = () => {
|
||||
state.streamStatus = "connected";
|
||||
render();
|
||||
};
|
||||
|
||||
es.onerror = () => {
|
||||
state.streamStatus = "disconnected";
|
||||
render();
|
||||
};
|
||||
|
||||
es.onmessage = (event) => {
|
||||
const record = JSON.parse(event.data);
|
||||
const foundIdx = state.requests.findIndex((req) => req.ID === record.ID);
|
||||
|
||||
if (foundIdx >= 0) {
|
||||
state.requests[foundIdx] = record;
|
||||
} else {
|
||||
state.requests.unshift(record);
|
||||
}
|
||||
|
||||
render();
|
||||
};
|
||||
}
|
||||
|
||||
function formatData(base64Data) {
|
||||
if (!base64Data) return "";
|
||||
try {
|
||||
const decoded = atob(base64Data);
|
||||
const parsed = JSON.parse(decoded);
|
||||
return JSON.stringify(parsed, null, 2);
|
||||
} catch {
|
||||
return atob(base64Data);
|
||||
function render() {
|
||||
const selected = getSelected();
|
||||
|
||||
app.innerHTML = `
|
||||
<section class="flex min-h-dvh flex-col bg-slate-950">
|
||||
${renderHeader()}
|
||||
<div class="grid min-h-0 flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[28rem_minmax(0,1fr)]">
|
||||
${renderRequestList()}
|
||||
${renderInspector(selected, false)}
|
||||
</div>
|
||||
${selected ? renderMobileSheet(selected) : ""}
|
||||
</section>
|
||||
`;
|
||||
|
||||
bindEvents();
|
||||
renderPreview(selected);
|
||||
}
|
||||
|
||||
function renderHeader() {
|
||||
return `
|
||||
<header class="border-b border-slate-800 bg-slate-900/80 px-4 py-3 backdrop-blur">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<div>
|
||||
<h1 class="text-lg font-semibold tracking-tight">Conduit Monitor</h1>
|
||||
<p class="text-xs text-slate-400">Live tunnel traffic inspector</p>
|
||||
</div>
|
||||
<span class="ml-auto rounded-full px-3 py-1 text-xs font-medium ${streamStatusClass()}">${state.streamStatus}</span>
|
||||
<button data-action="clear" class="rounded-lg border border-slate-700 px-3 py-1.5 text-sm text-slate-200 hover:bg-slate-800">Clear</button>
|
||||
</div>
|
||||
</header>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderRequestList() {
|
||||
const filtered = filteredRequests();
|
||||
|
||||
return `
|
||||
<aside class="min-h-0 border-r border-slate-800 bg-slate-950 lg:flex lg:flex-col">
|
||||
<div class="border-b border-slate-800 p-3">
|
||||
<label class="sr-only" for="search">Search requests</label>
|
||||
<input id="search" data-input="query" value="${escapeAttr(state.query)}" placeholder="Search path, method, status, type..." class="w-full rounded-xl border border-slate-800 bg-slate-900 px-3 py-2 text-sm outline-none ring-blue-500 placeholder:text-slate-500 focus:ring-2" />
|
||||
<div class="mt-2 text-xs text-slate-500">${filtered.length} of ${state.requests.length} requests</div>
|
||||
</div>
|
||||
<div class="max-h-[calc(100dvh-9rem)] overflow-auto lg:max-h-none lg:flex-1">
|
||||
${filtered.length === 0 ? renderEmptyList() : filtered.map(renderRequestRow).join("")}
|
||||
</div>
|
||||
</aside>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderRequestRow(req) {
|
||||
const selected = req.ID === state.selectedID;
|
||||
const url = parseURL(req.URL);
|
||||
|
||||
return `
|
||||
<button data-select="${req.ID}" class="block w-full border-b border-slate-900 px-4 py-3 text-left transition ${selected ? "bg-blue-950/70" : "hover:bg-slate-900"}">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="rounded-md px-2 py-0.5 text-xs font-bold ${methodClass(req.Method)}">${escapeHTML(req.Method || "-")}</span>
|
||||
<span class="rounded-md px-2 py-0.5 text-xs font-semibold ${statusClass(req.Status)}">${req.Status || "pending"}</span>
|
||||
<span class="ml-auto text-xs text-slate-500">${formatTime(req.Time)}</span>
|
||||
</div>
|
||||
<div class="mt-2 truncate font-mono text-sm text-slate-100">${escapeHTML(url.path)}</div>
|
||||
<div class="mt-1 flex items-center gap-2 truncate text-xs text-slate-500">
|
||||
<span class="truncate">${escapeHTML(url.host || req.SourceAddr || "unknown")}</span>
|
||||
<span>•</span>
|
||||
<span class="truncate">${escapeHTML(req.ResponseBodyType || req.RequestBodyType || "no content type")}</span>
|
||||
</div>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderInspector(selected, mobile) {
|
||||
if (!selected) {
|
||||
return `
|
||||
<section class="hidden min-h-0 items-center justify-center bg-slate-950 p-8 lg:flex">
|
||||
<div class="max-w-md text-center">
|
||||
<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-900 text-2xl">↯</div>
|
||||
<h2 class="text-lg font-semibold">No request selected</h2>
|
||||
<p class="mt-2 text-sm text-slate-400">Send traffic through a tunnel, then select a request to inspect headers, bodies, and previews.</p>
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
||||
const wrapperClass = mobile ? "flex h-full flex-col bg-slate-950" : "hidden min-h-0 flex-col bg-slate-950 lg:flex";
|
||||
return `
|
||||
<section class="${wrapperClass}">
|
||||
${renderInspectorHeader(selected, mobile)}
|
||||
${renderTabs()}
|
||||
<div class="min-h-0 flex-1 overflow-auto p-4">
|
||||
${renderActiveTab(selected)}
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderMobileSheet(selected) {
|
||||
return `
|
||||
<div class="fixed inset-0 z-50 bg-slate-950 lg:hidden">
|
||||
${renderInspector(selected, true)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderInspectorHeader(req, mobile) {
|
||||
const url = parseURL(req.URL);
|
||||
|
||||
return `
|
||||
<div class="border-b border-slate-800 p-4">
|
||||
<div class="flex items-start gap-3">
|
||||
${mobile ? `<button data-action="close" class="rounded-lg border border-slate-700 px-3 py-1.5 text-sm">Back</button>` : ""}
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span class="rounded-md px-2 py-0.5 text-xs font-bold ${methodClass(req.Method)}">${escapeHTML(req.Method || "-")}</span>
|
||||
<span class="rounded-md px-2 py-0.5 text-xs font-semibold ${statusClass(req.Status)}">${req.Status || "pending"}</span>
|
||||
<span class="text-xs text-slate-500">${formatTime(req.Time)}</span>
|
||||
</div>
|
||||
<h2 class="mt-2 truncate font-mono text-base font-semibold">${escapeHTML(url.path)}</h2>
|
||||
<p class="mt-1 truncate text-xs text-slate-500">${escapeHTML(req.URL || "")}</p>
|
||||
</div>
|
||||
<button data-copy="${escapeAttr(req.URL || "")}" class="rounded-lg border border-slate-700 px-3 py-1.5 text-sm hover:bg-slate-800">Copy URL</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderTabs() {
|
||||
return `
|
||||
<nav class="flex gap-1 overflow-x-auto border-b border-slate-800 px-3 py-2">
|
||||
${["preview", "overview", "request", "response"].map((tab) => `
|
||||
<button data-tab="${tab}" class="rounded-lg px-3 py-1.5 text-sm font-medium capitalize ${state.activeTab === tab ? "bg-blue-600 text-white" : "text-slate-400 hover:bg-slate-900 hover:text-slate-100"}">${tab}</button>
|
||||
`).join("")}
|
||||
</nav>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderActiveTab(req) {
|
||||
if (state.activeTab === "overview") return renderOverview(req);
|
||||
if (state.activeTab === "request") return renderMessage(req, "Request");
|
||||
if (state.activeTab === "response") return renderMessage(req, "Response");
|
||||
return `<div data-preview-root></div>`;
|
||||
}
|
||||
|
||||
function renderOverview(req) {
|
||||
return `
|
||||
<div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
||||
${summaryCard("Method", req.Method || "-")}
|
||||
${summaryCard("Status", req.Status || "pending")}
|
||||
${summaryCard("Source", req.SourceAddr || "-")}
|
||||
${summaryCard("Request Body", bodySummary(req, "Request"))}
|
||||
${summaryCard("Response Body", bodySummary(req, "Response"))}
|
||||
${summaryCard("Content Type", req.ResponseBodyType || req.RequestBodyType || "-")}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderMessage(req, prefix) {
|
||||
const headers = req[`${prefix}Headers`] || {};
|
||||
const body = decodeBody(req[`${prefix}Body`]);
|
||||
|
||||
return `
|
||||
<div class="space-y-4">
|
||||
<section>
|
||||
<div class="mb-2 flex items-center justify-between gap-2">
|
||||
<h3 class="font-semibold">Headers</h3>
|
||||
<button data-copy="${escapeAttr(formatHeaders(headers))}" class="rounded-lg border border-slate-700 px-3 py-1 text-xs hover:bg-slate-800">Copy</button>
|
||||
</div>
|
||||
<pre class="overflow-auto rounded-xl border border-slate-800 bg-slate-900 p-3 text-xs text-slate-300">${escapeHTML(formatHeaders(headers) || "No headers")}</pre>
|
||||
</section>
|
||||
<section>
|
||||
<div class="mb-2 flex items-center justify-between gap-2">
|
||||
<h3 class="font-semibold">Body</h3>
|
||||
<button data-copy="${escapeAttr(body)}" class="rounded-lg border border-slate-700 px-3 py-1 text-xs hover:bg-slate-800">Copy</button>
|
||||
</div>
|
||||
<p class="mb-2 text-xs text-slate-500">${escapeHTML(bodySummary(req, prefix))}</p>
|
||||
<pre class="max-h-[32rem] overflow-auto rounded-xl border border-slate-800 bg-slate-900 p-3 text-xs text-slate-300">${escapeHTML(formatBody(body, req[`${prefix}BodyType`]))}</pre>
|
||||
</section>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderPreview(selected) {
|
||||
const roots = document.querySelectorAll("[data-preview-root]");
|
||||
if (roots.length === 0 || !selected) return;
|
||||
|
||||
roots.forEach((root) => renderPreviewInto(root, selected));
|
||||
}
|
||||
|
||||
function renderPreviewInto(root, selected) {
|
||||
const contentType = selected.ResponseBodyType || "";
|
||||
const body = selected.ResponseBody;
|
||||
|
||||
if (!selected.ResponseBodyCaptured || !body) {
|
||||
root.innerHTML = renderPreviewEmpty(selected);
|
||||
return;
|
||||
}
|
||||
|
||||
if (isImage(contentType)) {
|
||||
root.innerHTML = `<div class="rounded-xl border border-slate-800 bg-slate-900 p-4"><img class="mx-auto max-h-[70dvh] max-w-full rounded-lg" alt="Response preview" src="data:${escapeAttr(contentType)};base64,${body}" /></div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
const decoded = decodeBody(body);
|
||||
if (isHTML(contentType)) {
|
||||
root.innerHTML = `<iframe title="Response HTML preview" sandbox class="h-[70dvh] w-full rounded-xl border border-slate-800 bg-white"></iframe>`;
|
||||
root.querySelector("iframe").srcdoc = decoded;
|
||||
return;
|
||||
}
|
||||
|
||||
root.innerHTML = `<pre class="max-h-[70dvh] overflow-auto rounded-xl border border-slate-800 bg-slate-900 p-4 text-sm text-slate-300">${escapeHTML(formatBody(decoded, contentType))}</pre>`;
|
||||
}
|
||||
|
||||
function renderPreviewEmpty(req) {
|
||||
const reason = req.ResponseBodySkipped || "No captured response body is available.";
|
||||
return `
|
||||
<div class="rounded-xl border border-dashed border-slate-700 p-8 text-center">
|
||||
<h3 class="font-semibold">Nothing to preview</h3>
|
||||
<p class="mt-2 text-sm text-slate-400">${escapeHTML(reason)}</p>
|
||||
<p class="mt-1 text-xs text-slate-500">${escapeHTML(bodySummary(req, "Response"))}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function bindEvents() {
|
||||
document.querySelectorAll("[data-select]").forEach((el) => {
|
||||
el.addEventListener("click", () => {
|
||||
state.selectedID = el.dataset.select;
|
||||
state.activeTab = "preview";
|
||||
render();
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll("[data-tab]").forEach((el) => {
|
||||
el.addEventListener("click", () => {
|
||||
state.activeTab = el.dataset.tab;
|
||||
render();
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll("[data-action='clear']").forEach((el) => {
|
||||
el.addEventListener("click", () => {
|
||||
state.requests = [];
|
||||
state.selectedID = null;
|
||||
render();
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll("[data-action='close']").forEach((el) => {
|
||||
el.addEventListener("click", () => {
|
||||
state.selectedID = null;
|
||||
render();
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll("[data-copy]").forEach((el) => {
|
||||
el.addEventListener("click", () => navigator.clipboard?.writeText(el.dataset.copy || ""));
|
||||
});
|
||||
|
||||
const search = document.querySelector("[data-input='query']");
|
||||
if (search) {
|
||||
search.addEventListener("input", (event) => {
|
||||
state.query = event.target.value;
|
||||
render();
|
||||
document.querySelector("[data-input='query']")?.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function filteredRequests() {
|
||||
const query = state.query.trim().toLowerCase();
|
||||
if (!query) return state.requests;
|
||||
|
||||
return state.requests.filter((req) => [
|
||||
req.URL,
|
||||
req.Method,
|
||||
String(req.Status || "pending"),
|
||||
req.SourceAddr,
|
||||
req.RequestBodyType,
|
||||
req.ResponseBodyType,
|
||||
].some((value) => String(value || "").toLowerCase().includes(query)));
|
||||
}
|
||||
|
||||
function getSelected() {
|
||||
return state.requests.find((req) => req.ID === state.selectedID) || null;
|
||||
}
|
||||
|
||||
function parseURL(raw) {
|
||||
try {
|
||||
const parsed = new URL(raw, window.location.origin);
|
||||
return { host: parsed.host, path: `${parsed.pathname}${parsed.search}` || raw };
|
||||
} catch {
|
||||
return { host: "", path: raw || "-" };
|
||||
}
|
||||
}
|
||||
|
||||
function decodeBody(base64Data) {
|
||||
if (!base64Data) return "";
|
||||
const binary = atob(base64Data);
|
||||
const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
|
||||
return new TextDecoder().decode(bytes);
|
||||
}
|
||||
|
||||
function formatBody(body, contentType = "") {
|
||||
if (isJSON(contentType)) {
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(body), null, 2);
|
||||
} catch {
|
||||
return body;
|
||||
}
|
||||
}
|
||||
return body || "No body";
|
||||
}
|
||||
|
||||
function formatHeaders(headers) {
|
||||
return Object.entries(headers || {})
|
||||
.map(([key, values]) => `${key}: ${Array.isArray(values) ? values.join(", ") : values}`)
|
||||
.join("\n");
|
||||
}
|
||||
|
||||
function bodySummary(req, prefix) {
|
||||
const size = req[`${prefix}BodySize`];
|
||||
const captured = req[`${prefix}BodyCaptured`];
|
||||
const truncated = req[`${prefix}BodyTruncated`];
|
||||
const skipped = req[`${prefix}BodySkipped`];
|
||||
|
||||
if (captured) return `${formatBytes(size)} captured${truncated ? " (truncated)" : ""}`;
|
||||
if (skipped) return skipped;
|
||||
if (size > 0) return `${formatBytes(size)} not captured`;
|
||||
return "No body";
|
||||
}
|
||||
|
||||
function summaryCard(label, value) {
|
||||
return `<div class="rounded-xl border border-slate-800 bg-slate-900 p-4"><div class="text-xs uppercase tracking-wide text-slate-500">${escapeHTML(label)}</div><div class="mt-1 break-words text-sm font-medium text-slate-100">${escapeHTML(String(value))}</div></div>`;
|
||||
}
|
||||
|
||||
function renderEmptyList() {
|
||||
return `<div class="p-8 text-center text-sm text-slate-500">No requests yet. Start sending traffic through your tunnel.</div>`;
|
||||
}
|
||||
|
||||
function isJSON(contentType) {
|
||||
return /(^|\/)json($|;)|\+json($|;)/i.test(contentType || "");
|
||||
}
|
||||
|
||||
function isHTML(contentType) {
|
||||
return /text\/html/i.test(contentType || "");
|
||||
}
|
||||
|
||||
function isImage(contentType) {
|
||||
return /^image\/(png|jpe?g|gif|webp|svg\+xml)/i.test(contentType || "");
|
||||
}
|
||||
|
||||
function methodClass(method) {
|
||||
return {
|
||||
GET: "bg-emerald-500/15 text-emerald-300",
|
||||
POST: "bg-blue-500/15 text-blue-300",
|
||||
PUT: "bg-amber-500/15 text-amber-300",
|
||||
PATCH: "bg-purple-500/15 text-purple-300",
|
||||
DELETE: "bg-red-500/15 text-red-300",
|
||||
}[method] || "bg-slate-700 text-slate-200";
|
||||
}
|
||||
|
||||
function statusClass(status) {
|
||||
if (!status) return "bg-slate-700 text-slate-300";
|
||||
if (status < 300) return "bg-emerald-500/15 text-emerald-300";
|
||||
if (status < 400) return "bg-blue-500/15 text-blue-300";
|
||||
if (status < 500) return "bg-amber-500/15 text-amber-300";
|
||||
return "bg-red-500/15 text-red-300";
|
||||
}
|
||||
|
||||
function streamStatusClass() {
|
||||
if (state.streamStatus === "connected") return "bg-emerald-500/15 text-emerald-300";
|
||||
if (state.streamStatus === "connecting") return "bg-amber-500/15 text-amber-300";
|
||||
return "bg-red-500/15 text-red-300";
|
||||
}
|
||||
|
||||
function formatTime(time) {
|
||||
if (!time) return "-";
|
||||
return new Date(time).toLocaleTimeString();
|
||||
}
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (!bytes || bytes < 0) return "unknown size";
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KiB`;
|
||||
return `${(bytes / 1024 / 1024).toFixed(1)} MiB`;
|
||||
}
|
||||
|
||||
function escapeHTML(value) {
|
||||
return String(value ?? "").replace(/[&<>'"]/g, (char) => ({
|
||||
"&": "&",
|
||||
"<": "<",
|
||||
">": ">",
|
||||
"'": "'",
|
||||
'"': """,
|
||||
})[char]);
|
||||
}
|
||||
|
||||
function escapeAttr(value) {
|
||||
return escapeHTML(value).replace(/`/g, "`");
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
10
web/web.go
10
web/web.go
@@ -26,6 +26,7 @@ func (s *WebServer) Start(ctx context.Context) error {
|
||||
|
||||
rootMux := http.NewServeMux()
|
||||
rootMux.HandleFunc("/", s.handleRoot)
|
||||
rootMux.HandleFunc("/assets/network.js", s.handleNetworkScript)
|
||||
rootMux.HandleFunc("/stream", s.handleStream)
|
||||
|
||||
s.server = &http.Server{
|
||||
@@ -85,6 +86,11 @@ func (s *WebServer) handleStream(w http.ResponseWriter, r *http.Request) {
|
||||
}
|
||||
|
||||
func (s *WebServer) handleRoot(w http.ResponseWriter, r *http.Request) {
|
||||
w.Header().Set("Content-Type", "text/html")
|
||||
_ = pages.NetworkPage().Render(w)
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
_, _ = w.Write([]byte(pages.NetworkHTML()))
|
||||
}
|
||||
|
||||
func (s *WebServer) handleNetworkScript(w http.ResponseWriter, r *http.Request) {
|
||||
w.Header().Set("Content-Type", "application/javascript; charset=utf-8")
|
||||
_, _ = w.Write([]byte(pages.NetworkScript()))
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user