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

package/src/ui/App.tsx

@@ -0,0 +1,19 @@
+import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import { NetworkActivityEventMap } from '../shared/client';
+
+import { InspectorView } from './views/InspectorView';
+import { LoadingView } from './views/LoadingView';
+
+import './globals.css';
+
+export default function NetworkActivityPanel() {
+  const client = useRozeniteDevToolsClient<NetworkActivityEventMap>({
+    pluginId: '@rozenite/network-activity-plugin',
+  });
+
+  if (!client) {
+    return <LoadingView />;
+  }
+
+  return <InspectorView client={client} />;
+}

package/src/ui/components/Badge.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../utils';
+
+const badgeVariants = cva(
+  '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',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/ui/components/Button.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../utils';
+
+const buttonVariants = cva(
+  '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',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-gray-700 hover:text-gray-100',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/src/ui/components/Input.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '../utils';
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <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',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };

package/src/ui/components/JsonTree.tsx

@@ -0,0 +1,37 @@
+import { JSONTree } from 'react-json-tree';
+
+export type JsonTreeProps = {
+  data: unknown;
+  shouldExpandNodeInitially?: () => boolean;
+};
+
+export const JsonTree = ({
+  data,
+  shouldExpandNodeInitially = () => true,
+}: JsonTreeProps) => {
+  return (
+    <JSONTree
+      data={data}
+      theme={{
+        base00: 'transparent',
+        base01: '#374151', // bg-gray-700
+        base02: '#4b5563', // bg-gray-600
+        base03: '#6b7280', // text-gray-500
+        base04: '#9ca3af', // text-gray-400
+        base05: '#d1d5db', // text-gray-300
+        base06: '#e5e7eb', // text-gray-200
+        base07: '#f9fafb', // text-gray-100
+        base08: '#ef4444', // text-red-500
+        base09: '#f59e0b', // text-yellow-500
+        base0A: '#10b981', // text-green-500
+        base0B: '#3b82f6', // text-blue-500
+        base0C: '#06b6d4', // text-cyan-500
+        base0D: '#8b5cf6', // text-purple-500
+        base0E: '#ec4899', // text-pink-500
+        base0F: '#f97316', // text-orange-500
+      }}
+      invertTheme={false}
+      shouldExpandNodeInitially={shouldExpandNodeInitially}
+    />
+  );
+};

package/src/ui/components/RequestList.tsx

@@ -0,0 +1,376 @@
+import * as React from 'react';
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  SortingState,
+  useReactTable,
+} from '@tanstack/react-table';
+import { NetworkEntry } from '../types';
+import { RequestId } from '../../shared/client';
+
+type NetworkRequest = {
+  id: string;
+  name: string;
+  status: number;
+  method: string;
+  domain: string;
+  path: string;
+  size: string;
+  time: string;
+  type: string;
+  initiator: string;
+  startTime: string;
+  requestBody?: {
+    type: string;
+    data: string;
+  };
+  responseBody?: {
+    type: string;
+    data: string | null;
+  };
+};
+
+type RequestListProps = {
+  networkEntries: Map<RequestId, NetworkEntry>;
+  selectedRequestId: RequestId | null;
+  onRequestSelect: (requestId: RequestId) => void;
+};
+
+const formatSize = (bytes: number): string => {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'kB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+};
+
+const formatDuration = (duration: number): string => {
+  if (duration < 1000) return `${Math.round(duration)} ms`;
+  return `${(duration / 1000).toFixed(1)} s`;
+};
+
+const formatStartTime = (startTime: number): string => {
+  const date = new Date(startTime);
+  const timeString = date.toLocaleTimeString('en-US', {
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+  const milliseconds = date.getMilliseconds().toString().padStart(3, '0');
+  return `${timeString}.${milliseconds}`;
+};
+
+const extractDomainAndPath = (
+  url: string
+): { domain: string; path: string } => {
+  try {
+    const urlObj = new URL(url);
+    return {
+      domain: urlObj.hostname,
+      path: urlObj.pathname + urlObj.search + urlObj.hash,
+    };
+  } catch {
+    return { domain: 'unknown', path: url };
+  }
+};
+
+const generateName = (url: string): string => {
+  try {
+    const urlObj = new URL(url);
+    const pathname = urlObj.pathname;
+    const filename = pathname.split('/').pop();
+    return filename || pathname || urlObj.hostname;
+  } catch {
+    return url;
+  }
+};
+
+const formatInitiator = (initiator: any): string => {
+  if (!initiator) return 'Other';
+  if (initiator.type === 'script' && initiator.url) {
+    try {
+      const url = new URL(initiator.url);
+      const filename = url.pathname.split('/').pop() || url.hostname;
+      const line = initiator.lineNumber ? `:${initiator.lineNumber}` : '';
+      return `${filename}${line}`;
+    } catch {
+      return 'Script';
+    }
+  }
+  return initiator.type || 'Other';
+};
+
+const mapResourceType = (type: string): string => {
+  const typeMap: Record<string, string> = {
+    Document: 'document',
+    Stylesheet: 'stylesheet',
+    Image: 'img',
+    Media: 'media',
+    Font: 'font',
+    Script: 'script',
+    XHR: 'xhr',
+    Fetch: 'xhr',
+    EventSource: 'eventsource',
+    WebSocket: 'websocket',
+    Manifest: 'manifest',
+    Other: 'other',
+    Ping: 'ping',
+    CSPViolationReport: 'csp',
+    Preflight: 'preflight',
+    Subresource: 'subresource',
+  };
+  return typeMap[type] || 'other';
+};
+
+const getTypeColor = (type: string) => {
+  const colors: Record<string, string> = {
+    document: 'bg-blue-600',
+    script: 'bg-yellow-600',
+    stylesheet: 'bg-purple-600',
+    xhr: 'bg-green-600',
+    img: 'bg-pink-600',
+    font: 'bg-orange-600',
+  };
+  return colors[type] || 'bg-gray-600';
+};
+
+const getStatusColor = (status: number) => {
+  if (status >= 200 && status < 300) return 'text-green-400';
+  if (status >= 300 && status < 400) return 'text-yellow-400';
+  if (status >= 400) return 'text-red-400';
+  return 'text-gray-400';
+};
+
+// Custom sorting functions
+const sortSize = (rowA: any, rowB: any, columnId: string) => {
+  const a = rowA.getValue(columnId) as string;
+  const b = rowB.getValue(columnId) as string;
+
+  // Extract numeric values from formatted strings like "1.2 kB", "500 B", etc.
+  const getNumericValue = (str: string) => {
+    const match = str.match(/^([\d.]+)\s*([KMGT]?B)$/);
+    if (!match) return 0;
+    const value = parseFloat(match[1]);
+    const unit = match[2];
+    const multipliers: Record<string, number> = {
+      B: 1,
+      kB: 1024,
+      MB: 1024 * 1024,
+      GB: 1024 * 1024 * 1024,
+    };
+    return value * (multipliers[unit] || 1);
+  };
+
+  return getNumericValue(a) - getNumericValue(b);
+};
+
+const sortTime = (rowA: any, rowB: any, columnId: string) => {
+  const a = rowA.getValue(columnId) as string;
+  const b = rowB.getValue(columnId) as string;
+
+  // Extract numeric values from formatted strings like "150 ms", "1.2 s", etc.
+  const getNumericValue = (str: string) => {
+    const match = str.match(/^([\d.]+)\s*(ms|s)$/);
+    if (!match) return 0;
+    const value = parseFloat(match[1]);
+    const unit = match[2];
+    return unit === 's' ? value * 1000 : value;
+  };
+
+  return getNumericValue(a) - getNumericValue(b);
+};
+
+// Convert NetworkEntry to NetworkRequest for UI display
+const processNetworkEntries = (
+  networkEntries: Map<RequestId, NetworkEntry>
+): NetworkRequest[] => {
+  return Array.from(networkEntries.values()).map((entry): NetworkRequest => {
+    const { domain, path } = extractDomainAndPath(entry.url);
+    const duration = entry.duration || 0;
+
+    return {
+      id: entry.requestId,
+      name: generateName(entry.url),
+      status: entry.response?.status || 0,
+      method: entry.request?.method || 'GET',
+      domain,
+      path,
+      size: formatSize(entry.size || 0),
+      time: formatDuration(duration),
+      type: mapResourceType(entry.type || 'Other'),
+      initiator: formatInitiator(entry.initiator),
+      startTime: formatStartTime(entry.startTime || 0),
+      requestBody: entry.request?.postData
+        ? {
+            type: entry.request.headers['content-type'] || 'text/plain',
+            data: entry.request.postData,
+          }
+        : undefined,
+      responseBody: entry.responseBody
+        ? {
+            type: entry.response?.contentType || 'application/octet-stream',
+            data: entry.responseBody.body,
+          }
+        : undefined,
+    };
+  });
+};
+
+const columnHelper = createColumnHelper<NetworkRequest>();
+
+const columns = [
+  columnHelper.accessor('startTime', {
+    header: 'Start Time',
+    cell: ({ getValue }) => <div className="text-gray-300">{getValue()}</div>,
+    size: 120,
+    sortingFn: 'basic',
+  }),
+  columnHelper.accessor('name', {
+    header: 'Name',
+    cell: ({ getValue }) => (
+      <div className="flex-1 min-w-0 truncate">{getValue()}</div>
+    ),
+    sortingFn: 'alphanumeric',
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+    cell: ({ getValue }) => {
+      return (
+        <div className={`${getStatusColor(getValue())}`}>{getValue()}</div>
+      );
+    },
+    size: 64,
+    sortingFn: 'basic',
+  }),
+  columnHelper.accessor('method', {
+    header: 'Method',
+    cell: ({ getValue }) => <div className="text-gray-300">{getValue()}</div>,
+    size: 64,
+    sortingFn: 'alphanumeric',
+  }),
+  columnHelper.accessor('domain', {
+    header: 'Domain',
+    cell: ({ getValue }) => (
+      <div className="text-gray-300 truncate">{getValue()}</div>
+    ),
+    size: 128,
+    sortingFn: 'alphanumeric',
+  }),
+  columnHelper.accessor('size', {
+    header: 'Size',
+    cell: ({ getValue }) => <div className="text-gray-300">{getValue()}</div>,
+    size: 80,
+    sortingFn: sortSize,
+  }),
+  columnHelper.accessor('time', {
+    header: 'Time',
+    cell: ({ getValue }) => <div className="text-gray-300">{getValue()}</div>,
+    size: 80,
+    sortingFn: sortTime,
+  }),
+];
+
+export const RequestList: React.FC<RequestListProps> = ({
+  networkEntries,
+  selectedRequestId,
+  onRequestSelect,
+}) => {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+
+  const requests = React.useMemo(() => {
+    return processNetworkEntries(networkEntries);
+  }, [networkEntries]);
+
+  const table = useReactTable({
+    data: requests,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onSortingChange: setSorting,
+    state: {
+      sorting,
+    },
+  });
+
+  return (
+    <div className="flex-1 overflow-auto">
+      <table className="w-full">
+        <thead className="bg-gray-800 border-b border-gray-700 sticky top-0 z-10">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th
+                  key={header.id}
+                  className={`text-left text-xs font-medium text-gray-400 px-2 py-2 ${
+                    header.column.getCanSort()
+                      ? 'cursor-pointer select-none hover:bg-gray-700'
+                      : ''
+                  }`}
+                  style={{ width: header.getSize() }}
+                  onClick={header.column.getToggleSortingHandler()}
+                >
+                  <div className="flex items-center gap-1">
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                    {header.column.getCanSort() && (
+                      <span className="text-gray-500">
+                        {{
+                          asc: '↑',
+                          desc: '↓',
+                        }[header.column.getIsSorted() as string] ?? '↕'}
+                      </span>
+                    )}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((row) => (
+            <tr
+              key={row.id}
+              className={`text-sm hover:bg-gray-800 cursor-pointer border-b border-gray-800 ${
+                selectedRequestId === row.original.id ? 'bg-blue-900/30' : ''
+              }`}
+              onClick={() => onRequestSelect(row.original.id)}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <td
+                  key={cell.id}
+                  className="px-2 py-1"
+                  style={{ width: cell.column.getSize() }}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+// Export helper functions for use in other components
+export {
+  formatSize,
+  formatDuration,
+  formatStartTime,
+  extractDomainAndPath,
+  generateName,
+  formatInitiator,
+  mapResourceType,
+  getTypeColor,
+  getStatusColor,
+  processNetworkEntries,
+};
+
+export type { NetworkRequest };

package/src/ui/components/ScrollArea.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '../utils';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/src/ui/components/Separator.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '../utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

package/src/ui/components/Tabs.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '../utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-gray-100 data-[state=active]:shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };