@rozenite/network-activity-plugin 1.0.0-alpha.9 → 1.1.0

package/src/ui/components/SidePanel.tsx

@@ -10,6 +10,7 @@ import { X } from 'lucide-react';
 import {
   useNetworkActivityActions,
   useNetworkActivityStore,
+  useOverrides,
   useSelectedRequest,
 } from '../state/hooks';
 import { NetworkEntry as OldNetworkEntry } from '../types';
@@ -85,6 +86,7 @@ export const SidePanel = () => {
   const actions = useNetworkActivityActions();
   const selectedRequest = useSelectedRequest();
   const client = useNetworkActivityStore((state) => state._client);
+  const overrides = useOverrides();
 
   const onClose = (): void => {
     actions.setSelectedRequest(null);
@@ -128,6 +130,9 @@ export const SidePanel = () => {
     legacyNetworkEntries.set(legacyEntry.requestId, legacyEntry);
   }
 
+  const override = legacyEntry !== null ? overrides.get(legacyEntry.url) : null;
+  const hasResponseOverride = override && override.body ? true : false;
+
   const getTabsListTriggers = () => {
     if (httpDetails) {
       return (
@@ -149,6 +154,9 @@ export const SidePanel = () => {
             className="data-[state=active]:bg-gray-700"
           >
             Response
+            {hasResponseOverride && (
+              <span className="w-2 h-2 rounded-full bg-violet-300 ms-2 inline-block"></span>
+            )}
           </TabsTrigger>
           <TabsTrigger
             value="cookies"
@@ -278,16 +286,18 @@ export const SidePanel = () => {
     <div className="w-1/2 flex flex-col bg-gray-900">
       {/* Side Panel Header */}
       <div className="flex items-center justify-between p-3 border-b border-gray-700 bg-gray-800">
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 min-w-0 flex-1">
           <div
-            className={`w-3 h-3 rounded-full ${getTypeColor(
+            className={`w-3 h-3 rounded-full flex-shrink-0 ${getTypeColor(
               selectedRequest.type
             )}`}
           ></div>
-          <span className="font-medium">{requestName}</span>
+          <span className="font-medium truncate">{requestName}</span>
           <Badge
             variant="outline"
-            className={`${getStatusColor(requestStatus)} border-current`}
+            className={`${getStatusColor(
+              requestStatus
+            )} border-current flex-shrink-0`}
           >
             {requestStatus}
           </Badge>
@@ -296,7 +306,7 @@ export const SidePanel = () => {
           variant="ghost"
           size="sm"
           onClick={onClose}
-          className="h-6 w-6 p-0 text-gray-400 hover:text-blue-400"
+          className="h-6 w-6 p-0 text-gray-400 hover:text-blue-400 flex-shrink-0 ml-2"
         >
           <X className="h-4 w-4" />
         </Button>

package/src/ui/components/Toolbar.tsx

@@ -25,11 +25,12 @@ export const Toolbar = () => {
             ? 'text-red-400 hover:text-red-300'
             : 'text-gray-400 hover:text-blue-400'
         }`}
+        title={isRecording ? 'Stop recording' : 'Start recording'}
       >
         {isRecording ? (
-          <Circle className="h-4 w-4 fill-current" />
+          <Square className="h-4 w-4 fill-current" />
         ) : (
-          <Square className="h-4 w-4" />
+          <Circle className="h-4 w-4 fill-current" />
         )}
       </Button>
       <Button

package/src/ui/globals.css

@@ -6,6 +6,10 @@
   .text-balance {
     text-wrap: balance;
   }
+
+  .wrap-anywhere {
+    overflow-wrap: anywhere;
+  }
 }
 
 @layer base {

package/src/ui/hooks/useCopyToClipboard.ts

@@ -14,9 +14,9 @@ export function useCopyToClipboard() {
   const copy = useCallback(async (value: string) => {
     try {
       await copyToClipboard(value);
-  
+
       setIsCopied(true);
-  
+
       clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(() => setIsCopied(false), 1000);
     } catch (error) {

package/src/ui/state/derived.ts

@@ -24,6 +24,7 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
         size: httpEntry.size,
         method: httpEntry.request.method,
         httpStatus: httpEntry.response?.status,
+        progress: httpEntry.progress,
       });
     } else if (entry.type === 'websocket') {
       const wsEntry = entry as WebSocketNetworkEntry;
@@ -81,6 +82,7 @@ export const getRequestSummary = (
         size: httpEntry.size,
         method: httpEntry.request.method,
         httpStatus: httpEntry.response?.status || 0,
+        progress: httpEntry.progress,
       };
     } else if (entry.type === 'websocket') {
       const wsEntry = entry as WebSocketNetworkEntry;

package/src/ui/state/hooks.ts

@@ -42,3 +42,11 @@ export const useWebSocketMessages = (requestId: string) => {
     (state) => state.websocketMessages.get(requestId) || []
   );
 };
+
+export const useOverrides = () => {
+  return useNetworkActivityStore((state) => state.overrides);
+};
+
+export const useClientUISettings = () => {
+  return useNetworkActivityStore((state) => state.clientUISettings);
+};

package/src/ui/state/model.ts

@@ -1,4 +1,9 @@
-import { Initiator, ResourceType } from '../../shared/client';
+import {
+  Initiator,
+  ResourceType,
+  HttpHeaders,
+  RequestPostData,
+} from '../../shared/client';
 
 export type RequestId = string;
 export type Timestamp = number;
@@ -8,7 +13,12 @@ export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
 export type NetworkEntryType = 'http' | 'websocket' | 'sse';
 
 /* HTTP */
-export type HttpData = {
+export type HttpRequestData = {
+  type: string;
+  data: NonNullable<RequestPostData>;
+};
+
+export type HttpResponseData = {
   type: string;
   data: string;
 };
@@ -16,19 +26,19 @@ export type HttpData = {
 export type HttpRequest = {
   url: string;
   method: HttpMethod;
-  headers: Record<string, string>;
-  body?: HttpData;
+  headers: HttpHeaders;
+  body?: HttpRequestData;
 };
 
 export type HttpResponse = {
   url: string;
   status: number;
   statusText: string;
-  headers: Record<string, string>;
+  headers: HttpHeaders;
   contentType: string;
   size: number;
   responseTime: Timestamp;
-  body?: HttpData;
+  body?: HttpResponseData;
 };
 
 export type HttpStatus = 'pending' | 'loading' | 'finished' | 'failed';
@@ -48,11 +58,17 @@ export type HttpNetworkEntry = {
   size?: number;
   initiator?: Initiator;
   resourceType?: ResourceType;
+  progress?: {
+    loaded: number;
+    total: number;
+    lengthComputable: boolean;
+  };
 };
 
 /* SSE */
 export type SSEMessage = {
   id: string;
+  type: string;
   data: string;
   timestamp: Timestamp;
 };
@@ -123,7 +139,12 @@ export type ProcessedRequest = {
   status: HttpStatus | WebSocketStatus | SSEStatus;
   timestamp: Timestamp;
   duration?: number;
-  size?: number;
+  size: number | null;
   method: HttpMethod | 'WS' | 'SSE';
   httpStatus?: number;
+  progress?: {
+    loaded: number;
+    total: number;
+    lengthComputable: boolean;
+  };
 };