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

package/src/ui/components/CookieCard.tsx

@@ -0,0 +1,64 @@
+import { Badge } from './Badge';
+import { Cookie } from '../../shared/client';
+import { cn } from '../utils/cn';
+
+type CookieCardProps = {
+  cookie: Cookie;
+  keyClassName?: string;
+};
+
+export const CookieCard = ({ cookie, keyClassName }: CookieCardProps) => (
+  <div className="bg-gray-800 border border-gray-700 rounded p-3">
+    <div className="flex items-center justify-between mb-2">
+      <span className={cn('text-sm font-medium', keyClassName)}>
+        {cookie.name}
+      </span>
+      <div className="flex items-center gap-2">
+        {cookie.secure && (
+          <Badge
+            variant="outline"
+            className="text-xs text-yellow-400 border-yellow-400"
+          >
+            Secure
+          </Badge>
+        )}
+        {cookie.httpOnly && (
+          <Badge
+            variant="outline"
+            className="text-xs text-purple-400 border-purple-400"
+          >
+            HttpOnly
+          </Badge>
+        )}
+      </div>
+    </div>
+    <div className="text-sm text-gray-300 mb-2 break-all">{cookie.value}</div>
+    <div className="grid grid-cols-2 gap-4 text-xs text-gray-400">
+      {cookie.domain && (
+        <div>
+          <span className="font-medium">Domain:</span> {cookie.domain}
+        </div>
+      )}
+      {cookie.path && (
+        <div>
+          <span className="font-medium">Path:</span> {cookie.path}
+        </div>
+      )}
+      {cookie.expires && (
+        <div>
+          <span className="font-medium">Expires:</span> {cookie.expires}
+        </div>
+      )}
+      {cookie.maxAge && (
+        <div>
+          <span className="font-medium">Max-Age:</span> {cookie.maxAge}
+        </div>
+      )}
+      {cookie.sameSite && (
+        <div>
+          <span className="font-medium">SameSite:</span> {cookie.sameSite}
+        </div>
+      )}
+    </div>
+  </div>
+);

package/src/ui/components/CopyRequestDropdown.tsx

