@buoy-gg/network 7.0.41 → 7.0.43

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

@@ -1,818 +1,2 @@
-"use strict";
-
-/**
- * NetworkEventItemCompact.web — DOM twin of NetworkEventItemCompact.tsx.
- *
- * Same row layout, prop contract, memoization and display logic as the native
- * file: method badge + size indicators on the left, 2-line URL / GraphQL
- * operation display in the middle (via the SAME pure `formatGraphQLDisplay`
- * util), content-type badge + chevron on the right, absolute-positioned
- * status/client chips top-right and duration/relative-time bottom-right, and
- * the pinned/saved/overridden glyphs.
- *
- * Web consumers resolve `@buoy-gg/shared-ui` to a minimal shim (storage +
- * JsModal + ignored-pattern helpers only), so the RN-only chrome the native
- * row imports from shared-ui is replicated here as DOM with provenance:
- *  - `DevToolsCard` / `MethodBadge` / `TypeBadge` — inlined DOM twins, values
- *    copied from shared/src/ui/components/DevToolsCard.tsx and Badge.tsx
- *    (buoyColors palette inlined below).
- *  - `macOSColors` — inlined verbatim subset from
- *    shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts.
- *  - Icons — inline lucide SVGs (shared-ui's icons are lucide re-exports,
- *    24×24 viewBox, strokeWidth 2).
- *  - `formatBytes` / `formatDuration` — copied verbatim from
- *    shared/src/utils/formatting/dataFormatting.ts (not in the web shim).
- *  - `formatRelativeTime` — copied verbatim from
- *    shared/src/utils/time/formatRelativeTime.ts.
- *
- * Intentional deviations (all logged):
- *  - `useTickEveryMinute` (shared-ui TickProvider context, 5s interval as
- *    mounted by NetworkModal) is replaced by a module-level shared 5s interval
- *    hook — the shim exposes no `useTick`, and one shared timer keeps the
- *    native "one clock for all rows" behavior.
- *  - `onLongPress` (pin toggle) fires after a 500ms pointer hold — the native
- *    TouchableOpacity default `delayLongPress`. The click that follows a long
- *    press is swallowed, matching native semantics.
- *  - `activeOpacity={0.8}` press feedback is a pointer-driven opacity state.
- *  - `numberOfLines={2}` → `-webkit-line-clamp: 2`.
- *  - The duration/relative-time separator is two literal spaces natively;
- *    `white-space: pre` preserves them (HTML would collapse to one).
- *
- * @platform React DOM Web
- */
-
-import { memo, useEffect, useState, useRef } from "react";
-import { formatGraphQLDisplay } from "../utils/formatGraphQLVariables";
-
-// =============================
-// Native palettes (provenance)
-// =============================
-
-/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const macOSColors = {
-  text: {
-    primary: "#F5F5F7",
-    secondary: "#A1A1A6",
-    muted: "#8E8E93"
-  },
-  semantic: {
-    success: "#34C759",
-    error: "#FF453A",
-    warning: "#FFEB3B",
-    info: "#00B8E6",
-    debug: "#BF5AF2"
-  }
-};
-
-/** buoyColors subset — shared/src/ui/gameUI/constants/gameUIColors.ts (macOS theme), verbatim. */
-const buoy = {
-  card: "#1A1A1A",
-  border: "#333333",
-  primary: "#20C997",
-  // Buoy teal (success/primary are the same value)
-  success: "#20C997",
-  warning: "#FFA94D",
-  error: "#EF4444",
-  textSecondary: "#A0A0A0",
-  textMuted: "#888888"
-};
-
-// =============================
-// 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 ChevronRight = p => /*#__PURE__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsx("path", {
-    d: "m9 18 6-6-6-6"
-  })
-});
-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 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 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 Bookmark = p => /*#__PURE__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsx("path", {
-    d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"
-  })
-});
-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"
-  })]
-});
-const Pin = ({
-  active,
-  ...p
-}) => /*#__PURE__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsxs("g", {
-    transform: active ? "rotate(-45 12 12) translate(12 12) scale(0.92) translate(-12 -12)" : undefined,
-    children: [/*#__PURE__*/_jsx("path", {
-      d: "M2.97 21.03 8.18 15.82"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M4.4 10.81 13.19 19.6"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M5.17 10.54 11.43 8.83"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M13.46 18.83 15.17 12.57"
-    }), /*#__PURE__*/_jsx("rect", {
-      x: "12.15",
-      y: "5.4",
-      width: "9.38",
-      height: "3.52",
-      rx: "1.07",
-      transform: "rotate(-45 16.84 7.16)"
-    })]
-  })
-});
-
-// =============================
-// Shared formatters (provenance copies — not in the web shim)
-// =============================
-
-/** shared/src/utils/formatting/dataFormatting.ts — 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 — 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 tick (DEVIATION: replaces shared-ui TickProvider/useTick)
-// =============================
-
-/**
- * One module-level 5s clock shared by every mounted row — the same cadence the
- * native rows get from NetworkModal's `TickProvider` (default `intervalMs`
- * 5_000). The interval only runs while at least one row is mounted.
- */
-const tickListeners = new Set();
-let tickInterval = null;
-function subscribeTick(listener) {
-  tickListeners.add(listener);
-  if (tickInterval == null) {
-    tickInterval = setInterval(() => {
-      const now = Date.now();
-      tickListeners.forEach(l => l(now));
-    }, 5_000);
-  }
-  return () => {
-    tickListeners.delete(listener);
-    if (tickListeners.size === 0 && tickInterval != null) {
-      clearInterval(tickInterval);
-      tickInterval = null;
-    }
-  };
-}
-function useSharedTick() {
-  const [tick, setTick] = useState(() => Date.now());
-  useEffect(() => subscribeTick(setTick), []);
-  return tick;
-}
-
-// =============================
-// Pure display helpers (copied verbatim from the native file)
-// =============================
-
-// Get color based on status
-function getStatusColor(status, error) {
-  if (error) return macOSColors.semantic.error;
-  if (!status) return macOSColors.semantic.warning;
-  if (status >= 200 && status < 300) return macOSColors.semantic.success;
-  if (status >= 300 && status < 400) return macOSColors.semantic.info;
-  if (status >= 400) return macOSColors.semantic.error;
-  return macOSColors.text.muted;
-}
-
-// Get content type badge with color
-function getContentTypeBadge(headers) {
-  const contentType = headers?.["content-type"] || headers?.["Content-Type"] || "";
-  if (contentType.includes("json")) return "JSON";
-  if (contentType.includes("xml")) return "XML";
-  if (contentType.includes("html")) return "HTML";
-  if (contentType.includes("text")) return "TEXT";
-  if (contentType.includes("image")) return "IMG";
-  if (contentType.includes("video")) return "VIDEO";
-  if (contentType.includes("audio")) return "AUDIO";
-  if (contentType.includes("form")) return "FORM";
-  return null;
-}
-
-/**
- * The transport chip (`fetch` / `GQL` / `gRPC` / `XHR`), one brand colour each.
- */
-function getClientChipColors(requestClient) {
-  switch (requestClient) {
-    case "fetch":
-      return {
-        backgroundColor: "rgba(74, 144, 226, 0.15)",
-        color: "#4A90E2"
-      };
-    case "graphql":
-      return {
-        backgroundColor: "rgba(229, 53, 171, 0.15)",
-        color: "#E535AB"
-      };
-    case "grpc-web":
-      return {
-        backgroundColor: "rgba(16, 185, 129, 0.15)",
-        color: "#10B981"
-      };
-    case "xhr":
-      return {
-        backgroundColor: "rgba(245, 158, 11, 0.15)",
-        color: "#F59E0B"
-      };
-    default:
-      return {
-        backgroundColor: "rgba(147, 51, 234, 0.15)",
-        color: "#9333EA"
-      };
-  }
-}
-
-// =============================
-// shared-ui DOM twins (provenance: Badge.tsx / DevToolsCard.tsx)
-// =============================
-
-/**
- * MethodBadge twin — shared/src/ui/components/Badge.tsx `MethodBadge`
- * (`size="small"`: 6/2 padding, 11px, weight 700, minWidth 45, `${color}15`
- * fill, `${color}40` border, radius 4). METHOD_COLORS map, verbatim.
- */
-const METHOD_COLORS = {
-  GET: buoy.success,
-  POST: buoy.primary,
-  PUT: buoy.warning,
-  PATCH: buoy.textSecondary,
-  DELETE: buoy.error,
-  HEAD: buoy.textMuted,
-  OPTIONS: buoy.primary
-};
-function MethodBadgeWeb({
-  method
-}) {
-  const color = METHOD_COLORS[method.toUpperCase()] || "#6B7280";
-  return /*#__PURE__*/_jsx("span", {
-    style: {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      minWidth: 45,
-      boxSizing: "border-box",
-      padding: "2px 6px",
-      fontSize: 11,
-      fontWeight: 700,
-      color,
-      backgroundColor: `${color}15`,
-      border: `1px solid ${color}40`,
-      borderRadius: 4
-    },
-    children: method.toUpperCase()
-  });
-}
-
-/**
- * TypeBadge twin — shared/src/ui/components/Badge.tsx `TypeBadge`
- * (`size="small"`). Content types ("JSON" etc.) are not in `getTypeColor`'s
- * map, so they all resolve to `buoyColors.textMuted` — same as native.
- */
-function TypeBadgeWeb({
-  type
-}) {
-  const color = buoy.textMuted;
-  return /*#__PURE__*/_jsx("span", {
-    style: {
-      display: "inline-flex",
-      alignItems: "center",
-      padding: "2px 6px",
-      fontSize: 11,
-      fontWeight: 600,
-      color,
-      backgroundColor: `${color}15`,
-      border: `1px solid ${color}40`,
-      borderRadius: 4
-    },
-    children: type
-  });
-}
-
-/**
- * DevToolsCard twin — shared/src/ui/components/DevToolsCard.tsx. Wrapper
- * margin 4px vertical (the native row overrides horizontal to 8), card =
- * buoyColors.card fill, `${border}40` outline + bottom hairline, radius 8,
- * padding 12, minHeight 44, activeOpacity 0.8. Long-press = 500ms pointer
- * hold (TouchableOpacity default delayLongPress) — see file header.
- */
-function DevToolsCardWeb({
-  onPress,
-  onLongPress,
-  children,
-  contentStyle
-}) {
-  const [pressed, setPressed] = useState(false);
-  const longPressTimer = useRef(null);
-  const longPressFired = useRef(false);
-  const clearTimer = () => {
-    if (longPressTimer.current != null) {
-      clearTimeout(longPressTimer.current);
-      longPressTimer.current = null;
-    }
-  };
-  return /*#__PURE__*/_jsx("div", {
-    style: {
-      margin: "4px 8px"
-    },
-    children: /*#__PURE__*/_jsx("button", {
-      type: "button",
-      onPointerDown: () => {
-        setPressed(true);
-        if (onLongPress) {
-          longPressFired.current = false;
-          clearTimer();
-          longPressTimer.current = setTimeout(() => {
-            longPressFired.current = true;
-            onLongPress();
-          }, 500);
-        }
-      },
-      onPointerUp: () => {
-        setPressed(false);
-        clearTimer();
-      },
-      onPointerLeave: () => {
-        setPressed(false);
-        clearTimer();
-      },
-      onPointerCancel: () => {
-        setPressed(false);
-        clearTimer();
-      },
-      onClick: () => {
-        // A long press toggles the pin; it must not ALSO open the detail.
-        if (longPressFired.current) {
-          longPressFired.current = false;
-          return;
-        }
-        onPress();
-      },
-      style: {
-        position: "relative",
-        display: "flex",
-        width: "100%",
-        boxSizing: "border-box",
-        backgroundColor: buoy.card,
-        borderRadius: 8,
-        border: `1px solid ${buoy.border}40`,
-        borderBottom: `1px solid ${buoy.border}40`,
-        padding: 12,
-        minHeight: 44,
-        margin: 0,
-        textAlign: "left",
-        cursor: "pointer",
-        fontFamily: "inherit",
-        color: "inherit",
-        userSelect: "none",
-        WebkitUserSelect: "none",
-        opacity: pressed ? 0.8 : 1,
-        ...contentStyle
-      },
-      children: children
-    })
-  });
-}
-
-// =============================
-// Row (structure mirrors the native file 1:1)
-// =============================
-
-// Status indicator component - single responsibility
-function StatusIndicator({
-  event,
-  isPending,
-  statusColor
-}) {
-  if (isPending) {
-    return /*#__PURE__*/_jsxs("span", {
-      style: styles.pendingBadge,
-      children: [/*#__PURE__*/_jsx(Clock, {
-        size: 10,
-        color: macOSColors.semantic.warning
-      }), /*#__PURE__*/_jsx("span", {
-        style: styles.pendingText,
-        children: "..."
-      })]
-    });
-  }
-  if (event.error) {
-    return /*#__PURE__*/_jsxs("span", {
-      style: styles.errorBadge,
-      children: [/*#__PURE__*/_jsx(AlertCircle, {
-        size: 10,
-        color: macOSColors.semantic.error
-      }), /*#__PURE__*/_jsx("span", {
-        style: styles.errorText,
-        children: "ERR"
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsx("span", {
-    style: styles.statusBadge,
-    children: /*#__PURE__*/_jsx("span", {
-      style: {
-        ...styles.statusText,
-        color: statusColor
-      },
-      children: String(event.status)
-    })
-  });
-}
-
-// Size indicators component - single responsibility
-function SizeIndicators({
-  requestSize,
-  responseSize
-}) {
-  if (!requestSize && !responseSize) return null;
-  return /*#__PURE__*/_jsxs("span", {
-    style: styles.sizeRow,
-    children: [requestSize ? /*#__PURE__*/_jsxs("span", {
-      style: styles.sizeItem,
-      children: [/*#__PURE__*/_jsx(Upload, {
-        size: 8,
-        color: macOSColors.semantic.info
-      }), /*#__PURE__*/_jsx("span", {
-        style: styles.sizeText,
-        children: formatBytes(requestSize)
-      })]
-    }) : null, responseSize ? /*#__PURE__*/_jsxs("span", {
-      style: styles.sizeItem,
-      children: [/*#__PURE__*/_jsx(Download, {
-        size: 8,
-        color: macOSColors.semantic.success
-      }), /*#__PURE__*/_jsx("span", {
-        style: styles.sizeText,
-        children: formatBytes(responseSize)
-      })]
-    }) : null]
-  });
-}
-
-/**
- * Sole tick consumer in the row (rule2: composition over memo) — the periodic
- * relative-timestamp tick re-renders ONLY this leaf, not the whole card.
- */
-function BottomRightTime({
-  timestamp,
-  duration
-}) {
-  const tick = useSharedTick();
-  const relativeTime = formatRelativeTime(timestamp, tick);
-  return duration ? /*#__PURE__*/_jsxs("span", {
-    style: styles.bottomRightText,
-    children: [formatDuration(duration), "  ", relativeTime]
-  }) : /*#__PURE__*/_jsx("span", {
-    style: styles.bottomRightText,
-    children: relativeTime
-  });
-}
-export const NetworkEventItemCompact = /*#__PURE__*/memo(function NetworkEventItemCompact({
-  event,
-  onPress,
-  pinned = false,
-  saved = false,
-  overridden = false,
-  onLongPress
-}) {
-  const statusColor = getStatusColor(event.status, event.error);
-  const isPending = !event.status && !event.error;
-  const contentType = getContentTypeBadge(event.responseHeaders);
-
-  // Format URL for display (max 2 lines)
-  let displayUrl = event.path || event.url.replace(/^https?:\/\/[^/]+/, "");
-
-  // If this is a GraphQL request, show operation name with variables using
-  // arrow notation (same pure util as native).
-  if (event.requestClient === "graphql") {
-    if (event.operationName) {
-      displayUrl = formatGraphQLDisplay(event.operationName, event.graphqlVariables);
-    } else {
-      displayUrl = displayUrl.replace(/\/graphql[^?]*/, "/graphql");
-    }
-  } else if (event.operationName) {
-    // For non-GraphQL requests with operation names (e.g., gRPC)
-    displayUrl = `${displayUrl}\n(${event.operationName})`;
-  }
-  return /*#__PURE__*/_jsxs(DevToolsCardWeb, {
-    onPress: () => onPress(event),
-    onLongPress: onLongPress ? () => onLongPress(event) : undefined,
-    contentStyle: {
-      flexDirection: "row",
-      alignItems: "center",
-      borderLeft: `3px solid ${statusColor}`
-    },
-    children: [/*#__PURE__*/_jsxs("span", {
-      style: styles.topRightContainer,
-      children: [pinned ? /*#__PURE__*/_jsx(Pin, {
-        size: 10,
-        active: true,
-        color: macOSColors.semantic.info
-      }) : null, saved ? /*#__PURE__*/_jsx(Bookmark, {
-        size: 10,
-        color: macOSColors.semantic.debug
-      }) : null, overridden || event.override ? /*#__PURE__*/_jsx(FlaskConical, {
-        size: 10,
-        color: macOSColors.semantic.warning
-      }) : null, /*#__PURE__*/_jsx(StatusIndicator, {
-        event: event,
-        isPending: isPending,
-        statusColor: statusColor
-      }), event.requestClient ? /*#__PURE__*/_jsx("span", {
-        style: {
-          ...styles.topRightBadge,
-          backgroundColor: getClientChipColors(event.requestClient).backgroundColor
-        },
-        children: /*#__PURE__*/_jsx("span", {
-          style: {
-            ...styles.clientText,
-            color: getClientChipColors(event.requestClient).color
-          },
-          children: event.requestClient === "graphql" ? "GQL" : event.requestClient === "grpc-web" ? "gRPC" : event.requestClient === "xhr" ? "XHR" : event.requestClient
-        })
-      }) : null]
-    }), /*#__PURE__*/_jsxs("span", {
-      style: styles.leftSection,
-      children: [/*#__PURE__*/_jsx(MethodBadgeWeb, {
-        method: event.method
-      }), /*#__PURE__*/_jsx(SizeIndicators, {
-        requestSize: event.requestSize,
-        responseSize: event.responseSize
-      })]
-    }), /*#__PURE__*/_jsx("span", {
-      style: styles.middleSection,
-      children: /*#__PURE__*/_jsx("span", {
-        style: styles.urlText,
-        children: displayUrl
-      })
-    }), /*#__PURE__*/_jsxs("span", {
-      style: styles.rightSection,
-      children: [contentType ? /*#__PURE__*/_jsx(TypeBadgeWeb, {
-        type: contentType
-      }) : null, /*#__PURE__*/_jsx(ChevronRight, {
-        size: 14,
-        color: macOSColors.text.muted
-      })]
-    }), /*#__PURE__*/_jsx("span", {
-      style: styles.bottomRightContainer,
-      children: /*#__PURE__*/_jsx(BottomRightTime, {
-        timestamp: event.timestamp,
-        duration: event.duration
-      })
-    })]
-  });
-});
-NetworkEventItemCompact.displayName = "NetworkEventItemCompact";
-
-// Values mirror the native StyleSheet block 1:1.
-const styles = {
-  leftSection: {
-    display: "flex",
-    flexDirection: "column",
-    marginRight: 8,
-    alignItems: "flex-start"
-  },
-  topRightContainer: {
-    position: "absolute",
-    top: 1,
-    right: 1,
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  topRightBadge: {
-    display: "inline-flex",
-    padding: "2px 4px",
-    borderRadius: 4
-  },
-  middleSection: {
-    flex: 1,
-    minWidth: 0,
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    paddingRight: 8
-  },
-  urlText: {
-    fontSize: 12,
-    color: macOSColors.text.primary,
-    lineHeight: "16px",
-    fontFamily: "ui-monospace, Menlo, monospace",
-    display: "-webkit-box",
-    WebkitLineClamp: 2,
-    WebkitBoxOrient: "vertical",
-    overflow: "hidden",
-    whiteSpace: "pre-wrap",
-    wordBreak: "break-all"
-  },
-  rightSection: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  bottomRightContainer: {
-    position: "absolute",
-    bottom: 4,
-    right: 8
-  },
-  bottomRightText: {
-    fontSize: 9,
-    color: macOSColors.text.muted,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    whiteSpace: "pre"
-  },
-  statusBadge: {
-    display: "inline-flex",
-    padding: "1px 4px",
-    borderRadius: 3
-  },
-  statusText: {
-    fontSize: 10,
-    fontWeight: 600
-  },
-  pendingBadge: {
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 2,
-    padding: "1px 4px",
-    backgroundColor: macOSColors.semantic.warning + "26",
-    borderRadius: 3
-  },
-  pendingText: {
-    fontSize: 10,
-    color: macOSColors.semantic.warning,
-    fontWeight: 600
-  },
-  errorBadge: {
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 2,
-    padding: "1px 4px",
-    backgroundColor: macOSColors.semantic.error + "26",
-    borderRadius: 3
-  },
-  errorText: {
-    fontSize: 10,
-    color: macOSColors.semantic.error,
-    fontWeight: 600
-  },
-  sizeRow: {
-    display: "flex",
-    flexDirection: "row",
-    gap: 4,
-    marginTop: 4
-  },
-  sizeItem: {
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 2
-  },
-  sizeText: {
-    fontSize: 8,
-    color: macOSColors.text.secondary,
-    fontFamily: "ui-monospace, Menlo, monospace"
-  },
-  clientText: {
-    fontSize: 8,
-    fontWeight: 700,
-    letterSpacing: 0.3,
-    textTransform: "uppercase"
-  }
-};
+"use strict";import{memo as k,useEffect as S,useState as b,useRef as C}from"react";import{formatGraphQLDisplay as M}from"../utils/formatGraphQLVariables";import{jsx as r,jsxs as s}from"react/jsx-runtime";const n={text:{primary:"#F5F5F7",secondary:"#A1A1A6",muted:"#8E8E93"},semantic:{success:"#34C759",error:"#FF453A",warning:"#FFEB3B",info:"#00B8E6",debug:"#BF5AF2"}};const a={card:"#1A1A1A",border:"#333333",primary:"#20C997",success:"#20C997",warning:"#FFA94D",error:"#EF4444",textSecondary:"#A0A0A0",textMuted:"#888888"};function p({size:t=14,color:e="currentColor",children:i}){return r("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:e,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block"},children:i})}const B=t=>r(p,{...t,children:r("path",{d:"m9 18 6-6-6-6"})});const z=t=>s(p,{...t,children:[r("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),r("polyline",{points:"17 8 12 3 7 8"}),r("line",{x1:"12",x2:"12",y1:"3",y2:"15"})]});const R=t=>s(p,{...t,children:[r("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),r("polyline",{points:"7 10 12 15 17 10"}),r("line",{x1:"12",x2:"12",y1:"15",y2:"3"})]});const D=t=>s(p,{...t,children:[r("circle",{cx:"12",cy:"12",r:"10"}),r("polyline",{points:"12 6 12 12 16 14"})]});const I=t=>s(p,{...t,children:[r("circle",{cx:"12",cy:"12",r:"10"}),r("line",{x1:"12",x2:"12",y1:"8",y2:"12"}),r("line",{x1:"12",x2:"12.01",y1:"16",y2:"16"})]});const A=t=>r(p,{...t,children:r("path",{d:"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"})});const E=t=>s(p,{...t,children:[r("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"}),r("path",{d:"M8.5 2h7"}),r("path",{d:"M7 16h10"})]});const $=({active:t,...e})=>r(p,{...e,children:s("g",{transform:t?"rotate(-45 12 12) translate(12 12) scale(0.92) translate(-12 -12)":void 0,children:[r("path",{d:"M2.97 21.03 8.18 15.82"}),r("path",{d:"M4.4 10.81 13.19 19.6"}),r("path",{d:"M5.17 10.54 11.43 8.83"}),r("path",{d:"M13.46 18.83 15.17 12.57"}),r("rect",{x:"12.15",y:"5.4",width:"9.38",height:"3.52",rx:"1.07",transform:"rotate(-45 16.84 7.16)"})]})});function T(t){if(t===void 0||t===null)return"N/A";if(t===0)return"0 B";const e=1024;const i=["B","KB","MB","GB","TB"];const l=Math.floor(Math.log(t)/Math.log(e));return`${(t/Math.pow(e,l)).toFixed(1)} ${i[l]}`}function F(t){if(t===void 0||t===null)return"N/A";if(t<1e3){return`${t}ms`}if(t<6e4){return`${(t/1e3).toFixed(1)}s`}if(t<36e5){const l=Math.floor(t/6e4);const c=Math.floor(t%6e4/1e3);return c>0?`${l}m ${c}s`:`${l}m`}const e=Math.floor(t/36e5);const i=Math.floor(t%36e5/6e4);return i>0?`${e}h ${i}m`:`${e}h`}function P(t,e=Date.now()){const i=t instanceof Date?t.getTime():t;const l=Math.floor((e-i)/1e3);if(l<0){return"just now"}if(l<60){return l===0?"just now":`${l}s ago`}const c=Math.floor(l/60);if(c<60){return`${c}m ago`}const d=Math.floor(c/60);if(d<24){return`${d}h ago`}const u=Math.floor(d/24);return`${u}d ago`}const x=new Set;let m=null;function W(t){x.add(t);if(m==null){m=setInterval(()=>{const e=Date.now();x.forEach(i=>i(e))},5e3)}return()=>{x.delete(t);if(x.size===0&&m!=null){clearInterval(m);m=null}}}function q(){const[t,e]=b(()=>Date.now());S(()=>W(e),[]);return t}function L(t,e){if(e)return n.semantic.error;if(!t)return n.semantic.warning;if(t>=200&&t<300)return n.semantic.success;if(t>=300&&t<400)return n.semantic.info;if(t>=400)return n.semantic.error;return n.text.muted}function N(t){const e=t?.["content-type"]||t?.["Content-Type"]||"";if(e.includes("json"))return"JSON";if(e.includes("xml"))return"XML";if(e.includes("html"))return"HTML";if(e.includes("text"))return"TEXT";if(e.includes("image"))return"IMG";if(e.includes("video"))return"VIDEO";if(e.includes("audio"))return"AUDIO";if(e.includes("form"))return"FORM";return null}function w(t){switch(t){case"fetch":return{backgroundColor:"rgba(74, 144, 226, 0.15)",color:"#4A90E2"};case"graphql":return{backgroundColor:"rgba(229, 53, 171, 0.15)",color:"#E535AB"};case"grpc-web":return{backgroundColor:"rgba(16, 185, 129, 0.15)",color:"#10B981"};case"xhr":return{backgroundColor:"rgba(245, 158, 11, 0.15)",color:"#F59E0B"};default:return{backgroundColor:"rgba(147, 51, 234, 0.15)",color:"#9333EA"}}}const O={GET:a.success,POST:a.primary,PUT:a.warning,PATCH:a.textSecondary,DELETE:a.error,HEAD:a.textMuted,OPTIONS:a.primary};function j({method:t}){const e=O[t.toUpperCase()]||"#6B7280";return r("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",minWidth:45,boxSizing:"border-box",padding:"2px 6px",fontSize:11,fontWeight:700,color:e,backgroundColor:`${e}15`,border:`1px solid ${e}40`,borderRadius:4},children:t.toUpperCase()})}function H({type:t}){const e=a.textMuted;return r("span",{style:{display:"inline-flex",alignItems:"center",padding:"2px 6px",fontSize:11,fontWeight:600,color:e,backgroundColor:`${e}15`,border:`1px solid ${e}40`,borderRadius:4},children:t})}function U({onPress:t,onLongPress:e,children:i,contentStyle:l}){const[c,d]=b(false);const u=C(null);const f=C(false);const h=()=>{if(u.current!=null){clearTimeout(u.current);u.current=null}};return r("div",{style:{margin:"4px 8px"},children:r("button",{type:"button",onPointerDown:()=>{d(true);if(e){f.current=false;h();u.current=setTimeout(()=>{f.current=true;e()},500)}},onPointerUp:()=>{d(false);h()},onPointerLeave:()=>{d(false);h()},onPointerCancel:()=>{d(false);h()},onClick:()=>{if(f.current){f.current=false;return}t()},style:{position:"relative",display:"flex",width:"100%",boxSizing:"border-box",backgroundColor:a.card,borderRadius:8,border:`1px solid ${a.border}40`,borderBottom:`1px solid ${a.border}40`,padding:12,minHeight:44,margin:0,textAlign:"left",cursor:"pointer",fontFamily:"inherit",color:"inherit",userSelect:"none",WebkitUserSelect:"none",opacity:c?.8:1,...l},children:i})})}function G({event:t,isPending:e,statusColor:i}){if(e){return s("span",{style:o.pendingBadge,children:[r(D,{size:10,color:n.semantic.warning}),r("span",{style:o.pendingText,children:"..."})]})}if(t.error){return s("span",{style:o.errorBadge,children:[r(I,{size:10,color:n.semantic.error}),r("span",{style:o.errorText,children:"ERR"})]})}return r("span",{style:o.statusBadge,children:r("span",{style:{...o.statusText,color:i},children:String(t.status)})})}function V({requestSize:t,responseSize:e}){if(!t&&!e)return null;return s("span",{style:o.sizeRow,children:[t?s("span",{style:o.sizeItem,children:[r(z,{size:8,color:n.semantic.info}),r("span",{style:o.sizeText,children:T(t)})]}):null,e?s("span",{style:o.sizeItem,children:[r(R,{size:8,color:n.semantic.success}),r("span",{style:o.sizeText,children:T(e)})]}):null]})}function _({timestamp:t,duration:e}){const i=q();const l=P(t,i);return e?s("span",{style:o.bottomRightText,children:[F(e),"  ",l]}):r("span",{style:o.bottomRightText,children:l})}export const NetworkEventItemCompact=k(function t({event:e,onPress:i,pinned:l=false,saved:c=false,overridden:d=false,onLongPress:u}){const f=L(e.status,e.error);const h=!e.status&&!e.error;const y=N(e.responseHeaders);let g=e.path||e.url.replace(/^https?:\/\/[^/]+/,"");if(e.requestClient==="graphql"){if(e.operationName){g=M(e.operationName,e.graphqlVariables)}else{g=g.replace(/\/graphql[^?]*/,"/graphql")}}else if(e.operationName){g=`${g}
+(${e.operationName})`}return s(U,{onPress:()=>i(e),onLongPress:u?()=>u(e):void 0,contentStyle:{flexDirection:"row",alignItems:"center",borderLeft:`3px solid ${f}`},children:[s("span",{style:o.topRightContainer,children:[l?r($,{size:10,active:true,color:n.semantic.info}):null,c?r(A,{size:10,color:n.semantic.debug}):null,d||e.override?r(E,{size:10,color:n.semantic.warning}):null,r(G,{event:e,isPending:h,statusColor:f}),e.requestClient?r("span",{style:{...o.topRightBadge,backgroundColor:w(e.requestClient).backgroundColor},children:r("span",{style:{...o.clientText,color:w(e.requestClient).color},children:e.requestClient==="graphql"?"GQL":e.requestClient==="grpc-web"?"gRPC":e.requestClient==="xhr"?"XHR":e.requestClient})}):null]}),s("span",{style:o.leftSection,children:[r(j,{method:e.method}),r(V,{requestSize:e.requestSize,responseSize:e.responseSize})]}),r("span",{style:o.middleSection,children:r("span",{style:o.urlText,children:g})}),s("span",{style:o.rightSection,children:[y?r(H,{type:y}):null,r(B,{size:14,color:n.text.muted})]}),r("span",{style:o.bottomRightContainer,children:r(_,{timestamp:e.timestamp,duration:e.duration})})]})});NetworkEventItemCompact.displayName="NetworkEventItemCompact";const o={leftSection:{display:"flex",flexDirection:"column",marginRight:8,alignItems:"flex-start"},topRightContainer:{position:"absolute",top:1,right:1,display:"flex",flexDirection:"row",alignItems:"center",gap:4},topRightBadge:{display:"inline-flex",padding:"2px 4px",borderRadius:4},middleSection:{flex:1,minWidth:0,display:"flex",flexDirection:"column",justifyContent:"center",paddingRight:8},urlText:{fontSize:12,color:n.text.primary,lineHeight:"16px",fontFamily:"ui-monospace, Menlo, monospace",display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden",whiteSpace:"pre-wrap",wordBreak:"break-all"},rightSection:{display:"flex",flexDirection:"row",alignItems:"center",gap:6},bottomRightContainer:{position:"absolute",bottom:4,right:8},bottomRightText:{fontSize:9,color:n.text.muted,fontFamily:"ui-monospace, Menlo, monospace",whiteSpace:"pre"},statusBadge:{display:"inline-flex",padding:"1px 4px",borderRadius:3},statusText:{fontSize:10,fontWeight:600},pendingBadge:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:2,padding:"1px 4px",backgroundColor:n.semantic.warning+"26",borderRadius:3},pendingText:{fontSize:10,color:n.semantic.warning,fontWeight:600},errorBadge:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:2,padding:"1px 4px",backgroundColor:n.semantic.error+"26",borderRadius:3},errorText:{fontSize:10,color:n.semantic.error,fontWeight:600},sizeRow:{display:"flex",flexDirection:"row",gap:4,marginTop:4},sizeItem:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:2},sizeText:{fontSize:8,color:n.text.secondary,fontFamily:"ui-monospace, Menlo, monospace"},clientText:{fontSize:8,fontWeight:700,letterSpacing:.3,textTransform:"uppercase"}};