@rozenite/network-activity-plugin 1.0.0-alpha.6 → 1.0.0-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/App.html +2 -2
  2. package/dist/assets/{App-Czu6Vt2P.css → App-R2ZMH9wJ.css} +0 -3
  3. package/dist/assets/{App-CIflVb88.js → App-lNMijPJ4.js} +22 -13
  4. package/dist/rozenite.json +1 -1
  5. package/dist/src/shared/client.d.ts +3 -2
  6. package/dist/src/ui/types.d.ts +2 -2
  7. package/dist/src/ui/utils/getHttpHeaderValue.d.ts +2 -0
  8. package/dist/useNetworkActivityDevTools.cjs +13 -3
  9. package/dist/useNetworkActivityDevTools.js +13 -3
  10. package/package.json +4 -4
  11. package/src/react-native/network-inspector.ts +6 -3
  12. package/src/shared/client.ts +4 -2
  13. package/src/ui/components/Badge.tsx +1 -1
  14. package/src/ui/components/Button.tsx +1 -1
  15. package/src/ui/components/Input.tsx +1 -1
  16. package/src/ui/components/RequestList.tsx +2 -1
  17. package/src/ui/components/ScrollArea.tsx +1 -1
  18. package/src/ui/components/Separator.tsx +1 -1
  19. package/src/ui/components/Tabs.tsx +1 -1
  20. package/src/ui/tabs/CookiesTab.tsx +6 -3
  21. package/src/ui/tabs/HeadersTab.tsx +1 -1
  22. package/src/ui/tabs/RequestTab.tsx +23 -21
  23. package/src/ui/tabs/ResponseTab.tsx +4 -2
  24. package/src/ui/tabs/TimingTab.tsx +4 -2
  25. package/src/ui/types.ts +2 -1
  26. package/src/ui/utils/getHttpHeaderValue.ts +14 -0
  27. package/src/ui/views/InspectorView.tsx +4 -4
  28. /package/dist/src/ui/{utils.d.ts → utils/cn.d.ts} +0 -0
  29. /package/src/ui/{utils.ts → utils/cn.ts} +0 -0
package/dist/App.html CHANGED
@@ -22,8 +22,8 @@
22
22
  <script>
23
23
  var __ROZENITE_PANEL__ = true;
24
24
  </script>
25
- <script type="module" crossorigin src="./assets/App-CIflVb88.js"></script>
26
- <link rel="stylesheet" crossorigin href="./assets/App-Czu6Vt2P.css">
25
+ <script type="module" crossorigin src="./assets/App-lNMijPJ4.js"></script>
26
+ <link rel="stylesheet" crossorigin href="./assets/App-R2ZMH9wJ.css">
27
27
  </head>
28
28
  <body>
29
29
  <div id="root"></div>
package/dist/assets/{App-Czu6Vt2P.css → App-R2ZMH9wJ.css} RENAMED
@@ -613,9 +613,6 @@ video {
613
613
  .h-screen {
614
614
  height: 100vh;
615
615
  }
616
- .min-h-0 {
617
- min-height: 0px;
618
- }
619
616
  .w-1\/2 {
620
617
  width: 50%;
621
618
  }
package/dist/assets/{App-CIflVb88.js → App-lNMijPJ4.js} RENAMED
@@ -16551,7 +16551,7 @@ const HeadersTab = ({
16551
16551
  networkEntries,
16552
16552
  getStatusColor: getStatusColor2
16553
16553
  }) => {
16554
- return /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "h-full min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 space-y-4", children: [
16554
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "h-full w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 space-y-4", children: [
16555
16555
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
16556
16556
  /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-medium text-gray-300 mb-2", children: "General" }),
16557
16557
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 text-sm", children: [
@@ -20444,7 +20444,7 @@ const RequestTab = ({ selectedRequest }) => {
20444
20444
  }
20445
20445
  return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-sm font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-3 rounded border border-gray-700 overflow-x-auto", children: data });
20446
20446
  };
20447
- return /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "h-full min-h-0 p-4", children: (selectedRequest == null ? void 0 : selectedRequest.requestBody) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
20447
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "h-full w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4", children: (selectedRequest == null ? void 0 : selectedRequest.requestBody) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
20448
20448
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
20449
20449
  /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-medium text-gray-300 mb-2", children: "Request Body" }),
20450
20450
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm mb-2", children: [
@@ -20453,7 +20453,7 @@ const RequestTab = ({ selectedRequest }) => {
20453
20453
  ] })
20454
20454
  ] }),
