@rozenite/network-activity-plugin 1.0.0-alpha.1

package/dist/assets/panel-NCVczPb1.css

@@ -0,0 +1 @@
+._container_1098q_1{height:100vh;display:flex;flex-direction:column;font-family:system-ui,-apple-system,sans-serif}._mainContent_1098q_8{flex:1;display:flex;overflow:hidden;min-height:0}._networkListContainer_1098q_15{width:60%;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;min-width:0}._listContent_1098q_23{flex:1}._detailsContainer_1098q_27{width:40%;display:flex;flex-direction:column;min-width:0}._headerStatus_1098q_34{width:60px;text-align:center;flex-shrink:0}._headerMethod_1098q_40{width:80px;text-align:center;flex-shrink:0}._headerName_1098q_46{flex:1;min-width:0}._headerTime_1098q_51,._headerSize_1098q_57{width:80px;text-align:right;flex-shrink:0}._button_7nfhi_2{border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:all .2s ease}._button_7nfhi_2:disabled{opacity:.6;cursor:not-allowed}._buttonSmall_7nfhi_15{font-size:12px;padding:4px 8px}._buttonMedium_7nfhi_20{font-size:14px;padding:8px 16px}._buttonLarge_7nfhi_25{font-size:16px;padding:12px 24px}._buttonPrimary_7nfhi_30{background-color:#007aff;color:#fff}._buttonSecondary_7nfhi_35{background-color:#6c757d;color:#fff}._buttonDanger_7nfhi_40{background-color:#dc3545;color:#fff}._buttonSuccess_7nfhi_45{background-color:#28a745;color:#fff}._card_7nfhi_51{background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000001a}._badge_7nfhi_60{background-color:#007aff;color:#fff;padding:2px 6px;border-radius:12px;font-size:11px;font-weight:500;display:inline-block}._toolbar_7nfhi_71{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid #e0e0e0;background-color:#f8f9fa}._panelHeader_7nfhi_80{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid #e0e0e0;background-color:#f8f9fa;font-size:12px;font-weight:700;color:#333}._emptyState_7nfhi_92{display:flex;align-items:center;justify-content:center;padding:40px 20px;color:#666;font-size:14px;text-align:center}._loadingSpinner_7nfhi_103{border:2px solid #e0e0e0;border-top:2px solid #007AFF;border-radius:50%;animation:_spin_7nfhi_1 1s linear infinite}._tooltipReference_7nfhi_111{display:inline-block}._tooltipFloating_7nfhi_115{padding:6px 10px;border-radius:6px;font-size:12px;white-space:nowrap;z-index:1000;max-width:300px;word-break:break-all;box-shadow:0 4px 12px #0000004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:system-ui,-apple-system,sans-serif;line-height:1.4}._tooltipDefault_7nfhi_130{background-color:#333;color:#fff;border:1px solid rgba(255,255,255,.1)}._tooltipInfo_7nfhi_136{background-color:#06c;color:#fff;border:1px solid rgba(255,255,255,.2)}._tooltipWarning_7nfhi_142{background-color:#ff8c00;color:#fff;border:1px solid rgba(255,255,255,.2)}._tooltipError_7nfhi_148{background-color:#dc3545;color:#fff;border:1px solid rgba(255,255,255,.2)}@keyframes _spin_7nfhi_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._recordingButton_1dfw3_1{margin-right:8px}._requestCount_1dfw3_5{margin-left:auto;font-size:12px;color:#666}._container_1s7a9_1{height:100%;overflow:auto}._virtualContainer_1s7a9_6{height:100%;width:100%;position:relative}._virtualItem_1s7a9_12{position:absolute;top:0;left:0;width:100%;height:60px}._listItem_1s7a9_20{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid #e0e0e0;background-color:#fff;cursor:pointer;font-size:12px;font-family:monospace;height:60px;box-sizing:border-box;min-width:0}._listItemSelected_1s7a9_34{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid #e0e0e0;background-color:#f5f5f5;cursor:pointer;font-size:12px;font-family:monospace;height:60px;box-sizing:border-box;min-width:0}._statusColumn_1s7a9_48{width:60px;text-align:center;flex-shrink:0}._methodColumn_1s7a9_54{width:80px;text-align:center;flex-shrink:0}._urlColumn_1s7a9_60{flex:1;overflow:hidden;min-width:0}._domainText_1s7a9_66{font-weight:700;color:#333;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._pathText_1s7a9_75{color:#666;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._fullUrlText_1s7a9_83{color:#999;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}._durationColumn_1s7a9_92{width:80px;text-align:right;margin-right:8px;flex-shrink:0}._sizeColumn_1s7a9_99{width:80px;text-align:right;flex-shrink:0}._columnText_1s7a9_105{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}._emptyContainer_1s7a9_112{height:100%;display:flex;align-items:center;justify-content:center}._emptyText_1s7a9_119{color:#666;font-size:14px}._container_felnd_1{padding:16px;height:100%;overflow:auto}._card_felnd_7{margin-bottom:20px}._cardTitle_felnd_11{margin:0 0 8px;font-size:16px}._cardTitleError_felnd_16{margin:0 0 8px;font-size:16px;color:#f44336}._infoText_felnd_22{font-size:12px;font-family:monospace}._infoRow_felnd_27,._infoRowUrl_felnd_32{margin-bottom:4px;word-break:break-all}._urlText_felnd_37{cursor:help;border-bottom:1px dotted #666}._headersContainer_felnd_42{font-size:12px;font-family:monospace;background-color:#f5f5f5;padding:8px;border-radius:4px}._headerRow_felnd_50{margin-bottom:2px;word-break:break-all}._headerValue_felnd_55{word-break:break-all}

package/dist/panel.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>panel Panel</title>
+    <style>
+      html,
+      body {
+        height: 100%;
+      }
+
+      body {
+        overflow: hidden;
+      }
+
+      #root {
+        display: flex;
+        height: 100%;
+      }
+    </style>
+    <script>
+      var __ROZENITE_PANEL__ = true;
+    </script>
+    <script type="module" crossorigin src="./assets/panel-C5YgUUj5.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/panel-NCVczPb1.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/dist/react-native.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),k=require("@rozenite/plugin-bridge");let g=0;function S(){return(++g).toString()}function i(t){if(t instanceof Headers){const e={};return t.forEach((r,o)=>{e[o]=r}),e}else if(Array.isArray(t)){const e={};return t.forEach(([r,o])=>{e[r]=o}),e}return t}function E(t,e){let r,o,n,s;return typeof t=="string"?(r=t,o=(e==null?void 0:e.method)||"GET",n=i((e==null?void 0:e.headers)||{}),s=(e==null?void 0:e.body)||void 0):t instanceof Request?(r=t.url,o=t.method,n=i(t.headers),s=t.body||void 0):(r=t.toString(),o=(e==null?void 0:e.method)||"GET",n=i((e==null?void 0:e.headers)||{}),s=(e==null?void 0:e.body)||void 0),{url:r,method:o,headers:n,body:s}}const T=()=>{const t=k.useRozeniteDevToolsClient({pluginId:"@rozenite/network-activity-plugin"});return v.useEffect(()=>{if(!t)return;const e=window.fetch.bind(window),r=(o,n)=>{t.send(o,n)};return window.fetch=async function(o,n){const s=S(),c=E(o,n),d=Date.now()/1e3,w=d;r("Network.requestWillBeSent",{requestId:s,loaderId:s,documentURL:"",request:{url:c.url,method:c.method,headers:c.headers,postData:c.body,hasPostData:!!c.body},timestamp:d,wallTime:w,initiator:{type:"script",stack:{callFrames:[{functionName:"fetch",scriptId:"1",url:"",lineNumber:1,columnNumber:1}]}},redirectHasExtraInfo:!1,redirectResponse:null,referrerPolicy:"no-referrer",type:"Fetch",frameId:"1",hasUserGesture:!1}),r("Network.requestWillBeSentExtraInfo",{requestId:s,blockedCookies:[],headers:c.headers,connectTiming:{requestTime:d},clientSecurityState:{initiatorIsSecureContext:!1,initiatorIPAddressSpace:"Public",privateNetworkRequestPolicy:"Allow"},siteHasCookieInOtherPartition:!1});let a;try{a=await e(o,n);const l={};a.headers.forEach((y,m)=>{l[m]=y});const p=a.headers.get("content-type")||"",h=a.headers.get("content-length"),u=h?parseInt(h,10):0;let f=u;try{f=(await a.clone().arrayBuffer()).byteLength}catch{f=u}return r("Network.responseReceived",{requestId:s,loaderId:s,timestamp:Date.now()/1e3,type:"Fetch",response:{url:c.url,status:a.status,statusText:a.statusText,headers:l,mimeType:p,requestHeaders:c.headers,requestHeadersText:void 0,connectionReused:!1,connectionId:0,remoteIPAddress:void 0,remotePort:void 0,protocol:void 0,securityState:"unknown",encodedDataLength:u,timing:{requestTime:d,proxyStart:-1,proxyEnd:-1,dnsStart:-1,dnsEnd:-1,connectStart:-1,connectEnd:-1,sslStart:-1,sslEnd:-1,workerStart:-1,workerReadyStart:-1,workerReadyEnd:-1,sendStart:d,sendEnd:d,pushStart:-1,pushEnd:-1,receiveHeadersEnd:Date.now()/1e3},responseTime:Date.now()/1e3,fromDiskCache:!1,fromServiceWorker:!1,fromPrefetchCache:!1,encodedBodySize:u,decodedBodySize:f,headersText:void 0,serviceWorkerResponseSource:void 0,responseSource:"network",statusCode:a.status},hasExtraInfo:!1}),r("Network.loadingFinished",{requestId:s,timestamp:Date.now()/1e3,encodedDataLength:u,shouldReportCorbBlocking:!1}),a}catch(l){throw r("Network.loadingFailed",{requestId:s,timestamp:Date.now()/1e3,type:"Fetch",errorText:l instanceof Error?l.message:"Unknown error",canceled:!1,blockedReason:void 0}),l}},()=>{window.fetch=e}},[t]),t};exports.useNetworkActivityDevTools=void 0;process.env.NODE_ENV!=="production"?exports.useNetworkActivityDevTools=T:exports.useNetworkActivityDevTools=()=>null;

