@buoy-gg/network 7.0.40 → 7.0.42

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

@@ -1,1149 +1,35 @@
-"use strict";
-
-import { useState, useEffect, useMemo, memo } from "react";
-import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
-import { Clock, Upload, Download, AlertCircle, ChevronDown, ChevronUp, Lock, Unlock, FileJson, Filter, Globe, Link, Copy, FlaskConical, InlineCopyButton, macOSColors, night, useFeatureGate, UpgradeModal, monoFont } from "@buoy-gg/shared-ui";
-import { formatBytes, formatDuration, formatHttpStatus } from "../utils/formatting";
-import { formatRelativeTime } from "@buoy-gg/shared-ui";
-import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
-import { formatGraphQLDisplay } from "../utils/formatGraphQLVariables";
-import { useNetworkBodyResolver } from "../sync/networkBodyResolver";
-
-/**
- * Colour for the icons that merely LABEL a section (Sent/Received, the JSON
- * body glyphs). The Lock/Unlock pair keeps its colour because
- * secure-vs-insecure is a genuine signal, as does the status pill.
- */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const NEUTRAL_ICON = night.color.accent;
-
-/** Hoisted so the defaults don't mint a new Set/function per render. */
-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 — an older device
- * talking to a newer dashboard, or a request that died before headers. A phase
- * row reading `0ms` would claim we measured zero, which is a different and
- * false statement from "we didn't measure this".
- *
- * Only two phases, on purpose. Queueing / DNS / TLS / request-send all happen
- * below the JS layer with nothing to read them from — see NetworkTimings. The
- * design this came from shows five, but derives the other three by multiplying
- * the total by fixed fractions, i.e. they are invented. Two real ones are worth
- * more than five where three are decoration.
- */
-const TimingPhases = ({
-  timings,
-  total
-}) => {
-  // Guard the divisor: a sub-millisecond request would otherwise divide by 0.
-  const span = Math.max(1, total);
-  const phases = [{
-    // Deliberately NOT called "server time". Measured from JS, this includes
-    // queueing, DNS, TLS and sending the request — everything before the
-    // headers land. The subtitle says so rather than implying Chrome-grade
-    // precision we don't have.
-    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(View, {
-    style: styles.phaseList,
-    children: phases.map(phase => /*#__PURE__*/_jsxs(View, {
-      style: styles.phaseRow,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.phaseLabelGroup,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.phaseLabel,
-          children: phase.label
-        }), phase.hint ? /*#__PURE__*/_jsx(Text, {
-          style: styles.phaseHint,
-          children: phase.hint
-        }) : null]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.phaseTrack,
-        children: /*#__PURE__*/_jsx(View, {
-          style: [styles.phaseBar, {
-            backgroundColor: phase.color,
-            // A floor so a 1ms phase is still a visible tick, and a
-            // ceiling because `total` and the phases are measured at
-            // different points — ttfb can exceed event.duration, which
-            // would push the bar past its track and over the label.
-            width: `${Math.min(100, Math.max(1, phase.value / span * 100))}%`
-          }]
-        })
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.phaseValue,
-        children: formatDuration(phase.value)
-      })]
-    }, phase.label))
-  });
-};
-
-/**
- * Stand-in for a body tree while the prev/next cursor is still moving.
- *
- * Deliberately a fixed-height nothing: it must cost ~0 to render (that is the
- * entire point) and it must not resize the scroll view as the real tree swaps
- * in, or fast stepping would make the page jump under the reader.
- */
-const BodyDeferred = () => /*#__PURE__*/_jsx(View, {
-  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(View, {
-    style: styles.collapsibleSection,
-    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-      style: styles.collapsibleHeader,
-      onPress: () => setIsOpen(!isOpen),
-      testID: `buoy-network-section-${title.toLowerCase().replace(/\s+/g, "-")}`,
-      accessibilityRole: "button",
-      accessibilityLabel: title,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.collapsibleTitle,
-        children: [icon, /*#__PURE__*/_jsx(Text, {
-          style: styles.collapsibleTitleText,
-          children: title
-        }), count !== undefined ? /*#__PURE__*/_jsx(Text, {
-          style: styles.collapsibleCount,
-          children: count
-        }) : null]
-      }), isOpen ? /*#__PURE__*/_jsx(ChevronUp, {
-        size: 16,
-        color: night.color.textSecondary
-      }) : /*#__PURE__*/_jsx(ChevronDown, {
-        size: 16,
-        color: night.color.textSecondary
-      })]
-    }), isOpen ? /*#__PURE__*/_jsx(View, {
-      style: styles.collapsibleContent,
-      children: children
-    }) : null]
-  });
-};
-
-// URL breakdown component matching Sentry style
-const UrlBreakdown = ({
-  url,
-  requestData,
-  operationName,
-  graphqlVariables,
-  requestClient,
-  isPro = false,
-  onUpgradePress
-}) => {
-  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 || "");
-
-      // If this is a GraphQL request with operation name, format with arrow notation
-      // Matches React Query pattern: "GetPokemon › Sandshrew"
-      if (requestClient === "graphql" && operationName) {
-        const graphqlDisplay = formatGraphQLDisplay(operationName, graphqlVariables);
-        pathname = `${pathname} (${graphqlDisplay})`;
-      } else if (operationName) {
-        // For non-GraphQL requests with operation names (e.g., gRPC)
-        pathname = `${pathname} (${operationName})`;
-      }
-
-      // Parse query parameters
-      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. `parseUrl` builds a fresh `params` object every call, and
-   * that object is handed to `DataViewer` as its `data` prop — whose flattening
-   * effect keys on `data` by IDENTITY. Computed inline, every render of this
-   * component produced a new object, so the effect re-fired and re-entered
-   * "Processing data…" forever. The detail view re-renders constantly on the
-   * dashboard (it tracks the live event as the device pushes snapshots ~4×/sec),
-   * so this pinned the query-parameter viewer in a permanent processing loop.
-   *
-   * `url` is a string, so this is stable by value.
-   */
-  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(View, {
-    style: styles.urlBreakdown,
-    children: [/*#__PURE__*/_jsxs(View, {
-      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(Text, {
-        style: styles.urlDomain,
-        children: urlParts.host
-      }), /*#__PURE__*/_jsxs(Text, {
-        style: styles.urlProtocol,
-        children: ["(", urlParts.protocol.toUpperCase(), ")"]
-      }), isPro ? /*#__PURE__*/_jsx(InlineCopyButton, {
-        value: url,
-        buttonStyle: styles.copyButton
-      }) : /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: styles.copyButton,
-        onPress: onUpgradePress,
-        activeOpacity: 0.7,
-        children: /*#__PURE__*/_jsx(Copy, {
-          size: 14,
-          color: night.color.textSecondary
-        })
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.urlPathRow,
-      children: /*#__PURE__*/_jsxs(Text, {
-        style: styles.urlPath,
-        numberOfLines: 2,
-        children: [urlParts.pathname, urlParts.params ? /*#__PURE__*/_jsxs(Text, {
-          style: styles.urlQueryString,
-          children: ["?", new URLSearchParams(urlParts.params).toString()]
-        }) : null]
-      })
-    }), urlParts.params ? /*#__PURE__*/_jsxs(View, {
-      style: styles.queryParamsCollapsible,
-      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: styles.queryParamsToggle,
-        onPress: () => setShowParams(!showParams),
-        activeOpacity: 0.7,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.queryParamsToggleText,
-          children: "Query Parameters"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.collapsibleCount,
-          children: Object.keys(urlParts.params).length
-        }), showParams ? /*#__PURE__*/_jsx(ChevronUp, {
-          size: 14,
-          color: night.color.textSecondary
-        }) : /*#__PURE__*/_jsx(ChevronDown, {
-          size: 14,
-          color: night.color.textSecondary
-        })]
-      }), showParams ? /*#__PURE__*/_jsx(DataViewer, {
-        title: "",
-        data: urlParts.params,
-        showTypeFilter: true,
-        rawMode: true,
-        initialExpanded: true
-      }) : null]
-    }) : null]
-  });
-};
-
-/**
- * Detailed inspector rendering request/response metadata for a single network event. Designed to
- * mimic Sentry’s layout with collapsible sections, diff views, and quick copy affordances.
- *
- * MEMOIZED with profiling evidence, not by reflex. Two render paths hit this
- * subtree with unchanged props:
- *
- *  1. `useLiveNetworkEvent` re-subscribes when the selected ID changes, and
- *     `subscribeToEvents` replays immediately — so every step through the
- *     prev/next footer committed the SAME event object twice, rendering this
- *     whole tree (expanded DataViewer included) a second time for nothing.
- *  2. Any modal-root state change (header search, mode toggle) re-renders the
- *     shell, and the detail body has nothing to do with it.
- *
- * Both props besides `event` are stable by construction — `values` is memoized
- * in `useIgnoredPatterns` and `toggle` is module-scope there — so the bail-out
- * actually fires.
- *
- * Measured baseline (js-top, example-dev-build, 5 steps over 109–324KB
- * pokeapi responses): 307ms of React work across 5 steps ≈ 61ms of JS per
- * step. Case 1 alone is half of that, since it re-ran the whole body render.
- */
-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;
-
-  // Check Pro status for copy features
-  const {
-    isPro
-  } = useFeatureGate();
-  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
-
-  // Auto-close upgrade modal when user becomes Pro
-  useEffect(() => {
-    if (showUpgradeModal && isPro) {
-      setShowUpgradeModal(false);
-    }
-  }, [showUpgradeModal, isPro]);
-
-  // Large bodies are omitted from synced snapshots (see networkSyncAdapter) and
-  // fetched on demand through the resolver. On the device there is no resolver
-  // and bodies are always inline, so this is a no-op there.
-  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
-  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{useState as H,useEffect as U,useMemo as ee,memo as te}from"react";import{View as l,Text as i,StyleSheet as oe,ScrollView as re,TouchableOpacity as O}from"react-native";import{Clock as M,Upload as G,Download as J,AlertCircle as le,ChevronDown as _,ChevronUp as Q,Lock as ie,Unlock as ne,FileJson as E,Filter as ae,Globe as se,Link as ce,Copy as Y,FlaskConical as de,InlineCopyButton as K,macOSColors as N,night as o,useFeatureGate as ue,UpgradeModal as pe,monoFont as R}from"@buoy-gg/shared-ui";import{formatBytes as q,formatDuration as X,formatHttpStatus as ge}from"../utils/formatting";import{formatRelativeTime as he}from"@buoy-gg/shared-ui";import{DataViewer as F}from"@buoy-gg/shared-ui/dataViewer";import{formatGraphQLDisplay as fe}from"../utils/formatGraphQLVariables";import{useNetworkBodyResolver as ye}from"../sync/networkBodyResolver";import{jsx as e,jsxs as n,Fragment as W}from"react/jsx-runtime";const A=o.color.accent;const me=new Set;const be=()=>{};const Se=({timings:d,total:r})=>{const u=Math.max(1,r);const h=[{label:"Waiting (TTFB)",hint:"incl. queue, DNS, TLS",value:d.ttfb,color:N.semantic.warning},{label:"Content download",hint:void 0,value:d.download,color:N.semantic.success}];return e(l,{style:t.phaseList,children:h.map(s=>n(l,{style:t.phaseRow,children:[n(l,{style:t.phaseLabelGroup,children:[e(i,{style:t.phaseLabel,children:s.label}),s.hint?e(i,{style:t.phaseHint,children:s.hint}):null]}),e(l,{style:t.phaseTrack,children:e(l,{style:[t.phaseBar,{backgroundColor:s.color,width:`${Math.min(100,Math.max(1,s.value/u*100))}%`}]})}),e(i,{style:t.phaseValue,children:X(s.value)})]},s.label))})};const Z=()=>e(l,{style:t.bodyDeferred});const T=({title:d,icon:r,children:u,defaultOpen:h=false,count:s})=>{const[p,B]=H(h);return n(l,{style:t.collapsibleSection,children:[n(O,{style:t.collapsibleHeader,onPress:()=>B(!p),testID:`buoy-network-section-${d.toLowerCase().replace(/\s+/g,"-")}`,accessibilityRole:"button",accessibilityLabel:d,children:[n(l,{style:t.collapsibleTitle,children:[r,e(i,{style:t.collapsibleTitleText,children:d}),s!==void 0?e(i,{style:t.collapsibleCount,children:s}):null]}),p?e(Q,{size:16,color:o.color.textSecondary}):e(_,{size:16,color:o.color.textSecondary})]}),p?e(l,{style:t.collapsibleContent,children:u}):null]})};const xe=({url:d,requestData:r,operationName:u,graphqlVariables:h,requestClient:s,isPro:p=false,onUpgradePress:B})=>{const g=L=>{try{const y=new URL(L);const x=String(y.protocol||"");const C=String(y.host||"");const V=x==="https:";let m=String(y.pathname||"");if(s==="graphql"&&u){const z=fe(u,h);m=`${m} (${z})`}else if(u){m=`${m} (${u})`}const w={};const b=y.searchParams;if(b&&typeof b.forEach==="function"){b.forEach((z,D)=>{w[D]=z})}return{protocol:x.replace(":",""),host:C,pathname:m,params:Object.keys(w).length>0?w:null,isSecure:V}}catch{return{protocol:"",host:d,pathname:"",params:null,isSecure:false}}};const c=ee(()=>g(d),[d,s,u,h]);const[f,k]=H(false);return n(l,{style:t.urlBreakdown,children:[n(l,{style:t.urlRow,children:[c.isSecure?e(ie,{size:12,color:N.semantic.success}):e(ne,{size:12,color:N.semantic.warning}),e(i,{style:t.urlDomain,children:c.host}),n(i,{style:t.urlProtocol,children:["(",c.protocol.toUpperCase(),")"]}),p?e(K,{value:d,buttonStyle:t.copyButton}):e(O,{style:t.copyButton,onPress:B,activeOpacity:.7,children:e(Y,{size:14,color:o.color.textSecondary})})]}),e(l,{style:t.urlPathRow,children:n(i,{style:t.urlPath,numberOfLines:2,children:[c.pathname,c.params?n(i,{style:t.urlQueryString,children:["?",new URLSearchParams(c.params).toString()]}):null]})}),c.params?n(l,{style:t.queryParamsCollapsible,children:[n(O,{style:t.queryParamsToggle,onPress:()=>k(!f),activeOpacity:.7,children:[e(i,{style:t.queryParamsToggleText,children:"Query Parameters"}),e(i,{style:t.collapsibleCount,children:Object.keys(c.params).length}),f?e(Q,{size:14,color:o.color.textSecondary}):e(_,{size:14,color:o.color.textSecondary})]}),f?e(F,{title:"",data:c.params,showTypeFilter:true,rawMode:true,initialExpanded:true}):null]}):null]})};export const NetworkEventDetailView=te(function d({event:r,ignoredPatterns:u=me,onTogglePattern:h=be,showBodies:s=true}){const p=r.status?ge(r.status):null;const B=!r.status&&!r.error;const{isPro:g}=ue();const[c,f]=H(false);U(()=>{if(c&&g){f(false)}},[c,g]);const k=ye();const L=r.requestData===void 0&&(r.requestBodyOmitted===true||(r.requestSize??0)>0);const y=r.responseData===void 0&&(r.responseBodyOmitted===true||(r.responseSize??0)>0);const x=r.headersOmitted===true;const[C,V]=H(null);const[m,w]=H(false);U(()=>{V(null);if(!k||!L&&!y&&!x){w(false);return}let a=false;w(true);k(r.id).then(S=>{if(!a)V(S)}).catch(()=>{}).finally(()=>{if(!a)w(false)});return()=>{a=true}},[r.id,k,L,y,x]);const b=r.requestData??C?.requestData??void 0;const z=r.responseData??C?.responseData??void 0;const D=(x?C?.requestHeaders:void 0)??r.requestHeaders;const $=(x?C?.responseHeaders:void 0)??r.responseHeaders;const v=()=>{const a={method:r.method,url:r.url,status:r.status,statusText:r.statusText,timestamp:new Date(r.timestamp).toISOString(),duration:r.duration?`${r.duration}ms`:"N/A",requestHeaders:D,requestData:b,responseHeaders:$,responseData:z,requestSize:r.requestSize?q(r.requestSize):"N/A",responseSize:r.responseSize?q(r.responseSize):"N/A",error:r.error,client:r.requestClient};return`# Network Request Details
 
 ## Request
-- **Method:** ${requestDetails.method}
-- **URL:** ${requestDetails.url}
-- **Client:** ${requestDetails.client || "N/A"}
-- **Timestamp:** ${requestDetails.timestamp}
+- **Method:** ${a.method}
+- **URL:** ${a.url}
+- **Client:** ${a.client||"N/A"}
+- **Timestamp:** ${a.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:** ${a.status||"Pending"}${a.statusText?` (${a.statusText})`:""}
+- **Duration:** ${a.duration}
+- **Request Size:** ${a.requestSize}
+- **Response Size:** ${a.responseSize}
+${a.error?`- **Error:** ${a.error}`:""}
 
 ## Request Headers
 \`\`\`json
-${JSON.stringify(requestDetails.requestHeaders, null, 2)}
+${JSON.stringify(a.requestHeaders,null,2)}
 \`\`\`
 
 ## Request Data
 \`\`\`json
-${JSON.stringify(requestDetails.requestData, null, 2)}
+${JSON.stringify(a.requestData,null,2)}
 \`\`\`
 
 ## Response Headers
 \`\`\`json
-${JSON.stringify(requestDetails.responseHeaders, null, 2)}
+${JSON.stringify(a.responseHeaders,null,2)}
 \`\`\`
 
 ## Response Data
 \`\`\`json
-${JSON.stringify(requestDetails.responseData, null, 2)}
+${JSON.stringify(a.responseData,null,2)}
 \`\`\`
-`;
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(ScrollView, {
-      testID: "buoy-network-detail-scroll",
-      style: styles.container,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.requestDetailsSection,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.httpHeader,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: styles.httpMethodBadge,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.httpMethod,
-              children: event.method
-            })
-          }), event.status ? /*#__PURE__*/_jsx(View, {
-            style: [styles.httpStatusBadge, {
-              backgroundColor: `${status?.color}20`
-            }],
-            children: /*#__PURE__*/_jsxs(Text, {
-              style: [styles.httpStatusText, {
-                color: status?.color
-              }],
-              children: [status?.text, " ", status?.meaning]
-            })
-          }) : isPending ? /*#__PURE__*/_jsxs(View, {
-            style: styles.pendingBadge,
-            children: [/*#__PURE__*/_jsx(Clock, {
-              size: 10,
-              color: night.color.warning
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.pendingBadgeText,
-              children: "Pending"
-            })]
-          }) : null, event.condition && /*#__PURE__*/_jsxs(Text, {
-            style: {
-              color: "#FFCC66"
-            },
-            children: ["Conditions: ", event.condition.profile, " (+", event.condition.delayMs, " ms)"]
-          }), event.duration ? /*#__PURE__*/_jsxs(View, {
-            style: styles.httpDuration,
-            children: [/*#__PURE__*/_jsx(Clock, {
-              size: 10,
-              color: night.color.textTertiary
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.httpDurationText,
-              children: formatDuration(event.duration)
-            })]
-          }) : null, event.override ? /*#__PURE__*/_jsxs(View, {
-            style: styles.overrideBadge,
-            children: [/*#__PURE__*/_jsx(FlaskConical, {
-              size: 10,
-              color: night.color.warning
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.overrideBadgeText,
-              children: event.override.ruleName || "Overridden"
-            })]
-          }) : null, isPro ? /*#__PURE__*/_jsx(InlineCopyButton
-          // LAZY, not `getFullRequestDetails()`. CopyButton resolves a
-          // function value at press time; calling it here instead
-          // pretty-printed the headers AND both bodies on every render —
-          // four JSON.stringify passes over the full payload just to have
-          // a string nobody asked for yet. Same shape NetworkSavedScreen
-          // already uses for its copy button.
-          , {
-            value: getFullRequestDetails,
-            buttonStyle: styles.copyFullButton
-          }) : /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.copyFullButton,
-            onPress: () => setShowUpgradeModal(true),
-            activeOpacity: 0.7,
-            children: /*#__PURE__*/_jsx(Copy, {
-              size: 14,
-              color: night.color.textSecondary
-            })
-          })]
-        }), /*#__PURE__*/_jsx(UrlBreakdown, {
-          url: event.url,
-          requestData: requestData,
-          operationName: event.operationName,
-          graphqlVariables: event.graphqlVariables,
-          requestClient: event.requestClient,
-          isPro: isPro,
-          onUpgradePress: () => setShowUpgradeModal(true)
-        }), event.error ? /*#__PURE__*/_jsxs(View, {
-          style: styles.errorBox,
-          children: [/*#__PURE__*/_jsx(AlertCircle, {
-            size: 12,
-            color: night.color.danger
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.errorText,
-            children: event.error
-          })]
-        }) : null]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.timingSection,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.timingRow,
-          children: [/*#__PURE__*/_jsx(Clock, {
-            size: 12,
-            color: night.color.textSecondary
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.timingLabel,
-            children: "Started:"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.timingValue,
-            children: formatRelativeTime(event.timestamp)
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: styles.timingExact,
-            children: ["(", new Date(event.timestamp).toLocaleTimeString(), ")"]
-          }), event.requestSize || event.responseSize ? /*#__PURE__*/_jsxs(View, {
-            style: styles.sizeRow,
-            children: [event.requestSize !== undefined ? /*#__PURE__*/_jsxs(View, {
-              style: styles.sizeItem,
-              children: [/*#__PURE__*/_jsx(Upload, {
-                size: 10,
-                color: night.color.info
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.sizeLabel,
-                children: "Sent:"
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.sizeValue,
-                children: formatBytes(event.requestSize)
-              })]
-            }) : null, event.responseSize !== undefined ? /*#__PURE__*/_jsxs(View, {
-              style: styles.sizeItem,
-              children: [/*#__PURE__*/_jsx(Download, {
-                size: 10,
-                color: NEUTRAL_ICON
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.sizeLabel,
-                children: "Received:"
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.sizeValue,
-                children: formatBytes(event.responseSize)
-              })]
-            }) : null]
-          }) : null]
-        }), event.timings ? /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(View, {
-            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: night.color.info
-        }),
-        defaultOpen: false,
-        count: Object.keys(requestHeaders).length,
-        children: Object.keys(requestHeaders).length > 0 ? /*#__PURE__*/_jsx(View, {
-          style: styles.dataViewerContainer,
-          children: /*#__PURE__*/_jsx(DataViewer, {
-            title: "",
-            data: requestHeaders,
-            showTypeFilter: true,
-            rawMode: true,
-            initialExpanded: true,
-            disableCopy: !isPro
-          })
-        }) : /*#__PURE__*/_jsx(Text, {
-          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(View, {
-          style: styles.dataViewerContainer,
-          children: /*#__PURE__*/_jsx(DataViewer, {
-            title: "",
-            data: responseHeaders,
-            showTypeFilter: true,
-            rawMode: true,
-            initialExpanded: true,
-            disableCopy: !isPro
-          })
-        }) : /*#__PURE__*/_jsx(Text, {
-          style: styles.emptyText,
-          children: "No response headers yet"
-        })
-      }), requestData !== undefined ? /*#__PURE__*/_jsx(CollapsibleSection, {
-        title: "Request Body",
-        icon: /*#__PURE__*/_jsx(FileJson, {
-          size: 14,
-          color: night.color.accent
-        }),
-        defaultOpen: false,
-        children: /*#__PURE__*/_jsx(View, {
-          style: styles.dataViewerContainer,
-          children: showBodies ? /*#__PURE__*/_jsx(DataViewer, {
-            title: "",
-            data: requestData,
-            showTypeFilter: true,
-            rawMode: true,
-            initialExpanded: true,
-            disableCopy: !isPro
-          }) : /*#__PURE__*/_jsx(BodyDeferred, {})
-        })
-      }) : requestBodyOmitted ? /*#__PURE__*/_jsx(CollapsibleSection, {
-        title: "Request Body",
-        icon: /*#__PURE__*/_jsx(FileJson, {
-          size: 14,
-          color: night.color.accent
-        }),
-        defaultOpen: true,
-        children: /*#__PURE__*/_jsx(Text, {
-          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 — the design has it
-        // expanded on arrival, everything else closed.
-        ,
-        defaultOpen: true,
-        children: /*#__PURE__*/_jsx(View, {
-          style: styles.dataViewerContainer,
-          children: showBodies ? /*#__PURE__*/_jsx(DataViewer, {
-            title: "",
-            data: responseData,
-            showTypeFilter: true,
-            rawMode: true,
-            initialExpanded: true,
-            disableCopy: !isPro
-          }) : /*#__PURE__*/_jsx(BodyDeferred, {})
-        })
-      }) : responseBodyOmitted ? /*#__PURE__*/_jsx(CollapsibleSection, {
-        title: "Response Body",
-        icon: /*#__PURE__*/_jsx(FileJson, {
-          size: 14,
-          color: NEUTRAL_ICON
-        }),
-        defaultOpen: true,
-        children: /*#__PURE__*/_jsx(Text, {
-          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: night.color.warning
-        }),
-        defaultOpen: false,
-        children: /*#__PURE__*/_jsx(View, {
-          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(TouchableOpacity, {
-                style: [styles.filterOption, isDomainIgnored && styles.filterOptionActive],
-                onPress: () => domain && onTogglePattern(domain),
-                children: [/*#__PURE__*/_jsxs(View, {
-                  style: styles.filterOptionLeft,
-                  children: [/*#__PURE__*/_jsx(Globe, {
-                    size: 16,
-                    color: isDomainIgnored ? night.color.warning : night.color.textTertiary
-                  }), /*#__PURE__*/_jsxs(View, {
-                    style: styles.filterOptionContent,
-                    children: [/*#__PURE__*/_jsx(Text, {
-                      style: styles.filterOptionLabel,
-                      children: "Ignore Domain"
-                    }), /*#__PURE__*/_jsx(Text, {
-                      style: styles.filterOptionValue,
-                      children: domain || "N/A"
-                    })]
-                  })]
-                }), /*#__PURE__*/_jsx(View, {
-                  style: [styles.filterToggle, isDomainIgnored && styles.filterToggleActive],
-                  children: /*#__PURE__*/_jsx(Text, {
-                    style: [styles.filterToggleText, isDomainIgnored && styles.filterToggleTextActive],
-                    children: isDomainIgnored ? "IGNORED" : "IGNORE"
-                  })
-                })]
-              }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-                style: [styles.filterOption, isUrlIgnored && styles.filterOptionActive],
-                onPress: () => urlPath && onTogglePattern(urlPath),
-                children: [/*#__PURE__*/_jsxs(View, {
-                  style: styles.filterOptionLeft,
-                  children: [/*#__PURE__*/_jsx(Link, {
-                    size: 16,
-                    color: isUrlIgnored ? night.color.warning : night.color.textTertiary
-                  }), /*#__PURE__*/_jsxs(View, {
-                    style: styles.filterOptionContent,
-                    children: [/*#__PURE__*/_jsx(Text, {
-                      style: styles.filterOptionLabel,
-                      children: "Ignore URL Pattern"
-                    }), /*#__PURE__*/_jsx(Text, {
-                      style: styles.filterOptionValue,
-                      numberOfLines: 1,
-                      children: urlPath || "N/A"
-                    })]
-                  })]
-                }), /*#__PURE__*/_jsx(View, {
-                  style: [styles.filterToggle, isUrlIgnored && styles.filterToggleActive],
-                  children: /*#__PURE__*/_jsx(Text, {
-                    style: [styles.filterToggleText, isUrlIgnored && styles.filterToggleTextActive],
-                    children: isUrlIgnored ? "IGNORED" : "IGNORE"
-                  })
-                })]
-              }), /*#__PURE__*/_jsx(View, {
-                style: styles.filterInfoBox,
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: styles.filterInfoText,
-                  children: "Ignored requests will be hidden from the network list. You can manage filters in the Filters tab."
-                })
-              })]
-            });
-          })()
-        })
-      })]
-    }), /*#__PURE__*/_jsx(UpgradeModal, {
-      visible: showUpgradeModal,
-      onClose: () => setShowUpgradeModal(false),
-      featureName: "Copy Request Details",
-      description: "Copy network request details to share or debug issues.",
-      benefits: ["Copy full request details including headers and body", "Export to JSON, Markdown, or plain text", "Share request data with teammates", "Feed data to AI assistants for debugging"]
-    })]
-  });
-});
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  // Request details section - always visible
-  requestDetailsSection: {
-    marginHorizontal: 12,
-    marginTop: 12,
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 12
-  },
-  httpHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginBottom: 12,
-    flexWrap: "nowrap"
-  },
-  httpMethodBadge: {
-    backgroundColor: night.color.infoSoft,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4
-  },
-  httpMethod: {
-    color: night.color.info,
-    fontSize: 11,
-    fontWeight: "700",
-    letterSpacing: 0.5
-  },
-  httpStatusBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4
-  },
-  httpStatusText: {
-    fontSize: 11,
-    fontWeight: "600"
-  },
-  pendingBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    backgroundColor: night.color.warningSoft,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4
-  },
-  pendingBadgeText: {
-    color: night.color.warning,
-    fontSize: 11,
-    fontWeight: "600"
-  },
-  httpDuration: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  httpDurationText: {
-    color: night.color.textSecondary,
-    fontSize: 11
-  },
-  overrideBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 6,
-    paddingVertical: 3,
-    borderRadius: 4,
-    backgroundColor: night.color.warningSoft
-  },
-  overrideBadgeText: {
-    color: night.color.warning,
-    fontSize: 10,
-    fontWeight: "700"
-  },
-  copyFullButton: {
-    marginLeft: "auto",
-    flexShrink: 0,
-    padding: 4
-  },
-  // URL breakdown styles
-  urlBreakdown: {
-    // Inset code box — darker than the card, the night track color.
-    backgroundColor: night.color.bg,
-    borderRadius: 4,
-    padding: 8
-  },
-  urlRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    marginBottom: 4
-  },
-  urlDomain: {
-    color: night.color.text,
-    fontSize: 12,
-    fontWeight: "600",
-    flex: 1
-  },
-  urlProtocol: {
-    color: night.color.textTertiary,
-    fontSize: 10
-  },
-  copyButton: {
-    padding: 4
-  },
-  urlPathRow: {
-    paddingLeft: 18
-  },
-  urlPath: {
-    color: night.color.textSecondary,
-    fontSize: 11,
-    fontFamily: monoFont
-  },
-  urlQueryString: {
-    color: night.color.info,
-    fontSize: 11,
-    fontFamily: monoFont
-  },
-  // Query Parameters - Collapsible section
-  queryParamsCollapsible: {
-    marginTop: 8
-  },
-  queryParamsToggle: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    marginBottom: 8
-  },
-  queryParamsToggleText: {
-    flexGrow: 0,
-    color: night.color.text,
-    fontSize: 12,
-    fontWeight: "600",
-    letterSpacing: 0.3
-  },
-  // Timing section - always visible
-  timingSection: {
-    marginHorizontal: 12,
-    marginTop: 8,
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 12
-  },
-  timingRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    // Wraps rather than squashing when the card is narrow (a phone, or a
-    // half-width panel) — the sizes drop to their own line there.
-    flexWrap: "wrap"
-  },
-  timingLabel: {
-    color: night.color.textSecondary,
-    fontSize: 11
-  },
-  timingValue: {
-    color: night.color.text,
-    fontSize: 11,
-    fontWeight: "600"
-  },
-  timingExact: {
-    color: night.color.textTertiary,
-    fontSize: 10,
-    marginLeft: 4
-  },
-  sizeRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 16,
-    // Pushed to the far end of the Started row. No top border/padding — it is
-    // no longer a separate strip.
-    marginLeft: "auto"
-  },
-  sizeItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  sizeLabel: {
-    color: night.color.textTertiary,
-    fontSize: 10
-  },
-  sizeValue: {
-    color: night.color.info,
-    fontSize: 10,
-    fontFamily: monoFont,
-    fontWeight: "600"
-  },
-  /* ---- Timing phases ---- */
-  phaseDivider: {
-    height: 1,
-    backgroundColor: night.color.border,
-    marginTop: 12,
-    marginBottom: 12
-  },
-  phaseList: {
-    gap: 8
-  },
-  phaseRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 14
-  },
-  phaseLabelGroup: {
-    width: 150
-  },
-  phaseLabel: {
-    fontSize: 12,
-    color: night.color.textSecondary
-  },
-  phaseHint: {
-    fontSize: 10,
-    color: night.color.textTertiary
-  },
-  phaseTrack: {
-    flex: 1,
-    height: 7,
-    borderRadius: 4,
-    backgroundColor: night.color.surfaceElevated,
-    justifyContent: "center",
-    overflow: "hidden"
-  },
-  phaseBar: {
-    height: 7,
-    borderRadius: 4
-  },
-  phaseValue: {
-    width: 72,
-    textAlign: "right",
-    fontSize: 12,
-    fontFamily: monoFont,
-    color: night.color.text
-  },
-  // Collapsible section styles
-  collapsibleSection: {
-    marginHorizontal: 12,
-    marginTop: 8,
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    overflow: "hidden"
-  },
-  collapsibleHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: 12,
-    // `background.hover` is the SELECTION grey — heavy enough here that every
-    // section header read as a toolbar. The design uses a near-white strip.
-    backgroundColor: night.color.surfaceElevated
-  },
-  collapsibleTitle: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  collapsibleTitleText: {
-    color: night.color.text,
-    fontSize: 13,
-    fontWeight: "600"
-  },
-  /** The "how much is in here" number beside a section title. */
-  collapsibleCount: {
-    color: night.color.textTertiary,
-    fontSize: 11.5,
-    fontFamily: monoFont
-  },
-  collapsibleContent: {
-    padding: 12
-  },
-  // Data viewer container
-  dataViewerContainer: {
-    marginTop: -12,
-    marginHorizontal: -12,
-    marginBottom: -12
-  },
-  /** Placeholder for a not-yet-mounted body tree. See BodyDeferred. */
-  bodyDeferred: {
-    height: 120
-  },
-  // Error box
-  errorBox: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    backgroundColor: night.color.dangerSoft,
-    padding: 8,
-    borderRadius: 4,
-    marginTop: 8
-  },
-  errorText: {
-    color: night.color.danger,
-    fontSize: 11,
-    flex: 1
-  },
-  // Empty state
-  emptyText: {
-    color: night.color.textTertiary,
-    fontSize: 12,
-    fontStyle: "italic",
-    textAlign: "center"
-  },
-  // Filter options styles
-  filterOptionsContainer: {
-    gap: 12
-  },
-  filterOption: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 8,
-    padding: 12,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  filterOptionActive: {
-    backgroundColor: night.color.warningSoft,
-    borderColor: night.color.warning + "33"
-  },
-  filterOptionLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12,
-    flex: 1
-  },
-  filterOptionContent: {
-    flex: 1
-  },
-  filterOptionLabel: {
-    color: night.color.textSecondary,
-    fontSize: 11,
-    marginBottom: 2,
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  },
-  filterOptionValue: {
-    color: night.color.text,
-    fontSize: 13,
-    fontFamily: monoFont
-  },
-  filterToggle: {
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: night.color.bg,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  filterToggleActive: {
-    backgroundColor: night.color.warningSoft,
-    borderColor: night.color.warning + "4D"
-  },
-  filterToggleText: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: night.color.textTertiary,
-    letterSpacing: 0.5
-  },
-  filterToggleTextActive: {
-    color: night.color.warning
-  },
-  filterInfoBox: {
-    backgroundColor: night.color.infoSoft,
-    borderRadius: 6,
-    padding: 10,
-    borderWidth: 1,
-    borderColor: night.color.info + "33"
-  },
-  filterInfoText: {
-    color: night.color.textSecondary,
-    fontSize: 11,
-    lineHeight: 16
-  }
-});
+`};return n(W,{children:[n(re,{testID:"buoy-network-detail-scroll",style:t.container,children:[n(l,{style:t.requestDetailsSection,children:[n(l,{style:t.httpHeader,children:[e(l,{style:t.httpMethodBadge,children:e(i,{style:t.httpMethod,children:r.method})}),r.status?e(l,{style:[t.httpStatusBadge,{backgroundColor:`${p?.color}20`}],children:n(i,{style:[t.httpStatusText,{color:p?.color}],children:[p?.text," ",p?.meaning]})}):B?n(l,{style:t.pendingBadge,children:[e(M,{size:10,color:o.color.warning}),e(i,{style:t.pendingBadgeText,children:"Pending"})]}):null,r.condition&&n(i,{style:{color:"#FFCC66"},children:["Conditions: ",r.condition.profile," (+",r.condition.delayMs," ms)"]}),r.duration?n(l,{style:t.httpDuration,children:[e(M,{size:10,color:o.color.textTertiary}),e(i,{style:t.httpDurationText,children:X(r.duration)})]}):null,r.override?n(l,{style:t.overrideBadge,children:[e(de,{size:10,color:o.color.warning}),e(i,{style:t.overrideBadgeText,children:r.override.ruleName||"Overridden"})]}):null,g?e(K,{value:v,buttonStyle:t.copyFullButton}):e(O,{style:t.copyFullButton,onPress:()=>f(true),activeOpacity:.7,children:e(Y,{size:14,color:o.color.textSecondary})})]}),e(xe,{url:r.url,requestData:b,operationName:r.operationName,graphqlVariables:r.graphqlVariables,requestClient:r.requestClient,isPro:g,onUpgradePress:()=>f(true)}),r.error?n(l,{style:t.errorBox,children:[e(le,{size:12,color:o.color.danger}),e(i,{style:t.errorText,children:r.error})]}):null]}),n(l,{style:t.timingSection,children:[n(l,{style:t.timingRow,children:[e(M,{size:12,color:o.color.textSecondary}),e(i,{style:t.timingLabel,children:"Started:"}),e(i,{style:t.timingValue,children:he(r.timestamp)}),n(i,{style:t.timingExact,children:["(",new Date(r.timestamp).toLocaleTimeString(),")"]}),r.requestSize||r.responseSize?n(l,{style:t.sizeRow,children:[r.requestSize!==void 0?n(l,{style:t.sizeItem,children:[e(G,{size:10,color:o.color.info}),e(i,{style:t.sizeLabel,children:"Sent:"}),e(i,{style:t.sizeValue,children:q(r.requestSize)})]}):null,r.responseSize!==void 0?n(l,{style:t.sizeItem,children:[e(J,{size:10,color:A}),e(i,{style:t.sizeLabel,children:"Received:"}),e(i,{style:t.sizeValue,children:q(r.responseSize)})]}):null]}):null]}),r.timings?n(W,{children:[e(l,{style:t.phaseDivider}),e(Se,{timings:r.timings,total:r.duration??r.timings.ttfb+r.timings.download})]}):null]}),e(T,{title:"Request Headers",icon:e(G,{size:14,color:o.color.info}),defaultOpen:false,count:Object.keys(D).length,children:Object.keys(D).length>0?e(l,{style:t.dataViewerContainer,children:e(F,{title:"",data:D,showTypeFilter:true,rawMode:true,initialExpanded:true,disableCopy:!g})}):e(i,{style:t.emptyText,children:"No request headers"})}),e(T,{title:"Response Headers",icon:e(J,{size:14,color:A}),defaultOpen:false,count:Object.keys($).length,children:Object.keys($).length>0?e(l,{style:t.dataViewerContainer,children:e(F,{title:"",data:$,showTypeFilter:true,rawMode:true,initialExpanded:true,disableCopy:!g})}):e(i,{style:t.emptyText,children:"No response headers yet"})}),b!==void 0?e(T,{title:"Request Body",icon:e(E,{size:14,color:o.color.accent}),defaultOpen:false,children:e(l,{style:t.dataViewerContainer,children:s?e(F,{title:"",data:b,showTypeFilter:true,rawMode:true,initialExpanded:true,disableCopy:!g}):e(Z,{})})}):L?e(T,{title:"Request Body",icon:e(E,{size:14,color:o.color.accent}),defaultOpen:true,children:e(i,{style:t.emptyText,children:m?`Loading request body (${q(r.requestSize??0)})\u2026`:"Request body unavailable"})}):null,z!==void 0?e(T,{title:"Response Body",icon:e(E,{size:14,color:A}),defaultOpen:true,children:e(l,{style:t.dataViewerContainer,children:s?e(F,{title:"",data:z,showTypeFilter:true,rawMode:true,initialExpanded:true,disableCopy:!g}):e(Z,{})})}):y?e(T,{title:"Response Body",icon:e(E,{size:14,color:A}),defaultOpen:true,children:e(i,{style:t.emptyText,children:m?`Loading response body (${q(r.responseSize??0)})\u2026`:"Response body unavailable"})}):null,e(T,{title:"Filter Options",icon:e(ae,{size:14,color:o.color.warning}),defaultOpen:false,children:e(l,{style:t.filterOptionsContainer,children:(()=>{let a="";let S="";try{const j=new URL(r.url);a=j.hostname;S=j.pathname}catch{S=r.url}const I=u.has(a);const P=u.has(S);return n(W,{children:[n(O,{style:[t.filterOption,I&&t.filterOptionActive],onPress:()=>a&&h(a),children:[n(l,{style:t.filterOptionLeft,children:[e(se,{size:16,color:I?o.color.warning:o.color.textTertiary}),n(l,{style:t.filterOptionContent,children:[e(i,{style:t.filterOptionLabel,children:"Ignore Domain"}),e(i,{style:t.filterOptionValue,children:a||"N/A"})]})]}),e(l,{style:[t.filterToggle,I&&t.filterToggleActive],children:e(i,{style:[t.filterToggleText,I&&t.filterToggleTextActive],children:I?"IGNORED":"IGNORE"})})]}),n(O,{style:[t.filterOption,P&&t.filterOptionActive],onPress:()=>S&&h(S),children:[n(l,{style:t.filterOptionLeft,children:[e(ce,{size:16,color:P?o.color.warning:o.color.textTertiary}),n(l,{style:t.filterOptionContent,children:[e(i,{style:t.filterOptionLabel,children:"Ignore URL Pattern"}),e(i,{style:t.filterOptionValue,numberOfLines:1,children:S||"N/A"})]})]}),e(l,{style:[t.filterToggle,P&&t.filterToggleActive],children:e(i,{style:[t.filterToggleText,P&&t.filterToggleTextActive],children:P?"IGNORED":"IGNORE"})})]}),e(l,{style:t.filterInfoBox,children:e(i,{style:t.filterInfoText,children:"Ignored requests will be hidden from the network list. You can manage filters in the Filters tab."})})]})})()})})]}),e(pe,{visible:c,onClose:()=>f(false),featureName:"Copy Request Details",description:"Copy network request details to share or debug issues.",benefits:["Copy full request details including headers and body","Export to JSON, Markdown, or plain text","Share request data with teammates","Feed data to AI assistants for debugging"]})]})});const t=oe.create({container:{flex:1,backgroundColor:"transparent"},requestDetailsSection:{marginHorizontal:12,marginTop:12,backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,padding:12},httpHeader:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:12,flexWrap:"nowrap"},httpMethodBadge:{backgroundColor:o.color.infoSoft,paddingHorizontal:8,paddingVertical:4,borderRadius:4},httpMethod:{color:o.color.info,fontSize:11,fontWeight:"700",letterSpacing:.5},httpStatusBadge:{paddingHorizontal:8,paddingVertical:4,borderRadius:4},httpStatusText:{fontSize:11,fontWeight:"600"},pendingBadge:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:o.color.warningSoft,paddingHorizontal:8,paddingVertical:4,borderRadius:4},pendingBadgeText:{color:o.color.warning,fontSize:11,fontWeight:"600"},httpDuration:{flexDirection:"row",alignItems:"center",gap:4},httpDurationText:{color:o.color.textSecondary,fontSize:11},overrideBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:6,paddingVertical:3,borderRadius:4,backgroundColor:o.color.warningSoft},overrideBadgeText:{color:o.color.warning,fontSize:10,fontWeight:"700"},copyFullButton:{marginLeft:"auto",flexShrink:0,padding:4},urlBreakdown:{backgroundColor:o.color.bg,borderRadius:4,padding:8},urlRow:{flexDirection:"row",alignItems:"center",gap:6,marginBottom:4},urlDomain:{color:o.color.text,fontSize:12,fontWeight:"600",flex:1},urlProtocol:{color:o.color.textTertiary,fontSize:10},copyButton:{padding:4},urlPathRow:{paddingLeft:18},urlPath:{color:o.color.textSecondary,fontSize:11,fontFamily:R},urlQueryString:{color:o.color.info,fontSize:11,fontFamily:R},queryParamsCollapsible:{marginTop:8},queryParamsToggle:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:10,backgroundColor:o.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:o.color.border,marginBottom:8},queryParamsToggleText:{flexGrow:0,color:o.color.text,fontSize:12,fontWeight:"600",letterSpacing:.3},timingSection:{marginHorizontal:12,marginTop:8,backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,padding:12},timingRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},timingLabel:{color:o.color.textSecondary,fontSize:11},timingValue:{color:o.color.text,fontSize:11,fontWeight:"600"},timingExact:{color:o.color.textTertiary,fontSize:10,marginLeft:4},sizeRow:{flexDirection:"row",alignItems:"center",gap:16,marginLeft:"auto"},sizeItem:{flexDirection:"row",alignItems:"center",gap:4},sizeLabel:{color:o.color.textTertiary,fontSize:10},sizeValue:{color:o.color.info,fontSize:10,fontFamily:R,fontWeight:"600"},phaseDivider:{height:1,backgroundColor:o.color.border,marginTop:12,marginBottom:12},phaseList:{gap:8},phaseRow:{flexDirection:"row",alignItems:"center",gap:14},phaseLabelGroup:{width:150},phaseLabel:{fontSize:12,color:o.color.textSecondary},phaseHint:{fontSize:10,color:o.color.textTertiary},phaseTrack:{flex:1,height:7,borderRadius:4,backgroundColor:o.color.surfaceElevated,justifyContent:"center",overflow:"hidden"},phaseBar:{height:7,borderRadius:4},phaseValue:{width:72,textAlign:"right",fontSize:12,fontFamily:R,color:o.color.text},collapsibleSection:{marginHorizontal:12,marginTop:8,backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,overflow:"hidden"},collapsibleHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",padding:12,backgroundColor:o.color.surfaceElevated},collapsibleTitle:{flexDirection:"row",alignItems:"center",gap:8},collapsibleTitleText:{color:o.color.text,fontSize:13,fontWeight:"600"},collapsibleCount:{color:o.color.textTertiary,fontSize:11.5,fontFamily:R},collapsibleContent:{padding:12},dataViewerContainer:{marginTop:-12,marginHorizontal:-12,marginBottom:-12},bodyDeferred:{height:120},errorBox:{flexDirection:"row",alignItems:"center",gap:6,backgroundColor:o.color.dangerSoft,padding:8,borderRadius:4,marginTop:8},errorText:{color:o.color.danger,fontSize:11,flex:1},emptyText:{color:o.color.textTertiary,fontSize:12,fontStyle:"italic",textAlign:"center"},filterOptionsContainer:{gap:12},filterOption:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:o.color.surfaceElevated,borderRadius:8,padding:12,borderWidth:1,borderColor:o.color.border},filterOptionActive:{backgroundColor:o.color.warningSoft,borderColor:o.color.warning+"33"},filterOptionLeft:{flexDirection:"row",alignItems:"center",gap:12,flex:1},filterOptionContent:{flex:1},filterOptionLabel:{color:o.color.textSecondary,fontSize:11,marginBottom:2,textTransform:"uppercase",letterSpacing:.5},filterOptionValue:{color:o.color.text,fontSize:13,fontFamily:R},filterToggle:{paddingHorizontal:10,paddingVertical:6,borderRadius:4,backgroundColor:o.color.bg,borderWidth:1,borderColor:o.color.border},filterToggleActive:{backgroundColor:o.color.warningSoft,borderColor:o.color.warning+"4D"},filterToggleText:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,letterSpacing:.5},filterToggleTextActive:{color:o.color.warning},filterInfoBox:{backgroundColor:o.color.infoSoft,borderRadius:6,padding:10,borderWidth:1,borderColor:o.color.info+"33"},filterInfoText:{color:o.color.textSecondary,fontSize:11,lineHeight:16}});