@buoy-gg/network 1.7.2

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

@@ -0,0 +1,320 @@
+"use strict";
+
+import { memo } from "react";
+import { StyleSheet, View, Text } from "react-native";
+import { ChevronRight, Upload, Download, Clock, AlertCircle, ListItem, MethodBadge, TypeBadge, macOSColors } from "@buoy-gg/shared-ui";
+import { formatBytes, formatDuration } from "../utils/formatting";
+import { formatRelativeTime } from "@buoy-gg/shared-ui";
+import { useTickEveryMinute } from "../hooks/useTickEveryMinute";
+import { formatGraphQLDisplay } from "../utils/formatGraphQLVariables";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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;
+}
+
+// Decomposed components following rule3 - Component Composition
+
+// Status indicator component - single responsibility
+function StatusIndicator({
+  event,
+  isPending,
+  statusColor
+}) {
+  if (isPending) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.pendingBadge,
+      children: [/*#__PURE__*/_jsx(Clock, {
+        size: 10,
+        color: macOSColors.semantic.warning
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.pendingText,
+        children: "..."
+      })]
+    });
+  }
+  if (event.error) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.errorBadge,
+      children: [/*#__PURE__*/_jsx(AlertCircle, {
+        size: 10,
+        color: macOSColors.semantic.error
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.errorText,
+        children: "ERR"
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.statusBadge,
+    children: /*#__PURE__*/_jsx(Text, {
+      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(View, {
+    style: styles.sizeRow,
+    children: [requestSize ? /*#__PURE__*/_jsxs(View, {
+      style: styles.sizeItem,
+      children: [/*#__PURE__*/_jsx(Upload, {
+        size: 8,
+        color: macOSColors.semantic.info
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.sizeText,
+        children: formatBytes(requestSize)
+      })]
+    }) : null, responseSize ? /*#__PURE__*/_jsxs(View, {
+      style: styles.sizeItem,
+      children: [/*#__PURE__*/_jsx(Download, {
+        size: 8,
+        color: macOSColors.semantic.success
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.sizeText,
+        children: formatBytes(responseSize)
+      })]
+    }) : null]
+  });
+}
+
+/**
+ * Compact list-row representation of a network event. Optimized for large lists with memoization
+ * and periodic refresh via `useTickEveryMinute` to keep relative timestamps accurate.
+ */
+export const NetworkEventItemCompact = /*#__PURE__*/memo(({
+  event,
+  onPress
+}) => {
+  const tick = useTickEveryMinute();
+  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
+  // Matches React Query pattern: ["pokemon", "Sandshrew"] → "pokemon › Sandshrew"
+  if (event.requestClient === "graphql") {
+    if (event.operationName) {
+      // Format: GetPokemon › Sandshrew (matches React Query pattern)
+      displayUrl = formatGraphQLDisplay(event.operationName, event.graphqlVariables);
+    } else {
+      // If no operation name found, just remove the redundant /graphql path
+      displayUrl = displayUrl.replace(/\/graphql[^?]*/, "/graphql");
+    }
+  } else if (event.operationName) {
+    // For non-GraphQL requests with operation names (e.g., gRPC)
+    displayUrl = `${displayUrl}\n(${event.operationName})`;
+  }
+
+  // Format time with both absolute and relative
+  const timeString = new Date(event.timestamp).toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true
+  });
+  const relativeTime = formatRelativeTime(event.timestamp, tick);
+  return /*#__PURE__*/_jsxs(ListItem, {
+    onPress: () => onPress(event),
+    style: [styles.container, {
+      borderLeftColor: statusColor
+    }],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.leftSection,
+      children: [/*#__PURE__*/_jsx(MethodBadge, {
+        method: event.method,
+        size: "small"
+      }), event.requestClient && /*#__PURE__*/_jsx(View, {
+        style: [styles.clientBadge, {
+          backgroundColor: event.requestClient === "fetch" ? "rgba(74, 144, 226, 0.15)" : event.requestClient === "graphql" ? "rgba(229, 53, 171, 0.15)" : event.requestClient === "grpc-web" ? "rgba(16, 185, 129, 0.15)" : "rgba(147, 51, 234, 0.15)"
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.clientText, {
+            color: event.requestClient === "fetch" ? "#4A90E2" : event.requestClient === "graphql" ? "#E535AB" : event.requestClient === "grpc-web" ? "#10B981" : "#9333EA"
+          }],
+          children: event.requestClient === "graphql" ? "GQL" : event.requestClient === "grpc-web" ? "gRPC" : event.requestClient
+        })
+      }), /*#__PURE__*/_jsx(SizeIndicators, {
+        requestSize: event.requestSize,
+        responseSize: event.responseSize
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.middleSection,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.urlText,
+        numberOfLines: 2,
+        children: displayUrl
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.rightSection,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.rightTopRow,
+        children: [/*#__PURE__*/_jsx(StatusIndicator, {
+          event: event,
+          isPending: isPending,
+          statusColor: statusColor
+        }), event.duration ? /*#__PURE__*/_jsx(Text, {
+          style: styles.durationText,
+          children: formatDuration(event.duration)
+        }) : null, contentType ? /*#__PURE__*/_jsx(TypeBadge, {
+          type: contentType,
+          size: "small"
+        }) : null]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.rightBottomRow,
+        children: /*#__PURE__*/_jsxs(ListItem.Metadata, {
+          children: [timeString, " (", relativeTime, ")"]
+        })
+      })]
+    }), /*#__PURE__*/_jsx(ChevronRight, {
+      size: 14,
+      color: macOSColors.text.muted
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 6,
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    paddingLeft: 8,
+    marginBottom: 4,
+    marginHorizontal: 12,
+    minHeight: 44,
+    borderLeftWidth: 3,
+    borderLeftColor: "transparent"
+  },
+  leftSection: {
+    marginRight: 8,
+    alignItems: "flex-start",
+    paddingTop: 2
+  },
+  middleSection: {
+    flex: 1,
+    justifyContent: "center",
+    paddingRight: 8
+  },
+  urlText: {
+    fontSize: 12,
+    color: macOSColors.text.primary,
+    lineHeight: 16,
+    fontFamily: "monospace"
+  },
+  rightSection: {
+    alignItems: "flex-end",
+    justifyContent: "center",
+    marginRight: 4
+  },
+  rightTopRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    marginBottom: 2
+  },
+  rightBottomRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  statusBadge: {
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    borderRadius: 3
+  },
+  statusText: {
+    fontSize: 10,
+    fontWeight: "600"
+  },
+  pendingBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    backgroundColor: macOSColors.semantic.warning + "26",
+    borderRadius: 3
+  },
+  pendingText: {
+    fontSize: 10,
+    color: macOSColors.semantic.warning,
+    fontWeight: "600"
+  },
+  errorBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    backgroundColor: macOSColors.semantic.error + "26",
+    borderRadius: 3
+  },
+  errorText: {
+    fontSize: 10,
+    color: macOSColors.semantic.error,
+    fontWeight: "600"
+  },
+  durationText: {
+    fontSize: 9,
+    color: macOSColors.text.secondary
+  },
+  sizeRow: {
+    flexDirection: "row",
+    gap: 4,
+    marginTop: 4
+  },
+  sizeItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2
+  },
+  sizeText: {
+    fontSize: 8,
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace"
+  },
+  clientBadge: {
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    borderRadius: 3,
+    marginTop: 4
+  },
+  clientText: {
+    fontSize: 8,
+    fontWeight: "700",
+    letterSpacing: 0.3,
+    textTransform: "uppercase"
+  }
+});

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