20455
20455
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: renderRequestBody() })
20456
- ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-400", children: (selectedRequest == null ? void 0 : selectedRequest.method) === "GET" ? "GET requests don't have a request body" : "No request body for this request" }) });
20456
+ ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-400", children: (selectedRequest == null ? void 0 : selectedRequest.method) === "GET" ? "GET requests don't have a request body" : "No request body for this request" }) }) });
20457
20457
  };
20458
20458
  const ResponseTab = ({
20459
20459
  selectedRequest,
@@ -20527,7 +20527,7 @@ const ResponseTab = ({
20527
20527
  ] })
20528
20528
  ] });
20529
20529
  };
20530
- return /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "h-full min-h-0 p-4", children: renderResponseBody() });
20530
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "h-full w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4", children: renderResponseBody() }) });
20531
20531
  };
20532
20532
  const parseCookieString = (cookieString) => {
20533
20533
  if (!cookieString) return [];
@@ -20586,7 +20586,7 @@ const CookiesTab = ({
20586
20586
  selectedRequest,
20587
20587
  networkEntries
20588
20588
  }) => {
20589
- return /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "h-full min-h-0 p-4", children: (() => {
20589
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "h-full w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4", children: (() => {
20590
20590
  var _a, _b;
20591
20591
  const entry = networkEntries.get(selectedRequest.id);
20592
20592
  if (!entry) {
@@ -20733,7 +20733,7 @@ const CookiesTab = ({
20733
20733
  )) })
20734
20734
  ] })
20735
20735
  ] });
20736
- })() });
20736
+ })() }) });
20737
20737
  };
20738
20738
  const TimingTab = ({
20739
20739
  selectedRequest,
@@ -20756,7 +20756,7 @@ const TimingTab = ({
20756
20756
  const formatTimestamp = (timestamp) => {
20757
20757
  return new Date(timestamp * 1e3).toLocaleTimeString();
20758
20758
  };
20759
- return /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "h-full p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
20759
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "h-full w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
20760
20760
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
20761
20761
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between text-sm", children: [
20762
20762
  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "Start Time" }),
@@ -20775,7 +20775,7 @@ const TimingTab = ({
20775
20775
  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-300", children: "Total Duration" }),
20776
20776
  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-100", children: formatTime(duration) })
20777
20777
  ] }) })
20778
- ] }) });
20778
+ ] }) }) });
20779
20779
  };
