@rozenite/network-activity-plugin 1.10.0 → 1.11.0

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>
   );
 };

package/src/ui/hooks/useNetworkActivitySessionExport.ts

@@ -0,0 +1,39 @@
+import { useCallback } from 'react';
+import { useNetworkActivityStore } from '../state/hooks';
+import { store } from '../state/store';
+import { downloadJson } from '../utils/download';
+import {
+  createNetworkActivitySessionExport,
+  getNetworkActivitySessionExportFileName,
+} from '../utils/sessionExport';
+
+export const useNetworkActivitySessionExport = () => {
+  const canExportSession = useNetworkActivityStore(
+    (state) => state.networkEntries.size > 0,
+  );
+
+  const exportSession = useCallback(() => {
+    const { networkEntries, websocketMessages } = store.getState();
+
+    if (networkEntries.size === 0) {
+      return;
+    }
+
+    const exportedAt = new Date();
+    const exportData = createNetworkActivitySessionExport(
+      networkEntries,
+      websocketMessages,
+      exportedAt,
+    );
+
+    downloadJson(
+      exportData,
+      getNetworkActivitySessionExportFileName(exportedAt),
+    );
+  }, []);
+
+  return {
+    canExportSession,
+    exportSession,
+  };
+};

package/src/ui/state/__tests__/store.test.ts

@@ -0,0 +1,77 @@
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+import type { createNetworkActivityStore as createStoreType } from '../store';
+
+let createNetworkActivityStore: typeof createStoreType;
+
+beforeAll(async () => {
+  const storage = new Map<string, string>();
+
+  vi.stubGlobal('localStorage', {
+    getItem: (key: string) => storage.get(key) ?? null,
+    setItem: (key: string, value: string) => {
+      storage.set(key, value);
+    },
+    removeItem: (key: string) => {
+      storage.delete(key);
+    },
+  });
+
+  ({ createNetworkActivityStore } = await import('../store'));
+});
+
+describe('network activity store', () => {
+  it('records elapsed duration for failed HTTP requests', () => {
+    const store = createNetworkActivityStore();
+
+    store.getState().handleEvent('request-sent', {
+      requestId: 'request-1',
+      timestamp: 100,
+      request: {
+        url: 'https://example.com/api',
+        method: 'GET',
+        headers: {},
+      },
+      initiator: {
+        type: 'script',
+      },
+      type: 'Fetch',
+    });
+    store.getState().handleEvent('request-failed', {
+      requestId: 'request-1',
+      timestamp: 250,
+      type: 'Fetch',
+      error: 'Network request failed',
+      canceled: false,
+    });
+
+    expect(store.getState().networkEntries.get('request-1')).toMatchObject({
+      status: 'failed',
+      duration: 150,
+    });
+  });
+
+  it('records elapsed duration for websocket errors', () => {
+    const store = createNetworkActivityStore();
+
+    store.getState().handleEvent('websocket-connect', {
+      type: 'websocket-connect',
+      url: 'wss://example.com/socket',
+      socketId: 'socket-1',
+      timestamp: 100,
+      protocols: null,
+      options: [],
+    });
+    store.getState().handleEvent('websocket-error', {
+      type: 'websocket-error',
+      url: 'wss://example.com/socket',
+      socketId: 'socket-1',
+      timestamp: 175,
+      error: 'Socket failed',
+    });
+
+    expect(store.getState().networkEntries.get('ws-socket-1')).toMatchObject({
+      status: 'error',
+      duration: 75,
+    });
+  });
+});

package/src/ui/state/derived.ts

@@ -27,6 +27,7 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
         method: httpEntry.request.method,
         httpStatus: httpEntry.response?.status,
         contentType: httpEntry.response?.contentType,
