@rozenite/network-activity-plugin 1.0.0-alpha.15 → 1.0.0-alpha.16

package/dist/rozenite.json

@@ -1 +1 @@
-{"name":"@rozenite/network-activity-plugin","version":"1.0.0-alpha.12","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/App.html"}]}
+{"name":"@rozenite/network-activity-plugin","version":"1.0.0-alpha.15","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/App.html"}]}

package/dist/src/react-native/http/overrides-registry.d.ts

@@ -0,0 +1,6 @@
+import { RequestOverride } from '../../shared/client';
+export type OverridesRegistry = {
+    setOverrides: (newOverrides: [string, RequestOverride][]) => void;
+    getOverrideForUrl: (url: string) => RequestOverride | undefined;
+};
+export declare const getOverridesRegistry: () => OverridesRegistry;

package/dist/src/react-native/http/xhr-interceptor.d.ts

@@ -4,6 +4,7 @@ type XHRInterceptorSendCallback = (data: XHRPostData, request: XMLHttpRequest) =
 type XHRInterceptorRequestHeaderCallback = (header: string, value: string, request: XMLHttpRequest) => void;
 type XHRInterceptorHeaderReceivedCallback = (responseContentType: string | undefined, responseSize: number | undefined, allHeaders: string, request: XMLHttpRequest) => void;
 type XHRInterceptorResponseCallback = (status: number, timeout: number, response: string, responseURL: string, responseType: string, request: XMLHttpRequest) => void;
+type XHRInterceptorOverrideCallback = (request: XMLHttpRequest) => void;
 /**
  * A network interceptor which monkey-patches XMLHttpRequest methods
  * to gather all network requests/responses, in order to show their
@@ -32,6 +33,10 @@ export declare const XHRInterceptor: {
      * Invoked before XMLHttpRequest.setRequestHeader(...) is called.
      */
     setRequestHeaderCallback(callback: XHRInterceptorRequestHeaderCallback): void;
+    /**
+     * Invoked before XMLHttpRequest.send(...) is called.
+     */
+    setOverrideCallback(callback: XHRInterceptorOverrideCallback): void;
     isInterceptorEnabled(): boolean;
     enableInterception(): void;
     disableInterception(): void;

package/dist/src/shared/client.d.ts

@@ -57,6 +57,10 @@ export type Initiator = {
     columnNumber?: number;
 };
 export type ResourceType = 'XHR' | 'Fetch' | 'Other';
+export type RequestOverride = {
+    status?: number;
+    body?: string;
+};
 export type NetworkActivityEventMap = {
     'network-enable': unknown;
     'network-disable': unknown;
@@ -94,5 +98,8 @@ export type NetworkActivityEventMap = {
         requestId: RequestId;
         body: string | null;
     };
+    'set-overrides': {
+        overrides: [string, RequestOverride][];
+    };
 } & WebSocketEventMap & SSEEventMap;
 export type NetworkActivityDevToolsClient = RozeniteDevToolsClient<NetworkActivityEventMap>;

package/dist/src/ui/components/CodeEditor.d.ts

@@ -0,0 +1,5 @@
+export type CodeEditorProps = {
+    data: string | undefined;
+    onInput?: (event: React.FormEvent<HTMLPreElement>) => void;
+};
+export declare const CodeEditor: import('react').ForwardRefExoticComponent<CodeEditorProps & import('react').RefAttributes<HTMLPreElement>>;

package/dist/src/ui/components/OverrideResponse.d.ts

@@ -0,0 +1,8 @@
+import { HttpNetworkEntry } from '../state/model';
+import { RequestOverride } from '../../shared/client';
+export type OverrideResponseProps = {
+    selectedRequest: HttpNetworkEntry;
+    initialOverride: RequestOverride | undefined;
+    onClear: () => void;
+};
+export declare const OverrideResponse: ({ selectedRequest, initialOverride, onClear, }: OverrideResponseProps) => import("react/jsx-runtime").JSX.Element | undefined;

package/dist/src/ui/components/RequestList.d.ts

@@ -1,5 +1,5 @@
 import { ProcessedRequest } from '../state/model';
