feat(cursor): add independent Cursor protocol debugging proxy and build tasks

- Introduced a new task for running the Cursor protocol debugging proxy. - Added a build task for the Cursor protocol debugging proxy. - Updated documentation to include usage instructions for the debugging tool.
2026-08-17 11:37:20 +08:00 · 2026-08-03 00:19:18 +08:00
parent 5742073be5
commit 1854a3ab9a
15 changed files with 3006 additions and 0 deletions
@@ -0,0 +1,452 @@
+import { getLocale, setLocale, t, translateDocument } from "./i18n.js";
+
+const state = {
+  status: null,
+  exchanges: [],
+  selectedId: null,
+  selected: null,
+  search: "",
+  requestId: "",
+  endpoint: "all",
+  sortOrder: "desc",
+  paused: false,
+  pendingRefresh: false,
+  connection: { connected: false, key: "status.connecting", values: {} },
+  tabs: {
+    request: "body",
+    response: "frames",
+  },
+};
+
+const elements = {
+  statusDot: document.querySelector("#status-dot"),
+  statusText: document.querySelector("#status-text"),
+  proxyAddress: document.querySelector("#proxy-address"),
+  targetHost: document.querySelector("#target-host"),
+  connectionLabel: document.querySelector("#connection-label"),
+  trafficSummary: document.querySelector("#traffic-summary"),
+  searchInput: document.querySelector("#search-input"),
+  requestIdInput: document.querySelector("#request-id-input"),
+  endpointFilter: document.querySelector("#endpoint-filter"),
+  sortOrder: document.querySelector("#sort-order"),
+  requestCount: document.querySelector("#request-count"),
+  requestList: document.querySelector("#request-list"),
+  emptyState: document.querySelector("#empty-state"),
+  selectionSummary: document.querySelector("#selection-summary"),
+  requestContent: document.querySelector("#request-content"),
+  responseContent: document.querySelector("#response-content"),
+  pauseButton: document.querySelector("#pause-button"),
+  clearButton: document.querySelector("#clear-button"),
+  localeSelect: document.querySelector("#locale-select"),
+  workspace: document.querySelector("#workspace"),
+  splitter: document.querySelector("#horizontal-splitter"),
+};
+
+async function fetchJSON(url, options) {
+  const response = await fetch(url, options);
+  if (!response.ok) {
+    throw new Error(`${response.status} ${response.statusText}`);
+  }
+  if (response.status === 204) return null;
+  return response.json();
+}
+
+async function loadStatus() {
+  state.status = await fetchJSON("/api/status");
+  elements.statusDot.classList.toggle("online", Boolean(state.status.running));
+  renderRuntimeStatus();
+  elements.proxyAddress.textContent = `http://${state.status.proxyAddr}`;
+  elements.targetHost.textContent = state.status.targetHost;
+}
+
+async function refreshList() {
+  state.exchanges = await fetchJSON("/api/exchanges");
+  renderList();
+  renderTrafficSummary();
+  if (state.selectedId && state.exchanges.some((item) => item.id === state.selectedId)) {
+    await refreshDetail(state.selectedId);
+  } else if (state.selectedId) {
+    state.selectedId = null;
+    state.selected = null;
+    renderDetail();
+  }
+}
+
+async function refreshDetail(id) {
+  if (!id) return;
+  try {
+    const detail = await fetchJSON(`/api/exchanges/${encodeURIComponent(id)}`);
+    if (state.selectedId !== id) return;
+    state.selected = detail;
+    renderDetail();
+  } catch (error) {
+    if (state.selectedId === id) {
+      state.selected = null;
+      renderDetailError(error);
+    }
+  }
+}
+
+function scheduleRefresh() {
+  if (state.paused) {
+    state.pendingRefresh = true;
+    return;
+  }
+  if (state.pendingRefresh) return;
+  state.pendingRefresh = true;
+  window.setTimeout(async () => {
+    state.pendingRefresh = false;
+    try {
+      await refreshList();
+    } catch (error) {
+      setConnectionState(false, "connection.refreshFailed", { message: error.message });
+    }
+  }, 90);
+}
+
+function connectEvents() {
+  const events = new EventSource("/api/events");
+  events.addEventListener("open", () => setConnectionState(true, "connection.live"));
+  events.addEventListener("update", scheduleRefresh);
+  events.addEventListener("error", () => setConnectionState(false, "connection.retrying"));
+}
+
+function setConnectionState(connected, key, values = {}) {
+  state.connection = { connected, key, values };
+  renderConnectionState();
+}
+
+function renderRuntimeStatus() {
+  if (!state.status) {
+    elements.statusText.textContent = t("status.connecting");
+    return;
+  }
+  elements.statusText.textContent = t(state.status.running ? "status.running" : "status.stopped");
+}
+
+function renderConnectionState() {
+  const { connected, key, values } = state.connection;
+  elements.connectionLabel.textContent = t(key, values);
+  elements.statusDot.classList.toggle("online", connected && Boolean(state.status?.running));
+}
+
+function filteredExchanges() {
+  const query = state.search.trim().toLowerCase();
+  const requestId = state.requestId.trim().toLowerCase();
+  const direction = state.sortOrder === "asc" ? 1 : -1;
+  return state.exchanges
+    .filter((item) => {
+      if (state.endpoint === "runsse" && !item.path.toLowerCase().includes("runsse")) return false;
+      if (state.endpoint === "bidiappend" && !item.path.toLowerCase().includes("bidiappend")) return false;
+      if (requestId && !String(item.requestId || "").toLowerCase().includes(requestId)) return false;
+      if (!query) return true;
+      return [item.url, item.requestId, item.requestKind, item.responseKind, item.state, String(item.status)]
+        .filter(Boolean)
+        .some((value) => String(value).toLowerCase().includes(query));
+    })
+    .sort((left, right) => {
+      const startedAtDelta = new Date(left.startedAt).getTime() - new Date(right.startedAt).getTime();
+      if (startedAtDelta !== 0) return startedAtDelta * direction;
+      return left.id.localeCompare(right.id, undefined, { numeric: true }) * direction;
+    });
+}
+
+function renderList() {
+  const exchanges = filteredExchanges();
+  elements.requestCount.textContent = t("count.requests", { count: exchanges.length });
+  elements.emptyState.classList.toggle("hidden", exchanges.length > 0);
+  elements.requestList.innerHTML = exchanges
+    .map((item) => {
+      const selected = item.id === state.selectedId ? " selected" : "";
+      const statusClass = item.status >= 400 ? "error" : item.status ? "success" : "";
+      const kind = item.responseKind || item.requestKind || "-";
+      return `<tr class="${selected.trim()}" data-id="${escapeHTML(item.id)}">
+        <td><span class="row-state ${escapeHTML(item.state)}"></span></td>
+        <td><code>${escapeHTML(item.id)}</code></td>
+        <td title="${escapeHTML(item.url)}"><code>${escapeHTML(item.url)}</code></td>
+        <td title="${escapeHTML(item.requestId || "")}"><code class="request-id-text">${escapeHTML(item.requestId || "-")}</code></td>
+        <td><span class="kind-text">${escapeHTML(kind)}</span></td>
+        <td><span class="method-text">${escapeHTML(item.method)}</span></td>
+        <td><span class="status-text ${statusClass}">${item.status || "-"}</span></td>
+        <td>${formatBytes(item.responseBytes)}</td>
+        <td>${formatDuration(item.durationMs)}</td>
+      </tr>`;
+    })
+    .join("");
+}
+
+function renderTrafficSummary() {
+  const totals = state.exchanges.reduce(
+    (result, item) => {
+      result.up += item.requestBytes || 0;
+      result.down += item.responseBytes || 0;
+      return result;
+    },
+    { up: 0, down: 0 },
+  );
+  elements.trafficSummary.textContent = `↑ ${formatBytes(totals.up)}　↓ ${formatBytes(totals.down)}`;
+}
+
+function renderDetail() {
+  if (!state.selected) {
+    elements.selectionSummary.innerHTML = `<span class="method-badge">POST</span><span class="status-badge">${escapeHTML(t("selection.waiting"))}</span><code>${escapeHTML(t("selection.prompt"))}</code>`;
+    elements.requestContent.innerHTML = `<div class="notice">${escapeHTML(t("notices.noRequest"))}</div>`;
+    elements.responseContent.innerHTML = `<div class="notice">${escapeHTML(t("notices.noResponse"))}</div>`;
+    return;
+  }
+  const item = state.selected;
+  const statusClass = item.status >= 200 && item.status < 400 ? "success" : "";
+  elements.selectionSummary.innerHTML = `<span class="method-badge">${escapeHTML(item.method)}</span><span class="status-badge ${statusClass}">${escapeHTML(item.status || formatState(item.state))}</span><code>${escapeHTML(item.url)}</code>`;
+  elements.requestContent.innerHTML = renderPayload(item.request, state.tabs.request);
+  elements.responseContent.innerHTML = renderPayload(item.response, state.tabs.response);
+}
+
+function renderDetailError(error) {
+  elements.requestContent.innerHTML = `<div class="notice error">${escapeHTML(error.message)}</div>`;
+  elements.responseContent.innerHTML = `<div class="notice error">${escapeHTML(error.message)}</div>`;
+}
+
+function renderPayload(payload, tab) {
+  if (!payload) return `<div class="notice">${escapeHTML(t("notices.noContent"))}</div>`;
+  if (tab === "headers") return renderHeaders(payload.headers);
+  if (tab === "frames") return renderFrames(payload.frames);
+  if (tab === "raw") {
+    const body = payload.rawHex ? formatHex(payload.rawHex) : t("notices.noRaw");
+    return `<pre class="hex-view">${escapeHTML(body)}</pre>${renderTruncated(payload.rawTruncated)}`;
+  }
+  if (payload.decodedJson) {
+    return `<pre class="code-view">${escapeHTML(payload.decodedJson)}</pre>${renderDecodeError(payload.decodeError)}${renderTruncated(payload.rawTruncated)}`;
+  }
+  if (payload.frames?.length) return renderFrames(payload.frames);
+  if (payload.decodeError) return `<div class="notice error">${escapeHTML(payload.decodeError)}</div>`;
+  return `<div class="notice">${escapeHTML(t("notices.noBody"))}</div>`;
+}
+
+function renderHeaders(headers = []) {
+  const items = Array.isArray(headers) ? headers : [];
+  if (!items.length) return `<div class="notice">${escapeHTML(t("notices.noHeaders"))}</div>`;
+  return `<table class="headers-table"><tbody>${items
+    .map((header) => `<tr><th>${escapeHTML(header.name)}</th><td>${escapeHTML(header.value)}</td></tr>`)
+    .join("")}</tbody></table>`;
+}
+
+function renderFrames(frames = []) {
+  const items = Array.isArray(frames) ? frames : [];
+  if (!items.length) return `<div class="notice">${escapeHTML(t("notices.noFrames"))}</div>`;
+  return `<div class="frame-list">${items
+    .map((frame) => {
+      const kind = frame.kind || frame.messageType || t("notices.unknown");
+      const flags = `0x${Number(frame.flags || 0).toString(16).padStart(2, "0")}`;
+      const content = frame.json
+        ? `<pre class="code-view">${escapeHTML(frame.json)}</pre>`
+        : `<pre class="hex-view">${escapeHTML(formatHex(frame.rawHex || ""))}</pre>`;
+      return `<details class="frame-item"${frame.index === items.length - 1 ? " open" : ""}>
+        <summary>
+          <span class="frame-index">#${frame.index}</span>
+          <span class="frame-kind" title="${escapeHTML(kind)}">${escapeHTML(kind)}</span>
+          <span class="frame-size">${formatBytes(frame.length)}</span>
+          <span class="frame-flags">${flags}${frame.compressed ? " gzip" : ""}</span>
+        </summary>
+        ${frame.error ? `<div class="frame-error">${escapeHTML(frame.error)}</div>` : content}
+      </details>`;
+    })
+    .join("")}</div>`;
+}
+
+function renderDecodeError(error) {
+  return error ? `<div class="frame-error">${escapeHTML(error)}</div>` : "";
+}
+
+function renderTruncated(truncated) {
+  return truncated ? `<div class="truncated-notice">${escapeHTML(t("notices.truncated"))}</div>` : "";
+}
+
+function formatState(value) {
+  const key = {
+    pending: "state.pending",
+    streaming: "state.streaming",
+    completed: "state.completed",
+    error: "state.error",
+  }[value];
+  return key ? t(key) : value || "-";
+}
+
+function currentCopyText(side) {
+  const payload = state.selected?.[side];
+  if (!payload) return "";
+  const tab = state.tabs[side];
+  if (tab === "headers") return (payload.headers || []).map((item) => `${item.name}: ${item.value}`).join("\n");
+  if (tab === "raw") return payload.rawHex || "";
+  if (tab === "frames") return (payload.frames || []).map((frame) => frame.json || frame.rawHex || frame.error || "").join("\n\n");
+  return payload.decodedJson || "";
+}
+
+function formatHex(value) {
+  const hex = String(value || "").replace(/[^0-9a-f]/gi, "");
+  const lines = [];
+  for (let index = 0; index < hex.length; index += 32) {
+    const chunk = hex.slice(index, index + 32);
+    const bytes = chunk.match(/.{1,2}/g) || [];
+    lines.push(`${(index / 2).toString(16).padStart(8, "0")}  ${bytes.join(" ")}`);
+  }
+  return lines.join("\n");
+}
+
+function formatBytes(value) {
+  const bytes = Number(value || 0);
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function formatDuration(value) {
+  const milliseconds = Number(value || 0);
+  if (milliseconds < 1000) return `${milliseconds} ms`;
+  return `${(milliseconds / 1000).toFixed(1)} s`;
+}
+
+function escapeHTML(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+elements.requestList.addEventListener("click", async (event) => {
+  const row = event.target.closest("tr[data-id]");
+  if (!row) return;
+  state.selectedId = row.dataset.id;
+  state.selected = null;
+  renderList();
+  renderDetail();
+  await refreshDetail(state.selectedId);
+});
+
+elements.searchInput.addEventListener("input", (event) => {
+  state.search = event.target.value;
+  renderList();
+});
+
+elements.requestIdInput.addEventListener("input", (event) => {
+  state.requestId = event.target.value;
+  renderList();
+});
+
+elements.endpointFilter.addEventListener("click", (event) => {
+  const button = event.target.closest("button[data-value]");
+  if (!button) return;
+  state.endpoint = button.dataset.value;
+  for (const item of elements.endpointFilter.querySelectorAll("button")) {
+    item.classList.toggle("active", item === button);
+  }
+  renderList();
+});
+
+elements.sortOrder.addEventListener("click", (event) => {
+  const button = event.target.closest("button[data-value]");
+  if (!button) return;
+  state.sortOrder = button.dataset.value;
+  for (const item of elements.sortOrder.querySelectorAll("button")) {
+    item.classList.toggle("active", item === button);
+  }
+  renderList();
+});
+
+document.querySelectorAll(".payload-panel").forEach((panel) => {
+  panel.querySelector(".tabs").addEventListener("click", (event) => {
+    const button = event.target.closest("button[data-tab]");
+    if (!button) return;
+    const side = panel.dataset.side;
+    state.tabs[side] = button.dataset.tab;
+    panel.querySelectorAll(".tabs button").forEach((item) => item.classList.toggle("active", item === button));
+    renderDetail();
+  });
+});
+
+document.querySelectorAll("[data-copy-side]").forEach((button) => {
+  button.addEventListener("click", async () => {
+    const text = currentCopyText(button.dataset.copySide);
+    if (!text) return;
+    await navigator.clipboard.writeText(text);
+    button.textContent = t("actions.copied");
+    window.setTimeout(() => {
+      button.textContent = t("actions.copy");
+    }, 900);
+  });
+});
+
+function renderPauseState() {
+  elements.pauseButton.textContent = state.paused ? "▶" : "Ⅱ";
+  const actionKey = state.paused ? "actions.resume" : "actions.pause";
+  elements.pauseButton.title = t(actionKey);
+  elements.pauseButton.setAttribute("aria-label", t(actionKey));
+}
+
+elements.pauseButton.addEventListener("click", async () => {
+  state.paused = !state.paused;
+  elements.pauseButton.classList.toggle("active", state.paused);
+  renderPauseState();
+  setConnectionState(!state.paused, state.paused ? "connection.paused" : "connection.live");
+  if (!state.paused && state.pendingRefresh) {
+    state.pendingRefresh = false;
+    await refreshList();
+  }
+});
+
+function applyLocale() {
+  translateDocument();
+  elements.localeSelect.value = getLocale();
+  renderRuntimeStatus();
+  renderConnectionState();
+  renderPauseState();
+  renderList();
+  renderTrafficSummary();
+  renderDetail();
+}
+
+elements.localeSelect.addEventListener("change", (event) => {
+  setLocale(event.target.value);
+  applyLocale();
+});
+
+elements.clearButton.addEventListener("click", async () => {
+  await fetchJSON("/api/exchanges", { method: "DELETE" });
+  state.selectedId = null;
+  state.selected = null;
+  await refreshList();
+  renderDetail();
+});
+
+let draggingSplitter = false;
+elements.splitter.addEventListener("pointerdown", (event) => {
+  draggingSplitter = true;
+  elements.splitter.classList.add("dragging");
+  elements.splitter.setPointerCapture(event.pointerId);
+});
+
+elements.splitter.addEventListener("pointermove", (event) => {
+  if (!draggingSplitter) return;
+  const bounds = elements.workspace.getBoundingClientRect();
+  const top = Math.max(180, Math.min(bounds.height - 225, event.clientY - bounds.top));
+  elements.workspace.style.gridTemplateRows = `${top}px 5px minmax(220px, 1fr)`;
+});
+
+elements.splitter.addEventListener("pointerup", () => {
+  draggingSplitter = false;
+  elements.splitter.classList.remove("dragging");
+});
+
+async function bootstrap() {
+  applyLocale();
+  renderDetail();
+  try {
+    await Promise.all([loadStatus(), refreshList()]);
+    connectEvents();
+  } catch (error) {
+    setConnectionState(false, "connection.connectFailed", { message: error.message });
+  }
+}
+
+void bootstrap();
@@ -0,0 +1,178 @@
+const SOURCE_LOCALE = "zh-CN";
+const DEFAULT_LOCALE = "en-US";
+const STORAGE_KEY = "cursor-proxy-debugger:locale:v1";
+const SUPPORTED_LOCALES = [SOURCE_LOCALE, DEFAULT_LOCALE];
+
+const messages = {
+  "zh-CN": {
+    "app.title": "Cursor 协议调试器",
+    "status.connecting": "正在连接",
+    "status.running": "代理运行中",
+    "status.stopped": "代理已停止",
+    "actions.downloadCA": "下载代理 CA 证书",
+    "actions.caCertificate": "CA 证书",
+    "actions.pause": "暂停界面更新",
+    "actions.resume": "继续界面更新",
+    "actions.clear": "清空",
+    "actions.copy": "复制",
+    "actions.copied": "已复制",
+    "language.label": "界面语言",
+    "filters.region": "请求过滤器",
+    "filters.urlPlaceholder": "过滤 URL、请求类型或状态",
+    "filters.requestIdPlaceholder": "按 Request ID 过滤",
+    "filters.endpoint": "接口过滤",
+    "filters.all": "全部",
+    "filters.sort": "排序方向",
+    "filters.ascending": "正序",
+    "filters.descending": "倒序",
+    "count.requests": "{count} 条",
+    "table.url": "网址",
+    "table.message": "消息",
+    "table.method": "方法",
+    "table.status": "状态",
+    "table.response": "响应",
+    "table.duration": "耗时",
+    "empty.waitingForCursor": "等待来自 Cursor 的请求",
+    "splitter.resize": "调整详情区域高度",
+    "selection.waiting": "等待选择",
+    "selection.prompt": "选择一条请求查看详情",
+    "panel.request": "请求",
+    "panel.response": "响应",
+    "panel.requestDetails": "请求详情",
+    "panel.responseDetails": "响应详情",
+    "tabs.headers": "标头",
+    "tabs.body": "正文",
+    "tabs.frames": "帧",
+    "tabs.raw": "原始",
+    "notices.noRequest": "暂无请求内容",
+    "notices.noResponse": "暂无响应内容",
+    "notices.noContent": "暂无内容",
+    "notices.noRaw": "暂无原始数据",
+    "notices.noBody": "暂无可显示的正文",
+    "notices.noHeaders": "暂无标头",
+    "notices.noFrames": "尚未收到完整帧",
+    "notices.unknown": "未识别",
+    "notices.truncated": "原始正文已达到本地抓取上限，转发内容未被截断",
+    "connection.live": "实时连接中",
+    "connection.retrying": "实时连接正在重试",
+    "connection.refreshFailed": "刷新失败：{message}",
+    "connection.paused": "界面更新已暂停",
+    "connection.connectFailed": "连接失败：{message}",
+    "state.pending": "等待中",
+    "state.streaming": "传输中",
+    "state.completed": "已完成",
+    "state.error": "错误",
+  },
+  "en-US": {
+    "app.title": "Cursor Protocol Debugger",
+    "status.connecting": "Connecting",
+    "status.running": "Proxy running",
+    "status.stopped": "Proxy stopped",
+    "actions.downloadCA": "Download proxy CA certificate",
+    "actions.caCertificate": "CA Certificate",
+    "actions.pause": "Pause UI updates",
+    "actions.resume": "Resume UI updates",
+    "actions.clear": "Clear",
+    "actions.copy": "Copy",
+    "actions.copied": "Copied",
+    "language.label": "Interface language",
+    "filters.region": "Request filters",
+    "filters.urlPlaceholder": "Filter by URL, message type, or status",
+    "filters.requestIdPlaceholder": "Filter by Request ID",
+    "filters.endpoint": "Endpoint filter",
+    "filters.all": "All",
+    "filters.sort": "Sort order",
+    "filters.ascending": "Oldest first",
+    "filters.descending": "Newest first",
+    "count.requests": "{count} requests",
+    "table.url": "URL",
+    "table.message": "Message",
+    "table.method": "Method",
+    "table.status": "Status",
+    "table.response": "Response",
+    "table.duration": "Duration",
+    "empty.waitingForCursor": "Waiting for requests from Cursor",
+    "splitter.resize": "Resize details area",
+    "selection.waiting": "No selection",
+    "selection.prompt": "Select a request to inspect its details",
+    "panel.request": "Request",
+    "panel.response": "Response",
+    "panel.requestDetails": "Request details",
+    "panel.responseDetails": "Response details",
+    "tabs.headers": "Headers",
+    "tabs.body": "Body",
+    "tabs.frames": "Frames",
+    "tabs.raw": "Raw",
+    "notices.noRequest": "No request content",
+    "notices.noResponse": "No response content",
+    "notices.noContent": "No content",
+    "notices.noRaw": "No raw data",
+    "notices.noBody": "No body available",
+    "notices.noHeaders": "No headers",
+    "notices.noFrames": "No complete frames received yet",
+    "notices.unknown": "Unknown",
+    "notices.truncated": "Raw body reached the local capture limit; forwarded data was not truncated",
+    "connection.live": "Live connection",
+    "connection.retrying": "Reconnecting live updates",
+    "connection.refreshFailed": "Refresh failed: {message}",
+    "connection.paused": "UI updates paused",
+    "connection.connectFailed": "Connection failed: {message}",
+    "state.pending": "Pending",
+    "state.streaming": "Streaming",
+    "state.completed": "Completed",
+    "state.error": "Error",
+  },
+};
+
+function matchLocale(locale) {
+  const normalized = String(locale || "").trim().replaceAll("_", "-").toLowerCase();
+  if (!normalized) return "";
+  const exact = SUPPORTED_LOCALES.find((candidate) => candidate.toLowerCase() === normalized);
+  if (exact) return exact;
+  return normalized.split("-")[0] === "zh" ? SOURCE_LOCALE : normalized.split("-")[0] === "en" ? DEFAULT_LOCALE : "";
+}
+
+function resolveInitialLocale() {
+  const stored = matchLocale(window.localStorage.getItem(STORAGE_KEY));
+  if (stored) return stored;
+  for (const candidate of navigator.languages || [navigator.language]) {
+    const matched = matchLocale(candidate);
+    if (matched) return matched;
+  }
+  return DEFAULT_LOCALE;
+}
+
+let currentLocale = resolveInitialLocale();
+
+export function getLocale() {
+  return currentLocale;
+}
+
+export function t(key, values = {}) {
+  const template = messages[currentLocale]?.[key] || messages[SOURCE_LOCALE][key] || key;
+  return template.replace(/\{(\w+)\}/g, (_match, name) => String(values[name] ?? ""));
+}
+
+export function translateDocument(root = document) {
+  document.documentElement.lang = currentLocale;
+  document.title = t("app.title");
+  for (const element of root.querySelectorAll("[data-i18n]")) {
+    element.textContent = t(element.dataset.i18n);
+  }
+  for (const [attribute, dataAttribute] of [
+    ["aria-label", "i18nAriaLabel"],
+    ["placeholder", "i18nPlaceholder"],
+    ["title", "i18nTitle"],
+  ]) {
+    for (const element of root.querySelectorAll(`[data-${dataAttribute.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}]`)) {
+      element.setAttribute(attribute, t(element.dataset[dataAttribute]));
+    }
+  }
+}
+
+export function setLocale(locale) {
+  currentLocale = matchLocale(locale) || DEFAULT_LOCALE;
+  window.localStorage.setItem(STORAGE_KEY, currentLocale);
+  translateDocument();
+  return currentLocale;
+}
@@ -0,0 +1,125 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark" />
+    <title>Cursor 协议调试器</title>
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <body>
+    <div id="app" class="app-shell">
+      <header class="topbar">
+        <div class="brand">
+          <span class="brand-mark" aria-hidden="true"></span>
+          <strong data-i18n="app.title">Cursor 协议调试器</strong>
+        </div>
+        <div class="runtime-status" aria-live="polite">
+          <span id="status-dot" class="status-dot"></span>
+          <span id="status-text" data-i18n="status.connecting">正在连接</span>
+          <code id="proxy-address"></code>
+        </div>
+        <div class="toolbar-actions">
+          <label class="locale-picker">
+            <span class="visually-hidden" data-i18n="language.label">界面语言</span>
+            <select id="locale-select" aria-label="界面语言" title="界面语言" data-i18n-aria-label="language.label" data-i18n-title="language.label">
+              <option value="zh-CN">中文</option>
+              <option value="en-US">EN</option>
+            </select>
+          </label>
+          <a class="button secondary" href="/api/ca.crt" title="下载代理 CA 证书" data-i18n="actions.caCertificate" data-i18n-title="actions.downloadCA">CA 证书</a>
+          <button id="pause-button" class="icon-button" type="button" title="暂停界面更新" aria-label="暂停界面更新" data-i18n-title="actions.pause" data-i18n-aria-label="actions.pause">Ⅱ</button>
+          <button id="clear-button" class="button danger" type="button" data-i18n="actions.clear">清空</button>
+        </div>
+      </header>
+
+      <section class="filterbar" aria-label="请求过滤器" data-i18n-aria-label="filters.region">
+        <div class="search-box url-filter">
+          <span aria-hidden="true">⌕</span>
+          <input id="search-input" type="search" placeholder="过滤 URL、请求类型或状态" data-i18n-placeholder="filters.urlPlaceholder" autocomplete="off" />
+        </div>
+        <div class="search-box request-id-filter">
+          <span aria-hidden="true">⌕</span>
+          <input id="request-id-input" type="search" placeholder="按 Request ID 过滤" data-i18n-placeholder="filters.requestIdPlaceholder" autocomplete="off" />
+        </div>
+        <div id="endpoint-filter" class="segmented-control" role="group" aria-label="接口过滤" data-i18n-aria-label="filters.endpoint">
+          <button class="active" type="button" data-value="all" data-i18n="filters.all">全部</button>
+          <button type="button" data-value="runsse">RunSSE</button>
+          <button type="button" data-value="bidiappend">BidiAppend</button>
+        </div>
+        <div id="sort-order" class="segmented-control sort-control" role="group" aria-label="排序方向" data-i18n-aria-label="filters.sort">
+          <button type="button" data-value="asc" data-i18n="filters.ascending">正序</button>
+          <button class="active" type="button" data-value="desc" data-i18n="filters.descending">倒序</button>
+        </div>
+        <span id="request-count" class="request-count">0 条</span>
+      </section>
+
+      <main id="workspace" class="workspace">
+        <section class="request-list-pane">
+          <table class="request-table">
+            <thead>
+              <tr>
+                <th class="status-column"></th>
+                <th class="index-column">#</th>
+                <th data-i18n="table.url">网址</th>
+                <th class="request-id-column">Request ID</th>
+                <th class="kind-column" data-i18n="table.message">消息</th>
+                <th class="method-column" data-i18n="table.method">方法</th>
+                <th class="code-column" data-i18n="table.status">状态</th>
+                <th class="size-column" data-i18n="table.response">响应</th>
+                <th class="time-column" data-i18n="table.duration">耗时</th>
+              </tr>
+            </thead>
+            <tbody id="request-list"></tbody>
+          </table>
+          <div id="empty-state" class="empty-state" data-i18n="empty.waitingForCursor">等待来自 Cursor 的请求</div>
+        </section>
+
+        <div id="horizontal-splitter" class="horizontal-splitter" role="separator" aria-label="调整详情区域高度" data-i18n-aria-label="splitter.resize"></div>
+
+        <section id="detail-pane" class="detail-pane">
+          <div id="selection-summary" class="selection-summary">
+            <span class="method-badge">POST</span>
+            <span class="status-badge" data-i18n="selection.waiting">等待选择</span>
+            <code data-i18n="selection.prompt">选择一条请求查看详情</code>
+          </div>
+          <div class="detail-columns">
+            <section class="payload-panel" data-side="request">
+              <div class="panel-header">
+                <strong data-i18n="panel.request">请求</strong>
+                <nav class="tabs" aria-label="请求详情" data-i18n-aria-label="panel.requestDetails">
+                  <button type="button" data-tab="headers" data-i18n="tabs.headers">标头</button>
+                  <button type="button" data-tab="body" class="active" data-i18n="tabs.body">正文</button>
+                  <button type="button" data-tab="frames" data-i18n="tabs.frames">帧</button>
+                  <button type="button" data-tab="raw" data-i18n="tabs.raw">原始</button>
+                </nav>
+                <button class="copy-button" type="button" data-copy-side="request" title="复制" data-i18n="actions.copy" data-i18n-title="actions.copy">复制</button>
+              </div>
+              <div id="request-content" class="panel-content"></div>
+            </section>
+            <section class="payload-panel" data-side="response">
+              <div class="panel-header">
+                <strong data-i18n="panel.response">响应</strong>
+                <nav class="tabs" aria-label="响应详情" data-i18n-aria-label="panel.responseDetails">
+                  <button type="button" data-tab="headers" data-i18n="tabs.headers">标头</button>
+                  <button type="button" data-tab="body" data-i18n="tabs.body">正文</button>
+                  <button type="button" data-tab="frames" class="active" data-i18n="tabs.frames">帧</button>
+                  <button type="button" data-tab="raw" data-i18n="tabs.raw">原始</button>
+                </nav>
+                <button class="copy-button" type="button" data-copy-side="response" title="复制" data-i18n="actions.copy" data-i18n-title="actions.copy">复制</button>
+              </div>
+              <div id="response-content" class="panel-content"></div>
+            </section>
+          </div>
+        </section>
+      </main>
+
+      <footer class="statusbar">
+        <span id="connection-label" data-i18n="connection.live">实时连接中</span>
+        <span id="traffic-summary">↑ 0 B　↓ 0 B</span>
+        <span id="target-host"></span>
+      </footer>
+    </div>
+    <script type="module" src="/app.js"></script>
+  </body>
+</html>
@@ -0,0 +1,921 @@
+:root {
+  color-scheme: dark;
+  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #171818;
+  color: #dedfdd;
+  font-synthesis: none;
+  --surface-0: #171818;
+  --surface-1: #1d1f1f;
+  --surface-2: #242626;
+  --surface-3: #2c2f2f;
+  --border: #343737;
+  --border-strong: #454949;
+  --muted: #8d9390;
+  --text: #dedfdd;
+  --accent: #4ea58b;
+  --accent-soft: #25473d;
+  --cyan: #55a8ba;
+  --orange: #c88762;
+  --danger: #c56d65;
+  --selection: #245b73;
+  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+body {
+  background: var(--surface-0);
+}
+
+button,
+input,
+select,
+a {
+  font: inherit;
+  letter-spacing: 0;
+}
+
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--cyan);
+  outline-offset: -1px;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-rows: 48px 46px minmax(0, 1fr) 26px;
+  min-width: 760px;
+  background: var(--surface-0);
+}
+
+.topbar,
+.filterbar,
+.statusbar {
+  display: flex;
+  align-items: center;
+  border-color: var(--border);
+  background: var(--surface-1);
+}
+
+.topbar {
+  justify-content: space-between;
+  gap: 18px;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.brand,
+.runtime-status,
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.brand {
+  gap: 9px;
+  white-space: nowrap;
+}
+
+.brand strong {
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.brand-mark {
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--accent);
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 2px var(--surface-1);
+  background: var(--accent);
+}
+
+.runtime-status {
+  justify-content: center;
+  gap: 7px;
+  min-width: 240px;
+  color: #bec3c0;
+  font-size: 12px;
+}
+
+.runtime-status code {
+  overflow: hidden;
+  max-width: 260px;
+  color: var(--muted);
+  font-family: var(--mono);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #7d8380;
+}
+
+.status-dot.online {
+  background: #42bd79;
+  box-shadow: 0 0 0 3px rgb(66 189 121 / 14%);
+}
+
+.toolbar-actions {
+  justify-content: flex-end;
+  gap: 7px;
+}
+
+.locale-picker {
+  display: flex;
+}
+
+.locale-picker select {
+  width: 58px;
+  height: 29px;
+  border: 1px solid var(--border-strong);
+  border-radius: 5px;
+  padding: 0 6px;
+  background: var(--surface-2);
+  color: var(--text);
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.button,
+.icon-button,
+.copy-button {
+  height: 29px;
+  border: 1px solid var(--border-strong);
+  border-radius: 5px;
+  background: var(--surface-2);
+  color: var(--text);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.button:hover,
+.icon-button:hover,
+.copy-button:hover {
+  background: var(--surface-3);
+}
+
+.button.danger:hover {
+  border-color: #744640;
+  color: #f2b0aa;
+}
+
+.icon-button {
+  width: 31px;
+  padding: 0;
+  font-family: var(--mono);
+  font-weight: 700;
+}
+
+.icon-button.active {
+  border-color: var(--orange);
+  color: #f1bb98;
+}
+
+.filterbar {
+  gap: 10px;
+  padding: 7px 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 260px;
+  max-width: 640px;
+  height: 31px;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  background: #191b1b;
+  color: var(--muted);
+}
+
+.search-box > span {
+  padding-left: 9px;
+  font-size: 17px;
+}
+
+.search-box input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: 0;
+  padding: 0 9px;
+  outline: 0;
+  background: transparent;
+  color: var(--text);
+  font-size: 12px;
+}
+
+.search-box input::placeholder {
+  color: #6f7572;
+}
+
+.url-filter {
+  min-width: 280px;
+  max-width: 420px;
+}
+
+.request-id-filter {
+  flex: 0 1 320px;
+  min-width: 220px;
+  max-width: 340px;
+}
+
+.segmented-control {
+  display: flex;
+  height: 31px;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.segmented-control button {
+  min-width: 62px;
+  border: 0;
+  border-right: 1px solid var(--border);
+  padding: 0 10px;
+  background: #1b1d1d;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.segmented-control button:last-child {
+  border-right: 0;
+}
+
+.segmented-control button.active {
+  background: var(--accent-soft);
+  color: #bce8d9;
+}
+
+.sort-control button {
+  min-width: 52px;
+}
+
+.request-count {
+  margin-left: auto;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.workspace {
+  display: grid;
+  grid-template-rows: minmax(180px, 52%) 5px minmax(220px, 48%);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.request-list-pane {
+  position: relative;
+  min-height: 0;
+  overflow: auto;
+  background: #181a1a;
+}
+
+.request-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  font-size: 12px;
+}
+
+.request-table thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #202222;
+}
+
+.request-table th,
+.request-table td {
+  height: 30px;
+  border-right: 1px solid #2c2f2f;
+  border-bottom: 1px solid #292c2c;
+  padding: 0 9px;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.request-table th {
+  color: #9da29f;
+  font-weight: 550;
+}
+
+.request-table tbody tr {
+  cursor: default;
+}
+
+.request-table tbody tr:hover {
+  background: #222525;
+}
+
+.request-table tbody tr.selected {
+  background: var(--selection);
+  color: #f3f8f8;
+}
+
+.request-table code {
+  font-family: var(--mono);
+}
+
+.status-column {
+  width: 30px;
+}
+
+.index-column {
+  width: 54px;
+}
+
+.request-id-column {
+  width: 250px;
+}
+
+.kind-column {
+  width: 180px;
+}
+
+.method-column {
+  width: 72px;
+}
+
+.code-column {
+  width: 66px;
+}
+
+.size-column {
+  width: 86px;
+}
+
+.time-column {
+  width: 74px;
+}
+
+.row-state {
+  display: block;
+  width: 8px;
+  height: 8px;
+  margin: auto;
+  border-radius: 50%;
+  background: #7c8380;
+}
+
+.row-state.streaming {
+  background: #45ba77;
+}
+
+.row-state.completed {
+  background: var(--cyan);
+}
+
+.row-state.error {
+  background: var(--danger);
+}
+
+.method-text {
+  color: #61b9df;
+  font-family: var(--mono);
+  font-weight: 650;
+}
+
+.status-text.success {
+  color: #68c991;
+}
+
+.status-text.error {
+  color: #e18b83;
+}
+
+.kind-text {
+  color: #d3a17f;
+  font-family: var(--mono);
+}
+
+.request-id-text {
+  color: #8bc2cc;
+}
+
+.empty-state {
+  position: absolute;
+  inset: 34px 0 0;
+  display: grid;
+  place-items: center;
+  color: #686e6b;
+  font-size: 13px;
+}
+
+.empty-state.hidden {
+  display: none;
+}
+
+.horizontal-splitter {
+  cursor: row-resize;
+  background: #343737;
+}
+
+.horizontal-splitter:hover,
+.horizontal-splitter.dragging {
+  background: var(--cyan);
+}
+
+.detail-pane {
+  display: grid;
+  grid-template-rows: 38px minmax(0, 1fr);
+  min-height: 0;
+  background: var(--surface-0);
+}
+
+.selection-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--border);
+  background: #1b1d1d;
+}
+
+.selection-summary code {
+  overflow: hidden;
+  color: #aeb4b1;
+  font-family: var(--mono);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.method-badge,
+.status-badge,
+.frame-badge {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  border: 1px solid var(--border-strong);
+  border-radius: 4px;
+  padding: 0 7px;
+  font-family: var(--mono);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.method-badge {
+  border-color: #34667a;
+  color: #74c8e8;
+}
+
+.status-badge.success {
+  border-color: #3f7157;
+  color: #83d5a5;
+}
+
+.detail-columns {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  min-height: 0;
+}
+
+.payload-panel {
+  display: grid;
+  grid-template-rows: 36px minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+  border-right: 1px solid var(--border);
+}
+
+.payload-panel:last-child {
+  border-right: 0;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  border-bottom: 1px solid var(--border);
+  background: #202222;
+}
+
+.panel-header > strong {
+  padding: 0 10px;
+  color: #c9cdca;
+  font-size: 12px;
+}
+
+.tabs {
+  display: flex;
+  align-self: stretch;
+}
+
+.tabs button {
+  position: relative;
+  min-width: 46px;
+  border: 0;
+  padding: 0 9px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.tabs button:hover {
+  color: #d7dad8;
+}
+
+.tabs button.active {
+  color: #71c7e2;
+}
+
+.tabs button.active::after {
+  position: absolute;
+  right: 8px;
+  bottom: 0;
+  left: 8px;
+  height: 2px;
+  background: var(--cyan);
+  content: "";
+}
+
+.copy-button {
+  width: 48px;
+  height: 24px;
+  margin-right: 7px;
+  margin-left: auto;
+  font-size: 11px;
+}
+
+.panel-content {
+  min-height: 0;
+  overflow: auto;
+  background: #181a1a;
+}
+
+.code-view,
+.hex-view {
+  min-width: 100%;
+  min-height: 100%;
+  margin: 0;
+  padding: 12px 14px 30px;
+  color: #ccd1ce;
+  font: 11px/1.55 var(--mono);
+  tab-size: 2;
+  white-space: pre;
+}
+
+.hex-view {
+  color: #b6c2bd;
+}
+
+.headers-table {
+  width: 100%;
+  border-collapse: collapse;
+  font: 11px/1.4 var(--mono);
+}
+
+.headers-table th,
+.headers-table td {
+  border-bottom: 1px solid #292c2c;
+  padding: 7px 10px;
+  text-align: left;
+  vertical-align: top;
+}
+
+.headers-table th {
+  width: 38%;
+  color: #62b3cd;
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+
+.headers-table td {
+  color: #c5c9c6;
+  overflow-wrap: anywhere;
+}
+
+.frame-list {
+  min-width: 480px;
+}
+
+.frame-item {
+  border-bottom: 1px solid #292c2c;
+}
+
+.frame-item summary {
+  display: grid;
+  grid-template-columns: 58px minmax(150px, 1fr) 90px 82px;
+  align-items: center;
+  height: 32px;
+  padding: 0 10px;
+  color: #c5cac7;
+  cursor: pointer;
+  font: 11px var(--mono);
+  list-style: none;
+}
+
+.frame-item summary::-webkit-details-marker {
+  display: none;
+}
+
+.frame-item summary:hover {
+  background: #222525;
+}
+
+.frame-item[open] summary {
+  background: #242727;
+}
+
+.frame-index {
+  color: #747b77;
+}
+
+.frame-kind {
+  overflow: hidden;
+  color: #dfaa85;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.frame-size,
+.frame-flags {
+  color: #7faeb7;
+  text-align: right;
+}
+
+.frame-error {
+  margin: 10px 14px;
+  color: #ec968e;
+  font: 11px/1.5 var(--mono);
+}
+
+.notice {
+  padding: 14px;
+  color: #7d8581;
+  font: 12px/1.6 var(--mono);
+}
+
+.notice.error {
+  color: #df8b83;
+}
+
+.truncated-notice {
+  position: sticky;
+  bottom: 0;
+  padding: 5px 10px;
+  border-top: 1px solid #674f3f;
+  background: #3d3028;
+  color: #e5b28e;
+  font-size: 11px;
+}
+
+.statusbar {
+  justify-content: flex-end;
+  gap: 16px;
+  padding: 0 10px;
+  border-top: 1px solid var(--border);
+  color: #848b87;
+  font: 10px var(--mono);
+}
+
+.statusbar span:first-child {
+  margin-right: auto;
+}
+
+@media (max-width: 920px) {
+  .app-shell {
+    grid-template-rows: 48px 84px minmax(0, 1fr) 26px;
+    min-width: 0;
+  }
+
+  .filterbar {
+    align-content: center;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .url-filter,
+  .request-id-filter {
+    flex: 1 1 300px;
+    max-width: none;
+  }
+
+  .runtime-status code,
+  .kind-column,
+  .request-table td:nth-child(5) {
+    display: none;
+  }
+
+  .detail-columns {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(180px, 1fr) minmax(180px, 1fr);
+    overflow: auto;
+  }
+
+  .payload-panel {
+    min-height: 260px;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+@media (max-width: 640px) {
+  .app-shell {
+    grid-template-rows: 82px 122px minmax(0, 1fr) 26px;
+  }
+
+  .topbar {
+    position: relative;
+    align-content: center;
+    flex-wrap: wrap;
+    gap: 4px 10px;
+    padding: 8px 10px;
+  }
+
+  .brand {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .brand strong {
+    overflow: hidden;
+    font-size: 13px;
+    text-overflow: ellipsis;
+  }
+
+  .runtime-status {
+    order: 3;
+    justify-content: flex-start;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .runtime-status code {
+    display: block;
+    max-width: none;
+  }
+
+  .toolbar-actions {
+    gap: 4px;
+  }
+
+  .toolbar-actions .button {
+    padding: 0 7px;
+  }
+
+  .filterbar {
+    align-content: center;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 7px 10px;
+  }
+
+  .url-filter,
+  .request-id-filter {
+    flex: 0 0 100%;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+  }
+
+  .request-count {
+    order: 5;
+    margin-left: auto;
+  }
+
+  #endpoint-filter {
+    order: 3;
+    flex: 1;
+  }
+
+  .sort-control {
+    order: 4;
+    flex: 0 0 104px;
+  }
+
+  .segmented-control button {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .workspace {
+    grid-template-rows: minmax(150px, 40%) 5px minmax(260px, 60%);
+  }
+
+  .request-table th,
+  .request-table td {
+    padding: 0 6px;
+  }
+
+  .request-table .index-column,
+  .request-table th:nth-child(2),
+  .request-table td:nth-child(2),
+  .size-column,
+  .request-table th:nth-child(8),
+  .request-table td:nth-child(8),
+  .time-column,
+  .request-table th:nth-child(9),
+  .request-table td:nth-child(9) {
+    display: none;
+  }
+
+  .request-id-column {
+    width: 130px;
+  }
+
+  .method-column {
+    width: 58px;
+  }
+
+  .code-column {
+    width: 50px;
+  }
+
+  .selection-summary {
+    padding: 0 8px;
+  }
+
+  .detail-columns {
+    grid-template-rows: minmax(220px, 1fr) minmax(220px, 1fr);
+  }
+
+  .panel-header > strong {
+    width: 72px;
+    padding: 0 7px;
+    font-size: 11px;
+  }
+
+  .tabs {
+    overflow-x: auto;
+  }
+
+  .tabs button {
+    min-width: 42px;
+    padding: 0 6px;
+  }
+
+  .copy-button {
+    width: 42px;
+    margin-right: 4px;
+  }
+
+  .frame-list {
+    min-width: 0;
+  }
+
+  .frame-item summary {
+    grid-template-columns: 42px minmax(100px, 1fr) 62px 72px;
+    padding: 0 7px;
+  }
+
+  .statusbar {
+    gap: 8px;
+  }
+
+  #target-host {
+    display: none;
+  }
+}