react-native-prod-debugger 1.0.0

package/lib/commonjs/plugins/network/NetworkInspectorPlugin.js

@@ -0,0 +1,709 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createNetworkInspectorPlugin = createNetworkInspectorPlugin;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _NetworkInterceptor = require("./NetworkInterceptor");
+var _utils = require("../../core/utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// ─── Network Inspector Plugin Component ─────────────────────────────────────
+
+const NetworkInspectorPanel = ({
+  theme
+}) => {
+  const [requests, setRequests] = (0, _react.useState)([]);
+  const [searchQuery, setSearchQuery] = (0, _react.useState)('');
+  const [selectedRequest, setSelectedRequest] = (0, _react.useState)(null);
+  const [activeDetailTab, setActiveDetailTab] = (0, _react.useState)('headers');
+  const [methodFilter, setMethodFilter] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    const unsubscribe = _NetworkInterceptor.NetworkInterceptor.subscribe(setRequests);
+    return unsubscribe;
+  }, []);
+  const filteredRequests = (0, _react.useMemo)(() => {
+    let filtered = requests;
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase();
+      filtered = filtered.filter(r => r.url.toLowerCase().includes(q) || r.method.toLowerCase().includes(q) || r.gqlOperation?.toLowerCase().includes(q) || String(r.status).includes(q));
+    }
+    if (methodFilter) {
+      filtered = filtered.filter(r => r.method === methodFilter);
+    }
+    return filtered;
+  }, [requests, searchQuery, methodFilter]);
+  const stats = (0, _react.useMemo)(() => {
+    const total = requests.length;
+    const errors = requests.filter(r => r.isError).length;
+    const pending = requests.filter(r => !r.endTime).length;
+    return {
+      total,
+      errors,
+      pending
+    };
+  }, [requests]);
+  const handleClear = (0, _react.useCallback)(() => {
+    _NetworkInterceptor.NetworkInterceptor.clear();
+    setSelectedRequest(null);
+  }, []);
+  const handleCopyCurl = (0, _react.useCallback)(req => {
+    (0, _utils.copyToClipboard)((0, _utils.toCurl)(req));
+  }, []);
+  const handleShareRequest = (0, _react.useCallback)(req => {
+    const data = (0, _utils.safeStringify)({
+      url: req.url,
+      method: req.method,
+      status: req.status,
+      duration: req.duration,
+      requestHeaders: req.requestHeaders,
+      responseHeaders: req.responseHeaders,
+      requestBody: req.requestBody,
+      responseBody: req.responseBody
+    });
+    (0, _utils.shareText)(data, `${req.method} ${req.url}`);
+  }, []);
+  if (selectedRequest) {
+    return /*#__PURE__*/_react.default.createElement(RequestDetail, {
+      request: selectedRequest,
+      theme: theme,
+      activeTab: activeDetailTab,
+      onTabChange: setActiveDetailTab,
+      onBack: () => setSelectedRequest(null),
+      onCopyCurl: handleCopyCurl,
+      onShare: handleShareRequest
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.statsBar, {
+      backgroundColor: theme.surface
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.statsRow
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.statText, {
+      color: theme.text
+    }]
+  }, stats.total, " requests"), stats.errors > 0 && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.statText, {
+      color: theme.error
+    }]
+  }, stats.errors, " errors"), stats.pending > 0 && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.statText, {
+      color: theme.warning
+    }]
+  }, stats.pending, " pending")), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: handleClear,
+    activeOpacity: 0.7
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.clearButton, {
+      color: theme.error
+    }]
+  }, "Clear"))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.searchContainer, {
+      backgroundColor: theme.surface
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
+    style: [styles.searchInput, {
+      color: theme.text,
+      backgroundColor: theme.surfaceAlt,
+      borderColor: theme.border
+    }],
+    placeholder: "Search URL, method, status...",
+    placeholderTextColor: theme.textMuted,
+    value: searchQuery,
+    onChangeText: setSearchQuery,
+    autoCapitalize: "none",
+    autoCorrect: false
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    style: [styles.filterContainer, {
+      backgroundColor: theme.surface
+    }],
+    contentContainerStyle: styles.filterContent
+  }, ['ALL', 'GET', 'POST', 'PUT', 'PATCH', 'DELETE'].map(method => /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    key: method,
+    style: [styles.filterChip, {
+      backgroundColor: method === 'ALL' && !methodFilter || methodFilter === method ? theme.accent : theme.surfaceAlt,
+      borderColor: theme.border
+    }],
+    onPress: () => setMethodFilter(method === 'ALL' ? null : method),
+    activeOpacity: 0.7
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.filterChipText, {
+      color: method === 'ALL' && !methodFilter || methodFilter === method ? '#FFFFFF' : theme.textSecondary
+    }]
+  }, method)))), /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+    data: filteredRequests,
+    keyExtractor: item => item.id,
+    renderItem: ({
+      item
+    }) => /*#__PURE__*/_react.default.createElement(RequestRow, {
+      request: item,
+      theme: theme,
+      onPress: () => setSelectedRequest(item)
+    }),
+    ListEmptyComponent: /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: styles.emptyContainer
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: [styles.emptyText, {
+        color: theme.textMuted
+      }]
+    }, searchQuery ? 'No matching requests' : 'No network requests captured yet')),
+    initialNumToRender: 20,
+    maxToRenderPerBatch: 10,
+    windowSize: 10
+  }));
+};
+
+// ─── Request Row ────────────────────────────────────────────────────────────
+
+const RequestRow = /*#__PURE__*/_react.default.memo(({
+  request,
+  theme,
+  onPress
+}) => {
+  const urlPath = (0, _react.useMemo)(() => {
+    try {
+      const parsed = new URL(request.url);
+      return parsed.pathname + parsed.search;
+    } catch {
+      return request.url;
+    }
+  }, [request.url]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: [styles.requestRow, {
+      backgroundColor: request.isError ? `${theme.error}10` : theme.surface,
+      borderBottomColor: theme.border
+    }],
+    onPress: onPress,
+    activeOpacity: 0.7
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.requestRowLeft
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.requestMethodContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.requestMethod, {
+      color: (0, _utils.getMethodColor)(request.method)
+    }]
+  }, request.method), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.requestStatus, {
+      color: (0, _utils.getStatusColor)(request.status)
+    }]
+  }, request.status ?? '...')), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.requestUrl, {
+      color: theme.text
+    }],
+    numberOfLines: 1
+  }, request.gqlOperation ? `[${request.gqlType}] ${request.gqlOperation}` : (0, _utils.truncate)(urlPath, 60))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.requestRowRight
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.requestDuration, {
+      color: theme.textSecondary
+    }]
+  }, (0, _utils.formatDuration)(request.duration)), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.requestSize, {
+      color: theme.textMuted
+    }]
+  }, (0, _utils.formatBytes)(request.responseSize)), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.requestTime, {
+      color: theme.textMuted
+    }]
+  }, (0, _utils.formatTimestamp)(request.startTime))));
+});
+
+// ─── Request Detail ─────────────────────────────────────────────────────────
+
+const RequestDetail = ({
+  request,
+  theme,
+  activeTab,
+  onTabChange,
+  onBack,
+  onCopyCurl,
+  onShare
+}) => {
+  const tabs = ['headers', 'request', 'response', 'timing'];
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.detailHeader, {
+      backgroundColor: theme.surface,
+      borderBottomColor: theme.border
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: onBack,
+    activeOpacity: 0.7
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.backButton, {
+      color: theme.accent
+    }]
+  }, "\u2190 Back")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.detailActions
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: () => onCopyCurl(request),
+    style: [styles.actionButton, {
+      backgroundColor: theme.surfaceAlt
+    }],
+    activeOpacity: 0.7
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.actionButtonText, {
+      color: theme.textSecondary
+    }]
+  }, "cURL")), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: () => onShare(request),
+    style: [styles.actionButton, {
+      backgroundColor: theme.surfaceAlt
+    }],
+    activeOpacity: 0.7
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.actionButtonText, {
+      color: theme.textSecondary
+    }]
+  }, "Share")))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.urlDisplay, {
+      backgroundColor: theme.codeBackground
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.urlMethod, {
+      color: (0, _utils.getMethodColor)(request.method)
+    }]
+  }, request.method), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.urlText, {
+      color: theme.codeText
+    }],
+    selectable: true
+  }, request.url)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.detailTabBar, {
+      backgroundColor: theme.surface
+    }]
+  }, tabs.map(tab => /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    key: tab,
+    style: [styles.detailTab, {
+      borderBottomColor: activeTab === tab ? theme.accent : 'transparent'
+    }],
+    onPress: () => onTabChange(tab),
+    activeOpacity: 0.7
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.detailTabText, {
+      color: activeTab === tab ? theme.accent : theme.textSecondary
+    }]
+  }, tab.charAt(0).toUpperCase() + tab.slice(1))))), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
+    style: styles.detailContent
+  }, activeTab === 'headers' && /*#__PURE__*/_react.default.createElement(HeadersView, {
+    request: request,
+    theme: theme
+  }), activeTab === 'request' && /*#__PURE__*/_react.default.createElement(BodyView, {
+    body: request.requestBody,
+    theme: theme,
+    label: "Request Body"
+  }), activeTab === 'response' && /*#__PURE__*/_react.default.createElement(BodyView, {
+    body: request.responseBody,
+    theme: theme,
+    label: "Response Body"
+  }), activeTab === 'timing' && /*#__PURE__*/_react.default.createElement(TimingView, {
+    request: request,
+    theme: theme
+  })));
+};
+
+// ─── Sub-views ──────────────────────────────────────────────────────────────
+
+const HeadersView = ({
+  request,
+  theme
+}) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  style: styles.sectionContainer
+}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.sectionTitle, {
+    color: theme.text
+  }]
+}, "Request Headers"), request.requestHeaders && Object.keys(request.requestHeaders).length > 0 ? Object.entries(request.requestHeaders).map(([key, value]) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  key: key,
+  style: [styles.headerRow, {
+    borderBottomColor: theme.border
+  }]
+}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.headerKey, {
+    color: theme.accent
+  }]
+}, key), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.headerValue, {
+    color: theme.text
+  }],
+  selectable: true
+}, value))) : /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.emptyText, {
+    color: theme.textMuted
+  }]
+}, "No headers"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.sectionTitle, {
+    color: theme.text,
+    marginTop: 16
+  }]
+}, "Response Headers"), request.responseHeaders && Object.keys(request.responseHeaders).length > 0 ? Object.entries(request.responseHeaders).map(([key, value]) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  key: key,
+  style: [styles.headerRow, {
+    borderBottomColor: theme.border
+  }]
+}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.headerKey, {
+    color: theme.accent
+  }]
+}, key), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.headerValue, {
+    color: theme.text
+  }],
+  selectable: true
+}, value))) : /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.emptyText, {
+    color: theme.textMuted
+  }]
+}, request.endTime ? 'No headers' : 'Pending...'));
+const BodyView = ({
+  body,
+  theme,
+  label
+}) => {
+  const formatted = (0, _react.useMemo)(() => {
+    if (!body) return null;
+    try {
+      const parsed = JSON.parse(body);
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      return body;
+    }
+  }, [body]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.sectionContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.sectionHeaderRow
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.sectionTitle, {
+      color: theme.text
+    }]
+  }, label), formatted && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: () => (0, _utils.copyToClipboard)(formatted),
+    activeOpacity: 0.7
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.copyButton, {
+      color: theme.accent
+    }]
+  }, "Copy"))), formatted ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.codeBlock, {
+      backgroundColor: theme.codeBackground
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.codeText, {
+      color: theme.codeText
+    }],
+    selectable: true
+  }, formatted)) : /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.emptyText, {
+      color: theme.textMuted
+    }]
+  }, "No body"));
+};
+const TimingView = ({
+  request,
+  theme
+}) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  style: styles.sectionContainer
+}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  style: [styles.timingRow, {
+    borderBottomColor: theme.border
+  }]
+}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.timingLabel, {
+    color: theme.textSecondary
+  }]
+}, "Started"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.timingValue, {
+    color: theme.text
+  }]
+}, (0, _utils.formatTimestamp)(request.startTime))), request.endTime && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  style: [styles.timingRow, {
+    borderBottomColor: theme.border
+  }]
+}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.timingLabel, {
+    color: theme.textSecondary
+  }]
+}, "Completed"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.timingValue, {
+    color: theme.text
+  }]
+}, (0, _utils.formatTimestamp)(request.endTime))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  style: [styles.timingRow, {
+    borderBottomColor: theme.border
+  }]
+}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.timingLabel, {
+    color: theme.textSecondary
+  }]
+}, "Duration"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.timingValue, {
+    color: request.duration && request.duration > 3000 ? theme.warning : theme.success
+  }]
+}, (0, _utils.formatDuration)(request.duration))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  style: [styles.timingRow, {
+    borderBottomColor: theme.border
+  }]
+}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.timingLabel, {
+    color: theme.textSecondary
+  }]
+}, "Request Size"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.timingValue, {
+    color: theme.text
+  }]
+}, (0, _utils.formatBytes)(request.requestSize))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  style: [styles.timingRow, {
+    borderBottomColor: theme.border
+  }]
+}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.timingLabel, {
+    color: theme.textSecondary
+  }]
+}, "Response Size"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: [styles.timingValue, {
+    color: theme.text
+  }]
+}, (0, _utils.formatBytes)(request.responseSize))));
+
+// ─── Styles ─────────────────────────────────────────────────────────────────
+
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  statsBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  statsRow: {
+    flexDirection: 'row',
+    gap: 12
+  },
+  statText: {
+    fontSize: 12,
+    fontWeight: '600'
+  },
+  clearButton: {
+    fontSize: 13,
+    fontWeight: '700'
+  },
+  searchContainer: {
+    paddingHorizontal: 12,
+    paddingBottom: 8
+  },
+  searchInput: {
+    height: 36,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    fontSize: 13,
+    borderWidth: 1
+  },
+  filterContainer: {
+    maxHeight: 44
+  },
+  filterContent: {
+    paddingHorizontal: 12,
+    paddingBottom: 8,
+    gap: 6
+  },
+  filterChip: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 12,
+    borderWidth: 1
+  },
+  filterChipText: {
+    fontSize: 11,
+    fontWeight: '600'
+  },
+  requestRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth
+  },
+  requestRowLeft: {
+    flex: 1,
+    marginRight: 8
+  },
+  requestRowRight: {
+    alignItems: 'flex-end'
+  },
+  requestMethodContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginBottom: 2
+  },
+  requestMethod: {
+    fontSize: 11,
+    fontWeight: '800',
+    letterSpacing: 0.5
+  },
+  requestStatus: {
+    fontSize: 11,
+    fontWeight: '700'
+  },
+  requestUrl: {
+    fontSize: 12
+  },
+  requestDuration: {
+    fontSize: 11,
+    fontWeight: '600'
+  },
+  requestSize: {
+    fontSize: 10,
+    marginTop: 1
+  },
+  requestTime: {
+    fontSize: 10,
+    marginTop: 1
+  },
+  emptyContainer: {
+    alignItems: 'center',
+    paddingVertical: 40
+  },
+  emptyText: {
+    fontSize: 13
+  },
+  detailHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth
+  },
+  backButton: {
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  detailActions: {
+    flexDirection: 'row',
+    gap: 8
+  },
+  actionButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 8
+  },
+  actionButtonText: {
+    fontSize: 11,
+    fontWeight: '600'
+  },
+  urlDisplay: {
+    padding: 12,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8
+  },
+  urlMethod: {
+    fontSize: 12,
+    fontWeight: '800'
+  },
+  urlText: {
+    fontSize: 11,
+    flex: 1
+  },
+  detailTabBar: {
+    flexDirection: 'row'
+  },
+  detailTab: {
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: 10,
+    borderBottomWidth: 2
+  },
+  detailTabText: {
+    fontSize: 12,
+    fontWeight: '600'
+  },
+  detailContent: {
+    flex: 1
+  },
+  sectionContainer: {
+    padding: 12
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: '700',
+    marginBottom: 8
+  },
+  sectionHeaderRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8
+  },
+  copyButton: {
+    fontSize: 12,
+    fontWeight: '600'
+  },
+  headerRow: {
+    flexDirection: 'row',
+    paddingVertical: 6,
+    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth
+  },
+  headerKey: {
+    fontSize: 11,
+    fontWeight: '600',
+    width: 120,
+    marginRight: 8
+  },
+  headerValue: {
+    fontSize: 11,
+    flex: 1
+  },
+  codeBlock: {
+    padding: 12,
+    borderRadius: 8
+  },
+  codeText: {
+    fontSize: 11,
+    fontFamily: 'monospace',
+    lineHeight: 18
+  },
+  timingRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 10,
+    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth
+  },
+  timingLabel: {
+    fontSize: 13
+  },
+  timingValue: {
+    fontSize: 13,
+    fontWeight: '600'
+  }
+});
+
+// ─── Plugin Factory ─────────────────────────────────────────────────────────
+
+function createNetworkInspectorPlugin() {
+  return {
+    id: 'network-inspector',
+    name: 'Network',
+    icon: '🌐',
+    component: NetworkInspectorPanel,
+    order: 10,
+    onInit: () => _NetworkInterceptor.NetworkInterceptor.start(),
+    onDestroy: () => _NetworkInterceptor.NetworkInterceptor.stop()
+  };
+}
+//# sourceMappingURL=NetworkInspectorPlugin.js.map