@buoy-gg/network 7.0.15 → 7.0.16

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

@@ -0,0 +1,1496 @@
+"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();
+  const requestBodyOmitted = event.requestData === undefined && (event.requestSize ?? 0) > 0;
+  const responseBodyOmitted = event.responseData === undefined && (event.responseSize ?? 0) > 0;
+  const [resolvedBody, setResolvedBody] = useState(null);
+  const [isLoadingBody, setIsLoadingBody] = useState(false);
+  useEffect(() => {
+    setResolvedBody(null);
+    if (!resolveBody || !requestBodyOmitted && !responseBodyOmitted) {
+      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]);
+
+  // 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;
+
+  // 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: event.requestHeaders,
+      requestData,
+      responseHeaders: event.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
+
+## Request
+- **Method:** ${requestDetails.method}
+- **URL:** ${requestDetails.url}
+- **Client:** ${requestDetails.client || "N/A"}
+- **Timestamp:** ${requestDetails.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}` : ""}
+
+## Request Headers
+\`\`\`json
+${JSON.stringify(requestDetails.requestHeaders, null, 2)}
+\`\`\`
+
+## Request Data
+\`\`\`json
+${JSON.stringify(requestDetails.requestData, null, 2)}
+\`\`\`
+
+## Response Headers
+\`\`\`json
+${JSON.stringify(requestDetails.responseHeaders, null, 2)}
+\`\`\`
+
+## Response Data
+\`\`\`json
+${JSON.stringify(requestDetails.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(event.requestHeaders).length,
+      children: Object.keys(event.requestHeaders).length > 0 ? /*#__PURE__*/_jsx("div", {
+        style: styles.dataViewerContainer,
+        children: /*#__PURE__*/_jsx(DataViewer, {
+          title: "",
+          data: event.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(event.responseHeaders).length,
+      children: Object.keys(event.responseHeaders).length > 0 ? /*#__PURE__*/_jsx("div", {
+        style: styles.dataViewerContainer,
+        children: /*#__PURE__*/_jsx(DataViewer, {
+          title: "",
+          data: event.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"
+  }
+};