@rozenite/network-activity-plugin 1.9.0 → 1.11.0

package/src/ui/components/NetworkTimeline.tsx

@@ -0,0 +1,422 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { CSSProperties, PointerEvent } from 'react';
+import { X } from 'lucide-react';
+import type { RequestId } from '../../shared/client';
+import type { ProcessedRequest } from '../state/model';
+import {
+  useNetworkActivityActions,
+  useSelectedRequestId,
+} from '../state/hooks';
+import {
+  formatTimelineOffset,
+  getTimelineBarTopOffset,
+  getTimelineModel,
+  getTimelineTrackTop,
+  isRequestActive,
+  TIMELINE_LAYOUT,
+} from '../utils/timelineModel';
+import type {
+  TimelineModel,
+  TimelineRangeSelection,
+  TimelineRow,
+  TimelineTick,
+} from '../utils/timelineModel';
+
+const REQUEST_TIMELINE_COLORS = {
+  error: 'bg-red-400',
+  primary: 'bg-gray-400',
+  active: 'bg-gray-500',
+  httpTtfb: 'bg-gray-200',
+} as const;
+
+const getPrimaryBarClassName = (request: ProcessedRequest) => {
+  if (request.status === 'failed' || request.status === 'error') {
+    return REQUEST_TIMELINE_COLORS.error;
+  }
+
+  return REQUEST_TIMELINE_COLORS.primary;
+};
+
+const getStyle = (
+  offsetPercent: number,
+  widthPercent: number,
+): CSSProperties => ({
+  left: `${offsetPercent}%`,
+  width: `${widthPercent}%`,
+});
+
+const GridLines = ({ ticks }: { ticks: TimelineTick[] }) => {
+  return (
+    <div className="pointer-events-none absolute inset-0">
+      {ticks.map((tick) => (
+        <div
+          key={`${tick.label}-${tick.offsetPercent}`}
+          className="absolute inset-y-0 border-l border-gray-800"
+          style={{ left: `${tick.offsetPercent}%` }}
+        />
+      ))}
+    </div>
+  );
+};
+
+const getTickLabelStyle = (tick: TimelineTick): CSSProperties => {
+  if (tick.offsetPercent === 0) {
+    return {
+      left: 4,
+    };
+  }
+
+  if (tick.offsetPercent === 100) {
+    return {
+      right: 4,
+    };
+  }
+
+  return {
+    left: `${tick.offsetPercent}%`,
+  };
+};
+
+const TimelineTrack = ({
+  row,
+  isSelected,
+  onSelect,
+  shouldSuppressSelect,
+}: {
+  row: TimelineRow;
+  isSelected: boolean;
+  onSelect: (requestId: RequestId) => void;
+  shouldSuppressSelect: () => boolean;
+}) => {
+  const primaryBarClassName = row.isActive
+    ? REQUEST_TIMELINE_COLORS.active
+    : getPrimaryBarClassName(row.request);
+  const isSplitHttpBar =
+    row.request.type === 'http' &&
+    row.ttfbPercent > 0 &&
+    row.receivePercent > 0;
+  const trackTop = getTimelineTrackTop(row.lane);
+  const barTop = getTimelineBarTopOffset();
+  const positionStyle = {
+    ...getStyle(row.offsetPercent, row.widthPercent),
+    top: trackTop,
+  };
+  const durationLabel = row.isActive
+    ? `${formatTimelineOffset(row.duration)}+`
+    : formatTimelineOffset(row.duration);
+  const label = `${row.request.method} ${row.request.name} - ${durationLabel}`;
+
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      data-timeline-track="true"
+      className="absolute rounded-sm text-left transition-opacity hover:opacity-80"
+      style={{
+        ...positionStyle,
+        height: TIMELINE_LAYOUT.laneHitTargetHeightPx,
+      }}
+      onClick={(event) => {
+        if (shouldSuppressSelect()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+
+        onSelect(row.request.id);
+      }}
+    >
+      {isSplitHttpBar ? (
+        <div
+          className={`absolute flex w-full overflow-hidden rounded-sm ${
+            isSelected
+              ? 'ring-1 ring-blue-300 ring-offset-1 ring-offset-gray-950'
+              : ''
+          }`}
+          style={{
+            top: barTop,
+            height: TIMELINE_LAYOUT.laneHeightPx,
+          }}
+        >
+          <div
+            className={`h-full ${REQUEST_TIMELINE_COLORS.httpTtfb}`}
+            style={{ width: `${row.ttfbPercent}%` }}
+          />
+          <div
+            className={`h-full ${REQUEST_TIMELINE_COLORS.primary}`}
+            style={{ width: `${row.receivePercent}%` }}
+          />
+        </div>
+      ) : (
+        <div
+          className={`absolute w-full rounded-sm ${primaryBarClassName} ${
+            isSelected
+              ? 'ring-1 ring-blue-300 ring-offset-1 ring-offset-gray-950'
+              : ''
+          }`}
+          style={{
+            top: barTop,
+            height: TIMELINE_LAYOUT.laneHeightPx,
+          }}
+        />
+      )}
+    </button>
+  );
+};
+
+type DraftSelection = {
+  anchorPercent: number;
+  currentPercent: number;
+  startedOnTrack: boolean;
+};
+
+const clampPercent = (value: number) => Math.min(Math.max(value, 0), 100);
+
+const getPointerPercent = (
+  event: PointerEvent<HTMLDivElement>,
+  element: HTMLDivElement,
+) => {
+  const rect = element.getBoundingClientRect();
+
+  if (rect.width === 0) {
+    return 0;
+  }
+
+  return clampPercent(((event.clientX - rect.left) / rect.width) * 100);
+};
+
+const getSelectionStyle = (
+  range: TimelineRangeSelection,
+  timeline: TimelineModel,
+): CSSProperties => {
+  const startPercent = clampPercent(
+    ((range.startTime - timeline.rangeStart) / timeline.rangeDuration) * 100,
+  );
+  const endPercent = clampPercent(
+    ((range.endTime - timeline.rangeStart) / timeline.rangeDuration) * 100,
+  );
+  const left = Math.min(startPercent, endPercent);
+  const width = Math.abs(endPercent - startPercent);
+
+  return {
+    left: `${left}%`,
+    width: `${width}%`,
+    top: TIMELINE_LAYOUT.rulerHeightPx,
+  };
+};
+
+const getDraftSelectionStyle = (draft: DraftSelection): CSSProperties => {
+  const left = Math.min(draft.anchorPercent, draft.currentPercent);
+  const width = Math.abs(draft.currentPercent - draft.anchorPercent);
+
+  return {
+    left: `${left}%`,
+    width: `${width}%`,
+    top: TIMELINE_LAYOUT.rulerHeightPx,
+  };
+};
+
+export type NetworkTimelineProps = {
+  requests: ProcessedRequest[];
+  selection: TimelineRangeSelection | null;
+  filteredRequestCount: number;
+  onSelectionChange: (selection: TimelineRangeSelection | null) => void;
+};
+
+export const NetworkTimeline = ({
+  requests,
+  selection,
+  filteredRequestCount,
+  onSelectionChange,
+}: NetworkTimelineProps) => {
+  const actions = useNetworkActivityActions();
+  const selectedRequestId = useSelectedRequestId();
+  const [now, setNow] = useState(() => Date.now());
+  const [draftSelection, setDraftSelection] = useState<DraftSelection | null>(
+    null,
+  );
+  const chartRef = useRef<HTMLDivElement | null>(null);
+  const suppressTrackClickRef = useRef(false);
+
+  const hasActiveRequests = requests.some(isRequestActive);
+
+  useEffect(() => {
+    if (!hasActiveRequests) {
+      return;
+    }
+
+    const interval = window.setInterval(() => {
+      setNow(Date.now());
+    }, TIMELINE_LAYOUT.liveRefreshMs);
+
+    return () => window.clearInterval(interval);
+  }, [hasActiveRequests]);
+
+  const timeline = useMemo(() => {
+    return getTimelineModel(requests, now);
+  }, [requests, now]);
+
+  const onRequestSelect = (requestId: RequestId) => {
+    actions.setSelectedRequest(requestId);
+  };
+
+  const onPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0 || requests.length === 0) {
+      return;
+    }
+
+    const chartElement = chartRef.current;
+
+    if (!chartElement) {
+      return;
+    }
+
+    const percent = getPointerPercent(event, chartElement);
+    const target = event.target;
+    const startedOnTrack =
+      target instanceof Element &&
+      target.closest('[data-timeline-track="true"]') !== null;
+
+    setDraftSelection({
+      anchorPercent: percent,
+      currentPercent: percent,
+      startedOnTrack,
+    });
+    chartElement.setPointerCapture(event.pointerId);
+  };
+
+  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    if (!draftSelection) {
+      return;
+    }
+
+    const chartElement = chartRef.current;
+
+    if (!chartElement) {
+      return;
+    }
+
+    event.preventDefault();
+    const percent = getPointerPercent(event, chartElement);
+
+    setDraftSelection((current) =>
+      current ? { ...current, currentPercent: percent } : current,
+    );
+  };
+
+  const onPointerUp = (event: PointerEvent<HTMLDivElement>) => {
+    if (!draftSelection) {
+      return;
+    }
+
+    const chartElement = chartRef.current;
+    const currentPercent = chartElement
+      ? getPointerPercent(event, chartElement)
+      : draftSelection.currentPercent;
+    const distance = Math.abs(currentPercent - draftSelection.anchorPercent);
+
+    if (distance > 1) {
+      const startOffset =
+        (Math.min(draftSelection.anchorPercent, currentPercent) / 100) *
+        timeline.rangeDuration;
+      const endOffset =
+        (Math.max(draftSelection.anchorPercent, currentPercent) / 100) *
+        timeline.rangeDuration;
+
+      onSelectionChange({
+        startTime: timeline.rangeStart + startOffset,
+        endTime: timeline.rangeStart + endOffset,
+      });
+
+      suppressTrackClickRef.current = true;
+      window.setTimeout(() => {
+        suppressTrackClickRef.current = false;
+      }, 0);
+    } else if (!draftSelection.startedOnTrack) {
+      onSelectionChange(null);
+    }
+
+    setDraftSelection(null);
+
+    if (chartElement?.hasPointerCapture(event.pointerId)) {
+      chartElement.releasePointerCapture(event.pointerId);
+    }
+  };
+
+  return (
+    <div className="border-b border-gray-700 bg-gray-900 p-1.5">
+      <div
+        ref={chartRef}
+        className="relative overflow-hidden border border-gray-800 bg-gray-950"
+        style={{ height: timeline.chartHeight }}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+      >
+        <GridLines ticks={timeline.ticks} />
+
+        <div
+          className="pointer-events-none absolute inset-x-0 border-b border-gray-800"
+          style={{ top: TIMELINE_LAYOUT.rulerHeightPx }}
+        />
+
+        {timeline.ticks.map((tick) => (
+          <div
+            key={`${tick.label}-${tick.offsetPercent}`}
+            className="absolute top-1 whitespace-nowrap tabular-nums text-xs text-gray-200"
+            style={getTickLabelStyle(tick)}
+          >
+            {tick.label}
+          </div>
+        ))}
+
+        {selection && (
+          <div
+            className="pointer-events-none absolute bottom-0 border-x border-blue-300/70 bg-blue-400/10"
+            style={getSelectionStyle(selection, timeline)}
+          />
+        )}
+
+        {draftSelection && (
+          <div
+            className="pointer-events-none absolute bottom-0 border-x border-blue-300/70 bg-blue-400/15"
+            style={getDraftSelectionStyle(draftSelection)}
+          />
+        )}
+
+        {timeline.rows.map((row) => (
+          <TimelineTrack
+            key={row.request.id}
+            row={row}
+            isSelected={selectedRequestId === row.request.id}
+            onSelect={onRequestSelect}
+            shouldSuppressSelect={() => suppressTrackClickRef.current}
+          />
+        ))}
+
+        {selection && (
+          <div className="absolute bottom-1 right-1 flex items-center gap-1 rounded border border-gray-700 bg-gray-900/95 px-1.5 py-0.5 text-xs text-gray-400">
+            <span>{filteredRequestCount} in range</span>
+            <button
+              type="button"
+              title="Clear timeline selection"
+              aria-label="Clear timeline selection"
+              className="rounded p-0.5 text-gray-400 hover:bg-gray-800 hover:text-gray-100"
+              onClick={() => onSelectionChange(null)}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </div>
+        )}
+
+        {timeline.hiddenRequestCount > 0 && (
+          <div className="absolute bottom-1 left-1 rounded border border-gray-700 bg-gray-900/95 px-1.5 py-0.5 text-xs text-gray-400">
+            Showing latest {timeline.rows.length} of{' '}
+            {timeline.totalRequestCount}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/ui/components/RequestList.tsx

@@ -8,30 +8,35 @@ import {
   SortingState,
   useReactTable,
 } from '@tanstack/react-table';
-import { ProcessedRequest } from '../state/model';
-import { RequestId, RequestOverride } from '../../shared/client';
+import type { ProcessedRequest } from '../state/model';
+import type {
+  NetworkEventSource,
+  RequestId,
+  RequestOverride,
+} from '../../shared/client';
 import {
   useNetworkActivityActions,
   useOverrides,
-  useProcessedRequests,
   useSelectedRequestId,
   useClientUISettings,
 } from '../state/hooks';
 import { getStatusColor } from '../utils/getStatusColor';
-import { FilterState } from './FilterBar';
 import { isNumber } from '../../utils/typeChecks';
-import type { NetworkEventSource } from '../../shared/client';
 
 type NetworkRequest = {
   id: RequestId;
   name: string;
   status: string | number;
-  method: string;
+  statusCode?: number;
+  method: ProcessedRequest['method'];
   domain: string;
   path: string;
+  contentType?: string;
   size: string;
+  sizeBytes: number | null;
   time: string;
-  type: string;
+  durationMs: number;
+  type: ProcessedRequest['type'];
   source?: NetworkEventSource;
   startTime: string;
   hasOverride: boolean;
@@ -105,7 +110,6 @@ const sortSize: SortingFn<NetworkRequest> = (rowA, rowB, columnId) => {
   const a = rowA.getValue(columnId) as string;
   const b = rowB.getValue(columnId) as string;
 
-  // Extract numeric values from formatted strings like "1.2 kB", "500 B", etc.
   const getNumericValue = (str: string) => {
     const match = str.match(/^([\d.]+)\s*([KMGT]?B)$/);
     if (!match) return 0;
@@ -127,7 +131,6 @@ const sortTime: SortingFn<NetworkRequest> = (rowA, rowB, columnId) => {
   const a = rowA.getValue(columnId) as string;
   const b = rowB.getValue(columnId) as string;
 
-  // Extract numeric values from formatted strings like "150 ms", "1.2 s", etc.
   const getNumericValue = (str: string) => {
     const match = str.match(/^([\d.]+)\s*(ms|s)$/);
     if (!match) return 0;
@@ -161,15 +164,19 @@ const processNetworkRequests = (
       id: request.id,
       name: generateName(request.name, showEntirePathAsName),
       status: statusDisplay,
+      statusCode: request.httpStatus || undefined,
       method: request.method,
       domain,
       path,
+      contentType: request.contentType,
       size: isNumber(request.size) ? formatSize(request.size) : '—',
+      sizeBytes: isNumber(request.size) ? request.size : null,
       time: formatDuration(duration),
+      durationMs: duration,
       type: request.type,
       source: request.source,
       startTime: formatStartTime(request.timestamp),
-      hasOverride: hasOverride,
+      hasOverride,
     };
   });
 };
@@ -245,43 +252,16 @@ const columns = [
 ];
 
 export type RequestListProps = {
-  filter: FilterState;
+  requests: ProcessedRequest[];
 };
 
-export const RequestList = ({ filter }: RequestListProps) => {
+export const RequestList = ({ requests: filteredRequests }: RequestListProps) => {
   const actions = useNetworkActivityActions();
-  const processedRequests = useProcessedRequests();
   const selectedRequestId = useSelectedRequestId();
   const [sorting, setSorting] = useState<SortingState>([]);
   const overrides = useOverrides();
   const clientUISettings = useClientUISettings();
 
-  // Filter requests based on current filter state
-  const filteredRequests = useMemo(() => {
-    return processedRequests.filter((request) => {
-      // Type filter
-      if (!filter.types.has(request.type)) {
-        return false;
-      }
-
-      // Text filter
-      if (filter.text) {
-        const searchText = filter.text.toLowerCase();
-        const searchableFields = [
-          request.name,
-          request.method,
-          request.status.toString(),
-        ]
-          .join(' ')
-          .toLowerCase();
-
-        return searchableFields.includes(searchText);
-      }
-
-      return true;
-    });
-  }, [processedRequests, filter]);
-
   const requests = useMemo(() => {
     return processNetworkRequests(
       filteredRequests,
@@ -369,7 +349,6 @@ export const RequestList = ({ filter }: RequestListProps) => {
   );
 };
 
-// Export helper functions for use in other components
 export {
   formatSize,
   formatDuration,

package/src/ui/components/SidePanel.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Badge } from './Badge';
 import { Button } from './Button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs';
@@ -6,6 +7,7 @@ import { RequestTab } from '../tabs/RequestTab';
 import { ResponseTab } from '../tabs/ResponseTab';
 import { CookiesTab } from '../tabs/CookiesTab';
 import { TimingTab } from '../tabs/TimingTab';
+import { InitiatorTab } from '../tabs/InitiatorTab';
 import { X } from 'lucide-react';
 import {
   useNetworkActivityActions,
@@ -17,6 +19,7 @@ import { NetworkEntry as OldNetworkEntry } from '../types';
 import { getStatusColor } from '../utils/getStatusColor';
 import { MessagesTab } from '../tabs/MessagesTab';
 import { SSEMessagesTab } from '../tabs/SSEMessagesTab';
+import type { ResponseView } from '../response-renderers';
 
 const getTypeColor = (type: string) => {
   const colors: Record<string, string> = {
@@ -87,6 +90,14 @@ export const SidePanel = () => {
   const selectedRequest = useSelectedRequest();
   const client = useNetworkActivityStore((state) => state._client);
   const overrides = useOverrides();
+  // Sticky Preview/Raw preference. Lives here, not in ResponseTab,
+  // because the `<Tabs key={selectedRequest.id}>` below intentionally
+  // remounts the Tabs subtree on every request switch (so the active
+  // inner tab resets). SidePanel itself stays mounted across request
+  // switches, so the preference survives — flipping to Raw on one
+  // response keeps Raw selected for every subsequent response whose
+  // renderer supports it. Resets when the panel is closed.
+  const [preferredView, setPreferredView] = useState<ResponseView>('preview');
 
   const onClose = (): void => {
     actions.setSelectedRequest(null);
@@ -166,6 +177,12 @@ export const SidePanel = () => {
           >
             Cookies
           </TabsTrigger>
+          <TabsTrigger
+            value="initiator"
+            className="data-[state=active]:bg-gray-700"
+          >
+            Initiator
+          </TabsTrigger>
           <TabsTrigger
             value="timing"
             className="data-[state=active]:bg-gray-700"
@@ -197,6 +214,12 @@ export const SidePanel = () => {
           >
             Messages
           </TabsTrigger>
+          <TabsTrigger
+            value="initiator"
+            className="data-[state=active]:bg-gray-700"
+          >
+            Initiator
+          </TabsTrigger>
         </>
       );
     }
@@ -229,6 +252,8 @@ export const SidePanel = () => {
             <ResponseTab
               selectedRequest={httpDetails}
               supportsOverrides={supportsOverrides}
+              preferredView={preferredView}
+              onPreferredViewChange={setPreferredView}
               onRequestResponseBody={(requestId) => {
                 if (client) {
                   client.send('get-response-body', {
@@ -243,6 +268,10 @@ export const SidePanel = () => {
             <CookiesTab selectedRequest={httpDetails} />
           </TabsContent>
 
+          <TabsContent value="initiator" className="flex-1 m-0 overflow-hidden">
+            <InitiatorTab selectedRequest={httpDetails} />
+          </TabsContent>
+
           <TabsContent value="timing" className="flex-1 m-0 overflow-hidden">
             <TimingTab selectedRequest={httpDetails} />
           </TabsContent>
@@ -275,6 +304,10 @@ export const SidePanel = () => {
             <SSEMessagesTab selectedRequest={sseDetails} />
           </TabsContent>
 
+          <TabsContent value="initiator" className="flex-1 m-0 overflow-hidden">
+            <InitiatorTab selectedRequest={sseDetails} />
+          </TabsContent>
+
           <TabsContent value="cookies" className="flex-1 m-0 overflow-hidden">
             <CookiesTab selectedRequest={sseDetails} />
           </TabsContent>
@@ -324,7 +357,15 @@ export const SidePanel = () => {
           }
           className="h-full flex flex-col"
         >
-          <TabsList className="grid w-full grid-cols-5 bg-gray-800 rounded-none border-b border-gray-700">
+          <TabsList
+            className={`grid w-full ${
+              selectedRequest.type === 'http'
+                ? 'grid-cols-6'
+                : selectedRequest.type === 'sse'
+                  ? 'grid-cols-4'
+                  : 'grid-cols-1'
+            } bg-gray-800 rounded-none border-b border-gray-700`}
+          >
             {getTabsListTriggers()}
           </TabsList>
 

package/src/ui/components/Toolbar.tsx

@@ -1,10 +1,12 @@
 import { Button } from './Button';
-import { Circle, Square, Trash2 } from 'lucide-react';
+import { Circle, Download, Square, Trash2 } from 'lucide-react';
 import { useIsRecording, useNetworkActivityActions } from '../state/hooks';
+import { useNetworkActivitySessionExport } from '../hooks/useNetworkActivitySessionExport';
 
 export const Toolbar = () => {
   const actions = useNetworkActivityActions();
   const isRecording = useIsRecording();
+  const { canExportSession, exportSession } = useNetworkActivitySessionExport();
 
   const onToggleRecording = (): void => {
     actions.setRecording(!isRecording);
@@ -41,6 +43,16 @@ export const Toolbar = () => {
       >
         <Trash2 className="h-4 w-4" />
       </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={exportSession}
+        disabled={!canExportSession}
+        className="ml-auto h-8 w-8 p-0 text-gray-400 hover:text-blue-400"
+        title="Export session"
+      >
+        <Download className="h-4 w-4" />
+      </Button>
     </div>
   );
 };