20780
20780
  /**
20781
20781
  * table-core
@@ -23536,6 +23536,15 @@ function useReactTable(options) {
23536
23536
  }));
23537
23537
  return tableRef.current;
23538
23538
  }
23539
+ function getHttpHeaderValue(headers, name) {
23540
+ const lowerName = name.toLowerCase();
23541
+ for (const key in headers) {
23542
+ if (key.toLowerCase() === lowerName) {
23543
+ return headers[key];
23544
+ }
23545
+ }
23546
+ return void 0;
23547
+ }
23539
23548
  const formatSize = (bytes) => {
23540
23549
  if (bytes === 0) return "0 B";
23541
23550
  const k = 1024;
@@ -23679,7 +23688,7 @@ const processNetworkEntries = (networkEntries) => {
23679
23688
  initiator: formatInitiator(entry.initiator),
23680
23689
  startTime: formatStartTime(entry.startTime || 0),
23681
23690
  requestBody: ((_c = entry.request) == null ? void 0 : _c.postData) ? {
23682
- type: entry.request.headers["content-type"] || "text/plain",
23691
+ type: getHttpHeaderValue(entry.request.headers, "content-type") || "text/plain",
23683
23692
  data: entry.request.postData
23684
23693
  } : void 0,
23685
23694
  responseBody: entry.responseBody ? {
@@ -24107,8 +24116,8 @@ const InspectorView = ({ client: client2 }) => {
24107
24116
  )
24108
24117
  }
24109
24118
  ),
24110
- /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", className: "flex-1 m-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(RequestTab, { selectedRequest }) }),
24111
- /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "response", className: "flex-1 m-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
24119
+ /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", className: "flex-1 m-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(RequestTab, { selectedRequest }) }),
24120
+ /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "response", className: "flex-1 m-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
24112
24121
  ResponseTab,
24113
24122
  {
24114
24123
  selectedRequest,
@@ -24119,14 +24128,14 @@ const InspectorView = ({ client: client2 }) => {
24119
24128
  }
24120
24129
  }
24121
24130
  ) }),
24122
- /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "cookies", className: "flex-1 m-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
24131
+ /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "cookies", className: "flex-1 m-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
24123
24132
  CookiesTab,
24124
24133
  {
24125
24134
  selectedRequest,
24126
24135
  networkEntries
24127
24136
  }
24128
24137
  ) }),
24129
- /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "timing", className: "flex-1 m-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
24138
+ /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "timing", className: "flex-1 m-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
24130
24139
  TimingTab,
24131
24140
  {
24132
24141
  selectedRequest,
package/dist/rozenite.json CHANGED
@@ -1 +1 @@
1
- {"name":"@rozenite/network-activity-plugin","version":"1.0.0-alpha.5","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/App.html"}]}
1
+ {"name":"@rozenite/network-activity-plugin","version":"1.0.0-alpha.7","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/App.html"}]}
package/dist/src/shared/client.d.ts CHANGED
@@ -1,17 +1,18 @@
1
1
  import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
2
+ export type HttpHeaders = Record<string, string>;
2
3
  export type RequestId = string;
3
4
  export type Timestamp = number;
4
5
  export type Request = {
5
6
  url: string;
6
7
  method: string;
7
- headers: Record<string, string>;
8
+ headers: HttpHeaders;
8
9
  postData?: string;
9
10
  };
10
11
  export type Response = {
11
12
  url: string;
12
13
  status: number;
13
14
  statusText: string;
14
- headers: Record<string, string>;
15
+ headers: HttpHeaders;
15
16
  contentType: string;
16
17
  size: number;
17
18
  responseTime: Timestamp;
package/dist/src/ui/types.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- import { RequestId, Request, Response, Initiator, ResourceType } from '../shared/client';
1
+ import { RequestId, Request, Response, Initiator, ResourceType, HttpHeaders } from '../shared/client';
2
2
  export type NetworkEntry = {
3
3
  requestId: RequestId;
4
4
  url: string;
5
5
  method: string;
6
- headers: Record<string, string>;
6
+ headers: HttpHeaders;
7
7
  postData?: string;
8
8
  status: 'pending' | 'loading' | 'finished' | 'failed';
9
9
  startTime: number;
package/dist/src/ui/utils/getHttpHeaderValue.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { HttpHeaders } from '../../shared/client';
2
+ export declare function getHttpHeaderValue(headers: HttpHeaders, name: string): string | undefined;
package/dist/useNetworkActivityDevTools.cjs CHANGED
@@ -2,6 +2,15 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const react = require("react");
4
4
  const pluginBridge = require("@rozenite/plugin-bridge");
5
+ function getHttpHeaderValue(headers, name) {
6
+ const lowerName = name.toLowerCase();
7
+ for (const key in headers) {
8
+ if (key.toLowerCase() === lowerName) {
9
+ return headers[key];
10
+ }
11
+ }
12
+ return void 0;
13
+ }
5
14
  const REQUEST_TTL = 1e3 * 60 * 5;
6
15
  const getNetworkRequestsRegistry = () => {
7
16
  const registry = /* @__PURE__ */ new Map();
