@buoy-gg/network 1.7.2

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

@@ -0,0 +1,834 @@
+"use strict";
+
+import { useState } from "react";
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
+import { Clock, Upload, Download, AlertCircle, ChevronDown, ChevronUp, Lock, Unlock, FileJson, Filter, Globe, Link, Copy, InlineCopyButton, macOSColors, useFeatureGate, UpgradeModal } from "@buoy-gg/shared-ui";
+import { formatBytes, formatDuration, formatHttpStatus } from "../utils/formatting";
+import { formatRelativeTime } from "@buoy-gg/shared-ui";
+import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+import { formatGraphQLDisplay } from "../utils/formatGraphQLVariables";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Component for collapsible sections matching Sentry style
+const CollapsibleSection = ({
+  title,
+  icon,
+  children,
+  defaultOpen = false
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.collapsibleSection,
+    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: styles.collapsibleHeader,
+      onPress: () => setIsOpen(!isOpen),
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.collapsibleTitle,
+        children: [icon, /*#__PURE__*/_jsx(Text, {
+          style: styles.collapsibleTitleText,
+          children: title
+        })]
+      }), isOpen ? /*#__PURE__*/_jsx(ChevronUp, {
+        size: 16,
+        color: macOSColors.text.secondary
+      }) : /*#__PURE__*/_jsx(ChevronDown, {
+        size: 16,
+        color: macOSColors.text.secondary
+      })]
+    }), isOpen ? /*#__PURE__*/_jsx(View, {
+      style: styles.collapsibleContent,
+      children: children
+    }) : null]
+  });
+};
+
+// URL breakdown component matching Sentry style
+const UrlBreakdown = ({
+  url,
+  requestData,
+  operationName,
+  graphqlVariables,
+  requestClient,
+  isPro = false,
+  onUpgradePress
+}) => {
+  const parseUrl = urlString => {
+    try {
+      const urlObj = new URL(urlString);
+      const protocol = String(urlObj.protocol || "");
+      const host = String(urlObj.host || "");
+      const isSecure = protocol === "https:";
+      let pathname = String(urlObj.pathname || "");
+
+      // If this is a GraphQL request with operation name, format with arrow notation
+      // Matches React Query pattern: "GetPokemon › Sandshrew"
+      if (requestClient === "graphql" && operationName) {
+        const graphqlDisplay = formatGraphQLDisplay(operationName, graphqlVariables);
+        pathname = `${pathname} (${graphqlDisplay})`;
+      } else if (operationName) {
+        // For non-GraphQL requests with operation names (e.g., gRPC)
+        pathname = `${pathname} (${operationName})`;
+      }
+
+      // Parse query parameters
+      const params = {};
+      const searchParams = urlObj.searchParams;
+      if (searchParams && typeof searchParams.forEach === "function") {
+        searchParams.forEach((value, key) => {
+          params[key] = value;
+        });
+      }
+      return {
+        protocol: protocol.replace(":", ""),
+        host,
+        pathname,
+        params: Object.keys(params).length > 0 ? params : null,
+        isSecure
+      };
+    } catch {
+      return {
+        protocol: "",
+        host: url,
+        pathname: "",
+        params: null,
+        isSecure: false
+      };
+    }
+  };
+  const urlParts = parseUrl(url);
+  const [showParams, setShowParams] = useState(false);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.urlBreakdown,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.urlRow,
+      children: [urlParts.isSecure ? /*#__PURE__*/_jsx(Lock, {
+        size: 12,
+        color: macOSColors.semantic.success
+      }) : /*#__PURE__*/_jsx(Unlock, {
+        size: 12,
+        color: macOSColors.semantic.warning
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.urlDomain,
+        children: urlParts.host
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.urlProtocol,
+        children: ["(", urlParts.protocol.toUpperCase(), ")"]
+      }), isPro ? /*#__PURE__*/_jsx(InlineCopyButton, {
+        value: url,
+        buttonStyle: styles.copyButton
+      }) : /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.copyButton,
+        onPress: onUpgradePress,
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/_jsx(Copy, {
+          size: 14,
+          color: macOSColors.text.secondary
+        })
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.urlPathRow,
+      children: /*#__PURE__*/_jsxs(Text, {
+        style: styles.urlPath,
+        numberOfLines: 2,
+        children: [urlParts.pathname, urlParts.params ? /*#__PURE__*/_jsxs(Text, {
+          style: styles.urlQueryString,
+          children: ["?", new URLSearchParams(urlParts.params).toString()]
+        }) : null]
+      })
+    }), urlParts.params ? /*#__PURE__*/_jsxs(View, {
+      style: styles.queryParamsCollapsible,
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.queryParamsToggle,
+        onPress: () => setShowParams(!showParams),
+        activeOpacity: 0.7,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.queryParamsToggleText,
+          children: "Query Parameters"
+        }), showParams ? /*#__PURE__*/_jsx(ChevronUp, {
+          size: 14,
+          color: macOSColors.text.secondary
+        }) : /*#__PURE__*/_jsx(ChevronDown, {
+          size: 14,
+          color: macOSColors.text.secondary
+        })]
+      }), showParams ? /*#__PURE__*/_jsx(DataViewer, {
+        title: "",
+        data: urlParts.params,
+        showTypeFilter: false
+      }) : null]
+    }) : null]
+  });
+};
+
+/**
+ * Detailed inspector rendering request/response metadata for a single network event. Designed to
+ * mimic Sentry’s layout with collapsible sections, diff views, and quick copy affordances.
+ */
+export function NetworkEventDetailView({
+  event,
+  ignoredPatterns = new Set(),
+  onTogglePattern = () => {}
+}) {
+  const status = event.status ? formatHttpStatus(event.status) : null;
+  const isPending = !event.status && !event.error;
+
+  // Check Pro status for copy features
+  const {
+    isPro
+  } = useFeatureGate();
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+
+  // Generate full request details for copying
+  const getFullRequestDetails = () => {
+    const requestDetails = {
+      method: event.method,
+      url: event.url,
+      status: event.status,
+      statusText: event.statusText,
+      timestamp: new Date(event.timestamp).toISOString(),
+      duration: event.duration ? `${event.duration}ms` : "N/A",
+      requestHeaders: event.requestHeaders,
+      requestData: event.requestData,
+      responseHeaders: event.responseHeaders,
+      responseData: event.responseData,
+      requestSize: event.requestSize ? formatBytes(event.requestSize) : "N/A",
+      responseSize: event.responseSize ? formatBytes(event.responseSize) : "N/A",
+      error: event.error,
+      client: event.requestClient
+    };
+    return `# Network Request Details
+
+## Request
+- **Method:** ${requestDetails.method}
+- **URL:** ${requestDetails.url}
+- **Client:** ${requestDetails.client || "N/A"}
+- **Timestamp:** ${requestDetails.timestamp}
+
+## Response
+- **Status:** ${requestDetails.status || "Pending"}${requestDetails.statusText ? ` (${requestDetails.statusText})` : ""}
+- **Duration:** ${requestDetails.duration}
+- **Request Size:** ${requestDetails.requestSize}
+- **Response Size:** ${requestDetails.responseSize}
+${requestDetails.error ? `- **Error:** ${requestDetails.error}` : ""}
+
+## Request Headers
+\`\`\`json
+${JSON.stringify(requestDetails.requestHeaders, null, 2)}
+\`\`\`
+
+## Request Data
+\`\`\`json
+${JSON.stringify(requestDetails.requestData, null, 2)}
+\`\`\`
+
+## Response Headers
+\`\`\`json
+${JSON.stringify(requestDetails.responseHeaders, null, 2)}
+\`\`\`
+
+## Response Data
+\`\`\`json
+${JSON.stringify(requestDetails.responseData, null, 2)}
+\`\`\`
+`;
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(ScrollView, {
+      style: styles.container,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.requestDetailsSection,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.httpHeader,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.httpMethodBadge,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.httpMethod,
+              children: event.method
+            })
+          }), event.status ? /*#__PURE__*/_jsx(View, {
+            style: [styles.httpStatusBadge, {
+              backgroundColor: `${status?.color}20`
+            }],
+            children: /*#__PURE__*/_jsxs(Text, {
+              style: [styles.httpStatusText, {
+                color: status?.color
+              }],
+              children: [status?.text, " ", status?.meaning]
+            })
+          }) : isPending ? /*#__PURE__*/_jsxs(View, {
+            style: styles.pendingBadge,
+            children: [/*#__PURE__*/_jsx(Clock, {
+              size: 10,
+              color: macOSColors.semantic.warning
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.pendingBadgeText,
+              children: "Pending"
+            })]
+          }) : null, event.duration ? /*#__PURE__*/_jsxs(View, {
+            style: styles.httpDuration,
+            children: [/*#__PURE__*/_jsx(Clock, {
+              size: 10,
+              color: macOSColors.text.muted
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.httpDurationText,
+              children: formatDuration(event.duration)
+            })]
+          }) : null, isPro ? /*#__PURE__*/_jsx(InlineCopyButton, {
+            value: getFullRequestDetails(),
+            buttonStyle: styles.copyFullButton
+          }) : /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.copyFullButton,
+            onPress: () => setShowUpgradeModal(true),
+            activeOpacity: 0.7,
+            children: /*#__PURE__*/_jsx(Copy, {
+              size: 14,
+              color: macOSColors.text.secondary
+            })
+          })]
+        }), /*#__PURE__*/_jsx(UrlBreakdown, {
+          url: event.url,
+          requestData: event.requestData,
+          operationName: event.operationName,
+          graphqlVariables: event.graphqlVariables,
+          requestClient: event.requestClient,
+          isPro: isPro,
+          onUpgradePress: () => setShowUpgradeModal(true)
+        }), event.error ? /*#__PURE__*/_jsxs(View, {
+          style: styles.errorBox,
+          children: [/*#__PURE__*/_jsx(AlertCircle, {
+            size: 12,
+            color: macOSColors.semantic.error
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.errorText,
+            children: event.error
+          })]
+        }) : null]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.timingSection,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.timingRow,
+          children: [/*#__PURE__*/_jsx(Clock, {
+            size: 12,
+            color: macOSColors.text.secondary
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.timingLabel,
+            children: "Started:"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.timingValue,
+            children: formatRelativeTime(event.timestamp)
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.timingExact,
+            children: ["(", new Date(event.timestamp).toLocaleTimeString(), ")"]
+          })]
+        }), event.requestSize || event.responseSize ? /*#__PURE__*/_jsxs(View, {
+          style: styles.sizeRow,
+          children: [event.requestSize !== undefined ? /*#__PURE__*/_jsxs(View, {
+            style: styles.sizeItem,
+            children: [/*#__PURE__*/_jsx(Upload, {
+              size: 10,
+              color: macOSColors.semantic.info
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.sizeLabel,
+              children: "Sent:"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.sizeValue,
+              children: formatBytes(event.requestSize)
+            })]
+          }) : null, event.responseSize !== undefined ? /*#__PURE__*/_jsxs(View, {
+            style: styles.sizeItem,
+            children: [/*#__PURE__*/_jsx(Download, {
+              size: 10,
+              color: macOSColors.semantic.success
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.sizeLabel,
+              children: "Received:"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.sizeValue,
+              children: formatBytes(event.responseSize)
+            })]
+          }) : null]
+        }) : null]
+      }), /*#__PURE__*/_jsx(CollapsibleSection, {
+        title: "Request Headers",
+        icon: /*#__PURE__*/_jsx(Upload, {
+          size: 14,
+          color: macOSColors.semantic.info
+        }),
+        defaultOpen: false,
+        children: Object.keys(event.requestHeaders).length > 0 ? /*#__PURE__*/_jsx(View, {
+          style: styles.dataViewerContainer,
+          children: /*#__PURE__*/_jsx(DataViewer, {
+            title: "",
+            data: event.requestHeaders,
+            showTypeFilter: true,
+            rawMode: true,
+            initialExpanded: true,
+            disableCopy: !isPro
+          })
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyText,
+          children: "No request headers"
+        })
+      }), /*#__PURE__*/_jsx(CollapsibleSection, {
+        title: "Response Headers",
+        icon: /*#__PURE__*/_jsx(Download, {
+          size: 14,
+          color: macOSColors.semantic.success
+        }),
+        defaultOpen: false,
+        children: Object.keys(event.responseHeaders).length > 0 ? /*#__PURE__*/_jsx(View, {
+          style: styles.dataViewerContainer,
+          children: /*#__PURE__*/_jsx(DataViewer, {
+            title: "",
+            data: event.responseHeaders,
+            showTypeFilter: true,
+            rawMode: true,
+            initialExpanded: true,
+            disableCopy: !isPro
+          })
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyText,
+          children: "No response headers yet"
+        })
+      }), event.requestData ? /*#__PURE__*/_jsx(CollapsibleSection, {
+        title: "Request Body",
+        icon: /*#__PURE__*/_jsx(FileJson, {
+          size: 14,
+          color: macOSColors.semantic.info
+        }),
+        defaultOpen: false,
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.dataViewerContainer,
+          children: /*#__PURE__*/_jsx(DataViewer, {
+            title: "",
+            data: event.requestData,
+            showTypeFilter: true,
+            rawMode: true,
+            initialExpanded: true,
+            disableCopy: !isPro
+          })
+        })
+      }) : null, event.responseData ? /*#__PURE__*/_jsx(CollapsibleSection, {
+        title: "Response Body",
+        icon: /*#__PURE__*/_jsx(FileJson, {
+          size: 14,
+          color: macOSColors.semantic.success
+        }),
+        defaultOpen: false,
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.dataViewerContainer,
+          children: /*#__PURE__*/_jsx(DataViewer, {
+            title: "",
+            data: event.responseData,
+            showTypeFilter: true,
+            rawMode: true,
+            initialExpanded: true,
+            disableCopy: !isPro
+          })
+        })
+      }) : null, /*#__PURE__*/_jsx(CollapsibleSection, {
+        title: "Filter Options",
+        icon: /*#__PURE__*/_jsx(Filter, {
+          size: 14,
+          color: macOSColors.semantic.warning
+        }),
+        defaultOpen: false,
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.filterOptionsContainer,
+          children: (() => {
+            let domain = "";
+            let urlPath = "";
+            try {
+              const url = new URL(event.url);
+              domain = url.hostname;
+              urlPath = url.pathname;
+            } catch {
+              urlPath = event.url;
+            }
+            const isDomainIgnored = ignoredPatterns.has(domain);
+            const isUrlIgnored = ignoredPatterns.has(urlPath);
+            return /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+                style: [styles.filterOption, isDomainIgnored && styles.filterOptionActive],
+                onPress: () => domain && onTogglePattern(domain),
+                children: [/*#__PURE__*/_jsxs(View, {
+                  style: styles.filterOptionLeft,
+                  children: [/*#__PURE__*/_jsx(Globe, {
+                    size: 16,
+                    color: isDomainIgnored ? macOSColors.semantic.warning : macOSColors.text.muted
+                  }), /*#__PURE__*/_jsxs(View, {
+                    style: styles.filterOptionContent,
+                    children: [/*#__PURE__*/_jsx(Text, {
+                      style: styles.filterOptionLabel,
+                      children: "Ignore Domain"
+                    }), /*#__PURE__*/_jsx(Text, {
+                      style: styles.filterOptionValue,
+                      children: domain || "N/A"
+                    })]
+                  })]
+                }), /*#__PURE__*/_jsx(View, {
+                  style: [styles.filterToggle, isDomainIgnored && styles.filterToggleActive],
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: [styles.filterToggleText, isDomainIgnored && styles.filterToggleTextActive],
+                    children: isDomainIgnored ? "IGNORED" : "IGNORE"
+                  })
+                })]
+              }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+                style: [styles.filterOption, isUrlIgnored && styles.filterOptionActive],
+                onPress: () => urlPath && onTogglePattern(urlPath),
+                children: [/*#__PURE__*/_jsxs(View, {
+                  style: styles.filterOptionLeft,
+                  children: [/*#__PURE__*/_jsx(Link, {
+                    size: 16,
+                    color: isUrlIgnored ? macOSColors.semantic.warning : macOSColors.text.muted
+                  }), /*#__PURE__*/_jsxs(View, {
+                    style: styles.filterOptionContent,
+                    children: [/*#__PURE__*/_jsx(Text, {
+                      style: styles.filterOptionLabel,
+                      children: "Ignore URL Pattern"
+                    }), /*#__PURE__*/_jsx(Text, {
+                      style: styles.filterOptionValue,
+                      numberOfLines: 1,
+                      children: urlPath || "N/A"
+                    })]
+                  })]
+                }), /*#__PURE__*/_jsx(View, {
+                  style: [styles.filterToggle, isUrlIgnored && styles.filterToggleActive],
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: [styles.filterToggleText, isUrlIgnored && styles.filterToggleTextActive],
+                    children: isUrlIgnored ? "IGNORED" : "IGNORE"
+                  })
+                })]
+              }), /*#__PURE__*/_jsx(View, {
+                style: styles.filterInfoBox,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: styles.filterInfoText,
+                  children: "Ignored requests will be hidden from the network list. You can manage filters in the Filters tab."
+                })
+              })]
+            });
+          })()
+        })
+      })]
+    }), /*#__PURE__*/_jsx(UpgradeModal, {
+      visible: showUpgradeModal,
+      onClose: () => setShowUpgradeModal(false),
+      featureName: "Copy Request Details",
+      description: "Copy network request details to share or debug issues.",
+      benefits: ["Copy full request details including headers and body", "Export to JSON, Markdown, or plain text", "Share request data with teammates", "Feed data to AI assistants for debugging"]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: macOSColors.background.base
+  },
+  // Request details section - always visible
+  requestDetailsSection: {
+    marginHorizontal: 12,
+    marginTop: 12,
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    padding: 12
+  },
+  httpHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 12,
+    flexWrap: "nowrap"
+  },
+  httpMethodBadge: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4
+  },
+  httpMethod: {
+    color: macOSColors.semantic.info,
+    fontSize: 11,
+    fontWeight: "700",
+    letterSpacing: 0.5
+  },
+  httpStatusBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4
+  },
+  httpStatusText: {
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  pendingBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: macOSColors.semantic.warningBackground,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4
+  },
+  pendingBadgeText: {
+    color: macOSColors.semantic.warning,
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  httpDuration: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  httpDurationText: {
+    color: macOSColors.text.secondary,
+    fontSize: 11
+  },
+  copyFullButton: {
+    marginLeft: "auto",
+    flexShrink: 0,
+    padding: 4
+  },
+  // URL breakdown styles
+  urlBreakdown: {
+    backgroundColor: macOSColors.background.input,
+    borderRadius: 4,
+    padding: 8
+  },
+  urlRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    marginBottom: 4
+  },
+  urlDomain: {
+    color: macOSColors.text.primary,
+    fontSize: 12,
+    fontWeight: "600",
+    flex: 1
+  },
+  urlProtocol: {
+    color: macOSColors.text.muted,
+    fontSize: 10
+  },
+  copyButton: {
+    padding: 4
+  },
+  urlPathRow: {
+    paddingLeft: 18
+  },
+  urlPath: {
+    color: macOSColors.text.secondary,
+    fontSize: 11,
+    fontFamily: "monospace"
+  },
+  urlQueryString: {
+    color: macOSColors.semantic.info,
+    fontSize: 11,
+    fontFamily: "monospace"
+  },
+  // Query Parameters - Collapsible section
+  queryParamsCollapsible: {
+    marginTop: 8
+  },
+  queryParamsToggle: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    backgroundColor: macOSColors.background.hover,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    marginBottom: 8
+  },
+  queryParamsToggleText: {
+    color: macOSColors.text.primary,
+    fontSize: 12,
+    fontWeight: "600",
+    letterSpacing: 0.3
+  },
+  // Timing section - always visible
+  timingSection: {
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    padding: 12
+  },
+  timingRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  timingLabel: {
+    color: macOSColors.text.secondary,
+    fontSize: 11
+  },
+  timingValue: {
+    color: macOSColors.text.primary,
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  timingExact: {
+    color: macOSColors.text.muted,
+    fontSize: 10,
+    marginLeft: 4
+  },
+  sizeRow: {
+    flexDirection: "row",
+    gap: 16,
+    marginTop: 8,
+    paddingTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: macOSColors.border.default
+  },
+  sizeItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  sizeLabel: {
+    color: macOSColors.text.muted,
+    fontSize: 10
+  },
+  sizeValue: {
+    color: macOSColors.semantic.info,
+    fontSize: 10,
+    fontFamily: "monospace",
+    fontWeight: "600"
+  },
+  // Collapsible section styles
+  collapsibleSection: {
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    overflow: "hidden"
+  },
+  collapsibleHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: 12,
+    backgroundColor: macOSColors.background.hover
+  },
+  collapsibleTitle: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  collapsibleTitleText: {
+    color: macOSColors.text.primary,
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  collapsibleContent: {
+    padding: 12
+  },
+  // Data viewer container
+  dataViewerContainer: {
+    marginTop: -12,
+    marginHorizontal: -12,
+    marginBottom: -12
+  },
+  // Error box
+  errorBox: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    backgroundColor: macOSColors.semantic.errorBackground,
+    padding: 8,
+    borderRadius: 4,
+    marginTop: 8
+  },
+  errorText: {
+    color: macOSColors.semantic.error,
+    fontSize: 11,
+    flex: 1
+  },
+  // Empty state
+  emptyText: {
+    color: macOSColors.text.muted,
+    fontSize: 12,
+    fontStyle: "italic",
+    textAlign: "center"
+  },
+  // Filter options styles
+  filterOptionsContainer: {
+    gap: 12
+  },
+  filterOption: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: macOSColors.background.hover,
+    borderRadius: 8,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  filterOptionActive: {
+    backgroundColor: macOSColors.semantic.warningBackground,
+    borderColor: macOSColors.semantic.warning + "33"
+  },
+  filterOptionLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    flex: 1
+  },
+  filterOptionContent: {
+    flex: 1
+  },
+  filterOptionLabel: {
+    color: macOSColors.text.secondary,
+    fontSize: 11,
+    marginBottom: 2,
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  filterOptionValue: {
+    color: macOSColors.text.primary,
+    fontSize: 13,
+    fontFamily: "monospace"
+  },
+  filterToggle: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: macOSColors.background.input,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  filterToggleActive: {
+    backgroundColor: macOSColors.semantic.warning + "26",
+    borderColor: macOSColors.semantic.warning + "4D"
+  },
+  filterToggleText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: macOSColors.text.muted,
+    letterSpacing: 0.5
+  },
+  filterToggleTextActive: {
+    color: macOSColors.semantic.warning
+  },
+  filterInfoBox: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    borderRadius: 6,
+    padding: 10,
+    borderWidth: 1,
+    borderColor: macOSColors.semantic.info + "33"
+  },
+  filterInfoText: {
+    color: macOSColors.text.secondary,
+    fontSize: 11,
+    lineHeight: 16
+  }
+});