package/dist/react-native.d.ts

@@ -0,0 +1,5 @@
+import { useNetworkActivityDevTools as useNetworkActivityDevTools_2 } from './src/react-native/useNetworkActivityDevTools';
+
+export declare let useNetworkActivityDevTools: useNetworkActivityDevTools_2;
+
+export { }

package/dist/react-native.js

@@ -0,0 +1,174 @@
+import { useEffect as v } from "react";
+import { useRozeniteDevToolsClient as S } from "@rozenite/plugin-bridge";
+let E = 0;
+function g() {
+  return (++E).toString();
+}
+function h(t) {
+  if (t instanceof Headers) {
+    const e = {};
+    return t.forEach((r, o) => {
+      e[o] = r;
+    }), e;
+  } else if (Array.isArray(t)) {
+    const e = {};
+    return t.forEach(([r, o]) => {
+      e[r] = o;
+    }), e;
+  }
+  return t;
+}
+function I(t, e) {
+  let r, o, n, s;
+  return typeof t == "string" ? (r = t, o = (e == null ? void 0 : e.method) || "GET", n = h((e == null ? void 0 : e.headers) || {}), s = (e == null ? void 0 : e.body) || void 0) : t instanceof Request ? (r = t.url, o = t.method, n = h(t.headers), s = t.body || void 0) : (r = t.toString(), o = (e == null ? void 0 : e.method) || "GET", n = h((e == null ? void 0 : e.headers) || {}), s = (e == null ? void 0 : e.body) || void 0), { url: r, method: o, headers: n, body: s };
+}
+const T = () => {
+  const t = S({
+    pluginId: "@rozenite/network-activity-plugin"
+  });
+  return v(() => {
+    if (!t)
+      return;
+    const e = window.fetch.bind(window), r = (o, n) => {
+      t.send(o, n);
+    };
+    return window.fetch = async function(o, n) {
+      const s = g(), d = I(o, n), c = Date.now() / 1e3, w = c;
+      r("Network.requestWillBeSent", {
+        requestId: s,
+        loaderId: s,
+        documentURL: "",
+        request: {
+          url: d.url,
+          method: d.method,
+          headers: d.headers,
+          postData: d.body,
+          hasPostData: !!d.body
+        },
+        timestamp: c,
+        wallTime: w,
+        initiator: {
+          type: "script",
+          stack: {
+            callFrames: [
+              {
+                functionName: "fetch",
+                scriptId: "1",
+                url: "",
+                lineNumber: 1,
+                columnNumber: 1
+              }
+            ]
+          }
+        },
+        redirectHasExtraInfo: !1,
+        redirectResponse: null,
+        referrerPolicy: "no-referrer",
+        type: "Fetch",
+        frameId: "1",
+        hasUserGesture: !1
+      }), r("Network.requestWillBeSentExtraInfo", {
+        requestId: s,
+        blockedCookies: [],
+        headers: d.headers,
+        connectTiming: {
+          requestTime: c
+        },
+        clientSecurityState: {
+          initiatorIsSecureContext: !1,
+          initiatorIPAddressSpace: "Public",
+          privateNetworkRequestPolicy: "Allow"
+        },
+        siteHasCookieInOtherPartition: !1
+      });
+      let a;
+      try {
+        a = await e(o, n);
+        const l = {};
+        a.headers.forEach((m, y) => {
+          l[y] = m;
+        });
+        const k = a.headers.get("content-type") || "", i = a.headers.get("content-length"), u = i ? parseInt(i, 10) : 0;
+        let f = u;
+        try {
+          f = (await a.clone().arrayBuffer()).byteLength;
+        } catch {
+          f = u;
+        }
+        return r("Network.responseReceived", {
+          requestId: s,
+          loaderId: s,
+          timestamp: Date.now() / 1e3,
+          type: "Fetch",
+          response: {
+            url: d.url,
+            status: a.status,
+            statusText: a.statusText,
+            headers: l,
+            mimeType: k,
+            requestHeaders: d.headers,
+            requestHeadersText: void 0,
+            connectionReused: !1,
+            connectionId: 0,
+            remoteIPAddress: void 0,
+            remotePort: void 0,
+            protocol: void 0,
+            securityState: "unknown",
+            encodedDataLength: u,
+            timing: {
+              requestTime: c,
+              proxyStart: -1,
+              proxyEnd: -1,
+              dnsStart: -1,
+              dnsEnd: -1,
+              connectStart: -1,
+              connectEnd: -1,
+              sslStart: -1,
+              sslEnd: -1,
+              workerStart: -1,
+              workerReadyStart: -1,
+              workerReadyEnd: -1,
+              sendStart: c,
+              sendEnd: c,
+              pushStart: -1,
+              pushEnd: -1,
+              receiveHeadersEnd: Date.now() / 1e3
+            },
+            responseTime: Date.now() / 1e3,
+            fromDiskCache: !1,
+            fromServiceWorker: !1,
+            fromPrefetchCache: !1,
+            encodedBodySize: u,
+            decodedBodySize: f,
+            headersText: void 0,
+            serviceWorkerResponseSource: void 0,
+            responseSource: "network",
+            statusCode: a.status
+          },
+          hasExtraInfo: !1
+        }), r("Network.loadingFinished", {
+          requestId: s,
+          timestamp: Date.now() / 1e3,
+          encodedDataLength: u,
+          shouldReportCorbBlocking: !1
+        }), a;
+      } catch (l) {
+        throw r("Network.loadingFailed", {
+          requestId: s,
+          timestamp: Date.now() / 1e3,
+          type: "Fetch",
+          errorText: l instanceof Error ? l.message : "Unknown error",
+          canceled: !1,
+          blockedReason: void 0
+        }), l;
+      }
+    }, () => {
+      window.fetch = e;
+    };
+  }, [t]), t;
+};
+let p;
+process.env.NODE_ENV !== "production" ? p = T : p = () => null;
+export {
+  p as useNetworkActivityDevTools
+};