+        ttfb: httpEntry.ttfb,
         progress: httpEntry.progress,
       });
     } else if (entry.type === 'websocket') {
@@ -95,6 +96,7 @@ export const getRequestSummary = (
         method: httpEntry.request.method,
         httpStatus: httpEntry.response?.status || 0,
         contentType: httpEntry.response?.contentType,
+        ttfb: httpEntry.ttfb,
         progress: httpEntry.progress,
       };
     } else if (entry.type === 'websocket') {

package/src/ui/state/filter.ts

@@ -0,0 +1,49 @@
+import type { HttpMethod, NetworkEventSource } from '../../shared/client';
+
+export type RequestTypeFilter = 'http' | 'websocket' | 'sse';
+
+export type AdvancedFilterState = {
+  methods: Set<HttpMethod>;
+  sources: Set<NetworkEventSource>;
+  status: string;
+  domain: string;
+  contentType: string;
+  failedOnly: boolean;
+  inFlightOnly: boolean;
+  overriddenOnly: boolean;
+  minSize: string;
+  maxSize: string;
+  minDuration: string;
+  maxDuration: string;
+};
+
+export type FilterState = {
+  text: string;
+  types: Set<RequestTypeFilter>;
+  advanced: AdvancedFilterState;
+};
+
+export const DEFAULT_REQUEST_TYPES: RequestTypeFilter[] = [
+  'http',
+  'websocket',
+  'sse',
+];
+
+export const createDefaultFilter = (): FilterState => ({
+  text: '',
+  types: new Set(DEFAULT_REQUEST_TYPES),
+  advanced: {
+    methods: new Set(),
+    sources: new Set(),
+    status: '',
+    domain: '',
+    contentType: '',
+    failedOnly: false,
+    inFlightOnly: false,
+    overriddenOnly: false,
+    minSize: '',
+    maxSize: '',
+    minDuration: '',
+    maxDuration: '',
+  },
+});

package/src/ui/state/hooks.ts

@@ -4,7 +4,7 @@ import type { NetworkActivityState } from './store';
 import { getProcessedRequests, getSelectedRequest } from './derived';
 
 export const useNetworkActivityStore = <T>(
-  selector: (state: NetworkActivityState) => T
+  selector: (state: NetworkActivityState) => T,
 ): T => {
   return useStore(store, selector);
 };
@@ -39,7 +39,7 @@ export const useNetworkActivityClientManagement = () => {
 
 export const useWebSocketMessages = (requestId: string) => {
   return useNetworkActivityStore(
-    (state) => state.websocketMessages.get(requestId) || []
+    (state) => state.websocketMessages.get(requestId) || [],
   );
 };
 

package/src/ui/state/model.ts

@@ -152,6 +152,7 @@ export type ProcessedRequest = {
   method: HttpMethod | 'WS' | 'SSE';
   httpStatus?: number;
   contentType?: string;
+  ttfb?: number;
   progress?: {
     loaded: number;
     total: number;

package/src/ui/state/store.ts

@@ -26,6 +26,10 @@ const MAX_SSE_MESSAGES_PER_CONNECTION = 32;
 
 const STORE_VERSION = 1;
 
+const getElapsedDuration = (endTimestamp: number, startTimestamp: number) => {
+  return Math.max(endTimestamp - startTimestamp, 0);
+};
+
 export interface NetworkActivityState {
   // State
   isRecording: boolean;
@@ -302,6 +306,10 @@ export const createNetworkActivityStore = () =>
                 const updatedEntry: HttpNetworkEntry = {
                   ...httpEntry,
                   status: 'failed',
+                  duration: getElapsedDuration(
+                    eventData.timestamp,
+                    httpEntry.timestamp,
+                  ),
                   error: eventData.error,
                 };
 
@@ -414,7 +422,10 @@ export const createNetworkActivityStore = () =>
                   status: 'closed',
                   closeCode: eventData.code,
                   closeReason: eventData.reason,
-                  duration: eventData.timestamp - wsEntry.timestamp,
+                  duration: getElapsedDuration(
+                    eventData.timestamp,
+                    wsEntry.timestamp,
+                  ),
                 };
 
                 const newEntries = new Map(state.networkEntries);
@@ -495,6 +506,10 @@ export const createNetworkActivityStore = () =>
                 const updatedEntry: WebSocketNetworkEntry = {
                   ...wsEntry,
                   status: 'error',
+                  duration: getElapsedDuration(
+                    eventData.timestamp,
+                    wsEntry.timestamp,
+                  ),
                   error: eventData.error,
                 };
 
@@ -591,6 +606,10 @@ export const createNetworkActivityStore = () =>
                 const updatedEntry: SSENetworkEntry = {
                   ...sseEntry,
                   status: 'error',
+                  duration: getElapsedDuration(
+                    eventData.timestamp,
+                    sseEntry.timestamp,
+                  ),
                   error: eventData.error.message,
                 };
 
@@ -611,7 +630,10 @@ export const createNetworkActivityStore = () =>
                 const updatedEntry: SSENetworkEntry = {
                   ...sseEntry,
                   status: 'closed',
-                  duration: eventData.timestamp - sseEntry.timestamp,
+                  duration: getElapsedDuration(
+                    eventData.timestamp,
+                    sseEntry.timestamp,
+                  ),
                 };
 
                 const newEntries = new Map(state.networkEntries);

package/src/ui/utils/__tests__/requestFilters.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { createDefaultFilter } from '../../state/filter';
+import type { FilterState } from '../../state/filter';
+import type { ProcessedRequest } from '../../state/model';
+import { matchesRequestFilter } from '../requestFilters';
+
+const allTypesFilter = (text: string): FilterState => ({
+  ...createDefaultFilter(),
+  text,
+});
+
+const request: ProcessedRequest = {
+  id: 'request-1',
+  type: 'http',
+  name: 'https://example.com/users',
+  status: 'finished',
+  timestamp: 0,
+  duration: 100,
+  size: null,
+  method: 'GET',
+  httpStatus: 404,
+};
+
+describe('matchesRequestFilter', () => {
+  it('matches HTTP status codes', () => {
+    expect(matchesRequestFilter(request, allTypesFilter('404'))).toBe(true);
+  });
+
+  it('ignores whitespace-only text filters', () => {
+    expect(matchesRequestFilter(request, allTypesFilter('   '))).toBe(true);
+  });
+});

package/src/ui/utils/__tests__/sessionExport.test.ts

@@ -0,0 +1,174 @@
+import { describe, expect, it } from 'vitest';
+import type {
+  HttpNetworkEntry,
+  NetworkEntry,
+  RequestId,
+  SSENetworkEntry,
+  WebSocketMessage,
+  WebSocketNetworkEntry,
+} from '../../state/model';
+import {
+  createNetworkActivitySessionExport,
+  getNetworkActivitySessionExportFileName,
+} from '../sessionExport';
+
+const httpEntry: HttpNetworkEntry = {
+  id: 'request-1',
+  type: 'http',
+  timestamp: 100,
+  duration: 50,
+  source: 'builtin',
+  request: {
+    url: 'https://example.com/api',
+    method: 'GET',
+    headers: {
+      accept: 'application/json',
+    },
+  },
+  response: {
+    url: 'https://example.com/api',
+    status: 200,
+    statusText: 'OK',
+    headers: {
+      'content-type': 'application/json',
+    },
+    contentType: 'application/json',
+    size: 17,
+    responseTime: 150,
+    body: {
+      type: 'application/json',
+      data: '{"ok":true}',
+    },
+  },
+  status: 'finished',
+  ttfb: 20,
+  size: 17,
+  resourceType: 'Fetch',
+};
+
+const websocketEntry: WebSocketNetworkEntry = {
+  id: 'ws-socket-1',
+  type: 'websocket',
+  timestamp: 200,
+  duration: 100,
+  source: 'builtin',
+  connection: {
+    url: 'wss://example.com/socket',
+    socketId: 'socket-1',
+    protocols: ['chat'],
+    options: [],
+  },
+  status: 'closed',
+  closeCode: 1000,
+};
+
+const sseEntry: SSENetworkEntry = {
+  id: 'request-sse',
+  type: 'sse',
+  timestamp: 300,
+  duration: 200,
+  source: 'builtin',
+  request: {
+    url: 'https://example.com/events',
+    method: 'GET',
+    headers: {},
+  },
+  response: {
+    url: 'https://example.com/events',
+    status: 200,
+    statusText: 'OK',
+    headers: {
+      'content-type': 'text/event-stream',
+    },
+    contentType: 'text/event-stream',
+    size: 0,
+    responseTime: 310,
+  },
+  status: 'closed',
+  messages: [
+    {
+      id: 'sse-message-1',
+      type: 'message',
+      data: 'hello',
+      timestamp: 320,
+    },
+  ],
+};
+
+const websocketMessages: WebSocketMessage[] = [
+  {
+    id: 'websocket-message-1',
+    direction: 'sent',
+    data: 'ping',
+    messageType: 'text',
+    timestamp: 210,
+  },
+  {
+    id: 'websocket-message-2',
+    direction: 'received',
+    data: 'pong',
+    messageType: 'text',
+    timestamp: 220,
+  },
+];
+
+describe('sessionExport', () => {
+  it('exports captured HTTP and realtime session entries', () => {
+    const networkEntries = new Map<RequestId, NetworkEntry>([
+      [sseEntry.id, sseEntry],
+      [httpEntry.id, httpEntry],
+      [websocketEntry.id, websocketEntry],
+    ]);
+    const exportData = createNetworkActivitySessionExport(
+      networkEntries,
+      new Map([[websocketEntry.id, websocketMessages]]),
+      new Date('2026-05-14T10:00:00.000Z'),
+    );
+
+    expect(exportData).toMatchObject({
+      schemaVersion: 1,
+      tool: 'rozenite-network-activity',
+      exportedAt: '2026-05-14T10:00:00.000Z',
+      summary: {
+        totalEntries: 3,
+        httpRequests: 1,
+        webSocketConnections: 1,
+        sseConnections: 1,
+        realtimeMessages: 3,
+      },
+    });
+    expect(exportData.entries.map((entry) => entry.id)).toEqual([
+      httpEntry.id,
+      websocketEntry.id,
+      sseEntry.id,
+    ]);
+    expect(exportData.entries[0]).toMatchObject({
+      type: 'http',
+      request: {
+        url: 'https://example.com/api',
+      },
+      response: {
+        status: 200,
+        body: {
+          data: '{"ok":true}',
+        },
+      },
+    });
+    expect(exportData.entries[1]).toMatchObject({
+      type: 'websocket',
+      messages: websocketMessages,
+    });
+    expect(exportData.entries[2]).toMatchObject({
+      type: 'sse',
+      messages: sseEntry.messages,
+    });
+  });
+
+  it('creates filesystem-friendly export filenames', () => {
+    expect(
+      getNetworkActivitySessionExportFileName(
+        new Date('2026-05-14T10:00:00.123Z'),
+      ),
+    ).toBe('rozenite-network-session-2026-05-14T10-00-00Z.json');
+  });
+});

package/src/ui/utils/__tests__/timelineModel.test.ts

@@ -0,0 +1,170 @@
+import { describe, expect, it } from 'vitest';
+import type { ProcessedRequest } from '../../state/model';
+import {
+  formatTimelineOffset,
+  getTimelineModel,
+  getTimelineRequestEndTime,
+  getTimelineTicks,
+  isRequestActive,
+  requestOverlapsTimelineRange,
+  TIMELINE_LAYOUT,
+} from '../timelineModel';
+
+const createRequest = (
+  overrides: Partial<ProcessedRequest> = {},
+): ProcessedRequest => ({
+  id: 'request-1',
+  type: 'http',
+  name: 'https://example.com/api',
+  status: 'finished',
+  timestamp: 0,
+  duration: 100,
+  size: null,
+  method: 'GET',
+  ...overrides,
+});
+
+describe('timelineModel', () => {
+  it('formats minute offsets without rolling seconds up to 60', () => {
+    expect(formatTimelineOffset(119_900)).toBe('2m 00s');
+  });
+
+  it('treats websocket closing state as active', () => {
+    expect(
+      isRequestActive(
+        createRequest({
+          type: 'websocket',
+          status: 'closing',
+          method: 'WS',
+        }),
+      ),
+    ).toBe(true);
+  });
+
+  it('uses the earliest ending lane when all lanes are occupied', () => {
+    const requests = Array.from(
+      { length: TIMELINE_LAYOUT.laneCount },
+      (_, index) =>
+        createRequest({
+          id: `request-${index}`,
+          timestamp: 0,
+          duration: index === 1 ? 100 : 1000,
+        }),
+    );
+
+    const overflowingRequest = createRequest({
+      id: 'overflowing-request',
+      timestamp: 50,
+      duration: 200,
+    });
+
+    const model = getTimelineModel([...requests, overflowingRequest], 0);
+    const overflowingRow = model.rows.find(
+      (row) => row.request.id === overflowingRequest.id,
+    );
+
+    expect(overflowingRow?.lane).toBe(1);
+    expect(overflowingRow?.isOverflowingLane).toBe(true);
+  });
+
+  it('keeps long-session tick counts near the target count', () => {
+    const oneHour = 60 * 60 * 1000;
+    const model = getTimelineModel(
+      [
+        createRequest({
+          duration: oneHour,
+        }),
+      ],
+      0,
+    );
+
+    expect(model.ticks.length).toBeLessThanOrEqual(
+      TIMELINE_LAYOUT.tickTargetCount + 2,
+    );
+  });
+
+  it('does not add a duplicate final tick label', () => {
+    const ticks = getTimelineTicks(1548, {
+      ...TIMELINE_LAYOUT,
+      tickTargetCount: 7,
+    });
+
+    expect(ticks.map((tick) => tick.label)).toEqual([
+      '0 ms',
+      '250 ms',
+      '500 ms',
+      '750 ms',
+      '1.0 s',
+      '1.3 s',
+      '1.5 s',
+    ]);
+  });
+
+  it('caps rendered rows for large recordings', () => {
+    const maxRenderedRequests = 3;
+    const model = getTimelineModel(
+      Array.from({ length: 5 }, (_, index) =>
+        createRequest({
+          id: `request-${index}`,
+          timestamp: index,
+        }),
+      ),
+      0,
+      {
+        ...TIMELINE_LAYOUT,
+        maxRenderedRequests,
+      },
+    );
+
+    expect(model.rows.map((row) => row.request.id)).toEqual([
+      'request-2',
+      'request-3',
+      'request-4',
+    ]);
+    expect(model.totalRequestCount).toBe(5);
+    expect(model.hiddenRequestCount).toBe(2);
+  });
+
+  it('caps websocket and SSE duration in the timeline model', () => {
+    const now = 60_000;
+    const websocketRequest = createRequest({
+      type: 'websocket',
+      status: 'open',
+      method: 'WS',
+      timestamp: 0,
+      duration: undefined,
+    });
+
+    expect(getTimelineRequestEndTime(websocketRequest, now)).toBe(
+      TIMELINE_LAYOUT.streamingRequestMaxDurationMs,
+    );
+
+    const model = getTimelineModel([websocketRequest], now);
+
+    expect(model.rows[0].duration).toBe(
+      TIMELINE_LAYOUT.streamingRequestMaxDurationMs,
+    );
+  });
+
+  it('matches requests that overlap a selected timeline range', () => {
+    const request = createRequest({
+      timestamp: 1000,
+      duration: 400,
+    });
+
+    expect(
+      requestOverlapsTimelineRange(
+        request,
+        { startTime: 1200, endTime: 1400 },
+        0,
+      ),
+    ).toBe(true);
+    expect(
+      requestOverlapsTimelineRange(
+        request,
+        { startTime: 1500, endTime: 1600 },
+        0,
+      ),
+    ).toBe(false);
+  });
+});

package/src/ui/utils/download.ts

@@ -152,3 +152,10 @@ export const downloadBlob = (blob: Blob, filename: string): void => {
   // the request when the URL disappears mid-click.
   setTimeout(() => URL.revokeObjectURL(objectUrl), 0);
 };
+
+export const downloadJson = (data: unknown, filename: string): void => {
+  downloadBlob(
+    new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }),
+    filename,
+  );
+};