@@ -0,0 +1,293 @@
+"use strict";
+
+import { CheckCircle, Clock, DynamicFilterView, Film, FileJson, FileText, Filter, Globe, Image, macOSColors, Music, XCircle } from "@buoy-gg/shared-ui";
+import { useCallback, useMemo } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function getContentType(event) {
+  const headers = event.responseHeaders || event.requestHeaders;
+  const contentType = headers?.["content-type"] || headers?.["Content-Type"] || "";
+  if (contentType.includes("json")) return {
+    type: "JSON",
+    color: macOSColors.semantic.info
+  };
+  if (contentType.includes("xml")) return {
+    type: "XML",
+    color: macOSColors.semantic.success
+  };
+  if (contentType.includes("html")) return {
+    type: "HTML",
+    color: macOSColors.semantic.warning
+  };
+  if (contentType.includes("text")) return {
+    type: "TEXT",
+    color: macOSColors.semantic.success
+  };
+  if (contentType.includes("image")) return {
+    type: "IMAGE",
+    color: macOSColors.semantic.error
+  };
+  if (contentType.includes("video")) return {
+    type: "VIDEO",
+    color: macOSColors.semantic.error
+  };
+  if (contentType.includes("audio")) return {
+    type: "AUDIO",
+    color: macOSColors.semantic.debug
+  };
+  if (contentType.includes("form")) return {
+    type: "FORM",
+    color: macOSColors.semantic.info
+  };
+  return {
+    type: "OTHER",
+    color: macOSColors.text.muted
+  };
+}
+function getContentTypeIcon(type) {
+  switch (type) {
+    case "JSON":
+      return FileJson;
+    case "HTML":
+    case "XML":
+    case "TEXT":
+      return FileText;
+    case "IMAGE":
+      return Image;
+    case "VIDEO":
+      return Film;
+    case "AUDIO":
+      return Music;
+    default:
+      return Globe;
+  }
+}
+function getMethodColor(method) {
+  switch (method) {
+    case "GET":
+      return macOSColors.semantic.success;
+    case "POST":
+      return macOSColors.semantic.info;
+    case "PUT":
+      return macOSColors.semantic.warning;
+    case "DELETE":
+      return macOSColors.semantic.error;
+    case "PATCH":
+      return macOSColors.semantic.success;
+    default:
+      return macOSColors.text.muted;
+  }
+}
+
+/**
+ * Control panel for filtering captured network events by status, method, host, and content type.
+ * Provides quick toggles, stats, and ignored-pattern management reminiscent of desktop tooling.
+ */
+export function NetworkFilterViewV3({
+  events,
+  filter,
+  onFilterChange,
+  ignoredPatterns = new Set(),
+  onTogglePattern = () => {},
+  onAddPattern = () => {}
+}) {
+  const statusCounts = useMemo(() => {
+    const counts = {
+      all: events.length,
+      success: 0,
+      error: 0,
+      pending: 0
+    };
+    events.forEach(event => {
+      if (event.error || event.status && event.status >= 400) {
+        counts.error += 1;
+        return;
+      }
+      if (event.status && event.status >= 200 && event.status < 300) {
+        counts.success += 1;
+        return;
+      }
+      if (!event.status && !event.error) {
+        counts.pending += 1;
+      }
+    });
+    return counts;
+  }, [events]);
+  const methodCounts = useMemo(() => {
+    return events.reduce((acc, event) => {
+      if (!event.method) return acc;
+      acc[event.method] = (acc[event.method] || 0) + 1;
+      return acc;
+    }, {});
+  }, [events]);
+  const contentTypeCounts = useMemo(() => {
+    return events.reduce((acc, event) => {
+      const {
+        type
+      } = getContentType(event);
+      acc[type] = (acc[type] || 0) + 1;
+      return acc;
+    }, {});
+  }, [events]);
+  const availableDomains = useMemo(() => {
+    const domains = new Set();
+    events.forEach(event => {
+      if (event.host) {
+        domains.add(event.host);
+        return;
+      }
+      try {
+        if (event.url) {
+          const parsed = new URL(event.url);
+          const host = String(parsed.host || "");
+          if (host) domains.add(host);
+        }
+      } catch {
+        // Ignore relative URLs
+      }
+    });
+    return Array.from(domains).filter(domain => domain && domain !== "").sort((a, b) => a.localeCompare(b));
+  }, [events]);
+  const availableUrls = useMemo(() => {
+    const urls = new Set();
+    events.forEach(event => {
+      if (!event.url) return;
+      try {
+        const parsed = new URL(event.url);
+        const origin = String(parsed.origin || "");
+        const pathname = String(parsed.pathname || "");
+        const normalized = `${origin}${pathname}`;
+        urls.add(normalized);
+      } catch {
+        // URL constructor fails for relative paths - fall back to raw value
+        urls.add(event.url);
+      }
+    });
+    return Array.from(urls).filter(url => url && url !== "").sort((a, b) => a.localeCompare(b));
+  }, [events]);
+  const suggestionItems = useMemo(() => {
+    const maxItemsPerGroup = 30;
+    const domainSuggestions = availableDomains.slice(0, maxItemsPerGroup);
+    const urlSuggestions = availableUrls.slice(0, maxItemsPerGroup);
+    return [...domainSuggestions, ...urlSuggestions];
+  }, [availableDomains, availableUrls]);
+  const handleDynamicFilterChange = useCallback((optionId, value) => {
+    const [group] = optionId.split("::");
+    if (group === "status") {
+      const nextStatus = value === "all" ? undefined : value;
+      onFilterChange({
+        ...filter,
+        status: nextStatus
+      });
+      return;
+    }
+    if (group === "method") {
+      const methodValue = String(value);
+      const currentMethods = filter.method || [];
+      const hasMethod = currentMethods.includes(methodValue);
+      const updatedMethods = hasMethod ? currentMethods.filter(method => method !== methodValue) : [methodValue];
+      onFilterChange({
+        ...filter,
+        method: updatedMethods.length > 0 ? updatedMethods : undefined
+      });
+      return;
+    }
+    if (group === "contentType") {
+      const typeValue = String(value);
+      const currentTypes = filter.contentType || [];
+      const hasType = currentTypes.includes(typeValue);
+      const updatedTypes = hasType ? currentTypes.filter(type => type !== typeValue) : [typeValue];
+      onFilterChange({
+        ...filter,
+        contentType: updatedTypes.length > 0 ? updatedTypes : undefined
+      });
+    }
+  }, [filter, onFilterChange]);
+  const filterSections = useMemo(() => {
+    const sections = [];
+    sections.push({
+      id: "status",
+      title: "Status",
+      type: "status",
+      data: ["all", "success", "error", "pending"].map(status => ({
+        id: `status::${status}`,
+        label: status.charAt(0).toUpperCase() + status.slice(1),
+        count: statusCounts[status],
+        icon: status === "success" ? CheckCircle : status === "error" ? XCircle : status === "pending" ? Clock : Globe,
+        color: status === "success" ? macOSColors.semantic.success : status === "error" ? macOSColors.semantic.error : status === "pending" ? macOSColors.semantic.warning : macOSColors.semantic.info,
+        isActive: filter.status === status || !filter.status && status === "all",
+        value: status
+      }))
+    });
+    const methodEntries = Object.entries(methodCounts);
+    if (methodEntries.length > 0) {
+      sections.push({
+        id: "method",
+        title: "Method",
+        type: "method",
+        data: methodEntries.map(([method, count]) => ({
+          id: `method::${method}`,
+          label: method,
+          count,
+          color: getMethodColor(method),
+          isActive: filter.method?.includes(method) ?? false,
+          value: method
+        }))
+      });
+    }
+    const contentTypeEntries = Object.entries(contentTypeCounts);
+    if (contentTypeEntries.length > 0) {
+      sections.push({
+        id: "contentType",
+        title: "Content Type",
+        type: "contentType",
+        data: contentTypeEntries.map(([type, count]) => {
+          const representativeEvent = events.find(event => getContentType(event).type === type);
+          const {
+            color
+          } = representativeEvent ? getContentType(representativeEvent) : {
+            color: macOSColors.text.muted
+          };
+          return {
+            id: `contentType::${type}`,
+            label: type,
+            count,
+            icon: getContentTypeIcon(type),
+            color,
+            isActive: filter.contentType?.includes(type) ?? false,
+            value: type
+          };
+        })
+      });
+    }
+    return sections;
+  }, [contentTypeCounts, events, filter.contentType, filter.method, filter.status, methodCounts, statusCounts]);
+  const dynamicFilterConfig = useMemo(() => ({
+    sections: filterSections,
+    addFilterSection: {
+      enabled: true,
+      placeholder: "Enter domain or URL pattern...",
+      title: "ACTIVE FILTERS",
+      icon: Filter
+    },
+    availableItemsSection: {
+      enabled: true,
+      title: "AVAILABLE DOMAINS & URLS",
+      emptyMessage: "No network events captured yet. Domains and URLs will appear here.",
+      items: suggestionItems
+    },
+    howItWorksSection: {
+      enabled: true,
+      title: "HOW NETWORK FILTERS WORK",
+      description: "Patterns hide matching requests from the network event list. Filters match if the domain or URL contains the provided text.",
+      examples: ["• example.com → filters any request whose host includes example.com", "• https://api.example.com/v1/users → filters that exact endpoint", "• /health → filters any URL path containing /health"],
+      icon: Filter
+    },
+    onFilterChange: handleDynamicFilterChange,
+    onPatternAdd: onAddPattern,
+    onPatternToggle: onTogglePattern,
+    activePatterns: ignoredPatterns
+  }), [filterSections, handleDynamicFilterChange, ignoredPatterns, onAddPattern, onTogglePattern, suggestionItems]);
+  return /*#__PURE__*/_jsx(DynamicFilterView, {
+    ...dynamicFilterConfig
+  });
+}