@buoy-gg/network 7.0.41 → 7.0.42

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

@@ -1,820 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NetworkEventItemCompact = void 0;
-var _react = require("react");
-var _formatGraphQLVariables = require("../utils/formatGraphQLVariables");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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
- */
-
-// =============================
-// Native palettes (provenance)
-// =============================
-
-/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */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__*/(0, _jsxRuntime.jsx)("svg", {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: color,
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    style: {
-      flexShrink: 0,
-      display: "block"
-    },
-    children: children
-  });
-}
-const ChevronRight = p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m9 18 6-6-6-6"
-  })
-});
-const Upload = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polyline", {
-    points: "17 8 12 3 7 8"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "12",
-    x2: "12",
-    y1: "3",
-    y2: "15"
-  })]
-});
-const Download = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polyline", {
-    points: "7 10 12 15 17 10"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "12",
-    x2: "12",
-    y1: "15",
-    y2: "3"
-  })]
-});
-const Clock = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polyline", {
-    points: "12 6 12 12 16 14"
-  })]
-});
-const AlertCircle = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "12",
-    x2: "12",
-    y1: "8",
-    y2: "12"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "12",
-    x2: "12.01",
-    y1: "16",
-    y2: "16"
-  })]
-});
-const Bookmark = p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M8.5 2h7"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M7 16h10"
-  })]
-});
-const Pin = ({
-  active,
-  ...p
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-    transform: active ? "rotate(-45 12 12) translate(12 12) scale(0.92) translate(-12 -12)" : undefined,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: "M2.97 21.03 8.18 15.82"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: "M4.4 10.81 13.19 19.6"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: "M5.17 10.54 11.43 8.83"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: "M13.46 18.83 15.17 12.57"
-    }), /*#__PURE__*/(0, _jsxRuntime.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] = (0, _react.useState)(() => Date.now());
-  (0, _react.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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] = (0, _react.useState)(false);
-  const longPressTimer = (0, _react.useRef)(null);
-  const longPressFired = (0, _react.useRef)(false);
-  const clearTimer = () => {
-    if (longPressTimer.current != null) {
-      clearTimeout(longPressTimer.current);
-      longPressTimer.current = null;
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      margin: "4px 8px"
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("span", {
-      style: styles.pendingBadge,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Clock, {
-        size: 10,
-        color: macOSColors.semantic.warning
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: styles.pendingText,
-        children: "..."
-      })]
-    });
-  }
-  if (event.error) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      style: styles.errorBadge,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AlertCircle, {
-        size: 10,
-        color: macOSColors.semantic.error
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: styles.errorText,
-        children: "ERR"
-      })]
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    style: styles.statusBadge,
-    children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("span", {
-    style: styles.sizeRow,
-    children: [requestSize ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      style: styles.sizeItem,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Upload, {
-        size: 8,
-        color: macOSColors.semantic.info
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: styles.sizeText,
-        children: formatBytes(requestSize)
-      })]
-    }) : null, responseSize ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      style: styles.sizeItem,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Download, {
-        size: 8,
-        color: macOSColors.semantic.success
-      }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("span", {
-    style: styles.bottomRightText,
-    children: [formatDuration(duration), "  ", relativeTime]
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    style: styles.bottomRightText,
-    children: relativeTime
-  });
-}
-const NetworkEventItemCompact = exports.NetworkEventItemCompact = /*#__PURE__*/(0, _react.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 = (0, _formatGraphQLVariables.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__*/(0, _jsxRuntime.jsxs)(DevToolsCardWeb, {
-    onPress: () => onPress(event),
-    onLongPress: onLongPress ? () => onLongPress(event) : undefined,
-    contentStyle: {
-      flexDirection: "row",
-      alignItems: "center",
-      borderLeft: `3px solid ${statusColor}`
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      style: styles.topRightContainer,
-      children: [pinned ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Pin, {
-        size: 10,
-        active: true,
-        color: macOSColors.semantic.info
-      }) : null, saved ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Bookmark, {
-        size: 10,
-        color: macOSColors.semantic.debug
-      }) : null, overridden || event.override ? /*#__PURE__*/(0, _jsxRuntime.jsx)(FlaskConical, {
-        size: 10,
-        color: macOSColors.semantic.warning
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIndicator, {
-        event: event,
-        isPending: isPending,
-        statusColor: statusColor
-      }), event.requestClient ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          ...styles.topRightBadge,
-          backgroundColor: getClientChipColors(event.requestClient).backgroundColor
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("span", {
-      style: styles.leftSection,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MethodBadgeWeb, {
-        method: event.method
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SizeIndicators, {
-        requestSize: event.requestSize,
-        responseSize: event.responseSize
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      style: styles.middleSection,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: styles.urlText,
-        children: displayUrl
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      style: styles.rightSection,
-      children: [contentType ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TypeBadgeWeb, {
-        type: contentType
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronRight, {
-        size: 14,
-        color: macOSColors.text.muted
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      style: styles.bottomRightContainer,
-      children: /*#__PURE__*/(0, _jsxRuntime.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";Object.defineProperty(exports,"__esModule",{value:true});exports.NetworkEventItemCompact=void 0;var _react=require("react");var _formatGraphQLVariables=require("../utils/formatGraphQLVariables");var _jsxRuntime=require("react/jsx-runtime");const macOSColors={text:{primary:"#F5F5F7",secondary:"#A1A1A6",muted:"#8E8E93"},semantic:{success:"#34C759",error:"#FF453A",warning:"#FFEB3B",info:"#00B8E6",debug:"#BF5AF2"}};const buoy={card:"#1A1A1A",border:"#333333",primary:"#20C997",success:"#20C997",warning:"#FFA94D",error:"#EF4444",textSecondary:"#A0A0A0",textMuted:"#888888"};function Svg({size:t=14,color:e="currentColor",children:r}){return(0,_jsxRuntime.jsx)("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:e,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block"},children:r})}const ChevronRight=t=>(0,_jsxRuntime.jsx)(Svg,{...t,children:(0,_jsxRuntime.jsx)("path",{d:"m9 18 6-6-6-6"})});const Upload=t=>(0,_jsxRuntime.jsxs)(Svg,{...t,children:[(0,_jsxRuntime.jsx)("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),(0,_jsxRuntime.jsx)("polyline",{points:"17 8 12 3 7 8"}),(0,_jsxRuntime.jsx)("line",{x1:"12",x2:"12",y1:"3",y2:"15"})]});const Download=t=>(0,_jsxRuntime.jsxs)(Svg,{...t,children:[(0,_jsxRuntime.jsx)("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),(0,_jsxRuntime.jsx)("polyline",{points:"7 10 12 15 17 10"}),(0,_jsxRuntime.jsx)("line",{x1:"12",x2:"12",y1:"15",y2:"3"})]});const Clock=t=>(0,_jsxRuntime.jsxs)(Svg,{...t,children:[(0,_jsxRuntime.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,_jsxRuntime.jsx)("polyline",{points:"12 6 12 12 16 14"})]});const AlertCircle=t=>(0,_jsxRuntime.jsxs)(Svg,{...t,children:[(0,_jsxRuntime.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,_jsxRuntime.jsx)("line",{x1:"12",x2:"12",y1:"8",y2:"12"}),(0,_jsxRuntime.jsx)("line",{x1:"12",x2:"12.01",y1:"16",y2:"16"})]});const Bookmark=t=>(0,_jsxRuntime.jsx)(Svg,{...t,children:(0,_jsxRuntime.jsx)("path",{d:"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"})});const FlaskConical=t=>(0,_jsxRuntime.jsxs)(Svg,{...t,children:[(0,_jsxRuntime.jsx)("path",{d:"M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"}),(0,_jsxRuntime.jsx)("path",{d:"M8.5 2h7"}),(0,_jsxRuntime.jsx)("path",{d:"M7 16h10"})]});const Pin=({active:t,...e})=>(0,_jsxRuntime.jsx)(Svg,{...e,children:(0,_jsxRuntime.jsxs)("g",{transform:t?"rotate(-45 12 12) translate(12 12) scale(0.92) translate(-12 -12)":void 0,children:[(0,_jsxRuntime.jsx)("path",{d:"M2.97 21.03 8.18 15.82"}),(0,_jsxRuntime.jsx)("path",{d:"M4.4 10.81 13.19 19.6"}),(0,_jsxRuntime.jsx)("path",{d:"M5.17 10.54 11.43 8.83"}),(0,_jsxRuntime.jsx)("path",{d:"M13.46 18.83 15.17 12.57"}),(0,_jsxRuntime.jsx)("rect",{x:"12.15",y:"5.4",width:"9.38",height:"3.52",rx:"1.07",transform:"rotate(-45 16.84 7.16)"})]})});function formatBytes(t){if(t===void 0||t===null)return"N/A";if(t===0)return"0 B";const e=1024;const r=["B","KB","MB","GB","TB"];const n=Math.floor(Math.log(t)/Math.log(e));return`${(t/Math.pow(e,n)).toFixed(1)} ${r[n]}`}function formatDuration(t){if(t===void 0||t===null)return"N/A";if(t<1e3){return`${t}ms`}if(t<6e4){return`${(t/1e3).toFixed(1)}s`}if(t<36e5){const n=Math.floor(t/6e4);const o=Math.floor(t%6e4/1e3);return o>0?`${n}m ${o}s`:`${n}m`}const e=Math.floor(t/36e5);const r=Math.floor(t%36e5/6e4);return r>0?`${e}h ${r}m`:`${e}h`}function formatRelativeTime(t,e=Date.now()){const r=t instanceof Date?t.getTime():t;const n=Math.floor((e-r)/1e3);if(n<0){return"just now"}if(n<60){return n===0?"just now":`${n}s ago`}const o=Math.floor(n/60);if(o<60){return`${o}m ago`}const i=Math.floor(o/60);if(i<24){return`${i}h ago`}const s=Math.floor(i/24);return`${s}d ago`}const tickListeners=new Set;let tickInterval=null;function subscribeTick(t){tickListeners.add(t);if(tickInterval==null){tickInterval=setInterval(()=>{const e=Date.now();tickListeners.forEach(r=>r(e))},5e3)}return()=>{tickListeners.delete(t);if(tickListeners.size===0&&tickInterval!=null){clearInterval(tickInterval);tickInterval=null}}}function useSharedTick(){const[t,e]=(0,_react.useState)(()=>Date.now());(0,_react.useEffect)(()=>subscribeTick(e),[]);return t}function getStatusColor(t,e){if(e)return macOSColors.semantic.error;if(!t)return macOSColors.semantic.warning;if(t>=200&&t<300)return macOSColors.semantic.success;if(t>=300&&t<400)return macOSColors.semantic.info;if(t>=400)return macOSColors.semantic.error;return macOSColors.text.muted}function getContentTypeBadge(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 getClientChipColors(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 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:t}){const e=METHOD_COLORS[t.toUpperCase()]||"#6B7280";return(0,_jsxRuntime.jsx)("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 TypeBadgeWeb({type:t}){const e=buoy.textMuted;return(0,_jsxRuntime.jsx)("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 DevToolsCardWeb({onPress:t,onLongPress:e,children:r,contentStyle:n}){const[o,i]=(0,_react.useState)(false);const s=(0,_react.useRef)(null);const l=(0,_react.useRef)(false);const a=()=>{if(s.current!=null){clearTimeout(s.current);s.current=null}};return(0,_jsxRuntime.jsx)("div",{style:{margin:"4px 8px"},children:(0,_jsxRuntime.jsx)("button",{type:"button",onPointerDown:()=>{i(true);if(e){l.current=false;a();s.current=setTimeout(()=>{l.current=true;e()},500)}},onPointerUp:()=>{i(false);a()},onPointerLeave:()=>{i(false);a()},onPointerCancel:()=>{i(false);a()},onClick:()=>{if(l.current){l.current=false;return}t()},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:o?.8:1,...n},children:r})})}function StatusIndicator({event:t,isPending:e,statusColor:r}){if(e){return(0,_jsxRuntime.jsxs)("span",{style:styles.pendingBadge,children:[(0,_jsxRuntime.jsx)(Clock,{size:10,color:macOSColors.semantic.warning}),(0,_jsxRuntime.jsx)("span",{style:styles.pendingText,children:"..."})]})}if(t.error){return(0,_jsxRuntime.jsxs)("span",{style:styles.errorBadge,children:[(0,_jsxRuntime.jsx)(AlertCircle,{size:10,color:macOSColors.semantic.error}),(0,_jsxRuntime.jsx)("span",{style:styles.errorText,children:"ERR"})]})}return(0,_jsxRuntime.jsx)("span",{style:styles.statusBadge,children:(0,_jsxRuntime.jsx)("span",{style:{...styles.statusText,color:r},children:String(t.status)})})}function SizeIndicators({requestSize:t,responseSize:e}){if(!t&&!e)return null;return(0,_jsxRuntime.jsxs)("span",{style:styles.sizeRow,children:[t?(0,_jsxRuntime.jsxs)("span",{style:styles.sizeItem,children:[(0,_jsxRuntime.jsx)(Upload,{size:8,color:macOSColors.semantic.info}),(0,_jsxRuntime.jsx)("span",{style:styles.sizeText,children:formatBytes(t)})]}):null,e?(0,_jsxRuntime.jsxs)("span",{style:styles.sizeItem,children:[(0,_jsxRuntime.jsx)(Download,{size:8,color:macOSColors.semantic.success}),(0,_jsxRuntime.jsx)("span",{style:styles.sizeText,children:formatBytes(e)})]}):null]})}function BottomRightTime({timestamp:t,duration:e}){const r=useSharedTick();const n=formatRelativeTime(t,r);return e?(0,_jsxRuntime.jsxs)("span",{style:styles.bottomRightText,children:[formatDuration(e),"  ",n]}):(0,_jsxRuntime.jsx)("span",{style:styles.bottomRightText,children:n})}const NetworkEventItemCompact=exports.NetworkEventItemCompact=(0,_react.memo)(function t({event:e,onPress:r,pinned:n=false,saved:o=false,overridden:i=false,onLongPress:s}){const l=getStatusColor(e.status,e.error);const a=!e.status&&!e.error;const d=getContentTypeBadge(e.responseHeaders);let c=e.path||e.url.replace(/^https?:\/\/[^/]+/,"");if(e.requestClient==="graphql"){if(e.operationName){c=(0,_formatGraphQLVariables.formatGraphQLDisplay)(e.operationName,e.graphqlVariables)}else{c=c.replace(/\/graphql[^?]*/,"/graphql")}}else if(e.operationName){c=`${c}
+(${e.operationName})`}return(0,_jsxRuntime.jsxs)(DevToolsCardWeb,{onPress:()=>r(e),onLongPress:s?()=>s(e):void 0,contentStyle:{flexDirection:"row",alignItems:"center",borderLeft:`3px solid ${l}`},children:[(0,_jsxRuntime.jsxs)("span",{style:styles.topRightContainer,children:[n?(0,_jsxRuntime.jsx)(Pin,{size:10,active:true,color:macOSColors.semantic.info}):null,o?(0,_jsxRuntime.jsx)(Bookmark,{size:10,color:macOSColors.semantic.debug}):null,i||e.override?(0,_jsxRuntime.jsx)(FlaskConical,{size:10,color:macOSColors.semantic.warning}):null,(0,_jsxRuntime.jsx)(StatusIndicator,{event:e,isPending:a,statusColor:l}),e.requestClient?(0,_jsxRuntime.jsx)("span",{style:{...styles.topRightBadge,backgroundColor:getClientChipColors(e.requestClient).backgroundColor},children:(0,_jsxRuntime.jsx)("span",{style:{...styles.clientText,color:getClientChipColors(e.requestClient).color},children:e.requestClient==="graphql"?"GQL":e.requestClient==="grpc-web"?"gRPC":e.requestClient==="xhr"?"XHR":e.requestClient})}):null]}),(0,_jsxRuntime.jsxs)("span",{style:styles.leftSection,children:[(0,_jsxRuntime.jsx)(MethodBadgeWeb,{method:e.method}),(0,_jsxRuntime.jsx)(SizeIndicators,{requestSize:e.requestSize,responseSize:e.responseSize})]}),(0,_jsxRuntime.jsx)("span",{style:styles.middleSection,children:(0,_jsxRuntime.jsx)("span",{style:styles.urlText,children:c})}),(0,_jsxRuntime.jsxs)("span",{style:styles.rightSection,children:[d?(0,_jsxRuntime.jsx)(TypeBadgeWeb,{type:d}):null,(0,_jsxRuntime.jsx)(ChevronRight,{size:14,color:macOSColors.text.muted})]}),(0,_jsxRuntime.jsx)("span",{style:styles.bottomRightContainer,children:(0,_jsxRuntime.jsx)(BottomRightTime,{timestamp:e.timestamp,duration:e.duration})})]})});NetworkEventItemCompact.displayName="NetworkEventItemCompact";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:.3,textTransform:"uppercase"}};