@@ -0,0 +1,95 @@
+import { useCallback } from 'react';
+import { Copy, Check, ChevronDown } from 'lucide-react';
+import { Button } from './Button';
+import { generateFetchCall } from '../utils/generateFetchCall';
+import { generateCurlCommand } from '../utils/generateCurlCommand';
+import { useCopyToClipboard } from '../hooks/useCopyToClipboard';
+import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './DropdownMenu';
+import { checkRequestBodyBinary } from '../utils/checkRequestBodyBinary';
+
+type NetworkEntry = HttpNetworkEntry | SSENetworkEntry;
+
+type CopyDropdownProps = {
+  selectedRequest: NetworkEntry;
+};
+
+type CopyOption = {
+  id: string;
+  label: string;
+  generate: (request: NetworkEntry) => string;
+  isEnabled: (request: NetworkEntry) => boolean;
+};
+
+const copyOptions: CopyOption[] = [
+  {
+    id: 'fetch',
+    label: 'fetch',
+    generate: generateFetchCall,
+    isEnabled: (request) => !checkRequestBodyBinary(request),
+  },
+  {
+    id: 'curl',
+    label: 'cURL',
+    generate: generateCurlCommand,
+    isEnabled: (request) =>
+      !checkRequestBodyBinary(request) || request.type === 'sse',
+  },
+];
+
+export const CopyRequestDropdown = ({ selectedRequest }: CopyDropdownProps) => {
+  const { isCopied, copy } = useCopyToClipboard();
+
+  const handleCopy = useCallback(
+    async (option: CopyOption) => {
+      if (!selectedRequest) return;
+
+      try {
+        const content = await option.generate(selectedRequest);
+
+        await copy(content);
+      } catch (error) {
+        console.error(`Failed to copy ${option.label}:`, error);
+      }
+    },
+    [selectedRequest, copy]
+  );
+
+  const filteredCopyOptions = copyOptions.filter((option) =>
+    option.isEnabled(selectedRequest)
+  );
+
+  if (filteredCopyOptions.length === 0) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="xs" className="border border-gray-700">
+          {isCopied ? <Check size={16} /> : <Copy size={16} />}
+          Copy as ...
+          <ChevronDown size={12} className="ml-1" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        {filteredCopyOptions.map((option) => {
+          return (
+            <DropdownMenuItem
+              onClick={() => handleCopy(option)}
+              className="cursor-pointer"
+              key={option.id}
+            >
+              {option.label}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

package/src/ui/components/DropdownMenu.tsx

@@ -0,0 +1,206 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '../utils/cn';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-gray-700 focus:text-gray-100 data-[state=open]:bg-gray-700 data-[state=open]:text-gray-100',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border border-gray-600 bg-gray-800 p-1 text-gray-100 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-gray-600 bg-gray-800 p-1 text-gray-100 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-gray-700 focus:text-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-gray-700 focus:text-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <svg
+          className="h-4 w-4"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+        >
+          <polyline points="20,6 9,17 4,12" />
+        </svg>
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-gray-700 focus:text-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <svg className="h-2 w-2" fill="currentColor" viewBox="0 0 8 8">
+          <circle cx="4" cy="4" r="3" />
+        </svg>
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold text-gray-300',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-gray-600', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest text-gray-400', className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

package/src/ui/components/FilterBar.tsx

@@ -0,0 +1,117 @@
+import { Input } from './Input';
+import { Button } from './Button';
+import { X, Filter, ChevronDown } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from './DropdownMenu';
+
+export type FilterState = {
+  text: string;
+  types: Set<'http' | 'websocket' | 'sse'>;
+};
+
+type FilterBarProps = {
+  filter: FilterState;
+  onFilterChange: (filter: FilterState) => void;
+};
+
+export const FilterBar = ({ filter, onFilterChange }: FilterBarProps) => {
+  const handleTextChange = (text: string) => {
+    onFilterChange({ ...filter, text });
+  };
+
+  const toggleType = (type: 'http' | 'websocket' | 'sse') => {
+    const newTypes = new Set(filter.types);
+    if (newTypes.has(type)) {
+      newTypes.delete(type);
+    } else {
+      newTypes.add(type);
+    }
+    onFilterChange({ ...filter, types: newTypes });
+  };
+
+  const clearFilters = () => {
+    onFilterChange({
+      text: '',
+      types: new Set(['http', 'websocket', 'sse']),
+    });
+  };
+
+  const hasActiveFilters = filter.text !== '' || filter.types.size < 3;
+  const isTypeFilterActive = filter.types.size < 3;
+
+  const getTypeLabel = (type: 'http' | 'websocket' | 'sse') => {
+    switch (type) {
+      case 'http':
+        return 'XHR';
+      case 'websocket':
+        return 'WS';
+      case 'sse':
+        return 'SSE';
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
+      {/* Text Filter */}
+      <div className="flex-1">
+        <Input
+          placeholder="Filter requests..."
+          value={filter.text}
+          onChange={(e) => handleTextChange(e.target.value)}
+          className="h-8 text-sm bg-gray-700 border-gray-600 text-gray-100 placeholder:text-gray-400"
+        />
+      </div>
+
+      {/* Request Type Filters Dropdown */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className={`h-8 px-3 text-xs transition-all ${
+              isTypeFilterActive
+                ? 'bg-blue-600/20 border border-blue-500/50 text-blue-300 hover:bg-blue-600/30'
+                : 'text-gray-300 hover:text-gray-100 hover:bg-gray-700'
+            }`}
+          >
+            <Filter className="h-3 w-3 mr-1" />
+            Types
+            <ChevronDown className="h-3 w-3 ml-1" />
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent sideOffset={5} className="space-y-1">
+          {(['http', 'sse', 'websocket'] as const).map((type) => (
+            <DropdownMenuItem
+              key={type}
+              onClick={() => toggleType(type)}
+              className={
+                filter.types.has(type)
+                  ? 'bg-blue-600 text-white'
+                  : 'text-gray-300 hover:bg-gray-700 hover:text-gray-100'
+              }
+            >
+              {getTypeLabel(type)}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* Clear Filters */}
+      {hasActiveFilters && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={clearFilters}
+          className="h-8 w-8 p-0 text-gray-400 hover:text-blue-400"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/ui/components/Input.tsx

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-blue-500 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className
         )}
         ref={ref}

package/src/ui/components/JsonTree.tsx

@@ -1,4 +1,5 @@
 import { JSONTree } from 'react-json-tree';
+import { JsonTreeCopyableItem } from './JsonTreeCopyableItem';
 
 export type JsonTreeProps = {
   data: unknown;
@@ -32,6 +33,25 @@ export const JsonTree = ({
       }}
       invertTheme={false}
       shouldExpandNodeInitially={shouldExpandNodeInitially}
+      // For objects and arrays
+      getItemString={(_type, data, itemType, itemString) => (
+        <JsonTreeCopyableItem
+          getCopyableValue={() => JSON.stringify(data, null, 2)}
+        >
+          <>
+            {itemType} {itemString}
+          </>
+        </JsonTreeCopyableItem>
+      )}
+      // For primitives
+      valueRenderer={(valueAsString, value) => (
+        <JsonTreeCopyableItem
+          getCopyableValue={() => String(value)}
+          className="ml-2"
+        >
+          {String(valueAsString)}
+        </JsonTreeCopyableItem>
+      )}
     />
   );
 };

package/src/ui/components/JsonTreeCopyableItem.tsx

@@ -0,0 +1,37 @@
+import { Check, Copy } from 'lucide-react';
+import { MouseEvent, PropsWithChildren } from 'react';
+import { useCopyToClipboard } from '../hooks/useCopyToClipboard';
+import { cn } from '../utils/cn';
+
+type JsonTreeCopyableItemProps = PropsWithChildren<{
+  getCopyableValue: () => string;
+  className?: string;
+}>;
+
+export const JsonTreeCopyableItem = ({
+  children,
+  getCopyableValue,
+  className,
+}: JsonTreeCopyableItemProps) => {
+  const { isCopied, copy } = useCopyToClipboard();
+
+  const handleCopy = (event: MouseEvent) => {
+    event.stopPropagation();
+
+    copy(getCopyableValue());
+  };
+
+  const Icon = isCopied ? Check : Copy;
+
+  return (
+    <span className={cn('inline-block group', className)}>
+      {children}
+      <div
+        className="inline-block cursor-pointer opacity-0 group-hover:opacity-100 text-gray-500 hover:text-gray-300 transition-all p-2 -m-2 ml-0 translate-y-0.75"
+        onClick={handleCopy}
+      >
+        <Icon className="h-4 w-4" />
+      </div>
+    </span>
+  );
+};

package/src/ui/components/KeyValueGrid.tsx

@@ -0,0 +1,51 @@
+import React, { Fragment } from 'react';
+import { cn } from '../utils/cn';
+
+export type KeyValueItem = {
+  key: string;
+  value: React.ReactNode;
+  keyClassName?: string;
+  valueClassName?: string;
+};
+
+export type KeyValueGridProps = {
+  items?: KeyValueItem[];
+  emptyMessage?: string;
+  className?: string;
+};
+
+export const KeyValueGrid = ({
+  items = [],
+  emptyMessage,
+  className,
+}: KeyValueGridProps) => {
+  const gridClassName = cn(
+    'grid grid-cols-[minmax(7rem,25%)_minmax(3rem,1fr)] gap-x-2 gap-y-2 text-sm',
+    className
+  );
+
+  if (items.length === 0) {
+    return emptyMessage ? (
+      <div className={gridClassName}>
+        <span className="col-span-2 text-gray-500 italic">{emptyMessage}</span>
+      </div>
+    ) : null;
+  }
+
+  return (
+    <div className={gridClassName}>
+      {items.map((item, index) => (
+        <Fragment key={index}>
+          <span
+            className={cn('text-gray-400 wrap-anywhere', item.keyClassName)}
+          >
+            {item.key}
+          </span>
+          <span className={cn('wrap-anywhere', item.valueClassName)}>
+            {item.value}
+          </span>
+        </Fragment>
+      ))}
+    </div>
+  );
+};