Merge branch 'develop' into crawl-search

src/components/robot/RecordingsTable.tsx

@@ -5,7 +5,6 @@ import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
 import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
 import { memo, useCallback, useEffect, useMemo } from "react";
@@ -116,7 +115,6 @@ const LoadingRobotRow = memo(({ row, columns }: any) => {
 
 // Virtualized row component for efficient rendering
 const TableRowMemoized = memo(({ row, columns, handlers }: any) => {
-  // If robot is loading, show loading row
   if (row.isLoading) {
     return <LoadingRobotRow row={row} columns={columns} />;
   }
@@ -592,7 +590,6 @@ export const RecordingsTable = ({
         <>
           <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
             <Table stickyHeader aria-label="sticky table">
-              <TableHead>
                 <TableRow>
                   {columns.map((column) => (
                     <MemoizedTableCell
@@ -603,7 +600,6 @@ export const RecordingsTable = ({
                     </MemoizedTableCell>
                   ))}
                 </TableRow>
-              </TableHead>
               <TableBody>
                 {visibleRows.map((row) => (
                   <TableRowMemoized
@@ -618,13 +614,12 @@ export const RecordingsTable = ({
           </TableContainer>
 
           <TablePagination
-            rowsPerPageOptions={[10, 25, 50, 100]}
             component="div"
             count={filteredRows.length}
-            rowsPerPage={rowsPerPage}
             page={page}
+            rowsPerPage={rowsPerPage}
             onPageChange={handleChangePage}
-            onRowsPerPageChange={handleChangeRowsPerPage}
+            rowsPerPageOptions={[]}
           />
         </>
       )}

src/components/robot/pages/RobotCreate.tsx

@@ -704,14 +704,46 @@ const RobotCreate: React.FC = () => {
                       value={outputFormats}
                       label="Output Formats *"
                       onChange={(e) => {
-                        const value = typeof e.target.value === 'string' ? e.target.value.split(',') : e.target.value;
+                        const value =
+                          typeof e.target.value === 'string'
+                            ? e.target.value.split(',')
+                            : e.target.value;
                         setOutputFormats(value);
                       }}
                       renderValue={(selected) => {
                         if (selected.length === 0) {
                           return <em style={{ color: '#999' }}>Select formats</em>;
                         }
-                        return `${selected.length} format${selected.length > 1 ? 's' : ''} selected`;
+
+                        const OUTPUT_FORMAT_LABELS: Record<string, string> = {
+                          markdown: 'Markdown',
+                          html: 'HTML',
+                          'screenshot-visible': 'Screenshot (Visible)',
+                          'screenshot-fullpage': 'Screenshot (Full Page)',
+                        };
+
+                        const labels = selected.map(
+                          (value) => OUTPUT_FORMAT_LABELS[value] ?? value
+                        );
+
+                        const MAX_ITEMS = 2; // Show only first 2, then ellipsis
+
+                        const display =
+                          labels.length > MAX_ITEMS
+                            ? `${labels.slice(0, MAX_ITEMS).join(', ')}…`
+                            : labels.join(', ');
+
+                        return (
+                          <Box
+                            sx={{
+                              whiteSpace: 'nowrap',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                            }}
+                          >
+                            {display}
+                          </Box>
+                        );
                       }}
                       MenuProps={{
                         PaperProps: {
@@ -1097,4 +1129,4 @@ const modalStyle = {
   height: 'fit-content',
   display: 'block',
   padding: '20px',
-};
+};