-import { RequestId } from '../../shared/client';
+import { RequestId, RequestOverride } from '../../shared/client';
 import { FilterState } from './FilterBar';
 type NetworkRequest = {
     id: RequestId;
@@ -12,6 +12,7 @@ type NetworkRequest = {
     time: string;
     type: string;
     startTime: string;
+    hasOverride: boolean;
 };
 declare const formatSize: (bytes: number) => string;
 declare const formatDuration: (duration: number) => string;
@@ -21,7 +22,7 @@ declare const extractDomainAndPath: (url: string) => {
     path: string;
 };
 declare const generateName: (url: string) => string;
-declare const processNetworkRequests: (processedRequests: ProcessedRequest[]) => NetworkRequest[];
+declare const processNetworkRequests: (processedRequests: ProcessedRequest[], overrides: Map<string, RequestOverride>) => NetworkRequest[];
 export type RequestListProps = {
     filter: FilterState;
 };

package/dist/src/ui/components/Section.d.ts

@@ -3,5 +3,6 @@ export type SectionProps = {
     title: string;
     children: React.ReactNode;
     collapsible?: boolean;
+    action?: React.ReactNode;
 };
-export declare const Section: ({ title, children, collapsible, }: SectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Section: ({ title, children, collapsible, action, }: SectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/state/hooks.d.ts

@@ -9,9 +9,12 @@ export declare const useNetworkActivityActions: () => {
     setRecording: (isRecording: boolean) => void;
     setSelectedRequest: (requestId: import('../../shared/client').RequestId | null) => void;
     clearRequests: () => void;
+    addOverride: (requestUrl: string, override: import('../../shared/client').RequestOverride) => void;
+    clearOverride: (requestUrl: string) => void;
 };
 export declare const useNetworkActivityClientManagement: () => {
     setupClient: (client: import('../../shared/client').NetworkActivityDevToolsClient) => void;
     cleanupClient: () => void;
 };
 export declare const useWebSocketMessages: (requestId: string) => import('./model').WebSocketMessage[];
+export declare const useOverrides: () => Map<string, import('../../shared/client').RequestOverride>;

package/dist/src/ui/state/store.d.ts

@@ -1,10 +1,11 @@
-import { NetworkActivityDevToolsClient, NetworkActivityEventMap, RequestId } from '../../shared/client';
+import { NetworkActivityDevToolsClient, NetworkActivityEventMap, RequestOverride, RequestId } from '../../shared/client';
 import { NetworkEntry, WebSocketMessage } from './model';
 export interface NetworkActivityState {
     isRecording: boolean;
     selectedRequestId: RequestId | null;
     networkEntries: Map<RequestId, NetworkEntry>;
     websocketMessages: Map<RequestId, WebSocketMessage[]>;
+    overrides: Map<string, RequestOverride>;
     _unsubscribeFunctions?: Array<{
         remove: () => void;
     }>;
@@ -13,6 +14,8 @@ export interface NetworkActivityState {
         setRecording: (isRecording: boolean) => void;
         setSelectedRequest: (requestId: RequestId | null) => void;
         clearRequests: () => void;
+        addOverride: (requestUrl: string, override: RequestOverride) => void;
+        clearOverride: (requestUrl: string) => void;
     };
     handleEvent: <K extends keyof NetworkActivityEventMap>(eventType: K, data: NetworkActivityEventMap[K]) => void;
     client: {
@@ -20,5 +23,25 @@ export interface NetworkActivityState {
         cleanupClient: () => void;
     };
 }
-export declare const createNetworkActivityStore: () => import('zustand').StoreApi<NetworkActivityState>;
-export declare const store: import('zustand').StoreApi<NetworkActivityState>;
+export declare const createNetworkActivityStore: () => Omit<import('zustand').StoreApi<NetworkActivityState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import('zustand/middleware').PersistOptions<NetworkActivityState, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: NetworkActivityState) => void) => () => void;
+        onFinishHydration: (fn: (state: NetworkActivityState) => void) => () => void;
+        getOptions: () => Partial<import('zustand/middleware').PersistOptions<NetworkActivityState, unknown>>;
+    };
+};
+export declare const store: Omit<import('zustand').StoreApi<NetworkActivityState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import('zustand/middleware').PersistOptions<NetworkActivityState, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: NetworkActivityState) => void) => () => void;
+        onFinishHydration: (fn: (state: NetworkActivityState) => void) => () => void;
+        getOptions: () => Partial<import('zustand/middleware').PersistOptions<NetworkActivityState, unknown>>;
+    };
+};

