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

package/src/ui/components.module.css

@@ -0,0 +1,158 @@
+/* Button Component */
+.button {
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.buttonSmall {
+  font-size: 12px;
+  padding: 4px 8px;
+}
+
+.buttonMedium {
+  font-size: 14px;
+  padding: 8px 16px;
+}
+
+.buttonLarge {
+  font-size: 16px;
+  padding: 12px 24px;
+}
+
+.buttonPrimary {
+  background-color: #007AFF;
+  color: white;
+}
+
+.buttonSecondary {
+  background-color: #6c757d;
+  color: white;
+}
+
+.buttonDanger {
+  background-color: #dc3545;
+  color: white;
+}
+
+.buttonSuccess {
+  background-color: #28a745;
+  color: white;
+}
+
+/* Card Component */
+.card {
+  background-color: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* Badge Component */
+.badge {
+  background-color: #007AFF;
+  color: white;
+  padding: 2px 6px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 500;
+  display: inline-block;
+}
+
+/* Toolbar Component */
+.toolbar {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-bottom: 1px solid #e0e0e0;
+  background-color: #f8f9fa;
+}
+
+/* Panel Header Component */
+.panelHeader {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-bottom: 1px solid #e0e0e0;
+  background-color: #f8f9fa;
+  font-size: 12px;
+  font-weight: bold;
+  color: #333;
+}
+
+/* Empty State Component */
+.emptyState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  color: #666;
+  font-size: 14px;
+  text-align: center;
+}
+
+/* Loading Spinner Component */
+.loadingSpinner {
+  border: 2px solid #e0e0e0;
+  border-top: 2px solid #007AFF;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+/* Tooltip Component */
+.tooltipReference {
+  display: inline-block;
+}
+
+.tooltipFloating {
+  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 rgba(0, 0, 0, 0.3);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  font-family: system-ui, -apple-system, sans-serif;
+  line-height: 1.4;
+}
+
+.tooltipDefault {
+  background-color: #333;
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.tooltipInfo {
+  background-color: #0066cc;
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.tooltipWarning {
+  background-color: #ff8c00;
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.tooltipError {
+  background-color: #dc3545;
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Spinner Animation */
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+} 

package/src/ui/components.tsx

@@ -0,0 +1,219 @@
+import React, { useState, useRef } from 'react';
+import {
+  useFloating,
+  useHover,
+  useInteractions,
+  useRole,
+  useDismiss,
+  FloatingPortal,
+  offset,
+  shift,
+  flip,
+  autoUpdate,
+} from '@floating-ui/react';
+import styles from './components.module.css';
+
+// Button Component
+interface ButtonProps {
+  onClick: () => void;
+  children: React.ReactNode;
+  variant?: 'primary' | 'secondary' | 'danger' | 'success';
+  size?: 'small' | 'medium' | 'large';
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  onClick,
+  children,
+  variant = 'primary',
+  size = 'medium',
+  disabled = false,
+  style,
+  className,
+}) => {
+  const sizeClass = size === 'small' ? styles.buttonSmall : size === 'large' ? styles.buttonLarge : styles.buttonMedium;
+  const variantClass = styles[`button${variant.charAt(0).toUpperCase() + variant.slice(1)}` as keyof typeof styles];
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`${styles.button} ${sizeClass} ${variantClass} ${className || ''}`}
+      style={style}
+    >
+      {children}
+    </button>
+  );
+};
+
+// Card Component
+interface CardProps {
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export const Card: React.FC<CardProps> = ({ children, style, className }) => (
+  <div className={`${styles.card} ${className || ''}`} style={style}>
+    {children}
+  </div>
+);
+
+// Badge Component
+interface BadgeProps {
+  children: React.ReactNode;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+export const Badge: React.FC<BadgeProps> = ({ children, color = '#007AFF', style }) => (
+  <span
+    className={styles.badge}
+    style={{ backgroundColor: color, ...style }}
+  >
+    {children}
+  </span>
+);
+
+// Toolbar Component
+interface ToolbarProps {
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+export const Toolbar: React.FC<ToolbarProps> = ({ children, style }) => (
+  <div className={styles.toolbar} style={style}>
+    {children}
+  </div>
+);
+
+// Panel Header Component
+interface PanelHeaderProps {
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+export const PanelHeader: React.FC<PanelHeaderProps> = ({ children, style }) => (
+  <div className={styles.panelHeader} style={style}>
+    {children}
+  </div>
+);
+
+// Empty State Component
+interface EmptyStateProps {
+  message: string;
+  style?: React.CSSProperties;
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = ({ message, style }) => (
+  <div className={styles.emptyState} style={style}>
+    {message}
+  </div>
+);
+
+// Loading Spinner Component
+interface LoadingSpinnerProps {
+  size?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({ 
+  size = 16, 
+  color = '#007AFF',
+  style 
+}) => (
+  <div
+    className={styles.loadingSpinner}
+    style={{
+      width: size,
+      height: size,
+      borderTopColor: color,
+      ...style,
+    }}
+  />
+);
+
+// Tooltip Component using Floating UI
+interface TooltipProps {
+  children: React.ReactNode;
+  content: string;
+  style?: React.CSSProperties;
+  showOnlyWhenTruncated?: boolean;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  variant?: 'default' | 'info' | 'warning' | 'error';
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({ 
+  children, 
+  content, 
+  style, 
+  showOnlyWhenTruncated = false,
+  placement = 'top',
+  variant = 'default'
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement,
+    middleware: [offset(8), shift(), flip()],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const hover = useHover(context, {
+    move: false,
+    delay: { open: 200, close: 0 },
+  });
+
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: 'tooltip' });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, dismiss, role]);
+
+  React.useEffect(() => {
+    if (showOnlyWhenTruncated && refs.reference.current) {
+      const element = refs.reference.current as HTMLElement;
+      if (element && 'scrollWidth' in element && 'clientWidth' in element) {
+        setIsTruncated(element.scrollWidth > element.clientWidth);
+      }
+    }
+  }, [content, showOnlyWhenTruncated, refs.reference]);
+
+  const shouldShowTooltip = showOnlyWhenTruncated ? isTruncated : true;
+
+  const variantClass = styles[`tooltip${variant.charAt(0).toUpperCase() + variant.slice(1)}` as keyof typeof styles];
+
+  return (
+    <>
+      <div
+        ref={refs.setReference}
+        className={styles.tooltipReference}
+        style={style}
+        {...getReferenceProps()}
+      >
+        {children}
+      </div>
+    
+        <FloatingPortal>
+        {isOpen && (
+          <div
+            ref={refs.setFloating}
+            className={`${styles.tooltipFloating} ${variantClass}`}
+            style={floatingStyles}
+            {...getFloatingProps()}
+          >
+            {content}
+          </div>
+           )}
+        </FloatingPortal>
+     
+    </>
+  );
+};
+
+ 

package/src/ui/network-details.module.css

@@ -0,0 +1,57 @@
+.container {
+  padding: 16px;
+  height: 100%;
+  overflow: auto;
+}
+
+.card {
+  margin-bottom: 20px;
+}
+
+.cardTitle {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+}
+
+.cardTitleError {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+  color: #f44336;
+}
+
+.infoText {
+  font-size: 12px;
+  font-family: monospace;
+}
+
+.infoRow {
+  margin-bottom: 4px;
+  word-break: break-all;
+}
+
+.infoRowUrl {
+  margin-bottom: 4px;
+  word-break: break-all;
+}
+
+.urlText {
+  cursor: help;
+  border-bottom: 1px dotted #666;
+}
+
+.headersContainer {
+  font-size: 12px;
+  font-family: monospace;
+  background-color: #f5f5f5;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.headerRow {
+  margin-bottom: 2px;
+  word-break: break-all;
+}
+
+.headerValue {
+  word-break: break-all;
+} 

package/src/ui/network-details.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { NetworkEntry } from '../types/network';
+import { formatFileSize, formatDuration, formatLongUrl } from './utils';
+import { Card, EmptyState, Tooltip } from './components';
+import styles from './network-details.module.css';
+
+interface NetworkDetailsProps {
+  entry: NetworkEntry | null;
+}
+
+export const NetworkDetails: React.FC<NetworkDetailsProps> = ({ entry }) => {
+  if (!entry) {
+    return <EmptyState message="Select a request to view details" />;
+  }
+
+  return (
+    <div className={styles.container}>
+      {/* General Information */}
+      <Card className={styles.card}>
+        <h3 className={styles.cardTitle}>General</h3>
+        <div className={styles.infoText}>
+          <div className={styles.infoRowUrl}>
+            <strong>Request URL:</strong> 
+            <Tooltip content={entry.request.request.url} showOnlyWhenTruncated>
+              <span className={styles.urlText}>
+                {formatLongUrl(entry.request.request.url, 100)}
+              </span>
+            </Tooltip>
+          </div>
+          <div className={styles.infoRow}>
+            <strong>Request Method:</strong> {entry.request.request.method}
+          </div>
+          <div className={styles.infoRow}>
+            <strong>Status Code:</strong> {entry.response?.response.status || 'Pending'}
+          </div>
+          <div className={styles.infoRow}>
+            <strong>Remote Address:</strong> {entry.response?.response.remoteIPAddress || 'Unknown'}
+          </div>
+          <div className={styles.infoRow}>
+            <strong>Referrer Policy:</strong> {entry.request.request.headers['referer'] || 'no-referrer'}
+          </div>
+        </div>
+      </Card>
+
+      {/* Response Headers */}
+      {entry.response && (
+        <Card className={styles.card}>
+          <h3 className={styles.cardTitle}>Response Headers</h3>
+          <div className={styles.headersContainer}>
+            {Object.entries(entry.response.response.headers).map(([key, value]) => (
+              <div key={key} className={styles.headerRow}>
+                <strong>{key}:</strong> 
+                <Tooltip content={value} showOnlyWhenTruncated>
+                  <span className={styles.headerValue}>
+                    {value}
+                  </span>
+                </Tooltip>
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+
+      {/* Request Headers */}
+      <Card className={styles.card}>
+        <h3 className={styles.cardTitle}>Request Headers</h3>
+        <div className={styles.headersContainer}>
+          {Object.entries(entry.request.request.headers).map(([key, value]) => (
+            <div key={key} className={styles.headerRow}>
+              <strong>{key}:</strong> 
+              <Tooltip content={value} showOnlyWhenTruncated>
+                <span className={styles.headerValue}>
+                  {value}
+                </span>
+              </Tooltip>
+            </div>
+          ))}
+        </div>
+      </Card>
+
+      {/* Size Information */}
+      {entry.response && (
+        <Card className={styles.card}>
+          <h3 className={styles.cardTitle}>Size Information</h3>
+          <div className={styles.infoText}>
+            <div className={styles.infoRow}>
+              <strong>Decoded Body Size:</strong> {formatFileSize(entry.response.response.decodedBodySize)}
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {/* Timing Information */}
+      {entry.response?.response.timing && (
+        <Card className={styles.card}>
+          <h3 className={styles.cardTitle}>Timing</h3>
+          <div className={styles.infoText}>
+            <div className={styles.infoRow}>
+              <strong>Time to First Byte:</strong> {entry.response.response.timing.receiveHeadersEnd - entry.response.response.timing.sendEnd}ms
+            </div>
+            <div className={styles.infoRow}>
+              <strong>Total Duration:</strong> {entry.duration ? formatDuration(entry.duration) : 'Unknown'}
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {/* Error Information */}
+      {entry.loadingFailed && (
+        <Card className={styles.card}>
+          <h3 className={styles.cardTitleError}>Error</h3>
+          <div className={styles.infoText}>
+            <div className={styles.infoRow}>
+              <strong>Error Text:</strong> {entry.loadingFailed.errorText}
+            </div>
+            <div className={styles.infoRow}>
+              <strong>Type:</strong> {entry.loadingFailed.type}
+            </div>
+            {entry.loadingFailed.blockedReason && (
+              <div className={styles.infoRow}>
+                <strong>Blocked Reason:</strong> {entry.loadingFailed.blockedReason}
+              </div>
+            )}
+            {entry.loadingFailed.canceled && (
+              <div className={styles.infoRow}>
+                <strong>Canceled:</strong> Yes
+              </div>
+            )}
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}; 

package/src/ui/network-list.module.css

@@ -0,0 +1,122 @@
+.container {
+  height: 100%;
+  overflow: auto;
+}
+
+.virtualContainer {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+.virtualItem {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 60px;
+}
+
+.listItem {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-bottom: 1px solid #e0e0e0;
+  background-color: white;
+  cursor: pointer;
+  font-size: 12px;
+  font-family: monospace;
+  height: 60px;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.listItemSelected {
+  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 {
+  width: 60px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.methodColumn {
+  width: 80px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.urlColumn {
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.domainText {
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pathText {
+  color: #666;
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fullUrlText {
+  color: #999;
+  font-size: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 1px;
+}
+
+.durationColumn {
+  width: 80px;
+  text-align: right;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.sizeColumn {
+  width: 80px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.columnText {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+.emptyContainer {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.emptyText {
+  color: #666;
+  font-size: 14px;
+}