package/dist/rozenite.json

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

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@rozenite/network-activity-plugin",
+  "version": "1.0.0-alpha.1",
+  "description": "Network Activity for Rozenite.",
+  "type": "module",
+  "main": "./dist/react-native.cjs",
+  "module": "./dist/react-native.js",
+  "types": "./dist/react-native.d.ts",
+  "dependencies": {
+    "@tanstack/react-virtual": "^3.0.0",
+    "@floating-ui/react": "^0.26.0",
+    "@rozenite/plugin-bridge": "1.0.0-alpha.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.3",
+    "vite": "^6.0.0",
+    "react": "*",
+    "react-native": "*",
+    "rozenite": "1.0.0-alpha.2",
+    "@rozenite/vite-plugin": "1.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "react": ">= 17.0.0",
+    "react-native": ">= 0.74.0"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "rozenite build",
+    "dev": "rozenite dev"
+  }
+}

package/react-native.ts

@@ -0,0 +1,7 @@
+export let useNetworkActivityDevTools: typeof import('./src/react-native/useNetworkActivityDevTools').useNetworkActivityDevTools;
+
+if (process.env.NODE_ENV !== 'production') {
+  useNetworkActivityDevTools = require('./src/react-native/useNetworkActivityDevTools').useNetworkActivityDevTools;
+} else {
+  useNetworkActivityDevTools = () => null;
+}

