feat(network-activity-plugin): export network session

.changeset/network-session-export.md

@@ -0,0 +1,7 @@
+---
+'@rozenite/network-activity-plugin': minor
+---
+
+Add a toolbar export button that downloads the current network activity session as a JSON file.
+
+The export includes HTTP requests, WebSocket connections, SSE streams, and realtime messages captured during the session, along with a summary (entry counts by type) and metadata (`schemaVersion`, `exportedAt`).

packages/network-activity-plugin/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>
   );
 };

packages/network-activity-plugin/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,
+  };
+};

packages/network-activity-plugin/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) || [],
   );
 };
 

packages/network-activity-plugin/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');
+  });
+});

packages/network-activity-plugin/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,
+  );
+};