UI enhancements for Visualization and Summary pages

frontend/src/components/ui/Badge.tsx

@@ -0,0 +1,53 @@
+import { FC, ReactNode } from 'react';
+import { cn } from '../../lib/utils';
+
+interface BadgeProps {
+  children: ReactNode;
+  variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  animated?: boolean;
+}
+
+/**
+ * Badge component for displaying status indicators
+ * 
+ * Note: The animated prop uses the 'animate-ui-pulse-glow' CSS class
+ * which is defined in src/index.css
+ */
+export const Badge: FC<BadgeProps> = ({
+  children,
+  variant = 'default',
+  size = 'md',
+  className,
+  animated = false,
+}) => {
+  const variants = {
+    default: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+    success: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
+    warning: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+    error: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
+    info: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300',
+    neutral: 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300',
+  };
+
+  const sizes = {
+    sm: 'px-2 py-0.5 text-xs',
+    md: 'px-2.5 py-1 text-sm',
+    lg: 'px-3 py-1.5 text-base',
+  };
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center font-medium rounded-full transition-colors',
+        variants[variant],
+        sizes[size],
+        animated && 'animate-ui-pulse-glow',
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+};

frontend/src/components/ui/Breadcrumbs.tsx

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { ChevronRight, Home } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+  className?: string;
+}
+
+export const Breadcrumbs: FC<BreadcrumbsProps> = ({ items, className }) => {
+  return (
+    <nav aria-label="Breadcrumb" className={cn('flex items-center text-sm', className)}>
+      <Link
+        to="/"
+        className="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
+        aria-label="Home"
+      >
+        <Home className="h-4 w-4" />
+      </Link>
+
+      {items.map((item, index) => (
+        <div key={index} className="flex items-center">
+          <ChevronRight className="h-4 w-4 mx-2 text-slate-400 dark:text-slate-500" />
+          {item.href && index < items.length - 1 ? (
+            <Link
+              to={item.href}
+              className="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
+            >
+              {item.label}
+            </Link>
+          ) : (
+            <span className="text-slate-900 dark:text-slate-100 font-medium">
+              {item.label}
+            </span>
+          )}
+        </div>
+      ))}
+    </nav>
+  );
+};

frontend/src/components/ui/EmptyState.tsx

@@ -0,0 +1,41 @@
+import { FC, ReactNode } from 'react';
+import { FileQuestion } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+interface EmptyStateProps {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  className?: string;
+}
+
+export const EmptyState: FC<EmptyStateProps> = ({
+  icon,
+  title,
+  description,
+  action,
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center p-12 text-center',
+        className
+      )}
+    >
+      <div className="mb-4 text-slate-400 dark:text-slate-500">
+        {icon || <FileQuestion className="h-16 w-16" />}
+      </div>
+      <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
+        {title}
+      </h3>
+      {description && (
+        <p className="text-sm text-slate-500 dark:text-slate-400 mb-6 max-w-md">
+          {description}
+        </p>
+      )}
+      {action && <div>{action}</div>}
+    </div>
+  );
+};

frontend/src/components/ui/LoadingSkeleton.tsx

@@ -0,0 +1,63 @@
+import { FC } from 'react';
+import { cn } from '../../lib/utils';
+
+interface LoadingSkeletonProps {
+  variant?: 'text' | 'circular' | 'rectangular' | 'card';
+  width?: string | number;
+  height?: string | number;
+  className?: string;
+  count?: number;
+}
+
+/**
+ * LoadingSkeleton component for showing loading states
+ * 
+ * Note: Uses the 'animate-ui-shimmer' CSS class defined in src/index.css
+ */
+export const LoadingSkeleton: FC<LoadingSkeletonProps> = ({
+  variant = 'rectangular',
+  width,
+  height,
+  className,
+  count = 1,
+}) => {
+  const baseClasses = [
+    'animate-ui-shimmer',
+    'bg-gradient-to-r',
+    'from-slate-200 via-slate-300 to-slate-200',
+    'dark:from-slate-700 dark:via-slate-600 dark:to-slate-700'
+  ].join(' ');
+
+  const variants = {
+    text: 'rounded h-4',
+    circular: 'rounded-full',
+    rectangular: 'rounded-md',
+    card: 'rounded-xl h-32',
+  };
+
+  const style = {
+    width: width || (variant === 'text' ? '100%' : variant === 'circular' ? '48px' : '100%'),
+    height: height || (variant === 'circular' ? '48px' : variant === 'card' ? '128px' : '16px'),
+  };
+
+  if (count > 1) {
+    return (
+      <div className="space-y-2">
+        {Array.from({ length: count }).map((_, index) => (
+          <div
+            key={index}
+            className={cn(baseClasses, variants[variant], className)}
+            style={style}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(baseClasses, variants[variant], className)}
+      style={style}
+    />
+  );
+};

frontend/src/components/ui/Tooltip.tsx

@@ -0,0 +1,76 @@
+import { FC, ReactNode, useState, KeyboardEvent } from 'react';
+import { cn } from '../../lib/utils';
+
+interface TooltipProps {
+  content: string | ReactNode;
+  children: ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  className?: string;
+}
+
+/**
+ * Tooltip component for displaying contextual help
+ * 
+ * Keyboard navigation:
+ * - Press Enter or Space to toggle tooltip visibility
+ * - Press Escape to close the tooltip
+ */
+export const Tooltip: FC<TooltipProps> = ({
+  content,
+  children,
+  position = 'top',
+  className,
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const positionClasses = {
+    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+    left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+    right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      setIsVisible(false);
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      setIsVisible(prev => !prev);
+    }
+  };
+
+  return (
+    <div className="relative inline-block">
+      <div
+        onMouseEnter={() => setIsVisible(true)}
+        onMouseLeave={() => setIsVisible(false)}
+        onFocus={() => setIsVisible(true)}
+        onBlur={() => setIsVisible(false)}
+        onKeyDown={handleKeyDown}
+      >
+        {children}
+      </div>
+      {isVisible && (
+        <div
+          role="tooltip"
+          className={cn(
+            'absolute z-50 px-3 py-2 text-sm text-white bg-slate-900 dark:bg-slate-700 rounded-lg shadow-lg whitespace-nowrap pointer-events-none animate-in fade-in-0 zoom-in-95',
+            positionClasses[position],
+            className
+          )}
+        >
+          {content}
+          <div
+            className={cn(
+              'absolute w-2 h-2 bg-slate-900 dark:bg-slate-700 rotate-45',
+              position === 'top' && 'bottom-[-4px] left-1/2 -translate-x-1/2',
+              position === 'bottom' && 'top-[-4px] left-1/2 -translate-x-1/2',
+              position === 'left' && 'right-[-4px] top-1/2 -translate-y-1/2',
+              position === 'right' && 'left-[-4px] top-1/2 -translate-y-1/2'
+            )}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/index.css

@@ -23,3 +23,33 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+/* Custom Animations */
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+  }
+  50% {
+    opacity: 0.9;
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+  }
+}
+
+.animate-ui-shimmer {
+  animation: shimmer 2s infinite linear;
+  background-size: 2000px 100%;
+}
+
+.animate-ui-pulse-glow {
+  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}