@rozenite/network-activity-plugin 1.5.1 → 1.7.0-rc.0

package/dist/react-native/chunks/useNetworkActivityDevTools.require.js

@@ -0,0 +1,1102 @@
+import { useEffect, useRef } from "react";
+import { useRozeniteDevToolsClient } from "@rozenite/plugin-bridge";
+import { s as safeStringify, g as getResponseBody, a as getOverridesRegistry, c as createNetworkInspectorsConfiguration, D as DEFAULT_CONFIG, v as validateConfig, i as isHttpEvent, b as isWebSocketEvent, d as isSSEEvent } from "./boot-recording.js";
+import { useRozenitePluginAgentTool } from "@rozenite/agent-bridge";
+const DEFAULT_PAGE_LIMIT = 20;
+const MAX_PAGE_LIMIT = 100;
+const HTTP_BUFFER_CAPACITY = 500;
+const REALTIME_BUFFER_CAPACITY = 200;
+const createInitialState = () => ({
+  isRecording: false,
+  generation: 0,
+  httpOrder: [],
+  httpRecords: /* @__PURE__ */ new Map(),
+  httpTotalRecorded: 0,
+  httpEvictedCount: 0,
+  httpTruncated: false,
+  realtimeOrder: [],
+  realtimeRecords: /* @__PURE__ */ new Map(),
+  realtimeTotalRecorded: 0,
+  realtimeEvictedCount: 0,
+  realtimeTruncated: false,
+  nextMessageId: 1,
+  recordingMetadata: {
+    enabledInspectors: {
+      http: true,
+      websocket: true,
+      sse: true
+    }
+  }
+});
+const getLimit = (value) => {
+  if (typeof value !== "number" || !Number.isInteger(value) || !Number.isFinite(value) || value < 1) {
+    return DEFAULT_PAGE_LIMIT;
+  }
+  return Math.min(value, MAX_PAGE_LIMIT);
+};
+const encodeCursor = (scope, index) => {
+  return `${scope}:${index}`;
+};
+const decodeCursor = (cursor, scope) => {
+  const [cursorScope, rawIndex] = cursor.split(":", 2);
+  if (cursorScope !== scope || !rawIndex) {
+    throw new Error(
+      "Cursor does not match the requested listing. Run the command again."
+    );
+  }
+  const index = Number(rawIndex);
+  if (!Number.isInteger(index) || index < 0) {
+    throw new Error("Cursor is invalid. Run the command again.");
+  }
+  return index;
+};
+const paginate = (rows, scope, limit, cursor) => {
+  const startIndex = cursor ? decodeCursor(cursor, scope) : 0;
+  const endIndex = Math.min(startIndex + limit, rows.length);
+  const hasMore = endIndex < rows.length;
+  return {
+    items: rows.slice(startIndex, endIndex),
+    page: {
+      limit,
+      hasMore,
+      ...hasMore ? { nextCursor: encodeCursor(scope, endIndex) } : {}
+    }
+  };
+};
+const serializeRequestBody = (requestId, postData) => {
+  if (!postData) {
+    return {
+      requestId,
+      available: false,
+      reason: "No request body is available for this request."
+    };
+  }
+  if (postData.type === "text") {
+    return {
+      requestId,
+      available: true,
+      body: postData.value,
+      base64Encoded: false
+    };
+  }
+  return {
+    requestId,
+    available: true,
+    body: safeStringify(postData),
+    base64Encoded: false
+  };
+};
+const createHttpSummary = (record) => ({
+  requestId: record.requestId,
+  method: record.request.method,
+  url: record.request.url,
+  status: record.response?.status ?? null,
+  type: record.resourceType,
+  startTimeMs: record.startTimeMs,
+  endTimeMs: record.endTimeMs ?? null,
+  durationMs: record.durationMs ?? null,
+  transferSize: record.size ?? null,
+  encodedDataLength: record.response?.size ?? null,
+  outcome: record.status === "failed" ? "failed" : record.status === "finished" ? "success" : "in-flight"
+});
+const getRealtimeSummary = (record) => {
+  if (record.kind === "websocket") {
+    return {
+      requestId: record.requestId,
+      kind: record.kind,
+      url: record.url,
+      status: record.status,
+      startedAt: record.startedAt,
+      endedAt: record.endedAt ?? null,
+      durationMs: record.durationMs ?? null,
+      messageCount: record.messages.length,
+      error: record.error ?? null,
+      closeCode: record.closeCode ?? null
+    };
+  }
+  return {
+    requestId: record.requestId,
+    kind: record.kind,
+    url: record.request?.url ?? record.response?.url ?? null,
+    status: record.status,
+    startedAt: record.startedAt,
+    endedAt: record.endedAt ?? null,
+    durationMs: record.durationMs ?? null,
+    messageCount: record.messages.length,
+    error: record.error ?? null,
+    httpStatus: record.response?.status ?? null
+  };
+};
+const trimMap = (order, records, capacity) => {
+  let evicted = 0;
+  while (order.length > capacity) {
+    const oldestId = order.shift();
+    if (!oldestId) {
+      break;
+    }
+    records.delete(oldestId);
+    evicted += 1;
+  }
+  return evicted;
+};
+const createNetworkActivityAgentState = () => {
+  const state = createInitialState();
+  const getStatus = () => ({
+    recording: {
+      isRecording: state.isRecording,
+      startedAt: state.startedAt ?? null,
+      stoppedAt: state.stoppedAt ?? null,
+      httpRequestCount: state.httpOrder.length,
+      realtimeConnectionCount: state.realtimeOrder.length,
+      http: {
+        totalRecorded: state.httpTotalRecorded,
+        evictedCount: state.httpEvictedCount,
+        truncated: state.httpTruncated,
+        capacity: HTTP_BUFFER_CAPACITY
+      },
+      realtime: {
+        totalRecorded: state.realtimeTotalRecorded,
+        evictedCount: state.realtimeEvictedCount,
+        truncated: state.realtimeTruncated,
+        capacity: REALTIME_BUFFER_CAPACITY
+      },
+      generation: state.generation,
+      enabledInspectors: state.recordingMetadata.enabledInspectors
+    }
+  });
+  const ensureHttpRecord = (requestId, fallback) => {
+    const existing = state.httpRecords.get(requestId);
+    if (existing) {
+      return existing;
+    }
+    const record = {
+      requestId,
+      request: fallback?.request || {
+        url: "",
+        method: "GET",
+        headers: {}
+      },
+      resourceType: fallback?.resourceType || "Other",
+      initiator: fallback?.initiator || { type: "other" },
+      startTimeMs: fallback?.startTimeMs ?? Date.now(),
+      status: fallback?.status || "pending"
+    };
+    state.httpRecords.set(requestId, record);
+    state.httpOrder.push(requestId);
+    state.httpTotalRecorded += 1;
+    const evicted = trimMap(
+      state.httpOrder,
+      state.httpRecords,
+      HTTP_BUFFER_CAPACITY
+    );
+    if (evicted > 0) {
+      state.httpEvictedCount += evicted;
+      state.httpTruncated = true;
+    }
+    return record;
+  };
+  const ensureRealtimeRecord = (requestId, createRecord) => {
+    const existing = state.realtimeRecords.get(requestId);
+    if (existing) {
+      return existing;
+    }
+    const record = createRecord();
+    state.realtimeRecords.set(requestId, record);
+    state.realtimeOrder.push(requestId);
+    state.realtimeTotalRecorded += 1;
+    const evicted = trimMap(
+      state.realtimeOrder,
+      state.realtimeRecords,
+      REALTIME_BUFFER_CAPACITY
+    );
+    if (evicted > 0) {
+      state.realtimeEvictedCount += evicted;
+      state.realtimeTruncated = true;
+    }
+    return record;
+  };
+  const nextMessageId = (prefix) => {
+    const id = `${prefix}-${state.nextMessageId}`;
+    state.nextMessageId += 1;
+    return id;
+  };
+  return {
+    startRecording(metadata) {
+      state.isRecording = true;
+      state.startedAt = Date.now();
+      state.stoppedAt = void 0;
+      state.generation += 1;
+      state.httpOrder = [];
+      state.httpRecords.clear();
+      state.httpTotalRecorded = 0;
+      state.httpEvictedCount = 0;
+      state.httpTruncated = false;
+      state.realtimeOrder = [];
+      state.realtimeRecords.clear();
+      state.realtimeTotalRecorded = 0;
+      state.realtimeEvictedCount = 0;
+      state.realtimeTruncated = false;
+      state.recordingMetadata = {
+        enabledInspectors: {
+          ...state.recordingMetadata.enabledInspectors,
+          ...metadata?.enabledInspectors
+        }
+      };
+      return getStatus();
+    },
+    stopRecording() {
+      if (!state.isRecording) {
+        throw new Error("No active network recording for this plugin session");
+      }
+      state.isRecording = false;
+      state.stoppedAt = Date.now();
+      return getStatus();
+    },
+    getStatus,
+    getHttpRecord(requestId) {
+      return state.httpRecords.get(requestId) || null;
+    },
+    getRealtimeRecord(requestId) {
+      return state.realtimeRecords.get(requestId) || null;
+    },
+    listRequests(input) {
+      const limit = getLimit(input.limit);
+      const rows = state.httpOrder.map((requestId) => state.httpRecords.get(requestId)).filter((record) => !!record).reverse().map(createHttpSummary);
+      return {
+        ...getStatus(),
+        ...paginate(rows, `http-${state.generation}`, limit, input.cursor)
+      };
+    },
+    listRealtimeConnections(input) {
+      const limit = getLimit(input.limit);
+      const rows = state.realtimeOrder.map((requestId) => state.realtimeRecords.get(requestId)).filter((record) => !!record).reverse().map(getRealtimeSummary);
+      return {
+        ...getStatus(),
+        ...paginate(rows, `realtime-${state.generation}`, limit, input.cursor)
+      };
+    },
+    getRequestDetails(requestId) {
+      const record = state.httpRecords.get(requestId);
+      if (!record) {
+        throw new Error(`Unknown request "${requestId}"`);
+      }
+      return {
+        ...getStatus(),
+        request: {
+          requestId: record.requestId,
+          method: record.request.method,
+          url: record.request.url,
+          type: record.resourceType,
+          initiator: record.initiator,
+          startTimeMs: record.startTimeMs,
+          endTimeMs: record.endTimeMs ?? null,
+          durationMs: record.durationMs ?? null,
+          request: record.request,
+          response: record.response ?? null,
+          loadingFinished: record.status === "finished",
+          loadingFailed: record.status === "failed",
+          failureText: record.error ?? null,
+          canceled: record.canceled ?? false,
+          progress: record.progress ? {
+            loaded: record.progress.loaded,
+            total: record.progress.total,
+            lengthComputable: record.progress.lengthComputable
+          } : null,
+          ttfb: record.ttfb ?? null,
+          size: record.size ?? null
+        }
+      };
+    },
+    getRealtimeConnectionDetails(requestId) {
+      const record = state.realtimeRecords.get(requestId);
+      if (!record) {
+        throw new Error(`Unknown realtime connection "${requestId}"`);
+      }
+      return {
+        ...getStatus(),
+        connection: record.kind === "websocket" ? {
+          requestId: record.requestId,
+          kind: record.kind,
+          url: record.url,
+          socketId: record.socketId,
+          status: record.status,
+          startedAt: record.startedAt,
+          endedAt: record.endedAt ?? null,
+          durationMs: record.durationMs ?? null,
+          protocols: record.protocols ?? null,
+          options: record.options ?? [],
+          error: record.error ?? null,
+          closeCode: record.closeCode ?? null,
+          closeReason: record.closeReason ?? null,
+          messages: record.messages
+        } : {
+          requestId: record.requestId,
+          kind: record.kind,
+          status: record.status,
+          startedAt: record.startedAt,
+          endedAt: record.endedAt ?? null,
+          durationMs: record.durationMs ?? null,
+          request: record.request ?? null,
+          response: record.response ?? null,
+          initiator: record.initiator ?? null,
+          resourceType: record.resourceType ?? null,
+          error: record.error ?? null,
+          messages: record.messages
+        }
+      };
+    },
+    getRequestBody(requestId) {
+      const record = state.httpRecords.get(requestId);
+      if (!record) {
+        throw new Error(`Unknown request "${requestId}"`);
+      }
+      return serializeRequestBody(requestId, record.request.postData);
+    },
+    onRequestSent(event) {
+      if (!state.isRecording) {
+        return;
+      }
+      const record = ensureHttpRecord(event.requestId, {
+        request: event.request,
+        resourceType: event.type,
+        initiator: event.initiator,
+        startTimeMs: event.timestamp,
+        status: "pending"
+      });
+      record.request = event.request;
+      record.resourceType = event.type;
+      record.initiator = event.initiator;
+      record.startTimeMs = event.timestamp;
+      record.status = "pending";
+      record.response = void 0;
+      record.endTimeMs = void 0;
+      record.durationMs = void 0;
+      record.size = void 0;
+      record.ttfb = void 0;
+      record.error = void 0;
+      record.canceled = void 0;
+      record.progress = void 0;
+    },
+    onRequestProgress(event) {
+      if (!state.isRecording) {
+        return;
+      }
+      const record = ensureHttpRecord(event.requestId);
+      record.progress = event;
+      record.status = "loading";
+    },
+    onResponseReceived(event) {
+      if (!state.isRecording) {
+        return;
+      }
+      const record = ensureHttpRecord(event.requestId);
+      record.response = event.response;
+      record.status = "loading";
+    },
+    onRequestCompleted(event) {
+      if (!state.isRecording) {
+        return;
+      }
+      const record = ensureHttpRecord(event.requestId);
+      record.status = "finished";
+      record.endTimeMs = event.timestamp;
+      record.durationMs = event.duration;
+      record.size = event.size;
+      record.ttfb = event.ttfb;
+    },
+    onRequestFailed(event) {
+      if (!state.isRecording) {
+        return;
+      }
+      const record = ensureHttpRecord(event.requestId);
+      record.status = "failed";
+      record.endTimeMs = event.timestamp;
+      record.error = event.error;
+      record.canceled = event.canceled;
+    },
+    onWebSocketConnect(event) {
+      if (!state.isRecording) {
+        return;
+      }
+      ensureRealtimeRecord(`ws-${event.socketId}`, () => ({
+        requestId: `ws-${event.socketId}`,
+        kind: "websocket",
+        url: event.url,
+        socketId: event.socketId,
+        status: "connecting",
+        startedAt: event.timestamp,
+        protocols: event.protocols,
+        options: event.options,
+        messages: []
+      }));
+    },
+    onWebSocketOpen(event) {
+      if (!state.isRecording) {
+        return;
+      }
+      const record = ensureRealtimeRecord(`ws-${event.socketId}`, () => ({
+        requestId: `ws-${event.socketId}`,
+        kind: "websocket",
+        url: event.url,
+        socketId: event.socketId,
+        status: "connecting",
+        startedAt: event.timestamp,
+        messages: []
+      }));
+      record.status = "open";
+    },
+    onWebSocketClose(event) {
+      if (!state.isRecording) {
+        return;
+      }
+      const record = ensureRealtimeRecord(`ws-${event.socketId}`, () => ({
+        requestId: `ws-${event.socketId}`,
+        kind: "websocket",
+        url: event.url,
+        socketId: event.socketId,
+        status: "connecting",
+        startedAt: event.timestamp,
+        messages: []
+      }));
+      record.status = "closed";
+      record.endedAt = event.timestamp;
+      record.durationMs = event.timestamp - record.startedAt;
+      record.closeCode = event.code;
+      record.closeReason = event.reason;
+    },
+    onWebSocketMessageSent(event) {
+      if (!state.isRecording) {
+        return;
+      }
+      const record = ensureRealtimeRecord(`ws-${event.socketId}`, () => ({
+        requestId: `ws-${event.socketId}`,
+        kind: "websocket",
+        url: event.url,
+        socketId: event.socketId,
+        status: "connecting",
+        startedAt: event.timestamp,
+        messages: []
+      }));
+      const message = {
+        id: nextMessageId(record.requestId),
+        direction: "sent",
+        data: event.data,
+        messageType: event.messageType,
+        timestamp: event.timestamp
+      };
+      record.messages = [...record.messages, message].slice(
+        -32
+      );
+    },
+    onWebSocketMessageReceived(event) {
+      if (!state.isRecording) {
+        return;
+      }
+      const record = ensureRealtimeRecord(`ws-${event.socketId}`, () => ({
+        requestId: `ws-${event.socketId}`,
+        kind: "websocket",
+        url: event.url,
+        socketId: event.socketId,
+        status: "connecting",
+        startedAt: event.timestamp,
+        messages: []
+      }));
+      const message = {
+        id: nextMessageId(record.requestId),
+        direction: "received",
+        data: event.data,
+        messageType: event.messageType,
+        timestamp: event.timestamp
+      };
+      record.messages = [...record.messages, message].slice(
+        -32
+      );
+    },
+    onWebSocketError(event) {
+      if (!state.isRecording) {
+        return;
+      }
+      const record = ensureRealtimeRecord(`ws-${event.socketId}`, () => ({
+        requestId: `ws-${event.socketId}`,
+        kind: "websocket",
+        url: event.url,
+        socketId: event.socketId,
+        status: "connecting",
+        startedAt: event.timestamp,
+        messages: []
+      }));
+      record.status = "error";
+      record.error = event.error;
+    },
+    onWebSocketConnectionStatusChanged(event) {
+      if (!state.isRecording) {
+        return;
+      }
+      const record = ensureRealtimeRecord(`ws-${event.socketId}`, () => ({
+        requestId: `ws-${event.socketId}`,
+        kind: "websocket",
+        url: event.url,
+        socketId: event.socketId,
+        status: "connecting",
+        startedAt: event.timestamp,
+        messages: []
+      }));
+      record.status = event.status;
+    },
+    onSSEOpen(event) {
+      if (!state.isRecording) {
+        return;
+      }
+      const httpRecord = state.httpRecords.get(event.requestId);
+      ensureRealtimeRecord(event.requestId, () => ({
+        requestId: event.requestId,
+        kind: "sse",
+        status: "open",
+        startedAt: httpRecord?.startTimeMs ?? event.timestamp,
+        request: httpRecord?.request,
+        response: event.response,
+        initiator: httpRecord?.initiator,
+        resourceType: httpRecord?.resourceType,
+        messages: []
+      }));
+    },
+    onSSEMessage(event) {
+      if (!state.isRecording) {
+        return;
+      }
+      const record = ensureRealtimeRecord(event.requestId, () => ({
+        requestId: event.requestId,
+        kind: "sse",
+        status: "connecting",
+        startedAt: event.timestamp,
+        messages: []
+      }));
+      record.messages = [
+        ...record.messages,
+        {
+          id: nextMessageId(record.requestId),
+          type: event.payload.type,
+          data: event.payload.data,
+          timestamp: event.timestamp
+        }
+      ].slice(-32);
+    },
+    onSSEError(event) {
+      if (!state.isRecording) {
+        return;
+      }
+      const record = ensureRealtimeRecord(event.requestId, () => ({
+        requestId: event.requestId,
+        kind: "sse",
+        status: "connecting",
+        startedAt: event.timestamp,
+        messages: []
+      }));
+      record.status = "error";
+      record.error = event.error.message;
+    },
+    onSSEClose(event) {
+      if (!state.isRecording) {
+        return;
+      }
+      const record = ensureRealtimeRecord(event.requestId, () => ({
+        requestId: event.requestId,
+        kind: "sse",
+        status: "connecting",
+        startedAt: event.timestamp,
+        messages: []
+      }));
+      record.status = "closed";
+      record.endedAt = event.timestamp;
+      record.durationMs = event.timestamp - record.startedAt;
+    }
+  };
+};
+const getNetworkActivityAgentState = /* @__PURE__ */ (() => {
+  let instance = null;
+  return () => {
+    if (!instance) {
+      instance = createNetworkActivityAgentState();
+    }
+    return instance;
+  };
+})();
+const startRecordingTool = {
+  name: "startRecording",
+  description: "Start recording network activity in the fallback network activity plugin.",
+  inputSchema: {
+    type: "object",
+    properties: {}
+  }
+};
+const stopRecordingTool = {
+  name: "stopRecording",
+  description: "Stop recording network activity without clearing the captured plugin buffer.",
+  inputSchema: {
+    type: "object",
+    properties: {}
+  }
+};
+const getRecordingStatusTool = {
+  name: "getRecordingStatus",
+  description: "Return network activity plugin recording state and buffer metadata.",
+  inputSchema: {
+    type: "object",
+    properties: {}
+  }
+};
+const listRequestsTool = {
+  name: "listRequests",
+  description: "List captured HTTP request summaries with cursor pagination from the fallback plugin.",
+  inputSchema: {
+    type: "object",
+    properties: {
+      limit: {
+        type: "number",
+        description: "Maximum number of requests to return. Defaults to 20."
+      },
+      cursor: {
+        type: "string",
+        description: "Opaque pagination cursor from a previous listRequests call."
+      }
+    }
+  }
+};
+const getRequestDetailsTool = {
+  name: "getRequestDetails",
+  description: "Return detailed metadata for a captured HTTP request without fetching response body.",
+  inputSchema: {
+    type: "object",
+    properties: {
+      requestId: {
+        type: "string",
+        description: "Captured plugin request ID to inspect."
+      }
+    },
+    required: ["requestId"]
+  }
+};
+const getRequestBodyTool = {
+  name: "getRequestBody",
+  description: "Return the captured request body for a plugin-recorded HTTP request when available.",
+  inputSchema: {
+    type: "object",
+    properties: {
+      requestId: {
+        type: "string",
+        description: "Captured plugin request ID to inspect."
+      }
+    },
+    required: ["requestId"]
+  }
+};
+const getResponseBodyTool = {
+  name: "getResponseBody",
+  description: "Return the captured response body for a plugin-recorded HTTP request when available.",
+  inputSchema: {
+    type: "object",
+    properties: {
+      requestId: {
+        type: "string",
+        description: "Captured plugin request ID to inspect."
+      }
+    },
+    required: ["requestId"]
+  }
+};
+const listRealtimeConnectionsTool = {
+  name: "listRealtimeConnections",
+  description: "List captured WebSocket and SSE connections with cursor pagination.",
+  inputSchema: {
+    type: "object",
+    properties: {
+      limit: {
+        type: "number",
+        description: "Maximum number of realtime connections to return. Defaults to 20."
+      },
+      cursor: {
+        type: "string",
+        description: "Opaque pagination cursor from a previous listRealtimeConnections call."
+      }
+    }
+  }
+};
+const getRealtimeConnectionDetailsTool = {
+  name: "getRealtimeConnectionDetails",
+  description: "Return details for a captured WebSocket or SSE connection, including recent messages.",
+  inputSchema: {
+    type: "object",
+    properties: {
+      requestId: {
+        type: "string",
+        description: "Captured realtime request ID to inspect."
+      }
+    },
+    required: ["requestId"]
+  }
+};
+const pluginId = "@rozenite/network-activity-plugin";
+const useNetworkActivityAgentTools = ({
+  client,
+  networkInspector,
+  enabledInspectors
+}) => {
+  const state = getNetworkActivityAgentState();
+  useEffect(() => {
+    const unsubscribe = [
+      networkInspector.http.on(
+        "request-sent",
+        (event) => state.onRequestSent(event)
+      ),
+      networkInspector.http.on(
+        "request-progress",
+        (event) => state.onRequestProgress(event)
+      ),
+      networkInspector.http.on(
+        "response-received",
+        (event) => state.onResponseReceived(event)
+      ),
+      networkInspector.http.on(
+        "request-completed",
+        (event) => state.onRequestCompleted(event)
+      ),
+      networkInspector.http.on(
+        "request-failed",
+        (event) => state.onRequestFailed(event)
+      ),
+      networkInspector.websocket.on(
+        "websocket-connect",
+        (event) => state.onWebSocketConnect(event)
+      ),
+      networkInspector.websocket.on(
+        "websocket-open",
+        (event) => state.onWebSocketOpen(event)
+      ),
+      networkInspector.websocket.on(
+        "websocket-close",
+        (event) => state.onWebSocketClose(event)
+      ),
+      networkInspector.websocket.on(
+        "websocket-message-sent",
+        (event) => state.onWebSocketMessageSent(event)
+      ),
+      networkInspector.websocket.on(
+        "websocket-message-received",
+        (event) => state.onWebSocketMessageReceived(event)
+      ),
+      networkInspector.websocket.on(
+        "websocket-error",
+        (event) => state.onWebSocketError(event)
+      ),
+      networkInspector.websocket.on(
+        "websocket-connection-status-changed",
+        (event) => state.onWebSocketConnectionStatusChanged(event)
+      ),
+      networkInspector.sse.on("sse-open", (event) => state.onSSEOpen(event)),
+      networkInspector.sse.on("sse-message", (event) => state.onSSEMessage(event)),
+      networkInspector.sse.on("sse-error", (event) => state.onSSEError(event)),
+      networkInspector.sse.on("sse-close", (event) => state.onSSEClose(event))
+    ];
+    return () => {
+      unsubscribe.forEach((remove) => remove());
+    };
+  }, [networkInspector, state]);
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+    const subscriptions = [
+      client.onMessage("network-enable", () => {
+        state.startRecording({ enabledInspectors });
+      }),
+      client.onMessage("network-disable", () => {
+        if (state.getStatus().recording.isRecording) {
+          state.stopRecording();
+        }
+      })
+    ];
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+    };
+  }, [client, enabledInspectors, state]);
+  useRozenitePluginAgentTool({
+    pluginId,
+    tool: startRecordingTool,
+    handler: () => {
+      networkInspector.http.getNetworkRequestsRegistry().clear();
+      const result = state.startRecording({ enabledInspectors });
+      networkInspector.enable(enabledInspectors);
+      return {
+        started: true,
+        ...result
+      };
+    }
+  });
+  useRozenitePluginAgentTool({
+    pluginId,
+    tool: stopRecordingTool,
+    handler: () => {
+      const result = state.stopRecording();
+      networkInspector.disable();
+      return {
+        stopped: true,
+        ...result
+      };
+    }
+  });
+  useRozenitePluginAgentTool({
+    pluginId,
+    tool: getRecordingStatusTool,
+    handler: () => state.getStatus()
+  });
+  useRozenitePluginAgentTool({
+    pluginId,
+    tool: listRequestsTool,
+    handler: (input = {}) => state.listRequests(input)
+  });
+  useRozenitePluginAgentTool({
+    pluginId,
+    tool: getRequestDetailsTool,
+    handler: ({ requestId }) => state.getRequestDetails(requestId)
+  });
+  useRozenitePluginAgentTool({
+    pluginId,
+    tool: getRequestBodyTool,
+    handler: ({ requestId }) => state.getRequestBody(requestId)
+  });
+  useRozenitePluginAgentTool({
+    pluginId,
+    tool: getResponseBodyTool,
+    handler: async ({ requestId }) => {
+      const record = state.getHttpRecord(requestId);
+      if (!record) {
+        throw new Error(`Unknown request "${requestId}"`);
+      }
+      if (record.status === "failed") {
+        return {
+          requestId,
+          available: false,
+          reason: "Response body is unavailable because the request failed."
+        };
+      }
+      if (record.status !== "finished") {
+        return {
+          requestId,
+          available: false,
+          reason: "Response body is unavailable until the request finishes loading."
+        };
+      }
+      const request = networkInspector.http.getNetworkRequestsRegistry().getEntry(requestId);
+      if (!request) {
+        return {
+          requestId,
+          available: false,
+          reason: "Response body is unavailable because the request object is no longer in the plugin registry."
+        };
+      }
+      const body = await getResponseBody(request);
+      if (body === null) {
+        return {
+          requestId,
+          available: false,
+          reason: "The plugin could not extract a text response body for this request."
+        };
+      }
+      return {
+        requestId,
+        available: true,
+        body,
+        base64Encoded: false,
+        decoded: false,
+        mimeType: record.response?.contentType
+      };
+    }
+  });
+  useRozenitePluginAgentTool({
+    pluginId,
+    tool: listRealtimeConnectionsTool,
+    handler: (input = {}) => state.listRealtimeConnections(input)
+  });
+  useRozenitePluginAgentTool({
+    pluginId,
+    tool: getRealtimeConnectionDetailsTool,
+    handler: ({ requestId }) => state.getRealtimeConnectionDetails(requestId)
+  });
+};
+const overridesRegistry = getOverridesRegistry();
+const useHttpInspector = (client, httpInspector, isEnabled, isRecordingEnabled) => {
+  useEffect(() => {
+    if (!client || !isEnabled) {
+      return;
+    }
+    const networkRequestsRegistry = httpInspector.getNetworkRequestsRegistry();
+    const subscriptions = [
+      client.onMessage("network-enable", () => {
+        httpInspector.enable();
+      }),
+      client.onMessage("network-disable", () => {
+        httpInspector.disable();
+      }),
+      client.onMessage("set-overrides", (data) => {
+        overridesRegistry.setOverrides(data.overrides);
+      }),
+      client.onMessage("get-response-body", async ({ requestId }) => {
+        const request = networkRequestsRegistry.getEntry(requestId);
+        if (!request) {
+          return;
+        }
+        const body = await getResponseBody(request);
+        client.send("response-body", {
+          requestId,
+          body
+        });
+      })
+    ];
+    if (isRecordingEnabled) {
+      httpInspector.enable();
+    }
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+      httpInspector.dispose();
+    };
+  }, [client, httpInspector, isEnabled, isRecordingEnabled]);
+};
+const useWebSocketInspector = (client, websocketInspector, isEnabled, isRecordingEnabled) => {
+  useEffect(() => {
+    if (!client || !isEnabled) {
+      return;
+    }
+    const subscriptions = [
+      client.onMessage("network-enable", () => {
+        websocketInspector.enable();
+      }),
+      client.onMessage("network-disable", () => {
+        websocketInspector.disable();
+      })
+    ];
+    if (isRecordingEnabled) {
+      websocketInspector.enable();
+    }
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+      websocketInspector.dispose();
+    };
+  }, [client, websocketInspector, isEnabled, isRecordingEnabled]);
+};
+const useSSEInspector = (client, sseInspector, isEnabled, isRecordingEnabled) => {
+  useEffect(() => {
+    if (!client || !isEnabled) {
+      return;
+    }
+    const subscriptions = [
+      client.onMessage("network-enable", () => {
+        sseInspector.enable();
+      }),
+      client.onMessage("network-disable", () => {
+        sseInspector.disable();
+      })
+    ];
+    if (isRecordingEnabled) {
+      sseInspector.enable();
+    }
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+      sseInspector.dispose();
+    };
+  }, [client, sseInspector, isEnabled, isRecordingEnabled]);
+};
+const inspectorsConfig = createNetworkInspectorsConfiguration();
+const useNetworkActivityDevTools = (config = DEFAULT_CONFIG) => {
+  const isRecordingEnabledRef = useRef(false);
+  const client = useRozeniteDevToolsClient({
+    pluginId: "@rozenite/network-activity-plugin"
+  });
+  const isHttpInspectorEnabled = config.inspectors?.http ?? true;
+  const isWebSocketInspectorEnabled = config.inspectors?.websocket ?? true;
+  const isSSEInspectorEnabled = config.inspectors?.sse ?? true;
+  const showUrlAsName = config.clientUISettings?.showUrlAsName;
+  const { eventsListener, networkInspector } = inspectorsConfig;
+  useNetworkActivityAgentTools({
+    client,
+    networkInspector,
+    enabledInspectors: {
+      http: isHttpInspectorEnabled,
+      websocket: isWebSocketInspectorEnabled,
+      sse: isSSEInspectorEnabled
+    }
+  });
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+    validateConfig(config);
+  }, [config]);
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+    const sendClientUISettings = () => {
+      client.send("client-ui-settings", {
+        settings: {
+          showUrlAsName: showUrlAsName ?? DEFAULT_CONFIG.clientUISettings?.showUrlAsName
+        }
+      });
+    };
+    const subscriptions = [
+      client.onMessage("network-enable", () => {
+        isRecordingEnabledRef.current = true;
+        eventsListener.connect(client.send, (message) => {
+          const type = message.type;
+          if (isHttpEvent(type)) {
+            return isHttpInspectorEnabled;
+          }
+          if (isWebSocketEvent(type)) {
+            return isWebSocketInspectorEnabled;
+          }
+          if (isSSEEvent(type)) {
+            return isSSEInspectorEnabled;
+          }
+          return true;
+        });
+      }),
+      client.onMessage("network-disable", () => {
+        isRecordingEnabledRef.current = false;
+      }),
+      client.onMessage("get-client-ui-settings", () => {
+        sendClientUISettings();
+      })
+    ];
+    sendClientUISettings();
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+    };
+  }, [
+    client,
+    showUrlAsName,
+    isHttpInspectorEnabled,
+    isWebSocketInspectorEnabled,
+    isSSEInspectorEnabled
+  ]);
+  useHttpInspector(
+    client,
+    networkInspector.http,
+    isHttpInspectorEnabled,
+    isRecordingEnabledRef.current
+  );
+  useWebSocketInspector(
+    client,
+    networkInspector.websocket,
+    isWebSocketInspectorEnabled,
+    isRecordingEnabledRef.current
+  );
+  useSSEInspector(
+    client,
+    networkInspector.sse,
+    isSSEInspectorEnabled,
+    isRecordingEnabledRef.current
+  );
+  return client;
+};
+export {
+  useNetworkActivityDevTools
+};