@@ -164,8 +173,9 @@ const networkRequestsRegistry = getNetworkRequestsRegistry();
164
173
  const getContentType = (request) => {
165
174
  const responseHeaders = request.responseHeaders;
166
175
  const responseType = request.responseType;
167
- if (responseHeaders == null ? void 0 : responseHeaders["content-type"]) {
168
- return responseHeaders["content-type"].split(";")[0].trim();
176
+ const contentType = getHttpHeaderValue(responseHeaders || {}, "content-type");
177
+ if (contentType) {
178
+ return contentType.split(";")[0].trim();
169
179
  }
170
180
  switch (responseType) {
171
181
  case "arraybuffer":
@@ -262,7 +272,7 @@ const getNetworkInspector = (pluginClient) => {
262
272
  url: request._url,
263
273
  status: request.status,
264
274
  statusText: request.statusText,
265
- headers: request.responseHeaders,
275
+ headers: request.responseHeaders || {},
266
276
  contentType: getContentType(request),
267
277
  size: getResponseSize(request),
268
278
  responseTime: Date.now() / 1e3
package/dist/useNetworkActivityDevTools.js CHANGED
@@ -1,5 +1,14 @@
1
1
  import { useEffect } from "react";
2
2
  import { useRozeniteDevToolsClient } from "@rozenite/plugin-bridge";
3
+ function getHttpHeaderValue(headers, name) {
4
+ const lowerName = name.toLowerCase();
5
+ for (const key in headers) {
6
+ if (key.toLowerCase() === lowerName) {
7
+ return headers[key];
8
+ }
9
+ }
10
+ return void 0;
11
+ }
3
12
  const REQUEST_TTL = 1e3 * 60 * 5;
4
13
  const getNetworkRequestsRegistry = () => {
5
14
  const registry = /* @__PURE__ */ new Map();
@@ -162,8 +171,9 @@ const networkRequestsRegistry = getNetworkRequestsRegistry();
162
171
  const getContentType = (request) => {
163
172
  const responseHeaders = request.responseHeaders;
164
173
  const responseType = request.responseType;
165
- if (responseHeaders == null ? void 0 : responseHeaders["content-type"]) {
166
- return responseHeaders["content-type"].split(";")[0].trim();
174
+ const contentType = getHttpHeaderValue(responseHeaders || {}, "content-type");
175
+ if (contentType) {
176
+ return contentType.split(";")[0].trim();
167
177
  }
168
178
  switch (responseType) {
169
179
  case "arraybuffer":
@@ -260,7 +270,7 @@ const getNetworkInspector = (pluginClient) => {
260
270
  url: request._url,
261
271
  status: request.status,
262
272
  statusText: request.statusText,
263
- headers: request.responseHeaders,
273
+ headers: request.responseHeaders || {},
264
274
  contentType: getContentType(request),
265
275
  size: getResponseSize(request),
266
276
  responseTime: Date.now() / 1e3
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@rozenite/network-activity-plugin",
3
- "version": "1.0.0-alpha.6",
3
+ "version": "1.0.0-alpha.8",
4
4
  "description": "Network Activity for Rozenite.",
5
5
  "type": "module",
6
6
  "main": "./dist/react-native.cjs",
7
7
  "module": "./dist/react-native.js",
8
8
  "types": "./dist/react-native.d.ts",
9
9
  "dependencies": {
10
- "@rozenite/plugin-bridge": "1.0.0-alpha.6"
10
+ "@rozenite/plugin-bridge": "1.0.0-alpha.8"
11
11
  },
12
12
  "devDependencies": {
13
13
  "@radix-ui/react-scroll-area": "^1.2.9",
@@ -30,8 +30,8 @@
30
30
  "@floating-ui/react": "^0.26.0",
31
31
  "@tanstack/react-virtual": "^3.0.0",
32
32
  "lucide-react": "^0.263.1",
33
- "@rozenite/vite-plugin": "1.0.0-alpha.6",
34
- "rozenite": "1.0.0-alpha.6"
33
+ "@rozenite/vite-plugin": "1.0.0-alpha.8",
34
+ "rozenite": "1.0.0-alpha.8"
35
35
  },
36
36
  "license": "MIT",
37
37
  "scripts": {
package/src/react-native/network-inspector.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { NetworkActivityDevToolsClient } from '../shared/client';
2
+ import { getHttpHeaderValue } from '../ui/utils/getHttpHeaderValue';
2
3
  import { getNetworkRequestsRegistry } from './network-requests-registry';
3
4
  import { XHRInterceptor } from './xhr-interceptor';
4
5
 
@@ -8,8 +9,10 @@ const getContentType = (request: XMLHttpRequest): string => {
8
9
  const responseHeaders = request.responseHeaders;
9
10
  const responseType = request.responseType;
10
11
 
11
- if (responseHeaders?.['content-type']) {
12
- return responseHeaders['content-type'].split(';')[0].trim();
12
+ const contentType = getHttpHeaderValue(responseHeaders || {}, 'content-type');
13
+
14
+ if (contentType) {
15
+ return contentType.split(';')[0].trim();
13
16
  }
14
17
 
15
18
  switch (responseType) {
@@ -148,7 +151,7 @@ export const getNetworkInspector = (
148
151
  url: request._url as string,
149
152
  status: request.status,
150
153
  statusText: request.statusText,
151
- headers: request.responseHeaders as Record<string, string>,
154
+ headers: request.responseHeaders || {},
152
155
  contentType: getContentType(request),
153
156
  size: getResponseSize(request),
154
157
  responseTime: Date.now() / 1000,
package/src/shared/client.ts CHANGED
@@ -1,12 +1,14 @@
1
1
  import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
2
2
 
3
+ export type HttpHeaders = Record<string, string>;
4
+
3
5
  export type RequestId = string;
4
6
  export type Timestamp = number;
5
7
 
6
8
  export type Request = {
7
9
  url: string;
8
10
  method: string;
9
- headers: Record<string, string>;
11
+ headers: HttpHeaders;
10
12
  postData?: string;
11
13
  };
12
14
 
@@ -14,7 +16,7 @@ export type Response = {
14
16
  url: string;
15
17
  status: number;
16
18
  statusText: string;
17
- headers: Record<string, string>;
19
+ headers: HttpHeaders;
18
20
  contentType: string;
19
21
  size: number;
20
22
  responseTime: Timestamp;
package/src/ui/components/Badge.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { cva, type VariantProps } from 'class-variance-authority';
3
3
 
4
- import { cn } from '../utils';
4
+ import { cn } from '../utils/cn';
5
5
 
6
6
  const badgeVariants = cva(
7
7
  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
package/src/ui/components/Button.tsx CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import { Slot } from '@radix-ui/react-slot';
3
3
  import { cva, type VariantProps } from 'class-variance-authority';
4
4
 
5
- import { cn } from '../utils';
5
+ import { cn } from '../utils/cn';
6
6
 
7
7
  const buttonVariants = cva(
8
8
  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
package/src/ui/components/Input.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
 
3
- import { cn } from '../utils';
3
+ import { cn } from '../utils/cn';
4
4
 
5
5
  const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
6
6
  ({ className, type, ...props }, ref) => {
package/src/ui/components/RequestList.tsx CHANGED
@@ -9,6 +9,7 @@ import {
9
9
  } from '@tanstack/react-table';
10
10
  import { NetworkEntry } from '../types';
11
11
  import { RequestId } from '../../shared/client';
12
+ import { getHttpHeaderValue } from '../utils/getHttpHeaderValue';
12
13
 
13
14
  type NetworkRequest = {
14
15
  id: string;
@@ -205,7 +206,7 @@ const processNetworkEntries = (
205
206
  startTime: formatStartTime(entry.startTime || 0),
206
207
  requestBody: entry.request?.postData
207
208
  ? {
208
- type: entry.request.headers['content-type'] || 'text/plain',
209
+ type: getHttpHeaderValue(entry.request.headers, 'content-type') || 'text/plain',
209
210
  data: entry.request.postData,
210
211
  }
211
212
  : undefined,
package/src/ui/components/ScrollArea.tsx CHANGED
@@ -3,7 +3,7 @@
3
3
  import * as React from 'react';
4
4
  import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
5
5
 
6
- import { cn } from '../utils';
6
+ import { cn } from '../utils/cn';
7
7
 
8
8
  const ScrollArea = React.forwardRef<
9
9
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
package/src/ui/components/Separator.tsx CHANGED
@@ -3,7 +3,7 @@
3
3
  import * as React from 'react';
4
4
  import * as SeparatorPrimitive from '@radix-ui/react-separator';
5
5
 
6
- import { cn } from '../utils';
6
+ import { cn } from '../utils/cn';
7
7
 
8
8
  const Separator = React.forwardRef<
9
9
  React.ElementRef<typeof SeparatorPrimitive.Root>,
package/src/ui/components/Tabs.tsx CHANGED
@@ -3,7 +3,7 @@
3
3
  import * as React from 'react';
4
4
  import * as TabsPrimitive from '@radix-ui/react-tabs';
5
5
 
6
- import { cn } from '../utils';
6
+ import { cn } from '../utils/cn';
7
7
 
8
8
  const Tabs = TabsPrimitive.Root;
9
9
 
package/src/ui/tabs/CookiesTab.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { ScrollArea } from '../components/ScrollArea';
2
2
  import { Badge } from '../components/Badge';
3
3
  import { NetworkEntry } from '../types';
4
+ import { HttpHeaders } from '../../shared/client';
4
5
 
5
6
  type Cookie = {
6
7
  name: string;
@@ -71,7 +72,7 @@ const parseCookieString = (cookieString: string): Cookie[] => {
71
72
  };
72
73
 
73
74
  const extractCookiesFromHeaders = (
74
- headers: Record<string, string>
75
+ headers: HttpHeaders
75
76
  ): {
76
77
  requestCookies: Cookie[];
77
78
  responseCookies: Cookie[];
@@ -100,8 +101,9 @@ export const CookiesTab = ({
100
101
  networkEntries,
101
102
  }: CookiesTabProps) => {
102
103
  return (
103
- <ScrollArea className="h-full min-h-0 p-4">
104
- {(() => {
104
+ <ScrollArea className="h-full w-full">
105
+ <div className="p-4">
106
+ {(() => {
105
107
  const entry = networkEntries.get(selectedRequest.id);
106
108
  if (!entry) {
107
109
  return (
@@ -285,6 +287,7 @@ export const CookiesTab = ({
285
287
  </div>
286
288
  );
287
289
  })()}
290
+ </div>
288
291
  </ScrollArea>
289
292
  );
290
293
  };
package/src/ui/tabs/HeadersTab.tsx CHANGED
@@ -23,7 +23,7 @@ export const HeadersTab = ({
23
23
  getStatusColor,
24
24
  }: HeadersTabProps) => {
25
25
  return (
26
- <ScrollArea className="h-full min-h-0">
26
+ <ScrollArea className="h-full w-full">
27
27
  <div className="p-4 space-y-4">
28
28
  <div>
29
29
  <h4 className="text-sm font-medium text-gray-300 mb-2">General</h4>
package/src/ui/tabs/RequestTab.tsx CHANGED
@@ -44,29 +44,31 @@ export const RequestTab = ({ selectedRequest }: RequestTabProps) => {
44
44
  };
45
45
 
46
46
  return (
47
- <ScrollArea className="h-full min-h-0 p-4">
48
- {selectedRequest?.requestBody ? (
49
- <div className="space-y-4">
50
- <div>
51
- <h4 className="text-sm font-medium text-gray-300 mb-2">
52
- Request Body
53
- </h4>
54
- <div className="text-sm mb-2">
55
- <span className="text-gray-400">Content-Type: </span>
56
- <span className="text-blue-400">
57
- {selectedRequest.requestBody.type}
58
- </span>
47
+ <ScrollArea className="h-full w-full">
48
+ <div className="p-4">
49
+ {selectedRequest?.requestBody ? (
50
+ <div className="space-y-4">
51
+ <div>
52
+ <h4 className="text-sm font-medium text-gray-300 mb-2">
53
+ Request Body
54
+ </h4>
55
+ <div className="text-sm mb-2">
56
+ <span className="text-gray-400">Content-Type: </span>
57
+ <span className="text-blue-400">
58
+ {selectedRequest.requestBody.type}
59
+ </span>
60
+ </div>
59
61
  </div>
62
+ <div>{renderRequestBody()}</div>
60
63
  </div>
61
- <div>{renderRequestBody()}</div>
62
- </div>
63
- ) : (
64
- <div className="text-sm text-gray-400">
65
- {selectedRequest?.method === 'GET'
66
- ? "GET requests don't have a request body"
67
- : 'No request body for this request'}
68
- </div>
69
- )}
64
+ ) : (
65
+ <div className="text-sm text-gray-400">
66
+ {selectedRequest?.method === 'GET'
67
+ ? "GET requests don't have a request body"
68
+ : 'No request body for this request'}
69
+ </div>
70
+ )}
71
+ </div>
70
72
  </ScrollArea>
71
73
  );
72
74
  };
package/src/ui/tabs/ResponseTab.tsx CHANGED
@@ -133,8 +133,10 @@ export const ResponseTab = ({
133
133
  };
134
134
 
135
135
  return (
136
- <ScrollArea className="h-full min-h-0 p-4">
137
- {renderResponseBody()}
136
+ <ScrollArea className="h-full w-full">
137
+ <div className="p-4">
138
+ {renderResponseBody()}
139
+ </div>
138
140
  </ScrollArea>
139
141
  );
140
142
  };
package/src/ui/tabs/TimingTab.tsx CHANGED
@@ -40,8 +40,9 @@ export const TimingTab = ({
40
40
  };
41
41
 
42
42
  return (
43
- <ScrollArea className="h-full p-4">
44
- <div className="space-y-4">
43
+ <ScrollArea className="h-full w-full">
44
+ <div className="p-4">
45
+ <div className="space-y-4">
45
46
  <div className="space-y-2">
46
47
  <div className="flex justify-between text-sm">
47
48
  <span className="text-gray-400">Start Time</span>
@@ -66,6 +67,7 @@ export const TimingTab = ({
66
67
  </div>
67
68
  </div>
68
69
  </div>
70
+ </div>
69
71
  </ScrollArea>
70
72
  );
71
73
  };
package/src/ui/types.ts CHANGED
@@ -4,13 +4,14 @@ import {
4
4
  Response,
5
5
  Initiator,
6
6
  ResourceType,
7
+ HttpHeaders,
7
8
  } from '../shared/client';
8
9
 
9
10
  export type NetworkEntry = {
10
11
  requestId: RequestId;
11
12
  url: string;
12
13
  method: string;
13
- headers: Record<string, string>;
14
+ headers: HttpHeaders;
14
15
  postData?: string;
15
16
  status: 'pending' | 'loading' | 'finished' | 'failed';
16
17
  startTime: number;
package/src/ui/utils/getHttpHeaderValue.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { HttpHeaders } from "../../shared/client";
2
+
3
+ // Utility to get header value case-insensitively
4
+ export function getHttpHeaderValue(headers: HttpHeaders, name: string) {
5
+ const lowerName = name.toLowerCase();
6
+
7
+ for (const key in headers) {
8
+ if (key.toLowerCase() === lowerName) {
9
+ return headers[key];
10
+ }
11
+ }
12
+
13
+ return undefined;
14
+ }
package/src/ui/views/InspectorView.tsx CHANGED
@@ -311,11 +311,11 @@ export const InspectorView = ({ client }: InspectorViewProps) => {
311
311
  />
312
312
  </TabsContent>
313
313
 
314
- <TabsContent value="request" className="flex-1 m-0">
314
+ <TabsContent value="request" className="flex-1 m-0 overflow-hidden">
315
315
  <RequestTab selectedRequest={selectedRequest} />
316
316
  </TabsContent>
317
317
 
318
- <TabsContent value="response" className="flex-1 m-0">
318
+ <TabsContent value="response" className="flex-1 m-0 overflow-hidden">
319
319
  <ResponseTab
320
320
  selectedRequest={selectedRequest}
321
321
  onRequestResponseBody={(requestId) => {
@@ -326,14 +326,14 @@ export const InspectorView = ({ client }: InspectorViewProps) => {
326
326
  />
327
327
  </TabsContent>
328
328
 
329
- <TabsContent value="cookies" className="flex-1 m-0">
329
+ <TabsContent value="cookies" className="flex-1 m-0 overflow-hidden">
330
330
  <CookiesTab
331
331
  selectedRequest={selectedRequest}
332
332
  networkEntries={networkEntries}
333
333
  />
334
334
  </TabsContent>
335
335
 
336
- <TabsContent value="timing" className="flex-1 m-0">
336
+ <TabsContent value="timing" className="flex-1 m-0 overflow-hidden">
337
337
  <TimingTab
338
338
  selectedRequest={selectedRequest}
339
339
  networkEntries={networkEntries}
/package/dist/src/ui/{utils.d.ts → utils/cn.d.ts} RENAMED
File without changes
/package/src/ui/{utils.ts → utils/cn.ts} RENAMED
File without changes