feat(web): rewrite tunnel monitor preview

web/pages/networkScript.js

@@ -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) => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    "'": "&#39;",
+    '"': "&quot;",
+  })[char]);
+}
+
+function escapeAttr(value) {
+  return escapeHTML(value).replace(/`/g, "&#96;");
+}
+
+init();