HyperCluster/Fara-BrowserUse

1import React from 'react';
2import { Card, CardContent, Box, Typography, CircularProgress } from '@mui/material';
3import CableIcon from '@mui/icons-material/Cable';
4import { keyframes } from '@mui/system';
5
6// Border pulse animation
7const borderPulse = keyframes`
8  0%, 100% {
9    border-color: rgba(79, 134, 198, 0.4);
10    box-shadow: 0 2px 8px rgba(79, 134, 198, 0.15);
11  }
12  50% {
13    border-color: rgba(79, 134, 198, 0.8);
14    box-shadow: 0 2px 12px rgba(79, 134, 198, 0.3);
15  }
16`;
17
18// Background pulse animation
19const backgroundPulse = keyframes`
20  0%, 100% {
21    background-color: rgba(79, 134, 198, 0.03);
22  }
23  50% {
24    background-color: rgba(79, 134, 198, 0.08);
25  }
26`;
27
28interface ConnectionStepCardProps {
29  isConnecting: boolean;
30}
31
32export const ConnectionStepCard: React.FC<ConnectionStepCardProps> = ({ isConnecting }) => {
33  return (
34    <Card
35      elevation={0}
36      sx={{
37        backgroundColor: 'background.paper',
38        border: '2px solid',
39        borderColor: isConnecting ? 'primary.main' : 'success.main',
40        borderRadius: 1.5,
41        animation: isConnecting ? `${borderPulse} 2s ease-in-out infinite` : 'none',
42        position: 'relative',
43        overflow: 'hidden',
44        '&::before': isConnecting ? {
45          content: '""',
46          position: 'absolute',
47          top: 0,
48          left: 0,
49          right: 0,
50          bottom: 0,
51          animation: `${backgroundPulse} 2s ease-in-out infinite`,
52          zIndex: 0,
53        } : {},
54      }}
55    >
56      <CardContent sx={{ p: 1.5, '&:last-child': { pb: 1.5 }, position: 'relative', zIndex: 1 }}>
57        {/* Header with spinner or check */}
58        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
59          <Box
60            sx={{
61              display: 'flex',
62              alignItems: 'center',
63              justifyContent: 'center',
64              position: 'relative',
65            }}
66          >
67            {isConnecting ? (
68              <CircularProgress
69                size={32}
70                thickness={2.5}
71                sx={{
72                  color: 'primary.main',
73                }}
74              />
75            ) : (
76              <CableIcon
77                sx={{
78                  fontSize: 28,
79                  color: 'success.main',
80                }}
81              />
82            )}
83          </Box>
84
85          <Box sx={{ flex: 1, minWidth: 0 }}>
86            <Typography
87              sx={{
88                fontSize: '0.85rem',
89                fontWeight: 700,
90                color: isConnecting ? 'primary.main' : 'success.main',
91                lineHeight: 1.3,
92              }}
93            >
94              {isConnecting ? 'Starting FARA...' : 'Browser Ready'}
95            </Typography>
96            <Typography
97              sx={{
98                fontSize: '0.7rem',
99                color: 'text.secondary',
100                lineHeight: 1.2,
101              }}
102            >
103              {isConnecting ? 'Initializing browser environment' : 'Agent ready to execute tasks'}
104            </Typography>
105          </Box>
106        </Box>
107      </CardContent>
108    </Card>
109  );
110};
111