@buoy-gg/network 7.0.41 → 7.0.43

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

@@ -1,1502 +1,35 @@
-"use strict";
-
-/**
- * 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
- */
-
-import { memo, useEffect, useMemo, useState } from "react";
-import { formatGraphQLDisplay } from "../utils/formatGraphQLVariables";
-import { useNetworkBodyResolver } from "../sync/networkBodyResolver";
-import { DataViewer, InlineCopyButton } from "./DataViewer.web";
-
-// =============================
-// Native palettes (provenance)
-// =============================
-
-/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "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)"
-  }
-};
-
-/**
- * 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__*/_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__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/_jsx("polyline", {
-    points: "12 6 12 12 16 14"
-  })]
-});
-const Upload = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
-  }), /*#__PURE__*/_jsx("polyline", {
-    points: "17 8 12 3 7 8"
-  }), /*#__PURE__*/_jsx("line", {
-    x1: "12",
-    x2: "12",
-    y1: "3",
-    y2: "15"
-  })]
-});
-const Download = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
-  }), /*#__PURE__*/_jsx("polyline", {
-    points: "7 10 12 15 17 10"
-  }), /*#__PURE__*/_jsx("line", {
-    x1: "12",
-    x2: "12",
-    y1: "15",
-    y2: "3"
-  })]
-});
-const AlertCircle = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/_jsx("line", {
-    x1: "12",
-    x2: "12",
-    y1: "8",
-    y2: "12"
-  }), /*#__PURE__*/_jsx("line", {
-    x1: "12",
-    x2: "12.01",
-    y1: "16",
-    y2: "16"
-  })]
-});
-const ChevronDown = p => /*#__PURE__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsx("path", {
-    d: "m6 9 6 6 6-6"
-  })
-});
-const ChevronUp = p => /*#__PURE__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsx("path", {
-    d: "m18 15-6-6-6 6"
-  })
-});
-const Lock = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("rect", {
-    width: "18",
-    height: "11",
-    x: "3",
-    y: "11",
-    rx: "2",
-    ry: "2"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M7 11V7a5 5 0 0 1 10 0v4"
-  })]
-});
-const Unlock = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("rect", {
-    width: "18",
-    height: "11",
-    x: "3",
-    y: "11",
-    rx: "2",
-    ry: "2"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M7 11V7a5 5 0 0 1 9.9-1"
-  })]
-});
-const FileJson = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M14 2v4a2 2 0 0 0 2 2h4"
-  }), /*#__PURE__*/_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__*/_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__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsx("polygon", {
-    points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"
-  })
-});
-const Globe = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M2 12h20"
-  })]
-});
-const Link = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_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__*/_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__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_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__*/_jsx("path", {
-    d: "M8.5 2h7"
-  }), /*#__PURE__*/_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__*/_jsx("div", {
-    style: styles.phaseList,
-    children: phases.map(phase => /*#__PURE__*/_jsxs("div", {
-      style: styles.phaseRow,
-      children: [/*#__PURE__*/_jsxs("div", {
-        style: styles.phaseLabelGroup,
-        children: [/*#__PURE__*/_jsx("div", {
-          style: styles.phaseLabel,
-          children: phase.label
-        }), phase.hint ? /*#__PURE__*/_jsx("div", {
-          style: styles.phaseHint,
-          children: phase.hint
-        }) : null]
-      }), /*#__PURE__*/_jsx("div", {
-        style: styles.phaseTrack,
-        children: /*#__PURE__*/_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__*/_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__*/_jsx("div", {
-  style: styles.bodyDeferred
-});
-
-// Component for collapsible sections matching Sentry style
-const CollapsibleSection = ({
-  title,
-  icon,
-  children,
-  defaultOpen = false,
-  count
-}) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-  return /*#__PURE__*/_jsxs("div", {
-    style: styles.collapsibleSection,
-    children: [/*#__PURE__*/_jsxs("button", {
-      type: "button",
-      style: styles.collapsibleHeader,
-      onClick: () => setIsOpen(!isOpen),
-      "aria-expanded": isOpen,
-      children: [/*#__PURE__*/_jsxs("span", {
-        style: styles.collapsibleTitle,
-        children: [icon, /*#__PURE__*/_jsx("span", {
-          style: styles.collapsibleTitleText,
-          children: title
-        }), count !== undefined ? /*#__PURE__*/_jsx("span", {
-          style: styles.collapsibleCount,
-          children: count
-        }) : null]
-      }), isOpen ? /*#__PURE__*/_jsx(ChevronUp, {
-        size: 16,
-        color: macOSColors.text.secondary
-      }) : /*#__PURE__*/_jsx(ChevronDown, {
-        size: 16,
-        color: macOSColors.text.secondary
-      })]
-    }), isOpen ? /*#__PURE__*/_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 = 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 = 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] = useState(false);
-  return /*#__PURE__*/_jsxs("div", {
-    style: styles.urlBreakdown,
-    children: [/*#__PURE__*/_jsxs("div", {
-      style: styles.urlRow,
-      children: [urlParts.isSecure ? /*#__PURE__*/_jsx(Lock, {
-        size: 12,
-        color: macOSColors.semantic.success
-      }) : /*#__PURE__*/_jsx(Unlock, {
-        size: 12,
-        color: macOSColors.semantic.warning
-      }), /*#__PURE__*/_jsx("span", {
-        style: styles.urlDomain,
-        children: urlParts.host
-      }), /*#__PURE__*/_jsxs("span", {
-        style: styles.urlProtocol,
-        children: ["(", urlParts.protocol.toUpperCase(), ")"]
-      }), /*#__PURE__*/_jsx(InlineCopyButton, {
-        value: url,
-        buttonStyle: styles.copyButton
-      })]
-    }), /*#__PURE__*/_jsx("div", {
-      style: styles.urlPathRow,
-      children: /*#__PURE__*/_jsxs("span", {
-        style: styles.urlPath,
-        children: [urlParts.pathname, urlParts.params ? /*#__PURE__*/_jsxs("span", {
-          style: styles.urlQueryString,
-          children: ["?", new URLSearchParams(urlParts.params).toString()]
-        }) : null]
-      })
-    }), urlParts.params ? /*#__PURE__*/_jsxs("div", {
-      style: styles.queryParamsCollapsible,
-      children: [/*#__PURE__*/_jsxs("button", {
-        type: "button",
-        style: styles.queryParamsToggle,
-        onClick: () => setShowParams(!showParams),
-        "aria-expanded": showParams,
-        children: [/*#__PURE__*/_jsx("span", {
-          style: styles.queryParamsToggleText,
-          children: "Query Parameters"
-        }), /*#__PURE__*/_jsx("span", {
-          style: {
-            ...styles.collapsibleCount,
-            flex: 1,
-            textAlign: "left"
-          },
-          children: Object.keys(urlParts.params).length
-        }), showParams ? /*#__PURE__*/_jsx(ChevronUp, {
-          size: 14,
-          color: macOSColors.text.secondary
-        }) : /*#__PURE__*/_jsx(ChevronDown, {
-          size: 14,
-          color: macOSColors.text.secondary
-        })]
-      }), showParams ? /*#__PURE__*/_jsx(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.
- */
-export const NetworkEventDetailView = /*#__PURE__*/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 = 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] = useState(null);
-  const [isLoadingBody, setIsLoadingBody] = useState(false);
-  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";import{memo as U,useEffect as G,useMemo as J,useState as q}from"react";import{formatGraphQLDisplay as _}from"../utils/formatGraphQLVariables";import{useNetworkBodyResolver as Q}from"../sync/networkBodyResolver";import{DataViewer as R,InlineCopyButton as A}from"./DataViewer.web";import{jsx as e,jsxs as o,Fragment as F}from"react/jsx-runtime";const r={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 $=r.semantic.success;function k(i){if(i===void 0||i===null)return"N/A";if(i===0)return"0 B";const n=1024;const c=["B","KB","MB","GB","TB"];const d=Math.floor(Math.log(i)/Math.log(n));return`${(i/Math.pow(n,d)).toFixed(1)} ${c[d]}`}function N(i){if(i===void 0||i===null)return"N/A";if(i<1e3)return`${i}ms`;if(i<6e4)return`${(i/1e3).toFixed(1)}s`;if(i<36e5){const d=Math.floor(i/6e4);const s=Math.floor(i%6e4/1e3);return s>0?`${d}m ${s}s`:`${d}m`}const n=Math.floor(i/36e5);const c=Math.floor(i%36e5/6e4);return c>0?`${n}h ${c}m`:`${n}h`}function Y(i,n=Date.now()){const c=i instanceof Date?i.getTime():i;const d=Math.floor((n-c)/1e3);if(d<0)return"just now";if(d<60)return d===0?"just now":`${d}s ago`;const s=Math.floor(d/60);if(s<60)return`${s}m ago`;const a=Math.floor(s/60);if(a<24)return`${a}h ago`;const u=Math.floor(a/24);return`${u}d ago`}function K(i){if(i>=100&&i<200){return{text:String(i),color:r.semantic.info,meaning:"Informational"}}if(i>=200&&i<300){const n={200:"OK",201:"Created",202:"Accepted",204:"No Content",206:"Partial Content"};return{text:String(i),color:r.semantic.success,meaning:n[i]||"Success"}}if(i>=300&&i<400){const n={301:"Moved Permanently",302:"Found",303:"See Other",304:"Not Modified",307:"Temporary Redirect",308:"Permanent Redirect"};return{text:String(i),color:r.semantic.warning,meaning:n[i]||"Redirect"}}if(i>=400&&i<500){const n={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(i),color:r.semantic.error,meaning:n[i]||"Client Error"}}if(i>=500){const n={500:"Internal Server Error",501:"Not Implemented",502:"Bad Gateway",503:"Service Unavailable",504:"Gateway Timeout",505:"HTTP Version Not Supported"};return{text:String(i),color:r.semantic.error,meaning:n[i]||"Server Error"}}return{text:String(i),color:r.text.muted,meaning:"Unknown"}}function p({size:i=14,color:n="currentColor",children:c}){return e("svg",{width:i,height:i,viewBox:"0 0 24 24",fill:"none",stroke:n,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block"},children:c})}const L=i=>o(p,{...i,children:[e("circle",{cx:"12",cy:"12",r:"10"}),e("polyline",{points:"12 6 12 12 16 14"})]});const P=i=>o(p,{...i,children:[e("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),e("polyline",{points:"17 8 12 3 7 8"}),e("line",{x1:"12",x2:"12",y1:"3",y2:"15"})]});const E=i=>o(p,{...i,children:[e("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),e("polyline",{points:"7 10 12 15 17 10"}),e("line",{x1:"12",x2:"12",y1:"15",y2:"3"})]});const Z=i=>o(p,{...i,children:[e("circle",{cx:"12",cy:"12",r:"10"}),e("line",{x1:"12",x2:"12",y1:"8",y2:"12"}),e("line",{x1:"12",x2:"12.01",y1:"16",y2:"16"})]});const H=i=>e(p,{...i,children:e("path",{d:"m6 9 6 6 6-6"})});const W=i=>e(p,{...i,children:e("path",{d:"m18 15-6-6-6 6"})});const X=i=>o(p,{...i,children:[e("rect",{width:"18",height:"11",x:"3",y:"11",rx:"2",ry:"2"}),e("path",{d:"M7 11V7a5 5 0 0 1 10 0v4"})]});const ee=i=>o(p,{...i,children:[e("rect",{width:"18",height:"11",x:"3",y:"11",rx:"2",ry:"2"}),e("path",{d:"M7 11V7a5 5 0 0 1 9.9-1"})]});const v=i=>o(p,{...i,children:[e("path",{d:"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"}),e("path",{d:"M14 2v4a2 2 0 0 0 2 2h4"}),e("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"}),e("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 te=i=>e(p,{...i,children:e("polygon",{points:"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"})});const ne=i=>o(p,{...i,children:[e("circle",{cx:"12",cy:"12",r:"10"}),e("path",{d:"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"}),e("path",{d:"M2 12h20"})]});const re=i=>o(p,{...i,children:[e("path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}),e("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 ie=i=>o(p,{...i,children:[e("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"}),e("path",{d:"M8.5 2h7"}),e("path",{d:"M7 16h10"})]});const oe=new Set;const le=()=>{};const ae=({timings:i,total:n})=>{const c=Math.max(1,n);const d=[{label:"Waiting (TTFB)",hint:"incl. queue, DNS, TLS",value:i.ttfb,color:r.semantic.warning},{label:"Content download",hint:void 0,value:i.download,color:r.semantic.success}];return e("div",{style:t.phaseList,children:d.map(s=>o("div",{style:t.phaseRow,children:[o("div",{style:t.phaseLabelGroup,children:[e("div",{style:t.phaseLabel,children:s.label}),s.hint?e("div",{style:t.phaseHint,children:s.hint}):null]}),e("div",{style:t.phaseTrack,children:e("div",{style:{...t.phaseBar,backgroundColor:s.color,width:`${Math.min(100,Math.max(1,s.value/c*100))}%`}})}),e("span",{style:t.phaseValue,children:N(s.value)})]},s.label))})};const V=()=>e("div",{style:t.bodyDeferred});const w=({title:i,icon:n,children:c,defaultOpen:d=false,count:s})=>{const[a,u]=q(d);return o("div",{style:t.collapsibleSection,children:[o("button",{type:"button",style:t.collapsibleHeader,onClick:()=>u(!a),"aria-expanded":a,children:[o("span",{style:t.collapsibleTitle,children:[n,e("span",{style:t.collapsibleTitleText,children:i}),s!==void 0?e("span",{style:t.collapsibleCount,children:s}):null]}),a?e(W,{size:16,color:r.text.secondary}):e(H,{size:16,color:r.text.secondary})]}),a?e("div",{style:t.collapsibleContent,children:c}):null]})};const se=({url:i,operationName:n,graphqlVariables:c,requestClient:d})=>{const s=D=>{try{const h=new URL(D);const y=String(h.protocol||"");const S=String(h.host||"");const O=y==="https:";let f=String(h.pathname||"");if(d==="graphql"&&n){const b=_(n,c);f=`${f} (${b})`}else if(n){f=`${f} (${n})`}const x={};const g=h.searchParams;if(g&&typeof g.forEach==="function"){g.forEach((b,z)=>{x[z]=b})}return{protocol:y.replace(":",""),host:S,pathname:f,params:Object.keys(x).length>0?x:null,isSecure:O}}catch{return{protocol:"",host:i,pathname:"",params:null,isSecure:false}}};const a=J(()=>s(i),[i,d,n,c]);const[u,T]=q(false);return o("div",{style:t.urlBreakdown,children:[o("div",{style:t.urlRow,children:[a.isSecure?e(X,{size:12,color:r.semantic.success}):e(ee,{size:12,color:r.semantic.warning}),e("span",{style:t.urlDomain,children:a.host}),o("span",{style:t.urlProtocol,children:["(",a.protocol.toUpperCase(),")"]}),e(A,{value:i,buttonStyle:t.copyButton})]}),e("div",{style:t.urlPathRow,children:o("span",{style:t.urlPath,children:[a.pathname,a.params?o("span",{style:t.urlQueryString,children:["?",new URLSearchParams(a.params).toString()]}):null]})}),a.params?o("div",{style:t.queryParamsCollapsible,children:[o("button",{type:"button",style:t.queryParamsToggle,onClick:()=>T(!u),"aria-expanded":u,children:[e("span",{style:t.queryParamsToggleText,children:"Query Parameters"}),e("span",{style:{...t.collapsibleCount,flex:1,textAlign:"left"},children:Object.keys(a.params).length}),u?e(W,{size:14,color:r.text.secondary}):e(H,{size:14,color:r.text.secondary})]}),u?e(R,{title:"",data:a.params,showTypeFilter:true,rawMode:true,initialExpanded:true}):null]}):null]})};export const NetworkEventDetailView=U(function i({event:n,ignoredPatterns:c=oe,onTogglePattern:d=le,showBodies:s=true}){const a=n.status?K(n.status):null;const u=!n.status&&!n.error;const T=Q();const D=n.requestData===void 0&&(n.requestBodyOmitted===true||(n.requestSize??0)>0);const h=n.responseData===void 0&&(n.responseBodyOmitted===true||(n.responseSize??0)>0);const y=n.headersOmitted===true;const[S,O]=q(null);const[f,x]=q(false);G(()=>{O(null);if(!T||!D&&!h&&!y){x(false);return}let l=false;x(true);T(n.id).then(m=>{if(!l)O(m)}).catch(()=>{}).finally(()=>{if(!l)x(false)});return()=>{l=true}},[n.id,T,D,h,y]);const g=n.requestData??S?.requestData??void 0;const b=n.responseData??S?.responseData??void 0;const z=(y?S?.requestHeaders:void 0)??n.requestHeaders;const M=(y?S?.responseHeaders:void 0)??n.responseHeaders;const j=()=>{const l={method:n.method,url:n.url,status:n.status,statusText:n.statusText,timestamp:new Date(n.timestamp).toISOString(),duration:n.duration?`${n.duration}ms`:"N/A",requestHeaders:z,requestData:g,responseHeaders:M,responseData:b,requestSize:n.requestSize?k(n.requestSize):"N/A",responseSize:n.responseSize?k(n.responseSize):"N/A",error:n.error,client:n.requestClient};return`# Network Request Details
 
 ## Request
-- **Method:** ${requestDetails.method}
-- **URL:** ${requestDetails.url}
-- **Client:** ${requestDetails.client || "N/A"}
-- **Timestamp:** ${requestDetails.timestamp}
+- **Method:** ${l.method}
+- **URL:** ${l.url}
+- **Client:** ${l.client||"N/A"}
+- **Timestamp:** ${l.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:** ${l.status||"Pending"}${l.statusText?` (${l.statusText})`:""}
+- **Duration:** ${l.duration}
+- **Request Size:** ${l.requestSize}
+- **Response Size:** ${l.responseSize}
+${l.error?`- **Error:** ${l.error}`:""}
 
 ## Request Headers
 \`\`\`json
-${JSON.stringify(requestDetails.requestHeaders, null, 2)}
+${JSON.stringify(l.requestHeaders,null,2)}
 \`\`\`
 
 ## Request Data
 \`\`\`json
-${JSON.stringify(requestDetails.requestData, null, 2)}
+${JSON.stringify(l.requestData,null,2)}
 \`\`\`
 
 ## Response Headers
 \`\`\`json
-${JSON.stringify(requestDetails.responseHeaders, null, 2)}
+${JSON.stringify(l.responseHeaders,null,2)}
 \`\`\`
 
 ## Response Data
 \`\`\`json
-${JSON.stringify(requestDetails.responseData, null, 2)}
+${JSON.stringify(l.responseData,null,2)}
 \`\`\`
-`;
-  };
-  return /*#__PURE__*/_jsxs("div", {
-    style: styles.container,
-    children: [/*#__PURE__*/_jsxs("div", {
-      style: styles.requestDetailsSection,
-      children: [/*#__PURE__*/_jsxs("div", {
-        style: styles.httpHeader,
-        children: [/*#__PURE__*/_jsx("span", {
-          style: styles.httpMethodBadge,
-          children: /*#__PURE__*/_jsx("span", {
-            style: styles.httpMethod,
-            children: event.method
-          })
-        }), event.status ? /*#__PURE__*/_jsx("span", {
-          style: {
-            ...styles.httpStatusBadge,
-            backgroundColor: `${status?.color}20`
-          },
-          children: /*#__PURE__*/_jsxs("span", {
-            style: {
-              ...styles.httpStatusText,
-              color: status?.color
-            },
-            children: [status?.text, " ", status?.meaning]
-          })
-        }) : isPending ? /*#__PURE__*/_jsxs("span", {
-          style: styles.pendingBadge,
-          children: [/*#__PURE__*/_jsx(Clock, {
-            size: 10,
-            color: macOSColors.semantic.warning
-          }), /*#__PURE__*/_jsx("span", {
-            style: styles.pendingBadgeText,
-            children: "Pending"
-          })]
-        }) : null, event.duration ? /*#__PURE__*/_jsxs("span", {
-          style: styles.httpDuration,
-          children: [/*#__PURE__*/_jsx(Clock, {
-            size: 10,
-            color: macOSColors.text.muted
-          }), /*#__PURE__*/_jsx("span", {
-            style: styles.httpDurationText,
-            children: formatDuration(event.duration)
-          })]
-        }) : null, event.override ? /*#__PURE__*/_jsxs("span", {
-          style: styles.overrideBadge,
-          children: [/*#__PURE__*/_jsx(FlaskConical, {
-            size: 10,
-            color: macOSColors.semantic.warning
-          }), /*#__PURE__*/_jsx("span", {
-            style: styles.overrideBadgeText,
-            children: event.override.ruleName || "Overridden"
-          })]
-        }) : null, /*#__PURE__*/_jsx(InlineCopyButton, {
-          value: getFullRequestDetails,
-          buttonStyle: styles.copyFullButton
-        })]
-      }), /*#__PURE__*/_jsx(UrlBreakdown, {
-        url: event.url,
-        requestData: requestData,
-        operationName: event.operationName,
-        graphqlVariables: event.graphqlVariables,
-        requestClient: event.requestClient
-      }), event.error ? /*#__PURE__*/_jsxs("div", {
-        style: styles.errorBox,
-        children: [/*#__PURE__*/_jsx(AlertCircle, {
-          size: 12,
-          color: macOSColors.semantic.error
-        }), /*#__PURE__*/_jsx("span", {
-          style: styles.errorText,
-          children: event.error
-        })]
-      }) : null]
-    }), /*#__PURE__*/_jsxs("div", {
-      style: styles.timingSection,
-      children: [/*#__PURE__*/_jsxs("div", {
-        style: styles.timingRow,
-        children: [/*#__PURE__*/_jsx(Clock, {
-          size: 12,
-          color: macOSColors.text.secondary
-        }), /*#__PURE__*/_jsx("span", {
-          style: styles.timingLabel,
-          children: "Started:"
-        }), /*#__PURE__*/_jsx("span", {
-          style: styles.timingValue,
-          children: formatRelativeTime(event.timestamp)
-        }), /*#__PURE__*/_jsxs("span", {
-          style: styles.timingExact,
-          children: ["(", new Date(event.timestamp).toLocaleTimeString(), ")"]
-        }), event.requestSize || event.responseSize ? /*#__PURE__*/_jsxs("span", {
-          style: styles.sizeRow,
-          children: [event.requestSize !== undefined ? /*#__PURE__*/_jsxs("span", {
-            style: styles.sizeItem,
-            children: [/*#__PURE__*/_jsx(Upload, {
-              size: 10,
-              color: macOSColors.semantic.info
-            }), /*#__PURE__*/_jsx("span", {
-              style: styles.sizeLabel,
-              children: "Sent:"
-            }), /*#__PURE__*/_jsx("span", {
-              style: styles.sizeValue,
-              children: formatBytes(event.requestSize)
-            })]
-          }) : null, event.responseSize !== undefined ? /*#__PURE__*/_jsxs("span", {
-            style: styles.sizeItem,
-            children: [/*#__PURE__*/_jsx(Download, {
-              size: 10,
-              color: NEUTRAL_ICON
-            }), /*#__PURE__*/_jsx("span", {
-              style: styles.sizeLabel,
-              children: "Received:"
-            }), /*#__PURE__*/_jsx("span", {
-              style: styles.sizeValue,
-              children: formatBytes(event.responseSize)
-            })]
-          }) : null]
-        }) : null]
-      }), event.timings ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("div", {
-          style: styles.phaseDivider
-        }), /*#__PURE__*/_jsx(TimingPhases, {
-          timings: event.timings,
-          total: event.duration ?? event.timings.ttfb + event.timings.download
-        })]
-      }) : null]
-    }), /*#__PURE__*/_jsx(CollapsibleSection, {
-      title: "Request Headers",
-      icon: /*#__PURE__*/_jsx(Upload, {
-        size: 14,
-        color: macOSColors.semantic.info
-      }),
-      defaultOpen: false,
-      count: Object.keys(requestHeaders).length,
-      children: Object.keys(requestHeaders).length > 0 ? /*#__PURE__*/_jsx("div", {
-        style: styles.dataViewerContainer,
-        children: /*#__PURE__*/_jsx(DataViewer, {
-          title: "",
-          data: requestHeaders,
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        })
-      }) : /*#__PURE__*/_jsx("div", {
-        style: styles.emptyText,
-        children: "No request headers"
-      })
-    }), /*#__PURE__*/_jsx(CollapsibleSection, {
-      title: "Response Headers",
-      icon: /*#__PURE__*/_jsx(Download, {
-        size: 14,
-        color: NEUTRAL_ICON
-      }),
-      defaultOpen: false,
-      count: Object.keys(responseHeaders).length,
-      children: Object.keys(responseHeaders).length > 0 ? /*#__PURE__*/_jsx("div", {
-        style: styles.dataViewerContainer,
-        children: /*#__PURE__*/_jsx(DataViewer, {
-          title: "",
-          data: responseHeaders,
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        })
-      }) : /*#__PURE__*/_jsx("div", {
-        style: styles.emptyText,
-        children: "No response headers yet"
-      })
-    }), requestData !== undefined ? /*#__PURE__*/_jsx(CollapsibleSection, {
-      title: "Request Body",
-      icon: /*#__PURE__*/_jsx(FileJson, {
-        size: 14,
-        color: macOSColors.semantic.info
-      }),
-      defaultOpen: false,
-      children: /*#__PURE__*/_jsx("div", {
-        style: styles.dataViewerContainer,
-        children: showBodies ? /*#__PURE__*/_jsx(DataViewer, {
-          title: "",
-          data: requestData,
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        }) : /*#__PURE__*/_jsx(BodyDeferred, {})
-      })
-    }) : requestBodyOmitted ? /*#__PURE__*/_jsx(CollapsibleSection, {
-      title: "Request Body",
-      icon: /*#__PURE__*/_jsx(FileJson, {
-        size: 14,
-        color: macOSColors.semantic.info
-      }),
-      defaultOpen: true,
-      children: /*#__PURE__*/_jsx("div", {
-        style: styles.emptyText,
-        children: isLoadingBody ? `Loading request body (${formatBytes(event.requestSize ?? 0)})…` : "Request body unavailable"
-      })
-    }) : null, responseData !== undefined ? /*#__PURE__*/_jsx(CollapsibleSection, {
-      title: "Response Body",
-      icon: /*#__PURE__*/_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__*/_jsx("div", {
-        style: styles.dataViewerContainer,
-        children: showBodies ? /*#__PURE__*/_jsx(DataViewer, {
-          title: "",
-          data: responseData,
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        }) : /*#__PURE__*/_jsx(BodyDeferred, {})
-      })
-    }) : responseBodyOmitted ? /*#__PURE__*/_jsx(CollapsibleSection, {
-      title: "Response Body",
-      icon: /*#__PURE__*/_jsx(FileJson, {
-        size: 14,
-        color: NEUTRAL_ICON
-      }),
-      defaultOpen: true,
-      children: /*#__PURE__*/_jsx("div", {
-        style: styles.emptyText,
-        children: isLoadingBody ? `Loading response body (${formatBytes(event.responseSize ?? 0)})…` : "Response body unavailable"
-      })
-    }) : null, /*#__PURE__*/_jsx(CollapsibleSection, {
-      title: "Filter Options",
-      icon: /*#__PURE__*/_jsx(Filter, {
-        size: 14,
-        color: macOSColors.semantic.warning
-      }),
-      defaultOpen: false,
-      children: /*#__PURE__*/_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__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsxs("button", {
-              type: "button",
-              style: {
-                ...styles.filterOption,
-                ...(isDomainIgnored ? styles.filterOptionActive : null)
-              },
-              onClick: () => domain && onTogglePattern(domain),
-              children: [/*#__PURE__*/_jsxs("span", {
-                style: styles.filterOptionLeft,
-                children: [/*#__PURE__*/_jsx(Globe, {
-                  size: 16,
-                  color: isDomainIgnored ? macOSColors.semantic.warning : macOSColors.text.muted
-                }), /*#__PURE__*/_jsxs("span", {
-                  style: styles.filterOptionContent,
-                  children: [/*#__PURE__*/_jsx("span", {
-                    style: styles.filterOptionLabel,
-                    children: "Ignore Domain"
-                  }), /*#__PURE__*/_jsx("span", {
-                    style: styles.filterOptionValue,
-                    children: domain || "N/A"
-                  })]
-                })]
-              }), /*#__PURE__*/_jsx("span", {
-                style: {
-                  ...styles.filterToggle,
-                  ...(isDomainIgnored ? styles.filterToggleActive : null)
-                },
-                children: /*#__PURE__*/_jsx("span", {
-                  style: {
-                    ...styles.filterToggleText,
-                    ...(isDomainIgnored ? styles.filterToggleTextActive : null)
-                  },
-                  children: isDomainIgnored ? "IGNORED" : "IGNORE"
-                })
-              })]
-            }), /*#__PURE__*/_jsxs("button", {
-              type: "button",
-              style: {
-                ...styles.filterOption,
-                ...(isUrlIgnored ? styles.filterOptionActive : null)
-              },
-              onClick: () => urlPath && onTogglePattern(urlPath),
-              children: [/*#__PURE__*/_jsxs("span", {
-                style: styles.filterOptionLeft,
-                children: [/*#__PURE__*/_jsx(Link, {
-                  size: 16,
-                  color: isUrlIgnored ? macOSColors.semantic.warning : macOSColors.text.muted
-                }), /*#__PURE__*/_jsxs("span", {
-                  style: styles.filterOptionContent,
-                  children: [/*#__PURE__*/_jsx("span", {
-                    style: styles.filterOptionLabel,
-                    children: "Ignore URL Pattern"
-                  }), /*#__PURE__*/_jsx("span", {
-                    style: {
-                      ...styles.filterOptionValue,
-                      ...styles.singleLine
-                    },
-                    children: urlPath || "N/A"
-                  })]
-                })]
-              }), /*#__PURE__*/_jsx("span", {
-                style: {
-                  ...styles.filterToggle,
-                  ...(isUrlIgnored ? styles.filterToggleActive : null)
-                },
-                children: /*#__PURE__*/_jsx("span", {
-                  style: {
-                    ...styles.filterToggleText,
-                    ...(isUrlIgnored ? styles.filterToggleTextActive : null)
-                  },
-                  children: isUrlIgnored ? "IGNORED" : "IGNORE"
-                })
-              })]
-            }), /*#__PURE__*/_jsx("div", {
-              style: styles.filterInfoBox,
-              children: /*#__PURE__*/_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 o("div",{style:t.container,children:[o("div",{style:t.requestDetailsSection,children:[o("div",{style:t.httpHeader,children:[e("span",{style:t.httpMethodBadge,children:e("span",{style:t.httpMethod,children:n.method})}),n.status?e("span",{style:{...t.httpStatusBadge,backgroundColor:`${a?.color}20`},children:o("span",{style:{...t.httpStatusText,color:a?.color},children:[a?.text," ",a?.meaning]})}):u?o("span",{style:t.pendingBadge,children:[e(L,{size:10,color:r.semantic.warning}),e("span",{style:t.pendingBadgeText,children:"Pending"})]}):null,n.duration?o("span",{style:t.httpDuration,children:[e(L,{size:10,color:r.text.muted}),e("span",{style:t.httpDurationText,children:N(n.duration)})]}):null,n.override?o("span",{style:t.overrideBadge,children:[e(ie,{size:10,color:r.semantic.warning}),e("span",{style:t.overrideBadgeText,children:n.override.ruleName||"Overridden"})]}):null,e(A,{value:j,buttonStyle:t.copyFullButton})]}),e(se,{url:n.url,requestData:g,operationName:n.operationName,graphqlVariables:n.graphqlVariables,requestClient:n.requestClient}),n.error?o("div",{style:t.errorBox,children:[e(Z,{size:12,color:r.semantic.error}),e("span",{style:t.errorText,children:n.error})]}):null]}),o("div",{style:t.timingSection,children:[o("div",{style:t.timingRow,children:[e(L,{size:12,color:r.text.secondary}),e("span",{style:t.timingLabel,children:"Started:"}),e("span",{style:t.timingValue,children:Y(n.timestamp)}),o("span",{style:t.timingExact,children:["(",new Date(n.timestamp).toLocaleTimeString(),")"]}),n.requestSize||n.responseSize?o("span",{style:t.sizeRow,children:[n.requestSize!==void 0?o("span",{style:t.sizeItem,children:[e(P,{size:10,color:r.semantic.info}),e("span",{style:t.sizeLabel,children:"Sent:"}),e("span",{style:t.sizeValue,children:k(n.requestSize)})]}):null,n.responseSize!==void 0?o("span",{style:t.sizeItem,children:[e(E,{size:10,color:$}),e("span",{style:t.sizeLabel,children:"Received:"}),e("span",{style:t.sizeValue,children:k(n.responseSize)})]}):null]}):null]}),n.timings?o(F,{children:[e("div",{style:t.phaseDivider}),e(ae,{timings:n.timings,total:n.duration??n.timings.ttfb+n.timings.download})]}):null]}),e(w,{title:"Request Headers",icon:e(P,{size:14,color:r.semantic.info}),defaultOpen:false,count:Object.keys(z).length,children:Object.keys(z).length>0?e("div",{style:t.dataViewerContainer,children:e(R,{title:"",data:z,showTypeFilter:true,rawMode:true,initialExpanded:true})}):e("div",{style:t.emptyText,children:"No request headers"})}),e(w,{title:"Response Headers",icon:e(E,{size:14,color:$}),defaultOpen:false,count:Object.keys(M).length,children:Object.keys(M).length>0?e("div",{style:t.dataViewerContainer,children:e(R,{title:"",data:M,showTypeFilter:true,rawMode:true,initialExpanded:true})}):e("div",{style:t.emptyText,children:"No response headers yet"})}),g!==void 0?e(w,{title:"Request Body",icon:e(v,{size:14,color:r.semantic.info}),defaultOpen:false,children:e("div",{style:t.dataViewerContainer,children:s?e(R,{title:"",data:g,showTypeFilter:true,rawMode:true,initialExpanded:true}):e(V,{})})}):D?e(w,{title:"Request Body",icon:e(v,{size:14,color:r.semantic.info}),defaultOpen:true,children:e("div",{style:t.emptyText,children:f?`Loading request body (${k(n.requestSize??0)})\u2026`:"Request body unavailable"})}):null,b!==void 0?e(w,{title:"Response Body",icon:e(v,{size:14,color:$}),defaultOpen:true,children:e("div",{style:t.dataViewerContainer,children:s?e(R,{title:"",data:b,showTypeFilter:true,rawMode:true,initialExpanded:true}):e(V,{})})}):h?e(w,{title:"Response Body",icon:e(v,{size:14,color:$}),defaultOpen:true,children:e("div",{style:t.emptyText,children:f?`Loading response body (${k(n.responseSize??0)})\u2026`:"Response body unavailable"})}):null,e(w,{title:"Filter Options",icon:e(te,{size:14,color:r.semantic.warning}),defaultOpen:false,children:e("div",{style:t.filterOptionsContainer,children:(()=>{let l="";let m="";try{const I=new URL(n.url);l=I.hostname;m=I.pathname}catch{m=n.url}const B=c.has(l);const C=c.has(m);return o(F,{children:[o("button",{type:"button",style:{...t.filterOption,...B?t.filterOptionActive:null},onClick:()=>l&&d(l),children:[o("span",{style:t.filterOptionLeft,children:[e(ne,{size:16,color:B?r.semantic.warning:r.text.muted}),o("span",{style:t.filterOptionContent,children:[e("span",{style:t.filterOptionLabel,children:"Ignore Domain"}),e("span",{style:t.filterOptionValue,children:l||"N/A"})]})]}),e("span",{style:{...t.filterToggle,...B?t.filterToggleActive:null},children:e("span",{style:{...t.filterToggleText,...B?t.filterToggleTextActive:null},children:B?"IGNORED":"IGNORE"})})]}),o("button",{type:"button",style:{...t.filterOption,...C?t.filterOptionActive:null},onClick:()=>m&&d(m),children:[o("span",{style:t.filterOptionLeft,children:[e(re,{size:16,color:C?r.semantic.warning:r.text.muted}),o("span",{style:t.filterOptionContent,children:[e("span",{style:t.filterOptionLabel,children:"Ignore URL Pattern"}),e("span",{style:{...t.filterOptionValue,...t.singleLine},children:m||"N/A"})]})]}),e("span",{style:{...t.filterToggle,...C?t.filterToggleActive:null},children:e("span",{style:{...t.filterToggleText,...C?t.filterToggleTextActive:null},children:C?"IGNORED":"IGNORE"})})]}),e("div",{style:t.filterInfoBox,children:e("span",{style:t.filterInfoText,children:"Ignored requests will be hidden from the network list. You can manage filters in the Filters tab."})})]})})()})})]})});const t={container:{flex:1,minHeight:0,overflowY:"auto",backgroundColor:r.background.base},requestDetailsSection:{margin:"12px 12px 0",backgroundColor:r.background.card,borderRadius:8,border:`1px solid ${r.border.default}`,padding:12},httpHeader:{display:"flex",flexDirection:"row",alignItems:"center",gap:8,marginBottom:12,flexWrap:"nowrap"},httpMethodBadge:{display:"inline-flex",backgroundColor:r.semantic.infoBackground,padding:"4px 8px",borderRadius:4},httpMethod:{color:r.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:r.semantic.warningBackground,padding:"4px 8px",borderRadius:4},pendingBadgeText:{color:r.semantic.warning,fontSize:11,fontWeight:600},httpDuration:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:4},httpDurationText:{color:r.text.secondary,fontSize:11},overrideBadge:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:4,padding:"3px 6px",borderRadius:4,backgroundColor:r.semantic.warningBackground},overrideBadgeText:{color:r.semantic.warning,fontSize:10,fontWeight:700},copyFullButton:{marginLeft:"auto",flexShrink:0,padding:4},urlBreakdown:{backgroundColor:r.background.input,borderRadius:4,padding:8},urlRow:{display:"flex",flexDirection:"row",alignItems:"center",gap:6,marginBottom:4},urlDomain:{color:r.text.primary,fontSize:12,fontWeight:600,flex:1,minWidth:0,overflowWrap:"anywhere"},urlProtocol:{color:r.text.muted,fontSize:10},copyButton:{padding:4},urlPathRow:{paddingLeft:18},urlPath:{color:r.text.secondary,fontSize:11,fontFamily:"ui-monospace, Menlo, monospace",display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden",overflowWrap:"anywhere"},urlQueryString:{color:r.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:r.background.hover,borderRadius:8,border:`1px solid ${r.border.default}`,marginBottom:8,cursor:"pointer",margin:"0 0 8px",font:"inherit"},queryParamsToggleText:{flexGrow:0,color:r.text.primary,fontSize:12,fontWeight:600,letterSpacing:.3,whiteSpace:"nowrap"},timingSection:{margin:"8px 12px 0",backgroundColor:r.background.card,borderRadius:8,border:`1px solid ${r.border.default}`,padding:12},timingRow:{display:"flex",flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},timingLabel:{color:r.text.secondary,fontSize:11},timingValue:{color:r.text.primary,fontSize:11,fontWeight:600},timingExact:{color:r.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:r.text.muted,fontSize:10},sizeValue:{color:r.semantic.info,fontSize:10,fontFamily:"ui-monospace, Menlo, monospace",fontWeight:600},phaseDivider:{height:1,backgroundColor:r.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:r.text.secondary},phaseHint:{fontSize:10,color:r.text.muted},phaseTrack:{flex:1,minWidth:0,height:7,borderRadius:4,backgroundColor:r.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:r.text.primary},collapsibleSection:{margin:"8px 12px 0",backgroundColor:r.background.card,borderRadius:8,border:`1px solid ${r.border.default}`,overflow:"hidden"},collapsibleHeader:{display:"flex",width:"100%",boxSizing:"border-box",flexDirection:"row",alignItems:"center",justifyContent:"space-between",padding:12,backgroundColor:r.background.hover,border:"none",cursor:"pointer",margin:0,font:"inherit",textAlign:"left"},collapsibleTitle:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:8},collapsibleTitleText:{color:r.text.primary,fontSize:13,fontWeight:600},collapsibleCount:{color:r.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:r.semantic.errorBackground,padding:8,borderRadius:4,marginTop:8},errorText:{color:r.semantic.error,fontSize:11,flex:1,minWidth:0,overflowWrap:"anywhere"},emptyText:{color:r.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:r.background.hover,borderRadius:8,padding:12,border:`1px solid ${r.border.default}`,cursor:"pointer",margin:0,font:"inherit",textAlign:"left"},filterOptionActive:{backgroundColor:r.semantic.warningBackground,border:`1px solid ${r.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:r.text.secondary,fontSize:11,marginBottom:2,textTransform:"uppercase",letterSpacing:.5},filterOptionValue:{color:r.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:r.background.input,border:`1px solid ${r.border.default}`,flexShrink:0},filterToggleActive:{backgroundColor:`${r.semantic.warning}26`,border:`1px solid ${r.semantic.warning}4D`},filterToggleText:{fontSize:10,fontWeight:600,color:r.text.muted,letterSpacing:.5},filterToggleTextActive:{color:r.semantic.warning},filterInfoBox:{backgroundColor:r.semantic.infoBackground,borderRadius:6,padding:10,border:`1px solid ${r.semantic.info}33`},filterInfoText:{color:r.text.secondary,fontSize:11,lineHeight:"16px"}};