package/rozenite.config.ts

@@ -0,0 +1,8 @@
+export default {
+  panels: [
+    {
+      name: 'Network Activity',
+      source: './src/ui/panel.tsx',
+    }
+  ],
+};

package/src/css-modules.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+} 

package/src/react-native/useNetworkActivityDevTools.ts

@@ -0,0 +1,235 @@
+import { useEffect } from 'react';
+import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import { NetworkEventMap } from '../types/network';
+
+let requestCounter = 0;
+
+function generateRequestId() {
+  return (++requestCounter).toString();
+}
+
+// Helper function to convert Headers object to plain object
+function headersToObject(headers: HeadersInit | Record<string, string>): Record<string, string> {
+  if (headers instanceof Headers) {
+    const obj: Record<string, string> = {};
+    headers.forEach((value: string, key: string) => {
+      obj[key] = value;
+    });
+    return obj;
+  } else if (Array.isArray(headers)) {
+    const obj: Record<string, string> = {};
+    headers.forEach(([key, value]) => {
+      obj[key] = value;
+    });
+    return obj;
+  }
+  return headers as Record<string, string>;
+}
+
+// Helper function to get request info from fetch input
+function getRequestInfo(input: RequestInfo | URL, init?: RequestInit) {
+  let url: string;
+  let method: string;
+  let headers: Record<string, string>;
+  let body: unknown;
+
+  if (typeof input === 'string') {
+    url = input;
+    method = init?.method || 'GET';
+    headers = headersToObject(init?.headers || {});
+    body = init?.body || undefined;
+  } else if (input instanceof Request) {
+    url = input.url;
+    method = input.method;
+    headers = headersToObject(input.headers);
+    body = input.body || undefined;
+  } else {
+    // URL object
+    url = input.toString();
+    method = init?.method || 'GET';
+    headers = headersToObject(init?.headers || {});
+    body = init?.body || undefined;
+  }
+
+  return { url, method, headers, body };
+}
+
+export const useNetworkActivityDevTools = () => {
+  const client = useRozeniteDevToolsClient<NetworkEventMap>({
+    pluginId: '@rozenite/network-activity-plugin',
+  });
+
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const originalFetch = window.fetch.bind(window);
+
+    const sendCdpEvent = (method: keyof NetworkEventMap, params: NetworkEventMap[keyof NetworkEventMap]) => {
+      client.send(method, params);
+    };
+
+    window.fetch = async function(input: RequestInfo | URL, init?: RequestInit) {
+      const requestId = generateRequestId();
+      const requestInfo = getRequestInfo(input, init);
+      const timestamp = Date.now() / 1000;
+      const wallTime = timestamp;
+
+      sendCdpEvent('Network.requestWillBeSent', {
+        requestId,
+        loaderId: requestId,
+        documentURL: '',
+        request: {
+          url: requestInfo.url,
+          method: requestInfo.method,
+          headers: requestInfo.headers,
+          postData: requestInfo.body,
+          hasPostData: !!requestInfo.body
+        },
+        timestamp,
+        wallTime,
+        initiator: { 
+          type: 'script',
+          stack: {
+            callFrames: [
+              {
+                functionName: 'fetch',
+                scriptId: '1',
+                url: '',
+                lineNumber: 1,
+                columnNumber: 1
+              }
+            ]
+          }
+        },
+        redirectHasExtraInfo: false,
+        redirectResponse: null,
+        referrerPolicy: 'no-referrer',
+        type: 'Fetch',
+        frameId: '1',
+        hasUserGesture: false
+      });
+
+      sendCdpEvent('Network.requestWillBeSentExtraInfo', {
+        requestId,
+        blockedCookies: [],
+        headers: requestInfo.headers,
+        connectTiming: { 
+          requestTime: timestamp 
+        },
+        clientSecurityState: {
+          initiatorIsSecureContext: false,
+          initiatorIPAddressSpace: 'Public',
+          privateNetworkRequestPolicy: 'Allow'
+        },
+        siteHasCookieInOtherPartition: false
+      });
+
+      let response;
+      try {
+        response = await originalFetch(input, init);
+
+        // Get response headers
+        const responseHeaders: Record<string, string> = {};
+        response.headers.forEach((value: string, key: string) => {
+          responseHeaders[key] = value;
+        });
+
+        const contentType = response.headers.get('content-type') || '';
+        const contentLength = response.headers.get('content-length');
+        const encodedDataLength = contentLength ? parseInt(contentLength, 10) : 0;
+        
+        // Get decoded body size (actual response size)
+        let decodedBodySize = encodedDataLength;
+        try {
+          const responseClone = response.clone();
+          const arrayBuffer = await responseClone.arrayBuffer();
+          decodedBodySize = arrayBuffer.byteLength;
+        } catch {
+          // Fallback to content-length if we can't read the response
+          decodedBodySize = encodedDataLength;
+        }
+
+        sendCdpEvent('Network.responseReceived', {
+          requestId,
+          loaderId: requestId,
+          timestamp: Date.now() / 1000,
+          type: 'Fetch',
+          response: {
+            url: requestInfo.url,
+            status: response.status,
+            statusText: response.statusText,
+            headers: responseHeaders,
+            mimeType: contentType,
+            requestHeaders: requestInfo.headers,
+            requestHeadersText: undefined,
+            connectionReused: false,
+            connectionId: 0,
+            remoteIPAddress: undefined,
+            remotePort: undefined,
+            protocol: undefined,
+            securityState: 'unknown',
+            encodedDataLength,
+            timing: {
+              requestTime: timestamp,
+              proxyStart: -1,
+              proxyEnd: -1,
+              dnsStart: -1,
+              dnsEnd: -1,
+              connectStart: -1,
+              connectEnd: -1,
+              sslStart: -1,
+              sslEnd: -1,
+              workerStart: -1,
+              workerReadyStart: -1,
+              workerReadyEnd: -1,
+              sendStart: timestamp,
+              sendEnd: timestamp,
+              pushStart: -1,
+              pushEnd: -1,
+              receiveHeadersEnd: Date.now() / 1000
+            },
+            responseTime: Date.now() / 1000,
+            fromDiskCache: false,
+            fromServiceWorker: false,
+            fromPrefetchCache: false,
+            encodedBodySize: encodedDataLength,
+            decodedBodySize: decodedBodySize,
+            headersText: undefined,
+            serviceWorkerResponseSource: undefined,
+            responseSource: 'network',
+            statusCode: response.status
+          },
+          hasExtraInfo: false
+        });
+
+        sendCdpEvent('Network.loadingFinished', {
+          requestId,
+          timestamp: Date.now() / 1000,
+          encodedDataLength,
+          shouldReportCorbBlocking: false
+        });
+
+        return response;
+      } catch (err) {
+        sendCdpEvent('Network.loadingFailed', {
+          requestId,
+          timestamp: Date.now() / 1000,
+          type: 'Fetch',
+          errorText: err instanceof Error ? err.message : 'Unknown error',
+          canceled: false,
+          blockedReason: undefined
+        });
+        
+        throw err;
+      }
+    };
+
+    return () => {
+      window.fetch = originalFetch;
+    };
+  }, [client]);
+
+  return client;
+};

