@buoy-gg/network 7.0.41 → 7.0.42

package/lib/commonjs/network/components/NetworkEventDetailView.web.js

@@ -1,1504 +1,35 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NetworkEventDetailView = void 0;
-var _react = require("react");
-var _formatGraphQLVariables = require("../utils/formatGraphQLVariables");
-var _networkBodyResolver = require("../sync/networkBodyResolver");
-var _DataViewer = require("./DataViewer.web");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * NetworkEventDetailView.web — DOM twin of NetworkEventDetailView.tsx.
- *
- * The request DETAIL inspector: method/status/duration header row, URL
- * breakdown (with collapsible query parameters), error box, timing card
- * (Started + Sent/Received + the two real timing-phase bars), collapsible
- * Request/Response Headers, Request/Response Body (JSON trees, response
- * expanded on arrival), and the Filter Options section — same section order,
- * labels, defaults and styling as native. The data layer is REUSED, not
- * forked: `useNetworkBodyResolver` (plain React context), `formatGraphQLDisplay`
- * and the `NetworkEvent`/`NetworkTimings` types are the same modules native
- * uses; `showBodies` carries the same settle-window contract (see the native
- * file's prop doc) with the same fixed-height `BodyDeferred` stand-in.
- *
- * shared-ui RN chrome is replicated as DOM with provenance (web consumers
- * resolve `@buoy-gg/shared-ui` to a minimal shim):
- *  - `macOSColors` — inlined verbatim subset from
- *    shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts.
- *  - Icons — inline lucide SVGs (shared-ui's icons are lucide re-exports).
- *  - `formatBytes` / `formatDuration` — copied verbatim from
- *    shared/src/utils/formatting/dataFormatting.ts (not in the web shim).
- *  - `formatHttpStatus` — copied verbatim from
- *    shared/src/utils/formatting/httpFormatting.ts; its `gameUIColors` are the
- *    macOS theme, so the color table below carries the same resolved values.
- *  - `formatRelativeTime` — copied verbatim from
- *    shared/src/utils/time/formatRelativeTime.ts.
- *  - `DataViewer` / `InlineCopyButton` — DOM twins in ./DataViewer.web.
- *
- * Intentional deviations (all logged):
- *  - License gating isn't part of the web port: the view renders the Pro path
- *    (`isPro = true` everywhere native branches) — copy buttons are real
- *    clipboard copies, never upgrade prompts — and shared-ui's `UpgradeModal`
- *    is therefore not mounted (`useFeatureGate` lives behind @buoy-gg/license,
- *    outside the web port).
- *  - Copy affordances use `navigator.clipboard` via the CopyButton twin; the
- *    full-request copy keeps native's LAZY function value so no markdown is
- *    built per render.
- *  - Relative time ("12s ago") refreshes on re-render only — native mounts a
- *    `TickProvider` at the modal root; the web port's live-event subscription
- *    re-renders an open detail on every store update, which covers it in
- *    practice for in-flight requests.
- *
- * @platform React DOM Web
- */
-
-// =============================
-// Native palettes (provenance)
-// =============================
-
-/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */const macOSColors = {
-  background: {
-    base: "#0A0A0C",
-    card: "#1A1A1C",
-    hover: "#1D1D1F",
-    input: "#26262A"
-  },
-  border: {
-    default: "#2D2D2F"
-  },
-  text: {
-    primary: "#F5F5F7",
-    secondary: "#A1A1A6",
-    muted: "#8E8E93"
-  },
-  semantic: {
-    success: "#34C759",
-    error: "#FF453A",
-    errorBackground: "rgba(255, 69, 58, 0.15)",
-    warning: "#FFEB3B",
-    warningBackground: "rgba(255, 235, 59, 0.15)",
-    info: "#00B8E6",
-    infoBackground: "rgba(0, 184, 230, 0.1)"
-  }
-};
-
-/**
- * Colour for the icons that merely LABEL a section (Sent/Received, the JSON
- * body glyphs) — same rationale as native.
- */
-const NEUTRAL_ICON = macOSColors.semantic.success;
-
-// =============================
-// Formatting utils (provenance: shared/src/utils — not in the web shim)
-// =============================
-
-/** shared/src/utils/formatting/dataFormatting.ts `formatBytes`, verbatim. */
-function formatBytes(bytes) {
-  if (bytes === undefined || bytes === null) return "N/A";
-  if (bytes === 0) return "0 B";
-  const k = 1024;
-  const sizes = ["B", "KB", "MB", "GB", "TB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
-}
-
-/** shared/src/utils/formatting/dataFormatting.ts `formatDuration`, verbatim. */
-function formatDuration(ms) {
-  if (ms === undefined || ms === null) return "N/A";
-  if (ms < 1000) return `${ms}ms`;
-  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
-  if (ms < 3600000) {
-    const minutes = Math.floor(ms / 60000);
-    const seconds = Math.floor(ms % 60000 / 1000);
-    return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
-  }
-  const hours = Math.floor(ms / 3600000);
-  const minutes = Math.floor(ms % 3600000 / 60000);
-  return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
-}
-
-/** shared/src/utils/time/formatRelativeTime.ts, verbatim. */
-function formatRelativeTime(timestamp, currentTime = Date.now()) {
-  const timestampMs = timestamp instanceof Date ? timestamp.getTime() : timestamp;
-  const seconds = Math.floor((currentTime - timestampMs) / 1000);
-  if (seconds < 0) return "just now";
-  if (seconds < 60) return seconds === 0 ? "just now" : `${seconds}s ago`;
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  return `${days}d ago`;
-}
-
-/**
- * shared/src/utils/formatting/httpFormatting.ts `formatHttpStatus`, verbatim —
- * its `gameUIColors` resolve to the macOS theme's semantic values (the same
- * `macOSColors.semantic` palette inlined above; muted = text.muted).
- */
-function formatHttpStatus(status) {
-  if (status >= 100 && status < 200) {
-    return {
-      text: String(status),
-      color: macOSColors.semantic.info,
-      meaning: "Informational"
-    };
-  }
-  if (status >= 200 && status < 300) {
-    const meanings = {
-      200: "OK",
-      201: "Created",
-      202: "Accepted",
-      204: "No Content",
-      206: "Partial Content"
-    };
-    return {
-      text: String(status),
-      color: macOSColors.semantic.success,
-      meaning: meanings[status] || "Success"
-    };
-  }
-  if (status >= 300 && status < 400) {
-    const meanings = {
-      301: "Moved Permanently",
-      302: "Found",
-      303: "See Other",
-      304: "Not Modified",
-      307: "Temporary Redirect",
-      308: "Permanent Redirect"
-    };
-    return {
-      text: String(status),
-      color: macOSColors.semantic.warning,
-      meaning: meanings[status] || "Redirect"
-    };
-  }
-  if (status >= 400 && status < 500) {
-    const meanings = {
-      400: "Bad Request",
-      401: "Unauthorized",
-      402: "Payment Required",
-      403: "Forbidden",
-      404: "Not Found",
-      405: "Method Not Allowed",
-      408: "Request Timeout",
-      409: "Conflict",
-      410: "Gone",
-      422: "Unprocessable Entity",
-      429: "Too Many Requests"
-    };
-    return {
-      text: String(status),
-      color: macOSColors.semantic.error,
-      meaning: meanings[status] || "Client Error"
-    };
-  }
-  if (status >= 500) {
-    const meanings = {
-      500: "Internal Server Error",
-      501: "Not Implemented",
-      502: "Bad Gateway",
-      503: "Service Unavailable",
-      504: "Gateway Timeout",
-      505: "HTTP Version Not Supported"
-    };
-    return {
-      text: String(status),
-      color: macOSColors.semantic.error,
-      meaning: meanings[status] || "Server Error"
-    };
-  }
-  return {
-    text: String(status),
-    color: macOSColors.text.muted,
-    meaning: "Unknown"
-  };
-}
-
-// =============================
-// Inline lucide icons (shared-ui icons are lucide re-exports)
-// =============================
-
-function Svg({
-  size = 14,
-  color = "currentColor",
-  children
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: color,
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    style: {
-      flexShrink: 0,
-      display: "block"
-    },
-    children: children
-  });
-}
-const Clock = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polyline", {
-    points: "12 6 12 12 16 14"
-  })]
-});
-const Upload = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polyline", {
-    points: "17 8 12 3 7 8"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "12",
-    x2: "12",
-    y1: "3",
-    y2: "15"
-  })]
-});
-const Download = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polyline", {
-    points: "7 10 12 15 17 10"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "12",
-    x2: "12",
-    y1: "15",
-    y2: "3"
-  })]
-});
-const AlertCircle = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "12",
-    x2: "12",
-    y1: "8",
-    y2: "12"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "12",
-    x2: "12.01",
-    y1: "16",
-    y2: "16"
-  })]
-});
-const ChevronDown = p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m6 9 6 6 6-6"
-  })
-});
-const ChevronUp = p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m18 15-6-6-6 6"
-  })
-});
-const Lock = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-    width: "18",
-    height: "11",
-    x: "3",
-    y: "11",
-    rx: "2",
-    ry: "2"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M7 11V7a5 5 0 0 1 10 0v4"
-  })]
-});
-const Unlock = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-    width: "18",
-    height: "11",
-    x: "3",
-    y: "11",
-    rx: "2",
-    ry: "2"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M7 11V7a5 5 0 0 1 9.9-1"
-  })]
-});
-const FileJson = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M14 2v4a2 2 0 0 0 2 2h4"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1"
-  })]
-});
-const Filter = p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("polygon", {
-    points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"
-  })
-});
-const Globe = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M2 12h20"
-  })]
-});
-const Link = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
-  })]
-});
-const FlaskConical = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M8.5 2h7"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M7 16h10"
-  })]
-});
-
-// =============================
-// View (structure mirrors the native file 1:1)
-// =============================
-
-/** Hoisted so the defaults don't mint a new Set/function per render (native). */
-const EMPTY_PATTERNS = new Set();
-const noop = () => {};
-/**
- * The measurable slice of a request's lifetime, as proportional bars.
- * Renders NOTHING when the interceptor couldn't measure it — same "absent,
- * not zeroed" rule as native. Only two phases, on purpose (see native).
- */
-const TimingPhases = ({
-  timings,
-  total
-}) => {
-  // Guard the divisor: a sub-millisecond request would otherwise divide by 0.
-  const span = Math.max(1, total);
-  const phases = [{
-    label: "Waiting (TTFB)",
-    hint: "incl. queue, DNS, TLS",
-    value: timings.ttfb,
-    color: macOSColors.semantic.warning
-  }, {
-    label: "Content download",
-    hint: undefined,
-    value: timings.download,
-    color: macOSColors.semantic.success
-  }];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: styles.phaseList,
-    children: phases.map(phase => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: styles.phaseRow,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: styles.phaseLabelGroup,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: styles.phaseLabel,
-          children: phase.label
-        }), phase.hint ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: styles.phaseHint,
-          children: phase.hint
-        }) : null]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: styles.phaseTrack,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            ...styles.phaseBar,
-            backgroundColor: phase.color,
-            // Floor so a 1ms phase is a visible tick; ceiling because ttfb
-            // can exceed event.duration (measured at different points).
-            width: `${Math.min(100, Math.max(1, phase.value / span * 100))}%`
-          }
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: styles.phaseValue,
-        children: formatDuration(phase.value)
-      })]
-    }, phase.label))
-  });
-};
-
-/**
- * Stand-in for a body tree while the prev/next cursor is still moving.
- * Fixed-height nothing — must cost ~0 and must not resize the scroll view as
- * the real tree swaps in (native rationale).
- */
-const BodyDeferred = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-  style: styles.bodyDeferred
-});
-
-// Component for collapsible sections matching Sentry style
-const CollapsibleSection = ({
-  title,
-  icon,
-  children,
-  defaultOpen = false,
-  count
-}) => {
-  const [isOpen, setIsOpen] = (0, _react.useState)(defaultOpen);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: styles.collapsibleSection,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-      type: "button",
-      style: styles.collapsibleHeader,
-      onClick: () => setIsOpen(!isOpen),
-      "aria-expanded": isOpen,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        style: styles.collapsibleTitle,
-        children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: styles.collapsibleTitleText,
-          children: title
-        }), count !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: styles.collapsibleCount,
-          children: count
-        }) : null]
-      }), isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronUp, {
-        size: 16,
-        color: macOSColors.text.secondary
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronDown, {
-        size: 16,
-        color: macOSColors.text.secondary
-      })]
-    }), isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: styles.collapsibleContent,
-      children: children
-    }) : null]
-  });
-};
-
-// URL breakdown component matching Sentry style
-const UrlBreakdown = ({
-  url,
-  operationName,
-  graphqlVariables,
-  requestClient
-}) => {
-  const parseUrl = urlString => {
-    try {
-      const urlObj = new URL(urlString);
-      const protocol = String(urlObj.protocol || "");
-      const host = String(urlObj.host || "");
-      const isSecure = protocol === "https:";
-      let pathname = String(urlObj.pathname || "");
-
-      // GraphQL requests format with arrow notation, matching React Query's
-      // key display: "GetPokemon › Sandshrew" (same pure util as native).
-      if (requestClient === "graphql" && operationName) {
-        const graphqlDisplay = (0, _formatGraphQLVariables.formatGraphQLDisplay)(operationName, graphqlVariables);
-        pathname = `${pathname} (${graphqlDisplay})`;
-      } else if (operationName) {
-        // Non-GraphQL requests with operation names (e.g., gRPC)
-        pathname = `${pathname} (${operationName})`;
-      }
-      const params = {};
-      const searchParams = urlObj.searchParams;
-      if (searchParams && typeof searchParams.forEach === "function") {
-        searchParams.forEach((value, key) => {
-          params[key] = value;
-        });
-      }
-      return {
-        protocol: protocol.replace(":", ""),
-        host,
-        pathname,
-        params: Object.keys(params).length > 0 ? params : null,
-        isSecure
-      };
-    } catch {
-      return {
-        protocol: "",
-        host: url,
-        pathname: "",
-        params: null,
-        isSecure: false
-      };
-    }
-  };
-
-  /**
-   * MUST be memoized — `params` is handed to DataViewer as its `data` prop,
-   * which the tree keys on by IDENTITY (same trap the native file documents).
-   */
-  const urlParts = (0, _react.useMemo)(() => parseUrl(url),
-  // parseUrl closes over the graphql/operation props, which are what change
-  // the derived pathname.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [url, requestClient, operationName, graphqlVariables]);
-  const [showParams, setShowParams] = (0, _react.useState)(false);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: styles.urlBreakdown,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: styles.urlRow,
-      children: [urlParts.isSecure ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Lock, {
-        size: 12,
-        color: macOSColors.semantic.success
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Unlock, {
-        size: 12,
-        color: macOSColors.semantic.warning
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: styles.urlDomain,
-        children: urlParts.host
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        style: styles.urlProtocol,
-        children: ["(", urlParts.protocol.toUpperCase(), ")"]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataViewer.InlineCopyButton, {
-        value: url,
-        buttonStyle: styles.copyButton
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: styles.urlPathRow,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        style: styles.urlPath,
-        children: [urlParts.pathname, urlParts.params ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          style: styles.urlQueryString,
-          children: ["?", new URLSearchParams(urlParts.params).toString()]
-        }) : null]
-      })
-    }), urlParts.params ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: styles.queryParamsCollapsible,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-        type: "button",
-        style: styles.queryParamsToggle,
-        onClick: () => setShowParams(!showParams),
-        "aria-expanded": showParams,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: styles.queryParamsToggleText,
-          children: "Query Parameters"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: {
-            ...styles.collapsibleCount,
-            flex: 1,
-            textAlign: "left"
-          },
-          children: Object.keys(urlParts.params).length
-        }), showParams ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronUp, {
-          size: 14,
-          color: macOSColors.text.secondary
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronDown, {
-          size: 14,
-          color: macOSColors.text.secondary
-        })]
-      }), showParams ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataViewer.DataViewer, {
-        title: "",
-        data: urlParts.params,
-        showTypeFilter: true,
-        rawMode: true,
-        initialExpanded: true
-      }) : null]
-    }) : null]
-  });
-};
-
-/**
- * Detailed inspector for a single network event — Sentry-style layout with
- * collapsible sections and quick copy affordances.
- *
- * MEMOIZED for the same two render paths as native: `useLiveNetworkEvent`
- * replays the same event object on re-subscribe, and host-root state changes
- * re-render the shell with the detail body unchanged.
- */
-const NetworkEventDetailView = exports.NetworkEventDetailView = /*#__PURE__*/(0, _react.memo)(function NetworkEventDetailView({
-  event,
-  ignoredPatterns = EMPTY_PATTERNS,
-  onTogglePattern = noop,
-  showBodies = true
-}) {
-  const status = event.status ? formatHttpStatus(event.status) : null;
-  const isPending = !event.status && !event.error;
-
-  // Large bodies are omitted from synced snapshots and fetched on demand
-  // through the resolver (plain React context — reused, not forked). In a
-  // webview port there is normally no resolver and bodies are always inline,
-  // so this is a no-op there — exactly like on the device.
-  const resolveBody = (0, _networkBodyResolver.useNetworkBodyResolver)();
-  // The explicit flag is authoritative (adapter v5+). The size>0 fallback keeps
-  // detail-on-demand working against a device on an older adapter, which marked
-  // a withheld body only by leaving `data` undefined with a non-zero size.
-  const requestBodyOmitted = event.requestData === undefined && (event.requestBodyOmitted === true || (event.requestSize ?? 0) > 0);
-  const responseBodyOmitted = event.responseData === undefined && (event.responseBodyOmitted === true || (event.responseSize ?? 0) > 0);
-  const headersOmitted = event.headersOmitted === true;
-  const [resolvedBody, setResolvedBody] = (0, _react.useState)(null);
-  const [isLoadingBody, setIsLoadingBody] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    setResolvedBody(null);
-    if (!resolveBody || !requestBodyOmitted && !responseBodyOmitted && !headersOmitted) {
-      setIsLoadingBody(false);
-      return;
-    }
-    let cancelled = false;
-    setIsLoadingBody(true);
-    resolveBody(event.id).then(body => {
-      if (!cancelled) setResolvedBody(body);
-    }).catch(() => {}).finally(() => {
-      if (!cancelled) setIsLoadingBody(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [event.id, resolveBody, requestBodyOmitted, responseBodyOmitted, headersOmitted]);
-
-  // Effective bodies: inline data when present, otherwise the lazily resolved
-  // body. `null`/`undefined` both collapse to undefined ("no body").
-  const requestData = event.requestData ?? resolvedBody?.requestData ?? undefined;
-  const responseData = event.responseData ?? resolvedBody?.responseData ?? undefined;
-  const requestHeaders = (headersOmitted ? resolvedBody?.requestHeaders : undefined) ?? event.requestHeaders;
-  const responseHeaders = (headersOmitted ? resolvedBody?.responseHeaders : undefined) ?? event.responseHeaders;
-
-  // Generate full request details for copying (resolved LAZILY at press time —
-  // see the copy button below).
-  const getFullRequestDetails = () => {
-    const requestDetails = {
-      method: event.method,
-      url: event.url,
-      status: event.status,
-      statusText: event.statusText,
-      timestamp: new Date(event.timestamp).toISOString(),
-      duration: event.duration ? `${event.duration}ms` : "N/A",
-      requestHeaders,
-      requestData,
-      responseHeaders,
-      responseData,
-      requestSize: event.requestSize ? formatBytes(event.requestSize) : "N/A",
-      responseSize: event.responseSize ? formatBytes(event.responseSize) : "N/A",
-      error: event.error,
-      client: event.requestClient
-    };
-    return `# Network Request Details
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.NetworkEventDetailView=void 0;var _react=require("react");var _formatGraphQLVariables=require("../utils/formatGraphQLVariables");var _networkBodyResolver=require("../sync/networkBodyResolver");var _DataViewer=require("./DataViewer.web");var _jsxRuntime=require("react/jsx-runtime");const macOSColors={background:{base:"#0A0A0C",card:"#1A1A1C",hover:"#1D1D1F",input:"#26262A"},border:{default:"#2D2D2F"},text:{primary:"#F5F5F7",secondary:"#A1A1A6",muted:"#8E8E93"},semantic:{success:"#34C759",error:"#FF453A",errorBackground:"rgba(255, 69, 58, 0.15)",warning:"#FFEB3B",warningBackground:"rgba(255, 235, 59, 0.15)",info:"#00B8E6",infoBackground:"rgba(0, 184, 230, 0.1)"}};const NEUTRAL_ICON=macOSColors.semantic.success;function formatBytes(t){if(t===void 0||t===null)return"N/A";if(t===0)return"0 B";const e=1024;const s=["B","KB","MB","GB","TB"];const o=Math.floor(Math.log(t)/Math.log(e));return`${(t/Math.pow(e,o)).toFixed(1)} ${s[o]}`}function formatDuration(t){if(t===void 0||t===null)return"N/A";if(t<1e3)return`${t}ms`;if(t<6e4)return`${(t/1e3).toFixed(1)}s`;if(t<36e5){const o=Math.floor(t/6e4);const i=Math.floor(t%6e4/1e3);return i>0?`${o}m ${i}s`:`${o}m`}const e=Math.floor(t/36e5);const s=Math.floor(t%36e5/6e4);return s>0?`${e}h ${s}m`:`${e}h`}function formatRelativeTime(t,e=Date.now()){const s=t instanceof Date?t.getTime():t;const o=Math.floor((e-s)/1e3);if(o<0)return"just now";if(o<60)return o===0?"just now":`${o}s ago`;const i=Math.floor(o/60);if(i<60)return`${i}m ago`;const n=Math.floor(i/60);if(n<24)return`${n}h ago`;const l=Math.floor(n/24);return`${l}d ago`}function formatHttpStatus(t){if(t>=100&&t<200){return{text:String(t),color:macOSColors.semantic.info,meaning:"Informational"}}if(t>=200&&t<300){const e={200:"OK",201:"Created",202:"Accepted",204:"No Content",206:"Partial Content"};return{text:String(t),color:macOSColors.semantic.success,meaning:e[t]||"Success"}}if(t>=300&&t<400){const e={301:"Moved Permanently",302:"Found",303:"See Other",304:"Not Modified",307:"Temporary Redirect",308:"Permanent Redirect"};return{text:String(t),color:macOSColors.semantic.warning,meaning:e[t]||"Redirect"}}if(t>=400&&t<500){const e={400:"Bad Request",401:"Unauthorized",402:"Payment Required",403:"Forbidden",404:"Not Found",405:"Method Not Allowed",408:"Request Timeout",409:"Conflict",410:"Gone",422:"Unprocessable Entity",429:"Too Many Requests"};return{text:String(t),color:macOSColors.semantic.error,meaning:e[t]||"Client Error"}}if(t>=500){const e={500:"Internal Server Error",501:"Not Implemented",502:"Bad Gateway",503:"Service Unavailable",504:"Gateway Timeout",505:"HTTP Version Not Supported"};return{text:String(t),color:macOSColors.semantic.error,meaning:e[t]||"Server Error"}}return{text:String(t),color:macOSColors.text.muted,meaning:"Unknown"}}function Svg({size:t=14,color:e="currentColor",children:s}){return(0,_jsxRuntime.jsx)("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:e,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block"},children:s})}const Clock=t=>(0,_jsxRuntime.jsxs)(Svg,{...t,children:[(0,_jsxRuntime.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,_jsxRuntime.jsx)("polyline",{points:"12 6 12 12 16 14"})]});const Upload=t=>(0,_jsxRuntime.jsxs)(Svg,{...t,children:[(0,_jsxRuntime.jsx)("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),(0,_jsxRuntime.jsx)("polyline",{points:"17 8 12 3 7 8"}),(0,_jsxRuntime.jsx)("line",{x1:"12",x2:"12",y1:"3",y2:"15"})]});const Download=t=>(0,_jsxRuntime.jsxs)(Svg,{...t,children:[(0,_jsxRuntime.jsx)("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),(0,_jsxRuntime.jsx)("polyline",{points:"7 10 12 15 17 10"}),(0,_jsxRuntime.jsx)("line",{x1:"12",x2:"12",y1:"15",y2:"3"})]});const AlertCircle=t=>(0,_jsxRuntime.jsxs)(Svg,{...t,children:[(0,_jsxRuntime.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,_jsxRuntime.jsx)("line",{x1:"12",x2:"12",y1:"8",y2:"12"}),(0,_jsxRuntime.jsx)("line",{x1:"12",x2:"12.01",y1:"16",y2:"16"})]});const ChevronDown=t=>(0,_jsxRuntime.jsx)(Svg,{...t,children:(0,_jsxRuntime.jsx)("path",{d:"m6 9 6 6 6-6"})});const ChevronUp=t=>(0,_jsxRuntime.jsx)(Svg,{...t,children:(0,_jsxRuntime.jsx)("path",{d:"m18 15-6-6-6 6"})});const Lock=t=>(0,_jsxRuntime.jsxs)(Svg,{...t,children:[(0,_jsxRuntime.jsx)("rect",{width:"18",height:"11",x:"3",y:"11",rx:"2",ry:"2"}),(0,_jsxRuntime.jsx)("path",{d:"M7 11V7a5 5 0 0 1 10 0v4"})]});const Unlock=t=>(0,_jsxRuntime.jsxs)(Svg,{...t,children:[(0,_jsxRuntime.jsx)("rect",{width:"18",height:"11",x:"3",y:"11",rx:"2",ry:"2"}),(0,_jsxRuntime.jsx)("path",{d:"M7 11V7a5 5 0 0 1 9.9-1"})]});const FileJson=t=>(0,_jsxRuntime.jsxs)(Svg,{...t,children:[(0,_jsxRuntime.jsx)("path",{d:"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"}),(0,_jsxRuntime.jsx)("path",{d:"M14 2v4a2 2 0 0 0 2 2h4"}),(0,_jsxRuntime.jsx)("path",{d:"M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1"}),(0,_jsxRuntime.jsx)("path",{d:"M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1"})]});const Filter=t=>(0,_jsxRuntime.jsx)(Svg,{...t,children:(0,_jsxRuntime.jsx)("polygon",{points:"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"})});const Globe=t=>(0,_jsxRuntime.jsxs)(Svg,{...t,children:[(0,_jsxRuntime.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,_jsxRuntime.jsx)("path",{d:"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"}),(0,_jsxRuntime.jsx)("path",{d:"M2 12h20"})]});const Link=t=>(0,_jsxRuntime.jsxs)(Svg,{...t,children:[(0,_jsxRuntime.jsx)("path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}),(0,_jsxRuntime.jsx)("path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"})]});const FlaskConical=t=>(0,_jsxRuntime.jsxs)(Svg,{...t,children:[(0,_jsxRuntime.jsx)("path",{d:"M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"}),(0,_jsxRuntime.jsx)("path",{d:"M8.5 2h7"}),(0,_jsxRuntime.jsx)("path",{d:"M7 16h10"})]});const EMPTY_PATTERNS=new Set;const noop=()=>{};const TimingPhases=({timings:t,total:e})=>{const s=Math.max(1,e);const o=[{label:"Waiting (TTFB)",hint:"incl. queue, DNS, TLS",value:t.ttfb,color:macOSColors.semantic.warning},{label:"Content download",hint:void 0,value:t.download,color:macOSColors.semantic.success}];return(0,_jsxRuntime.jsx)("div",{style:styles.phaseList,children:o.map(i=>(0,_jsxRuntime.jsxs)("div",{style:styles.phaseRow,children:[(0,_jsxRuntime.jsxs)("div",{style:styles.phaseLabelGroup,children:[(0,_jsxRuntime.jsx)("div",{style:styles.phaseLabel,children:i.label}),i.hint?(0,_jsxRuntime.jsx)("div",{style:styles.phaseHint,children:i.hint}):null]}),(0,_jsxRuntime.jsx)("div",{style:styles.phaseTrack,children:(0,_jsxRuntime.jsx)("div",{style:{...styles.phaseBar,backgroundColor:i.color,width:`${Math.min(100,Math.max(1,i.value/s*100))}%`}})}),(0,_jsxRuntime.jsx)("span",{style:styles.phaseValue,children:formatDuration(i.value)})]},i.label))})};const BodyDeferred=()=>(0,_jsxRuntime.jsx)("div",{style:styles.bodyDeferred});const CollapsibleSection=({title:t,icon:e,children:s,defaultOpen:o=false,count:i})=>{const[n,l]=(0,_react.useState)(o);return(0,_jsxRuntime.jsxs)("div",{style:styles.collapsibleSection,children:[(0,_jsxRuntime.jsxs)("button",{type:"button",style:styles.collapsibleHeader,onClick:()=>l(!n),"aria-expanded":n,children:[(0,_jsxRuntime.jsxs)("span",{style:styles.collapsibleTitle,children:[e,(0,_jsxRuntime.jsx)("span",{style:styles.collapsibleTitleText,children:t}),i!==void 0?(0,_jsxRuntime.jsx)("span",{style:styles.collapsibleCount,children:i}):null]}),n?(0,_jsxRuntime.jsx)(ChevronUp,{size:16,color:macOSColors.text.secondary}):(0,_jsxRuntime.jsx)(ChevronDown,{size:16,color:macOSColors.text.secondary})]}),n?(0,_jsxRuntime.jsx)("div",{style:styles.collapsibleContent,children:s}):null]})};const UrlBreakdown=({url:t,operationName:e,graphqlVariables:s,requestClient:o})=>{const i=y=>{try{const a=new URL(y);const u=String(a.protocol||"");const f=String(a.host||"");const w=u==="https:";let d=String(a.pathname||"");if(o==="graphql"&&e){const h=(0,_formatGraphQLVariables.formatGraphQLDisplay)(e,s);d=`${d} (${h})`}else if(e){d=`${d} (${e})`}const x={};const c=a.searchParams;if(c&&typeof c.forEach==="function"){c.forEach((h,g)=>{x[g]=h})}return{protocol:u.replace(":",""),host:f,pathname:d,params:Object.keys(x).length>0?x:null,isSecure:w}}catch{return{protocol:"",host:t,pathname:"",params:null,isSecure:false}}};const n=(0,_react.useMemo)(()=>i(t),[t,o,e,s]);const[l,m]=(0,_react.useState)(false);return(0,_jsxRuntime.jsxs)("div",{style:styles.urlBreakdown,children:[(0,_jsxRuntime.jsxs)("div",{style:styles.urlRow,children:[n.isSecure?(0,_jsxRuntime.jsx)(Lock,{size:12,color:macOSColors.semantic.success}):(0,_jsxRuntime.jsx)(Unlock,{size:12,color:macOSColors.semantic.warning}),(0,_jsxRuntime.jsx)("span",{style:styles.urlDomain,children:n.host}),(0,_jsxRuntime.jsxs)("span",{style:styles.urlProtocol,children:["(",n.protocol.toUpperCase(),")"]}),(0,_jsxRuntime.jsx)(_DataViewer.InlineCopyButton,{value:t,buttonStyle:styles.copyButton})]}),(0,_jsxRuntime.jsx)("div",{style:styles.urlPathRow,children:(0,_jsxRuntime.jsxs)("span",{style:styles.urlPath,children:[n.pathname,n.params?(0,_jsxRuntime.jsxs)("span",{style:styles.urlQueryString,children:["?",new URLSearchParams(n.params).toString()]}):null]})}),n.params?(0,_jsxRuntime.jsxs)("div",{style:styles.queryParamsCollapsible,children:[(0,_jsxRuntime.jsxs)("button",{type:"button",style:styles.queryParamsToggle,onClick:()=>m(!l),"aria-expanded":l,children:[(0,_jsxRuntime.jsx)("span",{style:styles.queryParamsToggleText,children:"Query Parameters"}),(0,_jsxRuntime.jsx)("span",{style:{...styles.collapsibleCount,flex:1,textAlign:"left"},children:Object.keys(n.params).length}),l?(0,_jsxRuntime.jsx)(ChevronUp,{size:14,color:macOSColors.text.secondary}):(0,_jsxRuntime.jsx)(ChevronDown,{size:14,color:macOSColors.text.secondary})]}),l?(0,_jsxRuntime.jsx)(_DataViewer.DataViewer,{title:"",data:n.params,showTypeFilter:true,rawMode:true,initialExpanded:true}):null]}):null]})};const NetworkEventDetailView=exports.NetworkEventDetailView=(0,_react.memo)(function t({event:e,ignoredPatterns:s=EMPTY_PATTERNS,onTogglePattern:o=noop,showBodies:i=true}){const n=e.status?formatHttpStatus(e.status):null;const l=!e.status&&!e.error;const m=(0,_networkBodyResolver.useNetworkBodyResolver)();const y=e.requestData===void 0&&(e.requestBodyOmitted===true||(e.requestSize??0)>0);const a=e.responseData===void 0&&(e.responseBodyOmitted===true||(e.responseSize??0)>0);const u=e.headersOmitted===true;const[f,w]=(0,_react.useState)(null);const[d,x]=(0,_react.useState)(false);(0,_react.useEffect)(()=>{w(null);if(!m||!y&&!a&&!u){x(false);return}let r=false;x(true);m(e.id).then(p=>{if(!r)w(p)}).catch(()=>{}).finally(()=>{if(!r)x(false)});return()=>{r=true}},[e.id,m,y,a,u]);const c=e.requestData??f?.requestData??void 0;const h=e.responseData??f?.responseData??void 0;const g=(u?f?.requestHeaders:void 0)??e.requestHeaders;const S=(u?f?.responseHeaders:void 0)??e.responseHeaders;const z=()=>{const r={method:e.method,url:e.url,status:e.status,statusText:e.statusText,timestamp:new Date(e.timestamp).toISOString(),duration:e.duration?`${e.duration}ms`:"N/A",requestHeaders:g,requestData:c,responseHeaders:S,responseData:h,requestSize:e.requestSize?formatBytes(e.requestSize):"N/A",responseSize:e.responseSize?formatBytes(e.responseSize):"N/A",error:e.error,client:e.requestClient};return`# Network Request Details
 
 ## Request
-- **Method:** ${requestDetails.method}
-- **URL:** ${requestDetails.url}
-- **Client:** ${requestDetails.client || "N/A"}
-- **Timestamp:** ${requestDetails.timestamp}
+- **Method:** ${r.method}
+- **URL:** ${r.url}
+- **Client:** ${r.client||"N/A"}
+- **Timestamp:** ${r.timestamp}
 
 ## Response
-- **Status:** ${requestDetails.status || "Pending"}${requestDetails.statusText ? ` (${requestDetails.statusText})` : ""}
-- **Duration:** ${requestDetails.duration}
-- **Request Size:** ${requestDetails.requestSize}
-- **Response Size:** ${requestDetails.responseSize}
-${requestDetails.error ? `- **Error:** ${requestDetails.error}` : ""}
+- **Status:** ${r.status||"Pending"}${r.statusText?` (${r.statusText})`:""}
+- **Duration:** ${r.duration}
+- **Request Size:** ${r.requestSize}
+- **Response Size:** ${r.responseSize}
+${r.error?`- **Error:** ${r.error}`:""}
 
 ## Request Headers
 \`\`\`json
-${JSON.stringify(requestDetails.requestHeaders, null, 2)}
+${JSON.stringify(r.requestHeaders,null,2)}
 \`\`\`
 
 ## Request Data
 \`\`\`json
-${JSON.stringify(requestDetails.requestData, null, 2)}
+${JSON.stringify(r.requestData,null,2)}
 \`\`\`
 
 ## Response Headers
 \`\`\`json
-${JSON.stringify(requestDetails.responseHeaders, null, 2)}
+${JSON.stringify(r.responseHeaders,null,2)}
 \`\`\`
 
 ## Response Data
 \`\`\`json
-${JSON.stringify(requestDetails.responseData, null, 2)}
+${JSON.stringify(r.responseData,null,2)}
 \`\`\`
-`;
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: styles.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: styles.requestDetailsSection,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: styles.httpHeader,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: styles.httpMethodBadge,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            style: styles.httpMethod,
-            children: event.method
-          })
-        }), event.status ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: {
-            ...styles.httpStatusBadge,
-            backgroundColor: `${status?.color}20`
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-            style: {
-              ...styles.httpStatusText,
-              color: status?.color
-            },
-            children: [status?.text, " ", status?.meaning]
-          })
-        }) : isPending ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          style: styles.pendingBadge,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Clock, {
-            size: 10,
-            color: macOSColors.semantic.warning
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            style: styles.pendingBadgeText,
-            children: "Pending"
-          })]
-        }) : null, event.duration ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          style: styles.httpDuration,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Clock, {
-            size: 10,
-            color: macOSColors.text.muted
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            style: styles.httpDurationText,
-            children: formatDuration(event.duration)
-          })]
-        }) : null, event.override ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          style: styles.overrideBadge,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FlaskConical, {
-            size: 10,
-            color: macOSColors.semantic.warning
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            style: styles.overrideBadgeText,
-            children: event.override.ruleName || "Overridden"
-          })]
-        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataViewer.InlineCopyButton, {
-          value: getFullRequestDetails,
-          buttonStyle: styles.copyFullButton
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(UrlBreakdown, {
-        url: event.url,
-        requestData: requestData,
-        operationName: event.operationName,
-        graphqlVariables: event.graphqlVariables,
-        requestClient: event.requestClient
-      }), event.error ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: styles.errorBox,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AlertCircle, {
-          size: 12,
-          color: macOSColors.semantic.error
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: styles.errorText,
-          children: event.error
-        })]
-      }) : null]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: styles.timingSection,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: styles.timingRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Clock, {
-          size: 12,
-          color: macOSColors.text.secondary
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: styles.timingLabel,
-          children: "Started:"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: styles.timingValue,
-          children: formatRelativeTime(event.timestamp)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          style: styles.timingExact,
-          children: ["(", new Date(event.timestamp).toLocaleTimeString(), ")"]
-        }), event.requestSize || event.responseSize ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          style: styles.sizeRow,
-          children: [event.requestSize !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-            style: styles.sizeItem,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Upload, {
-              size: 10,
-              color: macOSColors.semantic.info
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              style: styles.sizeLabel,
-              children: "Sent:"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              style: styles.sizeValue,
-              children: formatBytes(event.requestSize)
-            })]
-          }) : null, event.responseSize !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-            style: styles.sizeItem,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Download, {
-              size: 10,
-              color: NEUTRAL_ICON
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              style: styles.sizeLabel,
-              children: "Received:"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              style: styles.sizeValue,
-              children: formatBytes(event.responseSize)
-            })]
-          }) : null]
-        }) : null]
-      }), event.timings ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: styles.phaseDivider
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TimingPhases, {
-          timings: event.timings,
-          total: event.duration ?? event.timings.ttfb + event.timings.download
-        })]
-      }) : null]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
-      title: "Request Headers",
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(Upload, {
-        size: 14,
-        color: macOSColors.semantic.info
-      }),
-      defaultOpen: false,
-      count: Object.keys(requestHeaders).length,
-      children: Object.keys(requestHeaders).length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: styles.dataViewerContainer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataViewer.DataViewer, {
-          title: "",
-          data: requestHeaders,
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: styles.emptyText,
-        children: "No request headers"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
-      title: "Response Headers",
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(Download, {
-        size: 14,
-        color: NEUTRAL_ICON
-      }),
-      defaultOpen: false,
-      count: Object.keys(responseHeaders).length,
-      children: Object.keys(responseHeaders).length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: styles.dataViewerContainer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataViewer.DataViewer, {
-          title: "",
-          data: responseHeaders,
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: styles.emptyText,
-        children: "No response headers yet"
-      })
-    }), requestData !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
-      title: "Request Body",
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(FileJson, {
-        size: 14,
-        color: macOSColors.semantic.info
-      }),
-      defaultOpen: false,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: styles.dataViewerContainer,
-        children: showBodies ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataViewer.DataViewer, {
-          title: "",
-          data: requestData,
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(BodyDeferred, {})
-      })
-    }) : requestBodyOmitted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
-      title: "Request Body",
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(FileJson, {
-        size: 14,
-        color: macOSColors.semantic.info
-      }),
-      defaultOpen: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: styles.emptyText,
-        children: isLoadingBody ? `Loading request body (${formatBytes(event.requestSize ?? 0)})…` : "Request body unavailable"
-      })
-    }) : null, responseData !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
-      title: "Response Body",
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(FileJson, {
-        size: 14,
-        color: NEUTRAL_ICON
-      })
-      // The body is what you opened the row FOR — expanded on arrival,
-      // everything else closed (native).
-      ,
-      defaultOpen: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: styles.dataViewerContainer,
-        children: showBodies ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataViewer.DataViewer, {
-          title: "",
-          data: responseData,
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(BodyDeferred, {})
-      })
-    }) : responseBodyOmitted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
-      title: "Response Body",
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(FileJson, {
-        size: 14,
-        color: NEUTRAL_ICON
-      }),
-      defaultOpen: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: styles.emptyText,
-        children: isLoadingBody ? `Loading response body (${formatBytes(event.responseSize ?? 0)})…` : "Response body unavailable"
-      })
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
-      title: "Filter Options",
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(Filter, {
-        size: 14,
-        color: macOSColors.semantic.warning
-      }),
-      defaultOpen: false,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: styles.filterOptionsContainer,
-        children: (() => {
-          let domain = "";
-          let urlPath = "";
-          try {
-            const url = new URL(event.url);
-            domain = url.hostname;
-            urlPath = url.pathname;
-          } catch {
-            urlPath = event.url;
-          }
-          const isDomainIgnored = ignoredPatterns.has(domain);
-          const isUrlIgnored = ignoredPatterns.has(urlPath);
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-              type: "button",
-              style: {
-                ...styles.filterOption,
-                ...(isDomainIgnored ? styles.filterOptionActive : null)
-              },
-              onClick: () => domain && onTogglePattern(domain),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                style: styles.filterOptionLeft,
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Globe, {
-                  size: 16,
-                  color: isDomainIgnored ? macOSColors.semantic.warning : macOSColors.text.muted
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                  style: styles.filterOptionContent,
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                    style: styles.filterOptionLabel,
-                    children: "Ignore Domain"
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                    style: styles.filterOptionValue,
-                    children: domain || "N/A"
-                  })]
-                })]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                style: {
-                  ...styles.filterToggle,
-                  ...(isDomainIgnored ? styles.filterToggleActive : null)
-                },
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                  style: {
-                    ...styles.filterToggleText,
-                    ...(isDomainIgnored ? styles.filterToggleTextActive : null)
-                  },
-                  children: isDomainIgnored ? "IGNORED" : "IGNORE"
-                })
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-              type: "button",
-              style: {
-                ...styles.filterOption,
-                ...(isUrlIgnored ? styles.filterOptionActive : null)
-              },
-              onClick: () => urlPath && onTogglePattern(urlPath),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                style: styles.filterOptionLeft,
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Link, {
-                  size: 16,
-                  color: isUrlIgnored ? macOSColors.semantic.warning : macOSColors.text.muted
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                  style: styles.filterOptionContent,
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                    style: styles.filterOptionLabel,
-                    children: "Ignore URL Pattern"
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                    style: {
-                      ...styles.filterOptionValue,
-                      ...styles.singleLine
-                    },
-                    children: urlPath || "N/A"
-                  })]
-                })]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                style: {
-                  ...styles.filterToggle,
-                  ...(isUrlIgnored ? styles.filterToggleActive : null)
-                },
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                  style: {
-                    ...styles.filterToggleText,
-                    ...(isUrlIgnored ? styles.filterToggleTextActive : null)
-                  },
-                  children: isUrlIgnored ? "IGNORED" : "IGNORE"
-                })
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              style: styles.filterInfoBox,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                style: styles.filterInfoText,
-                children: "Ignored requests will be hidden from the network list. You can manage filters in the Filters tab."
-              })
-            })]
-          });
-        })()
-      })
-    })]
-  });
-});
-
-// Values mirror the native StyleSheet block 1:1.
-const styles = {
-  // Native: ScrollView flex 1 on background.base — the detail body OWNS its
-  // scrolling so the stepper footer stays pinned under it.
-  container: {
-    flex: 1,
-    minHeight: 0,
-    overflowY: "auto",
-    backgroundColor: macOSColors.background.base
-  },
-  requestDetailsSection: {
-    margin: "12px 12px 0",
-    backgroundColor: macOSColors.background.card,
-    borderRadius: 8,
-    border: `1px solid ${macOSColors.border.default}`,
-    padding: 12
-  },
-  httpHeader: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginBottom: 12,
-    flexWrap: "nowrap"
-  },
-  httpMethodBadge: {
-    display: "inline-flex",
-    backgroundColor: macOSColors.semantic.infoBackground,
-    padding: "4px 8px",
-    borderRadius: 4
-  },
-  httpMethod: {
-    color: macOSColors.semantic.info,
-    fontSize: 11,
-    fontWeight: 700,
-    letterSpacing: 0.5
-  },
-  httpStatusBadge: {
-    display: "inline-flex",
-    padding: "4px 8px",
-    borderRadius: 4,
-    whiteSpace: "nowrap"
-  },
-  httpStatusText: {
-    fontSize: 11,
-    fontWeight: 600
-  },
-  pendingBadge: {
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    backgroundColor: macOSColors.semantic.warningBackground,
-    padding: "4px 8px",
-    borderRadius: 4
-  },
-  pendingBadgeText: {
-    color: macOSColors.semantic.warning,
-    fontSize: 11,
-    fontWeight: 600
-  },
-  httpDuration: {
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  httpDurationText: {
-    color: macOSColors.text.secondary,
-    fontSize: 11
-  },
-  overrideBadge: {
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    padding: "3px 6px",
-    borderRadius: 4,
-    backgroundColor: macOSColors.semantic.warningBackground
-  },
-  overrideBadgeText: {
-    color: macOSColors.semantic.warning,
-    fontSize: 10,
-    fontWeight: 700
-  },
-  copyFullButton: {
-    marginLeft: "auto",
-    flexShrink: 0,
-    padding: 4
-  },
-  // URL breakdown styles
-  urlBreakdown: {
-    backgroundColor: macOSColors.background.input,
-    borderRadius: 4,
-    padding: 8
-  },
-  urlRow: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    marginBottom: 4
-  },
-  urlDomain: {
-    color: macOSColors.text.primary,
-    fontSize: 12,
-    fontWeight: 600,
-    flex: 1,
-    minWidth: 0,
-    overflowWrap: "anywhere"
-  },
-  urlProtocol: {
-    color: macOSColors.text.muted,
-    fontSize: 10
-  },
-  copyButton: {
-    padding: 4
-  },
-  urlPathRow: {
-    paddingLeft: 18
-  },
-  urlPath: {
-    color: macOSColors.text.secondary,
-    fontSize: 11,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    // Native numberOfLines={2}
-    display: "-webkit-box",
-    WebkitLineClamp: 2,
-    WebkitBoxOrient: "vertical",
-    overflow: "hidden",
-    overflowWrap: "anywhere"
-  },
-  urlQueryString: {
-    color: macOSColors.semantic.info,
-    fontSize: 11,
-    fontFamily: "ui-monospace, Menlo, monospace"
-  },
-  // Query Parameters - Collapsible section
-  queryParamsCollapsible: {
-    marginTop: 8
-  },
-  queryParamsToggle: {
-    display: "flex",
-    width: "100%",
-    boxSizing: "border-box",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 8,
-    padding: "10px 12px",
-    backgroundColor: macOSColors.background.hover,
-    borderRadius: 8,
-    border: `1px solid ${macOSColors.border.default}`,
-    marginBottom: 8,
-    cursor: "pointer",
-    margin: "0 0 8px",
-    font: "inherit"
-  },
-  queryParamsToggleText: {
-    flexGrow: 0,
-    color: macOSColors.text.primary,
-    fontSize: 12,
-    fontWeight: 600,
-    letterSpacing: 0.3,
-    whiteSpace: "nowrap"
-  },
-  // Timing section - always visible
-  timingSection: {
-    margin: "8px 12px 0",
-    backgroundColor: macOSColors.background.card,
-    borderRadius: 8,
-    border: `1px solid ${macOSColors.border.default}`,
-    padding: 12
-  },
-  timingRow: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    // Wraps rather than squashing when the card is narrow — the sizes drop to
-    // their own line there (native).
-    flexWrap: "wrap"
-  },
-  timingLabel: {
-    color: macOSColors.text.secondary,
-    fontSize: 11
-  },
-  timingValue: {
-    color: macOSColors.text.primary,
-    fontSize: 11,
-    fontWeight: 600
-  },
-  timingExact: {
-    color: macOSColors.text.muted,
-    fontSize: 10,
-    marginLeft: 4
-  },
-  sizeRow: {
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 16,
-    // Pushed to the far end of the Started row (native).
-    marginLeft: "auto"
-  },
-  sizeItem: {
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  sizeLabel: {
-    color: macOSColors.text.muted,
-    fontSize: 10
-  },
-  sizeValue: {
-    color: macOSColors.semantic.info,
-    fontSize: 10,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    fontWeight: 600
-  },
-  /* ---- Timing phases ---- */
-  phaseDivider: {
-    height: 1,
-    backgroundColor: macOSColors.border.default,
-    marginTop: 12,
-    marginBottom: 12
-  },
-  phaseList: {
-    display: "flex",
-    flexDirection: "column",
-    gap: 8
-  },
-  phaseRow: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 14
-  },
-  phaseLabelGroup: {
-    width: 150,
-    flexShrink: 0
-  },
-  phaseLabel: {
-    fontSize: 12,
-    color: macOSColors.text.secondary
-  },
-  phaseHint: {
-    fontSize: 10,
-    color: macOSColors.text.muted
-  },
-  phaseTrack: {
-    flex: 1,
-    minWidth: 0,
-    height: 7,
-    borderRadius: 4,
-    backgroundColor: macOSColors.background.hover,
-    display: "flex",
-    justifyContent: "center",
-    flexDirection: "column",
-    overflow: "hidden"
-  },
-  phaseBar: {
-    height: 7,
-    borderRadius: 4
-  },
-  phaseValue: {
-    width: 72,
-    flexShrink: 0,
-    textAlign: "right",
-    fontSize: 12,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    color: macOSColors.text.primary
-  },
-  // Collapsible section styles
-  collapsibleSection: {
-    margin: "8px 12px 0",
-    backgroundColor: macOSColors.background.card,
-    borderRadius: 8,
-    border: `1px solid ${macOSColors.border.default}`,
-    overflow: "hidden"
-  },
-  collapsibleHeader: {
-    display: "flex",
-    width: "100%",
-    boxSizing: "border-box",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: 12,
-    // Near-white strip, not the selection grey (native rationale).
-    backgroundColor: macOSColors.background.hover,
-    border: "none",
-    cursor: "pointer",
-    margin: 0,
-    font: "inherit",
-    textAlign: "left"
-  },
-  collapsibleTitle: {
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  collapsibleTitleText: {
-    color: macOSColors.text.primary,
-    fontSize: 13,
-    fontWeight: 600
-  },
-  /** The "how much is in here" number beside a section title. */
-  collapsibleCount: {
-    color: macOSColors.text.muted,
-    fontSize: 11.5,
-    fontFamily: "ui-monospace, Menlo, monospace"
-  },
-  collapsibleContent: {
-    padding: 12
-  },
-  // Data viewer container — pulls the tree flush against the section edges.
-  dataViewerContainer: {
-    margin: -12
-  },
-  /** Placeholder for a not-yet-mounted body tree. See BodyDeferred. */
-  bodyDeferred: {
-    height: 120
-  },
-  // Error box
-  errorBox: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    backgroundColor: macOSColors.semantic.errorBackground,
-    padding: 8,
-    borderRadius: 4,
-    marginTop: 8
-  },
-  errorText: {
-    color: macOSColors.semantic.error,
-    fontSize: 11,
-    flex: 1,
-    minWidth: 0,
-    overflowWrap: "anywhere"
-  },
-  // Empty state
-  emptyText: {
-    color: macOSColors.text.muted,
-    fontSize: 12,
-    fontStyle: "italic",
-    textAlign: "center"
-  },
-  // Filter options styles
-  filterOptionsContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: 12
-  },
-  filterOption: {
-    display: "flex",
-    width: "100%",
-    boxSizing: "border-box",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    backgroundColor: macOSColors.background.hover,
-    borderRadius: 8,
-    padding: 12,
-    border: `1px solid ${macOSColors.border.default}`,
-    cursor: "pointer",
-    margin: 0,
-    font: "inherit",
-    textAlign: "left"
-  },
-  filterOptionActive: {
-    backgroundColor: macOSColors.semantic.warningBackground,
-    border: `1px solid ${macOSColors.semantic.warning}33`
-  },
-  filterOptionLeft: {
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12,
-    flex: 1,
-    minWidth: 0
-  },
-  filterOptionContent: {
-    display: "inline-flex",
-    flexDirection: "column",
-    flex: 1,
-    minWidth: 0
-  },
-  filterOptionLabel: {
-    color: macOSColors.text.secondary,
-    fontSize: 11,
-    marginBottom: 2,
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  },
-  filterOptionValue: {
-    color: macOSColors.text.primary,
-    fontSize: 13,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    overflowWrap: "anywhere"
-  },
-  /** Native numberOfLines={1}. */
-  singleLine: {
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    display: "block"
-  },
-  filterToggle: {
-    display: "inline-flex",
-    padding: "6px 10px",
-    borderRadius: 4,
-    backgroundColor: macOSColors.background.input,
-    border: `1px solid ${macOSColors.border.default}`,
-    flexShrink: 0
-  },
-  filterToggleActive: {
-    backgroundColor: `${macOSColors.semantic.warning}26`,
-    border: `1px solid ${macOSColors.semantic.warning}4D`
-  },
-  filterToggleText: {
-    fontSize: 10,
-    fontWeight: 600,
-    color: macOSColors.text.muted,
-    letterSpacing: 0.5
-  },
-  filterToggleTextActive: {
-    color: macOSColors.semantic.warning
-  },
-  filterInfoBox: {
-    backgroundColor: macOSColors.semantic.infoBackground,
-    borderRadius: 6,
-    padding: 10,
-    border: `1px solid ${macOSColors.semantic.info}33`
-  },
-  filterInfoText: {
-    color: macOSColors.text.secondary,
-    fontSize: 11,
-    lineHeight: "16px"
-  }
-};
+`};return(0,_jsxRuntime.jsxs)("div",{style:styles.container,children:[(0,_jsxRuntime.jsxs)("div",{style:styles.requestDetailsSection,children:[(0,_jsxRuntime.jsxs)("div",{style:styles.httpHeader,children:[(0,_jsxRuntime.jsx)("span",{style:styles.httpMethodBadge,children:(0,_jsxRuntime.jsx)("span",{style:styles.httpMethod,children:e.method})}),e.status?(0,_jsxRuntime.jsx)("span",{style:{...styles.httpStatusBadge,backgroundColor:`${n?.color}20`},children:(0,_jsxRuntime.jsxs)("span",{style:{...styles.httpStatusText,color:n?.color},children:[n?.text," ",n?.meaning]})}):l?(0,_jsxRuntime.jsxs)("span",{style:styles.pendingBadge,children:[(0,_jsxRuntime.jsx)(Clock,{size:10,color:macOSColors.semantic.warning}),(0,_jsxRuntime.jsx)("span",{style:styles.pendingBadgeText,children:"Pending"})]}):null,e.duration?(0,_jsxRuntime.jsxs)("span",{style:styles.httpDuration,children:[(0,_jsxRuntime.jsx)(Clock,{size:10,color:macOSColors.text.muted}),(0,_jsxRuntime.jsx)("span",{style:styles.httpDurationText,children:formatDuration(e.duration)})]}):null,e.override?(0,_jsxRuntime.jsxs)("span",{style:styles.overrideBadge,children:[(0,_jsxRuntime.jsx)(FlaskConical,{size:10,color:macOSColors.semantic.warning}),(0,_jsxRuntime.jsx)("span",{style:styles.overrideBadgeText,children:e.override.ruleName||"Overridden"})]}):null,(0,_jsxRuntime.jsx)(_DataViewer.InlineCopyButton,{value:z,buttonStyle:styles.copyFullButton})]}),(0,_jsxRuntime.jsx)(UrlBreakdown,{url:e.url,requestData:c,operationName:e.operationName,graphqlVariables:e.graphqlVariables,requestClient:e.requestClient}),e.error?(0,_jsxRuntime.jsxs)("div",{style:styles.errorBox,children:[(0,_jsxRuntime.jsx)(AlertCircle,{size:12,color:macOSColors.semantic.error}),(0,_jsxRuntime.jsx)("span",{style:styles.errorText,children:e.error})]}):null]}),(0,_jsxRuntime.jsxs)("div",{style:styles.timingSection,children:[(0,_jsxRuntime.jsxs)("div",{style:styles.timingRow,children:[(0,_jsxRuntime.jsx)(Clock,{size:12,color:macOSColors.text.secondary}),(0,_jsxRuntime.jsx)("span",{style:styles.timingLabel,children:"Started:"}),(0,_jsxRuntime.jsx)("span",{style:styles.timingValue,children:formatRelativeTime(e.timestamp)}),(0,_jsxRuntime.jsxs)("span",{style:styles.timingExact,children:["(",new Date(e.timestamp).toLocaleTimeString(),")"]}),e.requestSize||e.responseSize?(0,_jsxRuntime.jsxs)("span",{style:styles.sizeRow,children:[e.requestSize!==void 0?(0,_jsxRuntime.jsxs)("span",{style:styles.sizeItem,children:[(0,_jsxRuntime.jsx)(Upload,{size:10,color:macOSColors.semantic.info}),(0,_jsxRuntime.jsx)("span",{style:styles.sizeLabel,children:"Sent:"}),(0,_jsxRuntime.jsx)("span",{style:styles.sizeValue,children:formatBytes(e.requestSize)})]}):null,e.responseSize!==void 0?(0,_jsxRuntime.jsxs)("span",{style:styles.sizeItem,children:[(0,_jsxRuntime.jsx)(Download,{size:10,color:NEUTRAL_ICON}),(0,_jsxRuntime.jsx)("span",{style:styles.sizeLabel,children:"Received:"}),(0,_jsxRuntime.jsx)("span",{style:styles.sizeValue,children:formatBytes(e.responseSize)})]}):null]}):null]}),e.timings?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)("div",{style:styles.phaseDivider}),(0,_jsxRuntime.jsx)(TimingPhases,{timings:e.timings,total:e.duration??e.timings.ttfb+e.timings.download})]}):null]}),(0,_jsxRuntime.jsx)(CollapsibleSection,{title:"Request Headers",icon:(0,_jsxRuntime.jsx)(Upload,{size:14,color:macOSColors.semantic.info}),defaultOpen:false,count:Object.keys(g).length,children:Object.keys(g).length>0?(0,_jsxRuntime.jsx)("div",{style:styles.dataViewerContainer,children:(0,_jsxRuntime.jsx)(_DataViewer.DataViewer,{title:"",data:g,showTypeFilter:true,rawMode:true,initialExpanded:true})}):(0,_jsxRuntime.jsx)("div",{style:styles.emptyText,children:"No request headers"})}),(0,_jsxRuntime.jsx)(CollapsibleSection,{title:"Response Headers",icon:(0,_jsxRuntime.jsx)(Download,{size:14,color:NEUTRAL_ICON}),defaultOpen:false,count:Object.keys(S).length,children:Object.keys(S).length>0?(0,_jsxRuntime.jsx)("div",{style:styles.dataViewerContainer,children:(0,_jsxRuntime.jsx)(_DataViewer.DataViewer,{title:"",data:S,showTypeFilter:true,rawMode:true,initialExpanded:true})}):(0,_jsxRuntime.jsx)("div",{style:styles.emptyText,children:"No response headers yet"})}),c!==void 0?(0,_jsxRuntime.jsx)(CollapsibleSection,{title:"Request Body",icon:(0,_jsxRuntime.jsx)(FileJson,{size:14,color:macOSColors.semantic.info}),defaultOpen:false,children:(0,_jsxRuntime.jsx)("div",{style:styles.dataViewerContainer,children:i?(0,_jsxRuntime.jsx)(_DataViewer.DataViewer,{title:"",data:c,showTypeFilter:true,rawMode:true,initialExpanded:true}):(0,_jsxRuntime.jsx)(BodyDeferred,{})})}):y?(0,_jsxRuntime.jsx)(CollapsibleSection,{title:"Request Body",icon:(0,_jsxRuntime.jsx)(FileJson,{size:14,color:macOSColors.semantic.info}),defaultOpen:true,children:(0,_jsxRuntime.jsx)("div",{style:styles.emptyText,children:d?`Loading request body (${formatBytes(e.requestSize??0)})\u2026`:"Request body unavailable"})}):null,h!==void 0?(0,_jsxRuntime.jsx)(CollapsibleSection,{title:"Response Body",icon:(0,_jsxRuntime.jsx)(FileJson,{size:14,color:NEUTRAL_ICON}),defaultOpen:true,children:(0,_jsxRuntime.jsx)("div",{style:styles.dataViewerContainer,children:i?(0,_jsxRuntime.jsx)(_DataViewer.DataViewer,{title:"",data:h,showTypeFilter:true,rawMode:true,initialExpanded:true}):(0,_jsxRuntime.jsx)(BodyDeferred,{})})}):a?(0,_jsxRuntime.jsx)(CollapsibleSection,{title:"Response Body",icon:(0,_jsxRuntime.jsx)(FileJson,{size:14,color:NEUTRAL_ICON}),defaultOpen:true,children:(0,_jsxRuntime.jsx)("div",{style:styles.emptyText,children:d?`Loading response body (${formatBytes(e.responseSize??0)})\u2026`:"Response body unavailable"})}):null,(0,_jsxRuntime.jsx)(CollapsibleSection,{title:"Filter Options",icon:(0,_jsxRuntime.jsx)(Filter,{size:14,color:macOSColors.semantic.warning}),defaultOpen:false,children:(0,_jsxRuntime.jsx)("div",{style:styles.filterOptionsContainer,children:(()=>{let r="";let p="";try{const k=new URL(e.url);r=k.hostname;p=k.pathname}catch{p=e.url}const j=s.has(r);const b=s.has(p);return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)("button",{type:"button",style:{...styles.filterOption,...j?styles.filterOptionActive:null},onClick:()=>r&&o(r),children:[(0,_jsxRuntime.jsxs)("span",{style:styles.filterOptionLeft,children:[(0,_jsxRuntime.jsx)(Globe,{size:16,color:j?macOSColors.semantic.warning:macOSColors.text.muted}),(0,_jsxRuntime.jsxs)("span",{style:styles.filterOptionContent,children:[(0,_jsxRuntime.jsx)("span",{style:styles.filterOptionLabel,children:"Ignore Domain"}),(0,_jsxRuntime.jsx)("span",{style:styles.filterOptionValue,children:r||"N/A"})]})]}),(0,_jsxRuntime.jsx)("span",{style:{...styles.filterToggle,...j?styles.filterToggleActive:null},children:(0,_jsxRuntime.jsx)("span",{style:{...styles.filterToggleText,...j?styles.filterToggleTextActive:null},children:j?"IGNORED":"IGNORE"})})]}),(0,_jsxRuntime.jsxs)("button",{type:"button",style:{...styles.filterOption,...b?styles.filterOptionActive:null},onClick:()=>p&&o(p),children:[(0,_jsxRuntime.jsxs)("span",{style:styles.filterOptionLeft,children:[(0,_jsxRuntime.jsx)(Link,{size:16,color:b?macOSColors.semantic.warning:macOSColors.text.muted}),(0,_jsxRuntime.jsxs)("span",{style:styles.filterOptionContent,children:[(0,_jsxRuntime.jsx)("span",{style:styles.filterOptionLabel,children:"Ignore URL Pattern"}),(0,_jsxRuntime.jsx)("span",{style:{...styles.filterOptionValue,...styles.singleLine},children:p||"N/A"})]})]}),(0,_jsxRuntime.jsx)("span",{style:{...styles.filterToggle,...b?styles.filterToggleActive:null},children:(0,_jsxRuntime.jsx)("span",{style:{...styles.filterToggleText,...b?styles.filterToggleTextActive:null},children:b?"IGNORED":"IGNORE"})})]}),(0,_jsxRuntime.jsx)("div",{style:styles.filterInfoBox,children:(0,_jsxRuntime.jsx)("span",{style:styles.filterInfoText,children:"Ignored requests will be hidden from the network list. You can manage filters in the Filters tab."})})]})})()})})]})});const styles={container:{flex:1,minHeight:0,overflowY:"auto",backgroundColor:macOSColors.background.base},requestDetailsSection:{margin:"12px 12px 0",backgroundColor:macOSColors.background.card,borderRadius:8,border:`1px solid ${macOSColors.border.default}`,padding:12},httpHeader:{display:"flex",flexDirection:"row",alignItems:"center",gap:8,marginBottom:12,flexWrap:"nowrap"},httpMethodBadge:{display:"inline-flex",backgroundColor:macOSColors.semantic.infoBackground,padding:"4px 8px",borderRadius:4},httpMethod:{color:macOSColors.semantic.info,fontSize:11,fontWeight:700,letterSpacing:.5},httpStatusBadge:{display:"inline-flex",padding:"4px 8px",borderRadius:4,whiteSpace:"nowrap"},httpStatusText:{fontSize:11,fontWeight:600},pendingBadge:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:4,backgroundColor:macOSColors.semantic.warningBackground,padding:"4px 8px",borderRadius:4},pendingBadgeText:{color:macOSColors.semantic.warning,fontSize:11,fontWeight:600},httpDuration:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:4},httpDurationText:{color:macOSColors.text.secondary,fontSize:11},overrideBadge:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:4,padding:"3px 6px",borderRadius:4,backgroundColor:macOSColors.semantic.warningBackground},overrideBadgeText:{color:macOSColors.semantic.warning,fontSize:10,fontWeight:700},copyFullButton:{marginLeft:"auto",flexShrink:0,padding:4},urlBreakdown:{backgroundColor:macOSColors.background.input,borderRadius:4,padding:8},urlRow:{display:"flex",flexDirection:"row",alignItems:"center",gap:6,marginBottom:4},urlDomain:{color:macOSColors.text.primary,fontSize:12,fontWeight:600,flex:1,minWidth:0,overflowWrap:"anywhere"},urlProtocol:{color:macOSColors.text.muted,fontSize:10},copyButton:{padding:4},urlPathRow:{paddingLeft:18},urlPath:{color:macOSColors.text.secondary,fontSize:11,fontFamily:"ui-monospace, Menlo, monospace",display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden",overflowWrap:"anywhere"},urlQueryString:{color:macOSColors.semantic.info,fontSize:11,fontFamily:"ui-monospace, Menlo, monospace"},queryParamsCollapsible:{marginTop:8},queryParamsToggle:{display:"flex",width:"100%",boxSizing:"border-box",flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:8,padding:"10px 12px",backgroundColor:macOSColors.background.hover,borderRadius:8,border:`1px solid ${macOSColors.border.default}`,marginBottom:8,cursor:"pointer",margin:"0 0 8px",font:"inherit"},queryParamsToggleText:{flexGrow:0,color:macOSColors.text.primary,fontSize:12,fontWeight:600,letterSpacing:.3,whiteSpace:"nowrap"},timingSection:{margin:"8px 12px 0",backgroundColor:macOSColors.background.card,borderRadius:8,border:`1px solid ${macOSColors.border.default}`,padding:12},timingRow:{display:"flex",flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},timingLabel:{color:macOSColors.text.secondary,fontSize:11},timingValue:{color:macOSColors.text.primary,fontSize:11,fontWeight:600},timingExact:{color:macOSColors.text.muted,fontSize:10,marginLeft:4},sizeRow:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:16,marginLeft:"auto"},sizeItem:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:4},sizeLabel:{color:macOSColors.text.muted,fontSize:10},sizeValue:{color:macOSColors.semantic.info,fontSize:10,fontFamily:"ui-monospace, Menlo, monospace",fontWeight:600},phaseDivider:{height:1,backgroundColor:macOSColors.border.default,marginTop:12,marginBottom:12},phaseList:{display:"flex",flexDirection:"column",gap:8},phaseRow:{display:"flex",flexDirection:"row",alignItems:"center",gap:14},phaseLabelGroup:{width:150,flexShrink:0},phaseLabel:{fontSize:12,color:macOSColors.text.secondary},phaseHint:{fontSize:10,color:macOSColors.text.muted},phaseTrack:{flex:1,minWidth:0,height:7,borderRadius:4,backgroundColor:macOSColors.background.hover,display:"flex",justifyContent:"center",flexDirection:"column",overflow:"hidden"},phaseBar:{height:7,borderRadius:4},phaseValue:{width:72,flexShrink:0,textAlign:"right",fontSize:12,fontFamily:"ui-monospace, Menlo, monospace",color:macOSColors.text.primary},collapsibleSection:{margin:"8px 12px 0",backgroundColor:macOSColors.background.card,borderRadius:8,border:`1px solid ${macOSColors.border.default}`,overflow:"hidden"},collapsibleHeader:{display:"flex",width:"100%",boxSizing:"border-box",flexDirection:"row",alignItems:"center",justifyContent:"space-between",padding:12,backgroundColor:macOSColors.background.hover,border:"none",cursor:"pointer",margin:0,font:"inherit",textAlign:"left"},collapsibleTitle:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:8},collapsibleTitleText:{color:macOSColors.text.primary,fontSize:13,fontWeight:600},collapsibleCount:{color:macOSColors.text.muted,fontSize:11.5,fontFamily:"ui-monospace, Menlo, monospace"},collapsibleContent:{padding:12},dataViewerContainer:{margin:-12},bodyDeferred:{height:120},errorBox:{display:"flex",flexDirection:"row",alignItems:"center",gap:6,backgroundColor:macOSColors.semantic.errorBackground,padding:8,borderRadius:4,marginTop:8},errorText:{color:macOSColors.semantic.error,fontSize:11,flex:1,minWidth:0,overflowWrap:"anywhere"},emptyText:{color:macOSColors.text.muted,fontSize:12,fontStyle:"italic",textAlign:"center"},filterOptionsContainer:{display:"flex",flexDirection:"column",gap:12},filterOption:{display:"flex",width:"100%",boxSizing:"border-box",flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:macOSColors.background.hover,borderRadius:8,padding:12,border:`1px solid ${macOSColors.border.default}`,cursor:"pointer",margin:0,font:"inherit",textAlign:"left"},filterOptionActive:{backgroundColor:macOSColors.semantic.warningBackground,border:`1px solid ${macOSColors.semantic.warning}33`},filterOptionLeft:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:12,flex:1,minWidth:0},filterOptionContent:{display:"inline-flex",flexDirection:"column",flex:1,minWidth:0},filterOptionLabel:{color:macOSColors.text.secondary,fontSize:11,marginBottom:2,textTransform:"uppercase",letterSpacing:.5},filterOptionValue:{color:macOSColors.text.primary,fontSize:13,fontFamily:"ui-monospace, Menlo, monospace",overflowWrap:"anywhere"},singleLine:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",display:"block"},filterToggle:{display:"inline-flex",padding:"6px 10px",borderRadius:4,backgroundColor:macOSColors.background.input,border:`1px solid ${macOSColors.border.default}`,flexShrink:0},filterToggleActive:{backgroundColor:`${macOSColors.semantic.warning}26`,border:`1px solid ${macOSColors.semantic.warning}4D`},filterToggleText:{fontSize:10,fontWeight:600,color:macOSColors.text.muted,letterSpacing:.5},filterToggleTextActive:{color:macOSColors.semantic.warning},filterInfoBox:{backgroundColor:macOSColors.semantic.infoBackground,borderRadius:6,padding:10,border:`1px solid ${macOSColors.semantic.info}33`},filterInfoText:{color:macOSColors.text.secondary,fontSize:11,lineHeight:"16px"}};