package/dist/useNetworkActivityDevTools.cjs

@@ -116,6 +116,7 @@ let sendCallback;
 let requestHeaderCallback;
 let headerReceivedCallback;
 let responseCallback;
+let overrideCallback;
 let isInterceptorEnabled$1 = false;
 const XHRInterceptor = {
   /**
@@ -148,6 +149,12 @@ const XHRInterceptor = {
   setRequestHeaderCallback(callback) {
     requestHeaderCallback = callback;
   },
+  /**
+   * Invoked before XMLHttpRequest.send(...) is called.
+   */
+  setOverrideCallback(callback) {
+    overrideCallback = callback;
+  },
   isInterceptorEnabled() {
     return isInterceptorEnabled$1;
   },
@@ -171,6 +178,9 @@ const XHRInterceptor = {
       if (sendCallback) {
         sendCallback(data, this);
       }
+      if (overrideCallback) {
+        overrideCallback(this);
+      }
       if (this.addEventListener) {
         this.addEventListener(
           "readystatechange",
@@ -231,6 +241,7 @@ const XHRInterceptor = {
     sendCallback = null;
     headerReceivedCallback = null;
     requestHeaderCallback = null;
+    overrideCallback = null;
   }
 };
 const getStringSizeInBytes = (value) => {
@@ -259,7 +270,28 @@ const isBlob = (value) => value instanceof Blob;
 const isArrayBuffer = (value) => value instanceof ArrayBuffer || ArrayBuffer.isView(value);
 const isFormData = (value) => value instanceof FormData;
 const isNullOrUndefined = (value) => value === null || value === void 0;
+const createOverridesRegistry = () => {
+  let overrides = /* @__PURE__ */ new Map();
+  const setOverrides = (newOverrides) => {
+    overrides = new Map(newOverrides);
+  };
+  const getOverrideForUrl = (url) => {
+    return overrides.get(url);
+  };
+  return {
+    setOverrides,
+    getOverrideForUrl
+  };
+};
+let registryInstance = null;
+const getOverridesRegistry = () => {
+  if (!registryInstance) {
+    registryInstance = createOverridesRegistry();
+  }
+  return registryInstance;
+};
 const networkRequestsRegistry = getNetworkRequestsRegistry();
+const overridesRegistry$1 = getOverridesRegistry();
 const getBinaryPostData = (body) => ({
   type: "binary",
   value: {
@@ -449,9 +481,45 @@ const getNetworkInspector = (pluginClient) => {
       });
     });
   };
+  const handleRequestOverride = (request) => {
+    const override = overridesRegistry$1.getOverrideForUrl(
+      request._url
+    );
+    if (!override) {
+      return;
+    }
+    request.addEventListener("readystatechange", () => {
+      if (override.body !== void 0) {
+        Object.defineProperty(request, "responseType", {
+          writable: true
+        });
+        Object.defineProperty(request, "response", {
+          writable: true
+        });
+        Object.defineProperty(request, "responseText", {
+          writable: true
+        });
+        const contentType = getContentType(request);
+        if (contentType === "application/json") {
+          request.responseType = "json";
+        } else if (contentType === "text/plain") {
+          request.responseType = "text";
+        }
+        request.response = override.body;
+        request.responseText = override.body;
+      }
+      if (override.status !== void 0) {
+        Object.defineProperty(request, "status", {
+          writable: true
+        });
+        request.status = override.status;
+      }
+    });
+  };
   const enable = () => {
     XHRInterceptor.disableInterception();
     XHRInterceptor.setSendCallback(handleRequestSend);
+    XHRInterceptor.setOverrideCallback(handleRequestOverride);
     XHRInterceptor.enableInterception();
   };
   const disable = () => {
@@ -857,6 +925,7 @@ const validateConfig = (config) => {
     throw new Error("SSE inspector requires HTTP inspector to be enabled.");
   }
 };
+const overridesRegistry = getOverridesRegistry();
 const useNetworkActivityDevTools = (config = DEFAULT_CONFIG) => {
   var _a, _b, _c;
   const isRecordingEnabledRef = react.useRef(false);
@@ -882,6 +951,9 @@ const useNetworkActivityDevTools = (config = DEFAULT_CONFIG) => {
       }),
       client.onMessage("network-disable", () => {
         isRecordingEnabledRef.current = false;
+      }),
+      client.onMessage("set-overrides", (data) => {
+        overridesRegistry.setOverrides(data.overrides);
       })
     ];
     return () => {

package/dist/useNetworkActivityDevTools.js

@@ -112,6 +112,7 @@ let sendCallback;
 let requestHeaderCallback;
 let headerReceivedCallback;
 let responseCallback;
+let overrideCallback;
 let isInterceptorEnabled$1 = false;
 const XHRInterceptor = {
   /**
@@ -144,6 +145,12 @@ const XHRInterceptor = {
   setRequestHeaderCallback(callback) {
     requestHeaderCallback = callback;
   },
+  /**
+   * Invoked before XMLHttpRequest.send(...) is called.
+   */
+  setOverrideCallback(callback) {
+    overrideCallback = callback;
+  },
   isInterceptorEnabled() {
     return isInterceptorEnabled$1;
   },
@@ -167,6 +174,9 @@ const XHRInterceptor = {
       if (sendCallback) {
         sendCallback(data, this);
       }
+      if (overrideCallback) {
+        overrideCallback(this);
+      }
       if (this.addEventListener) {
         this.addEventListener(
           "readystatechange",
@@ -227,6 +237,7 @@ const XHRInterceptor = {
     sendCallback = null;
     headerReceivedCallback = null;
     requestHeaderCallback = null;
+    overrideCallback = null;
   }
 };
 const getStringSizeInBytes = (value) => {
@@ -255,7 +266,28 @@ const isBlob = (value) => value instanceof Blob;
 const isArrayBuffer = (value) => value instanceof ArrayBuffer || ArrayBuffer.isView(value);
 const isFormData = (value) => value instanceof FormData;
 const isNullOrUndefined = (value) => value === null || value === void 0;
+const createOverridesRegistry = () => {
+  let overrides = /* @__PURE__ */ new Map();
+  const setOverrides = (newOverrides) => {
+    overrides = new Map(newOverrides);
+  };
+  const getOverrideForUrl = (url) => {
+    return overrides.get(url);
+  };
+  return {
+    setOverrides,
+    getOverrideForUrl
+  };
+};
+let registryInstance = null;
+const getOverridesRegistry = () => {
+  if (!registryInstance) {
+    registryInstance = createOverridesRegistry();
+  }
+  return registryInstance;
+};
 const networkRequestsRegistry = getNetworkRequestsRegistry();
+const overridesRegistry$1 = getOverridesRegistry();
 const getBinaryPostData = (body) => ({
   type: "binary",
   value: {
@@ -445,9 +477,45 @@ const getNetworkInspector = (pluginClient) => {
       });
     });
   };
+  const handleRequestOverride = (request) => {
+    const override = overridesRegistry$1.getOverrideForUrl(
+      request._url
+    );
+    if (!override) {
+      return;
+    }
+    request.addEventListener("readystatechange", () => {
+      if (override.body !== void 0) {
+        Object.defineProperty(request, "responseType", {
+          writable: true
+        });
+        Object.defineProperty(request, "response", {
+          writable: true
+        });
+        Object.defineProperty(request, "responseText", {
+          writable: true
+        });
+        const contentType = getContentType(request);
+        if (contentType === "application/json") {
+          request.responseType = "json";
+        } else if (contentType === "text/plain") {
+          request.responseType = "text";
+        }
+        request.response = override.body;
+        request.responseText = override.body;
+      }
+      if (override.status !== void 0) {
+        Object.defineProperty(request, "status", {
+          writable: true
+        });
+        request.status = override.status;
+      }
+    });
+  };
   const enable = () => {
     XHRInterceptor.disableInterception();
     XHRInterceptor.setSendCallback(handleRequestSend);
+    XHRInterceptor.setOverrideCallback(handleRequestOverride);
     XHRInterceptor.enableInterception();
   };
   const disable = () => {
@@ -853,6 +921,7 @@ const validateConfig = (config) => {
     throw new Error("SSE inspector requires HTTP inspector to be enabled.");
   }
 };
+const overridesRegistry = getOverridesRegistry();
 const useNetworkActivityDevTools = (config = DEFAULT_CONFIG) => {
   var _a, _b, _c;
   const isRecordingEnabledRef = useRef(false);
@@ -878,6 +947,9 @@ const useNetworkActivityDevTools = (config = DEFAULT_CONFIG) => {
       }),
       client.onMessage("network-disable", () => {
         isRecordingEnabledRef.current = false;
+      }),
+      client.onMessage("set-overrides", (data) => {
+        overridesRegistry.setOverrides(data.overrides);
       })
     ];
     return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/network-activity-plugin",
-  "version": "1.0.0-alpha.15",
+  "version": "1.0.0-alpha.16",
   "description": "Network Activity for Rozenite.",
   "type": "module",
   "main": "./dist/react-native.cjs",
@@ -8,7 +8,7 @@
   "types": "./dist/react-native.d.ts",
   "dependencies": {
     "nanoevents": "^9.1.0",
-    "@rozenite/plugin-bridge": "1.0.0-alpha.15"
+    "@rozenite/plugin-bridge": "1.0.0-alpha.16"
   },
   "devDependencies": {
     "@floating-ui/react": "^0.26.0",
@@ -36,8 +36,8 @@
     "zustand": "^5.0.6",
     "@types/react": "~18.3.23",
     "@types/react-dom": "~18.3.1",
-    "@rozenite/vite-plugin": "1.0.0-alpha.15",
-    "rozenite": "1.0.0-alpha.15"
+    "@rozenite/vite-plugin": "1.0.0-alpha.16",
+    "rozenite": "1.0.0-alpha.16"
   },
   "peerDependencies": {
     "react-native-sse": "*"

package/src/react-native/http/network-inspector.ts

@@ -21,8 +21,10 @@ import {
   isFormData,
   isNullOrUndefined,
 } from '../../utils/typeChecks';
+import { getOverridesRegistry } from './overrides-registry';
 
 const networkRequestsRegistry = getNetworkRequestsRegistry();
+const overridesRegistry = getOverridesRegistry();
 
 const getBinaryPostData = (body: Blob): RequestBinaryPostData => ({
   type: 'binary',
@@ -281,9 +283,57 @@ export const getNetworkInspector = (
     });
   };
 
+  const handleRequestOverride = (request: XMLHttpRequest): void => {
+    const override = overridesRegistry.getOverrideForUrl(
+      request._url as string
+    );
+
+    if (!override) {
+      return;
+    }
+
+    request.addEventListener('readystatechange', () => {
+      if (override.body !== undefined) {
+        Object.defineProperty(request, 'responseType', {
+          writable: true,
+        });
+
+        Object.defineProperty(request, 'response', {
+          writable: true,
+        });
+        Object.defineProperty(request, 'responseText', {
+          writable: true,
+        });
+
+        const contentType = getContentType(request);
+
+        if (contentType === 'application/json') {
+          request.responseType = 'json';
+        } else if (contentType === 'text/plain') {
+          request.responseType = 'text';
+        }
+
+        // @ts-expect-error - Mocking response
+        request.response = override.body;
+        // @ts-expect-error - Mocking responseText
+        request.responseText = override.body;
+      }
+
+      if (override.status !== undefined) {
+        Object.defineProperty(request, 'status', {
+          writable: true,
+        });
+
+        // @ts-expect-error - Mocking status
+        request.status = override.status;
+      }
+    });
+  };
+
   const enable = () => {
     XHRInterceptor.disableInterception();
     XHRInterceptor.setSendCallback(handleRequestSend);
+    XHRInterceptor.setOverrideCallback(handleRequestOverride);
     XHRInterceptor.enableInterception();
   };
 

package/src/react-native/http/overrides-registry.ts

@@ -0,0 +1,32 @@
+import { RequestOverride } from '../../shared/client';
+
+export type OverridesRegistry = {
+  setOverrides: (newOverrides: [string, RequestOverride][]) => void;
+  getOverrideForUrl: (url: string) => RequestOverride | undefined;
+};
+
+const createOverridesRegistry = (): OverridesRegistry => {
+  let overrides = new Map<string, RequestOverride>();
+
+  const setOverrides = (newOverrides: [string, RequestOverride][]) => {
+    overrides = new Map(newOverrides);
+  };
+
+  const getOverrideForUrl = (url: string) => {
+    return overrides.get(url);
+  };
+
+  return {
+    setOverrides,
+    getOverrideForUrl,
+  };
+};
+
+let registryInstance: OverridesRegistry | null = null;
+
+export const getOverridesRegistry = (): OverridesRegistry => {
+  if (!registryInstance) {
+    registryInstance = createOverridesRegistry();
+  }
+  return registryInstance;
+};

package/src/react-native/http/xhr-interceptor.ts

@@ -49,11 +49,14 @@ type XHRInterceptorResponseCallback = (
   request: XMLHttpRequest
 ) => void;
 
+type XHRInterceptorOverrideCallback = (request: XMLHttpRequest) => void;
+
 let openCallback: XHRInterceptorOpenCallback | null;
 let sendCallback: XHRInterceptorSendCallback | null;
 let requestHeaderCallback: XHRInterceptorRequestHeaderCallback | null;
 let headerReceivedCallback: XHRInterceptorHeaderReceivedCallback | null;
 let responseCallback: XHRInterceptorResponseCallback | null;
+let overrideCallback: XHRInterceptorOverrideCallback | null;
 
 let isInterceptorEnabled = false;
 
@@ -100,6 +103,13 @@ export const XHRInterceptor = {
     requestHeaderCallback = callback;
   },
 
+  /**
+   * Invoked before XMLHttpRequest.send(...) is called.
+   */
+  setOverrideCallback(callback: XHRInterceptorOverrideCallback) {
+    overrideCallback = callback;
+  },
+
   isInterceptorEnabled(): boolean {
     return isInterceptorEnabled;
   },
@@ -143,6 +153,9 @@ export const XHRInterceptor = {
       if (sendCallback) {
         sendCallback(data, this);
       }
+      if (overrideCallback) {
+        overrideCallback(this);
+      }
       if (this.addEventListener) {
         this.addEventListener(
           'readystatechange',
@@ -210,5 +223,6 @@ export const XHRInterceptor = {
     sendCallback = null;
     headerReceivedCallback = null;
     requestHeaderCallback = null;
+    overrideCallback = null;
   },
 };

package/src/react-native/useNetworkActivityDevTools.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { getNetworkInspector } from './http/network-inspector';
+import { getOverridesRegistry } from './http/overrides-registry';
 import { NetworkActivityEventMap } from '../shared/client';
 import { getWebSocketInspector } from './websocket/websocket-inspector';
 import { WebSocketEventMap } from '../shared/websocket-events';
@@ -13,6 +14,8 @@ import {
   validateConfig,
 } from './config';
 
+const overridesRegistry = getOverridesRegistry();
+
 export const useNetworkActivityDevTools = (
   config: NetworkActivityDevToolsConfig = DEFAULT_CONFIG
 ) => {
@@ -46,6 +49,9 @@ export const useNetworkActivityDevTools = (
       client.onMessage('network-disable', () => {
         isRecordingEnabledRef.current = false;
       }),
+      client.onMessage('set-overrides', (data) => {
+        overridesRegistry.setOverrides(data.overrides);
+      }),
     ];
 
     return () => {

package/src/shared/client.ts

@@ -84,6 +84,11 @@ export type Initiator = {
 
 export type ResourceType = 'XHR' | 'Fetch' | 'Other';
 
+export type RequestOverride = {
+  status?: number;
+  body?: string;
+};
+
 export type NetworkActivityEventMap = {
   // Control events
   'network-enable': unknown;
@@ -129,6 +134,10 @@ export type NetworkActivityEventMap = {
     requestId: RequestId;
     body: string | null;
   };
+
+  'set-overrides': {
+    overrides: [string, RequestOverride][];
+  };
 } & WebSocketEventMap &
   SSEEventMap;
 

package/src/ui/components/CodeEditor.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+export type CodeEditorProps = {
+  data: string | undefined;
+  onInput?: (event: React.FormEvent<HTMLPreElement>) => void;
+};
+
+export const CodeEditor = forwardRef<HTMLPreElement, CodeEditorProps>(
+  ({ data, onInput }, ref) => {
+    return (
+      <pre
+        ref={ref}
+        contentEditable
+        suppressContentEditableWarning
+        className={
+          'w-full text-sm font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-3 rounded-md border border-gray-700 overflow-x-auto wrap-anywhere ring-offset-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+        }
+        onInput={onInput}
+      >
+        {data}
+      </pre>
+    );
+  }
+);
+
+CodeEditor.displayName = 'CodeEditor';