package/src/types/network.ts

@@ -0,0 +1,153 @@
+// Types for Chrome DevTools Protocol Network events
+
+export interface NetworkRequest {
+  requestId: string;
+  loaderId: string;
+  documentURL: string;
+  request: {
+    url: string;
+    method: string;
+    headers: Record<string, string>;
+    postData?: string;
+    hasPostData?: boolean;
+  };
+  timestamp: number;
+  wallTime: number;
+  initiator: {
+    type: string;
+    stack?: {
+      callFrames: Array<{
+        functionName: string;
+        scriptId: string;
+        url: string;
+        lineNumber: number;
+        columnNumber: number;
+      }>;
+    };
+  };
+  redirectHasExtraInfo: boolean;
+  redirectResponse?: any;
+  referrerPolicy: string;
+  type: string;
+  frameId: string;
+  hasUserGesture: boolean;
+}
+
+export interface NetworkRequestExtraInfo {
+  requestId: string;
+  blockedCookies: Array<{
+    blockedReasons: string[];
+    cookie: {
+      name: string;
+      value: string;
+      domain: string;
+      path: string;
+      expires: number;
+      size: number;
+      httpOnly: boolean;
+      secure: boolean;
+      session: boolean;
+      sameSite: string;
+    };
+  }>;
+  headers: Record<string, string>;
+  connectTiming: {
+    requestTime: number;
+  };
+  clientSecurityState?: {
+    initiatorIsSecureContext: boolean;
+    initiatorIPAddressSpace: string;
+    privateNetworkRequestPolicy: string;
+  };
+  siteHasCookieInOtherPartition: boolean;
+}
+
+export interface NetworkResponse {
+  requestId: string;
+  loaderId: string;
+  timestamp: number;
+  type: string;
+  response: {
+    url: string;
+    status: number;
+    statusText: string;
+    headers: Record<string, string>;
+    mimeType: string;
+    requestHeaders: Record<string, string>;
+    requestHeadersText?: string;
+    connectionReused: boolean;
+    connectionId: number;
+    remoteIPAddress?: string;
+    remotePort?: number;
+    protocol?: string;
+    securityState: string;
+    encodedDataLength: number;
+    timing?: {
+      requestTime: number;
+      proxyStart: number;
+      proxyEnd: number;
+      dnsStart: number;
+      dnsEnd: number;
+      connectStart: number;
+      connectEnd: number;
+      sslStart: number;
+      sslEnd: number;
+      workerStart: number;
+      workerReadyStart: number;
+      workerReadyEnd: number;
+      sendStart: number;
+      sendEnd: number;
+      pushStart: number;
+      pushEnd: number;
+      receiveHeadersEnd: number;
+    };
+    responseTime: number;
+    fromDiskCache: boolean;
+    fromServiceWorker: boolean;
+    fromPrefetchCache: boolean;
+    encodedBodySize: number;
+    decodedBodySize: number;
+    headersText?: string;
+    serviceWorkerResponseSource?: string;
+    responseSource: string;
+    statusCode: number;
+  };
+  hasExtraInfo: boolean;
+}
+
+export interface NetworkLoadingFinished {
+  requestId: string;
+  timestamp: number;
+  encodedDataLength: number;
+  shouldReportCorbBlocking: boolean;
+}
+
+export interface NetworkLoadingFailed {
+  requestId: string;
+  timestamp: number;
+  type: string;
+  errorText: string;
+  canceled?: boolean;
+  blockedReason?: string;
+}
+
+export interface NetworkEventMap extends Record<string, unknown> {
+  'Network.requestWillBeSent': NetworkRequest;
+  'Network.requestWillBeSentExtraInfo': NetworkRequestExtraInfo;
+  'Network.responseReceived': NetworkResponse;
+  'Network.loadingFinished': NetworkLoadingFinished;
+  'Network.loadingFailed': NetworkLoadingFailed;
+}
+
+export interface NetworkEntry {
+  requestId: string;
+  request: NetworkRequest;
+  extraInfo?: NetworkRequestExtraInfo;
+  response?: NetworkResponse;
+  loadingFinished?: NetworkLoadingFinished;
+  loadingFailed?: NetworkLoadingFailed;
+  status: 'pending' | 'loading' | 'finished' | 'failed';
+  startTime: number;
+  endTime?: number;
+  duration?: number;
+}