Function NetworkPanel

frontend/src/components/timeline/NetworkPanel.tsx:378–669

()

}

export function NetworkPanel() {
  const { events, selectedNodeId } = useExecutionTimelineStore();
  const [selectedRequestId, setSelectedRequestId] = useState<string | null>(null);
  const [expandedHosts, setExpandedHosts] = useState<Set<string>>(new Set());

  // Resizable pane state
  const [leftPaneWidth, setLeftPaneWidth] = useState<number | null>(null); // null = 50%, number = pixels
  const containerRef = useRef<HTMLDivElement>(null);
  const isResizing = useRef(false);

  // Build network requests from HTTP events
  const networkRequests = useMemo(() => {
    const requestMap = new Map<string, NetworkRequest>();

    // Filter to HTTP events only
    const httpEvents = events.filter(
      (e) =>
        e.type === 'HTTP_REQUEST_SENT' ||
        e.type === 'HTTP_RESPONSE_RECEIVED' ||
        e.type === 'HTTP_REQUEST_ERROR',
    );

    // Group by correlation ID
    for (const event of httpEvents) {
      const data = event.data as HttpEventData | undefined;
      if (!data?.correlationId) continue;

      const correlationId = data.correlationId;
      const existing = requestMap.get(correlationId);

      if (event.type === 'HTTP_REQUEST_SENT' && data.request) {
        requestMap.set(correlationId, {
          id: event.id,
          correlationId,
          nodeId: event.nodeId,
          method: data.request.method,
          url: data.request.url,
          startTime: event.timestamp,
          request: data.request,
          ...existing,
        });
      } else if (event.type === 'HTTP_RESPONSE_RECEIVED' && data.har) {
        const existingOrNew = existing || {
          id: event.id,
          correlationId,
          nodeId: event.nodeId,
          method: data.har.request.method,
          url: data.har.request.url,
          startTime: data.har.startedDateTime,
        };
        requestMap.set(correlationId, {
          ...existingOrNew,
          status: data.har.response.status,
          statusText: data.har.response.statusText,
          duration: data.har.time,
          request: data.har.request,
          response: data.har.response,
          timings: data.har.timings,