Merge pull request #921 from getmaxun/airobot

feat: AI powered robot generation

server/src/routes/storage.ts

@@ -15,6 +15,7 @@ import { encrypt, decrypt } from '../utils/auth';
 import { WorkflowFile } from 'maxun-core';
 import { cancelScheduledWorkflow, scheduleWorkflow } from '../storage/schedule';
 import { pgBossClient } from '../storage/pgboss';
+import { WorkflowEnricher } from '../sdk/workflowEnricher';
 
 export const router = Router();
 
@@ -518,6 +519,92 @@ router.post('/recordings/scrape', requireSignIn, async (req: AuthenticatedReques
   }
 });
 
+/**
+ * POST endpoint for creating an LLM-powered extraction robot
+ */
+router.post('/recordings/llm', requireSignIn, async (req: AuthenticatedRequest, res) => {
+  try {
+    const { url, prompt, llmProvider, llmModel, llmApiKey, llmBaseUrl, robotName } = req.body;
+
+    if (!url || !prompt) {
+      return res.status(400).json({ error: 'Both "url" and "prompt" fields are required.' });
+    }
+
+    if (!req.user) {
+      return res.status(401).send({ error: 'Unauthorized' });
+    }
+
+    try {
+      new URL(url);
+    } catch (err) {
+      return res.status(400).json({ error: 'Invalid URL format' });
+    }
+
+    logger.log('info', `Starting LLM workflow generation for URL: ${url}`);
+
+    const workflowResult = await WorkflowEnricher.generateWorkflowFromPrompt(url, prompt, req.user.id, {
+      provider: llmProvider || 'ollama',
+      model: llmModel,
+      apiKey: llmApiKey,
+      baseUrl: llmBaseUrl
+    });
+
+    if (!workflowResult.success || !workflowResult.workflow) {
+      logger.log('error', `Failed to generate workflow: ${JSON.stringify(workflowResult.errors)}`);
+      return res.status(400).json({
+        error: 'Failed to generate workflow from prompt',
+        details: workflowResult.errors
+      });
+    }
+
+    const robotId = uuid();
+    const currentTimestamp = new Date().toISOString();
+    const finalRobotName = robotName || `LLM Extract: ${prompt.substring(0, 50)}`;
+
+    const newRobot = await Robot.create({
+      id: uuid(),
+      userId: req.user.id,
+      recording_meta: {
+        name: finalRobotName,
+        id: robotId,
+        createdAt: currentTimestamp,
+        updatedAt: currentTimestamp,
+        pairs: workflowResult.workflow.length,
+        params: [],
+        type: 'extract',
+        url: workflowResult.url || url,
+      },
+      recording: { workflow: workflowResult.workflow },
+      google_sheet_email: null,
+      google_sheet_name: null,
+      google_sheet_id: null,
+      google_access_token: null,
+      google_refresh_token: null,
+      schedule: null,
+    });
+
+    logger.log('info', `LLM robot created with id: ${newRobot.id}`);
+    capture('maxun-oss-robot-created', {
+      robot_meta: newRobot.recording_meta,
+      recording: newRobot.recording,
+      llm_provider: llmProvider || 'ollama',
+    });
+
+    return res.status(201).json({
+      message: 'LLM robot created successfully.',
+      robot: newRobot,
+    });
+  } catch (error) {
+    if (error instanceof Error) {
+      logger.log('error', `Error creating LLM robot: ${error.message}`);
+      return res.status(500).json({ error: error.message });
+    } else {
+      logger.log('error', 'Unknown error creating LLM robot');
+      return res.status(500).json({ error: 'An unknown error occurred.' });
+    }
+  }
+});
+
 /**
  * DELETE endpoint for deleting a recording from the storage.
  */
@@ -1234,4 +1321,4 @@ export async function recoverOrphanedRuns() {
   }
 }
 
-export { processQueuedRuns };
+export { processQueuedRuns };

src/api/storage.ts

@@ -58,12 +58,50 @@ export const createScrapeRobot = async (
   }
 };
 
+export const createLLMRobot = async (
+  url: string,
+  prompt: string,
+  llmProvider?: 'anthropic' | 'openai' | 'ollama',
+  llmModel?: string,
+  llmApiKey?: string,
+  llmBaseUrl?: string,
+  robotName?: string
+): Promise<any> => {
+  try {
+    const response = await axios.post(
+      `${apiUrl}/storage/recordings/llm`,
+      {
+        url,
+        prompt,
+        llmProvider,
+        llmModel,
+        llmApiKey,
+        llmBaseUrl,
+        robotName,
+      },
+      {
+        headers: { 'Content-Type': 'application/json' },
+        withCredentials: true,
+        timeout: 300000,
+      }
+    );
+
+    if (response.status === 201) {
+      return response.data;
+    } else {
+      throw new Error('Failed to create LLM robot');
+    }
+  } catch (error: any) {
+    console.error('Error creating LLM robot:', error);
+    return null;
+  }
+};
+
 export const updateRecording = async (id: string, data: { 
   name?: string; 
   limits?: Array<{pairIndex: number, actionIndex: number, argIndex: number, limit: number}>;
   credentials?: Credentials; 
   targetUrl?: string;
-  // optional full workflow replacement (useful for action renames)
   workflow?: any[];
 }): Promise<boolean> => {
   try {

src/components/robot/RecordingsTable.tsx

@@ -81,8 +81,46 @@ interface RecordingsTableProps {
   handleDuplicateRobot: (id: string, name: string, params: string[]) => void;
 }
 
+const LoadingRobotRow = memo(({ row, columns }: any) => {
+  return (
+    <TableRow hover role="checkbox" tabIndex={-1} sx={{ backgroundColor: 'action.hover' }}>
+      {columns.map((column: Column) => {
+        if (column.id === 'name') {
+          return (
+            <MemoizedTableCell key={column.id} align={column.align}>
+              <Box display="flex" alignItems="center" gap={2}>
+                <CircularProgress size={20} />
+                <Typography variant="body2" color="text.secondary">
+                  {row.name} (Creating...)
+                </Typography>
+              </Box>
+            </MemoizedTableCell>
+          );
+        } else if (column.id === 'interpret') {
+          return (
+            <MemoizedTableCell key={column.id} align={column.align}>
+              <CircularProgress size={20} />
+            </MemoizedTableCell>
+          );
+        } else {
+          return (
+            <MemoizedTableCell key={column.id} align={column.align}>
+              <Box sx={{ opacity: 0.3 }}>-</Box>
+            </MemoizedTableCell>
+          );
+        }
+      })}
+    </TableRow>
+  );
+});
+
 // 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} />;
+  }
+
   return (
     <TableRow hover role="checkbox" tabIndex={-1}>
       {columns.map((column: Column) => {
@@ -261,7 +299,9 @@ export const RecordingsTable = ({
             id: index,
             ...recording.recording_meta,
             content: recording.recording,
-            parsedDate
+            parsedDate,
+            isLoading: recording.isLoading || false,
+            isOptimistic: recording.isOptimistic || false
           };
         }
         return null;
@@ -552,7 +592,7 @@ export const RecordingsTable = ({
         <>
           <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
             <Table stickyHeader aria-label="sticky table">
-              {/* <TableHead> */}
+              <TableHead>
                 <TableRow>
                   {columns.map((column) => (
                     <MemoizedTableCell
@@ -563,7 +603,7 @@ export const RecordingsTable = ({
                     </MemoizedTableCell>
                   ))}
                 </TableRow>
-              {/* </TableHead> */}
+              </TableHead>
               <TableBody>
                 {visibleRows.map((row) => (
                   <TableRowMemoized

src/components/robot/pages/RobotCreate.tsx

@@ -6,10 +6,8 @@ import {
   Typography,
   TextField,
   Button,
-  FormControlLabel,
   Checkbox,
   IconButton,
-  Grid,
   Card,
   CircularProgress,
   Container,
@@ -21,10 +19,10 @@ import {
   MenuItem,
   InputLabel
 } from '@mui/material';
-import { ArrowBack, PlayCircleOutline, Article, Code, Description } from '@mui/icons-material';
+import { ArrowBack, AutoAwesome, HighlightAlt } from '@mui/icons-material';
-import { useGlobalInfoStore } from '../../../context/globalInfo';
+import { useGlobalInfoStore, useCacheInvalidation } from '../../../context/globalInfo';
 import { canCreateBrowserInState, getActiveBrowserId, stopRecording } from '../../../api/recording';
-import { createScrapeRobot } from "../../../api/storage";
+import { createScrapeRobot, createLLMRobot, createAndRunRecording } from "../../../api/storage";
 import { AuthContext } from '../../../context/auth';
 import { GenericModal } from '../../ui/GenericModal';
 
@@ -59,14 +57,24 @@ const RobotCreate: React.FC = () => {
   const [tabValue, setTabValue] = useState(0);
   const [url, setUrl] = useState('');
   const [scrapeRobotName, setScrapeRobotName] = useState('');
+  const [extractRobotName, setExtractRobotName] = useState('');
   const [needsLogin, setNeedsLogin] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [isWarningModalOpen, setWarningModalOpen] = useState(false);
   const [activeBrowserId, setActiveBrowserId] = useState('');
   const [outputFormats, setOutputFormats] = useState<string[]>([]);
+  const [generationMode, setGenerationMode] = useState<'agent' | 'recorder' | null>(null);
+
+  const [aiPrompt, setAiPrompt] = useState('');
+  const [llmProvider, setLlmProvider] = useState<'anthropic' | 'openai' | 'ollama'>('ollama');
+  const [llmModel, setLlmModel] = useState('default');
+  const [llmApiKey, setLlmApiKey] = useState('');
+  const [llmBaseUrl, setLlmBaseUrl] = useState('');
+  const [aiRobotName, setAiRobotName] = useState('');
 
   const { state } = React.useContext(AuthContext);
   const { user } = state;
+  const { addOptimisticRobot, removeOptimisticRobot, invalidateRecordings, invalidateRuns, addOptimisticRun } = useCacheInvalidation();
 
   const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
     setTabValue(newValue);
@@ -147,11 +155,6 @@ const RobotCreate: React.FC = () => {
     navigate('/robots');
   };
 
-
-
-
-
-
   return (
     <Container maxWidth="md" sx={{ py: 4 }}>
       <Box>
@@ -210,11 +213,9 @@ const RobotCreate: React.FC = () => {
           </Tabs>
         </Box>
 
-
         <TabPanel value={tabValue} index={0}>
-          <Card sx={{ mb: 4, p: 4, textAlign: 'center' }}>
+          <Card sx={{ mb: 4, p: 4 }}>
             <Box display="flex" flexDirection="column" alignItems="center">
-              {/* Logo (kept as original) */}
               <img
                 src="https://ik.imagekit.io/ys1blv5kv/maxunlogo.png"
                 width={73}
@@ -227,138 +228,339 @@ const RobotCreate: React.FC = () => {
               />
 
               <Typography variant="body2" color="text.secondary" mb={3}>
-                Extract structured data from websites in a few clicks.
+                Extract structured data from websites using AI or record your own extraction workflow.
               </Typography>
-
+              <Box sx={{ width: '100%', maxWidth: 700, mb: 3 }}>
-              {/* Origin URL Input */}
-              <Box sx={{ width: '100%', maxWidth: 700, mb: 2 }}>
                 <TextField
                   placeholder="Example: https://www.ycombinator.com/companies/"
                   variant="outlined"
                   fullWidth
                   value={url}
                   onChange={(e) => setUrl(e.target.value)}
+                  label="Website URL"
                 />
               </Box>
 
-              {/* Checkbox */}
+              <Box sx={{ width: '100%', maxWidth: 700, mb: 3 }}>
-              <Box sx={{ width: '100%', maxWidth: 700, mb: 3, textAlign: 'left' }}>
+                <Typography variant="subtitle1" gutterBottom sx={{ mb: 2 }} color="text.secondary">
-                <FormControlLabel
+                  Choose How to Build
-                  control={
+                </Typography>
-                    <Checkbox
-                      checked={needsLogin}
-                      onChange={(e) => setNeedsLogin(e.target.checked)}
-                      color="primary"
-                    />
-                  }
-                  label="This website needs logging in."
-                />
-              </Box>
 
-              {/* Button */}
+                <Box sx={{ display: 'flex', gap: 2 }}>
-              <Button
+                  <Card
-                variant="contained"
+                    onClick={() => setGenerationMode('recorder')}
-                fullWidth
+                    sx={{
-                onClick={handleStartRecording}
+                      flex: 1,
-                disabled={!url.trim() || isLoading}
+                      cursor: 'pointer',
-                sx={{
+                      border: '2px solid',
-                  bgcolor: '#ff00c3',
+                      borderColor: generationMode === 'recorder' ? '#ff00c3' : 'divider',
-                  py: 1.4,
+                      transition: 'all 0.2s',
-                  fontSize: '1rem',
+                      '&:hover': {
-                  textTransform: 'none',
+                        borderColor: '#ff00c3',
-                  maxWidth: 700,
+                      }
-                  borderRadius: 2
+                    }}
-                }}
+                  >
-                startIcon={isLoading ? <CircularProgress size={20} color="inherit" /> : null}
+                    <CardContent sx={{ textAlign: 'center', py: 3, color:"text.secondary" }}>
-              >
+                      <HighlightAlt sx={{ fontSize: 32, mb: 1 }} />
-                {isLoading ? 'Starting...' : 'Start Recording'}
+                      <Typography variant="h6" gutterBottom>
-              </Button>
+                        Recorder Mode
-            </Box>
+                      </Typography>
+                      <Typography variant="body2">
+                        Record your actions into a workflow.
+                      </Typography>
+                    </CardContent>
+                  </Card>
+
+                  <Card
+                    onClick={() => setGenerationMode('agent')}
+                    sx={{
+                      flex: 1,
+                      cursor: 'pointer',
+                      border: '2px solid',
+                      borderColor: generationMode === 'agent' ? '#ff00c3' : 'divider',
+                      transition: 'all 0.2s',
+                      '&:hover': {
+                        borderColor: '#ff00c3',
+                      },
+                      position: 'relative'
+                    }}
+                  >
+                    <Box
+                      sx={{
+                        position: 'absolute',
+                        top: 8,
+                        right: 8,
+                        background: '#ff00c3',
+                        color: '#fff',
+                        px: 1,
+                        py: 0.3,
+                        borderRadius: '10px',
+                        fontSize: '0.7rem',
+                      }}
+                    >
+                      Beta
+                    </Box>
+
+                    <CardContent sx={{ textAlign: 'center', py: 3, color:"text.secondary" }}>
+                      <AutoAwesome sx={{ fontSize: 32, mb: 1 }} />
+                      <Typography variant="h6" gutterBottom>
+                        AI Mode
+                      </Typography>
+                      <Typography variant="body2">
+                        Describe the task. It builds it for you.
+                      </Typography>
+                    </CardContent>
+                  </Card>
+                </Box>
+              </Box>
+                {generationMode === 'agent' && (
+                  <Box sx={{ width: '100%', maxWidth: 700 }}>
+                    <Box sx={{ mb: 3 }}>
+                      <TextField
+                        placeholder="Robot Name"
+                        variant="outlined"
+                        fullWidth
+                        value={extractRobotName}
+                        onChange={(e) => setExtractRobotName(e.target.value)}
+                        label="Robot Name"
+                      />
+                    </Box>
+
+                    <Box sx={{ mb: 3 }}>
+                      <TextField
+                        placeholder="Example: Extract first 15 company names, descriptions, and batch information"
+                        variant="outlined"
+                        fullWidth
+                        multiline
+                        rows={3}
+                        value={aiPrompt}
+                        onChange={(e) => setAiPrompt(e.target.value)}
+                        label="Extraction Prompt"
+                      />
+                    </Box>
+
+                    <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
+                      <FormControl sx={{ flex: 1 }}>
+                        <InputLabel>LLM Provider</InputLabel>
+                        <Select
+                          value={llmProvider}
+                          label="LLM Provider"
+                          onChange={(e) => {
+                            const provider = e.target.value as 'anthropic' | 'openai' | 'ollama';
+                            setLlmProvider(provider);
+                            setLlmModel('default');
+                            if (provider === 'ollama') {
+                              setLlmBaseUrl('http://localhost:11434');
+                            } else {
+                              setLlmBaseUrl('');
+                            }
+                          }}
+                        >
+                          <MenuItem value="ollama">Ollama (Local)</MenuItem>
+                          <MenuItem value="anthropic">Anthropic (Claude)</MenuItem>
+                          <MenuItem value="openai">OpenAI (GPT-4)</MenuItem>
+                        </Select>
+                      </FormControl>
+
+                      <FormControl sx={{ flex: 1 }}>
+                        <InputLabel>Model</InputLabel>
+                        <Select
+                          value={llmModel}
+                          label="Model"
+                          onChange={(e) => setLlmModel(e.target.value)}
+                        >
+                          {llmProvider === 'ollama' ? (
+                            [
+                              <MenuItem key="default" value="default">Default (llama3.2-vision)</MenuItem>,
+                              <MenuItem key="llama3.2-vision" value="llama3.2-vision">llama3.2-vision</MenuItem>,
+                              <MenuItem key="llama3.2" value="llama3.2">llama3.2</MenuItem>
+                            ]
+                          ) : llmProvider === 'anthropic' ? (
+                            [
+                              <MenuItem key="default" value="default">Default (claude-3-5-sonnet)</MenuItem>,
+                              <MenuItem key="claude-3-5-sonnet-20241022" value="claude-3-5-sonnet-20241022">claude-3-5-sonnet-20241022</MenuItem>,
+                              <MenuItem key="claude-3-opus-20240229" value="claude-3-opus-20240229">claude-3-opus-20240229</MenuItem>
+                            ]
+                          ) : (
+                            [
+                              <MenuItem key="default" value="default">Default (gpt-4-vision-preview)</MenuItem>,
+                              <MenuItem key="gpt-4-vision-preview" value="gpt-4-vision-preview">gpt-4-vision-preview</MenuItem>,
+                              <MenuItem key="gpt-4o" value="gpt-4o">gpt-4o</MenuItem>
+                            ]
+                          )}
+                        </Select>
+                      </FormControl>
+                    </Box>
+
+                    {/* API Key for non-Ollama providers */}
+                    {llmProvider !== 'ollama' && (
+                      <Box sx={{ mb: 3 }}>
+                        <TextField
+                          placeholder={`${llmProvider === 'anthropic' ? 'Anthropic' : 'OpenAI'} API Key`}
+                          variant="outlined"
+                          fullWidth
+                          type="password"
+                          value={llmApiKey}
+                          onChange={(e) => setLlmApiKey(e.target.value)}
+                          label="API Key (Optional if set in .env)"
+                        />
+                      </Box>
+                    )}
+
+                    {llmProvider === 'ollama' && (
+                      <Box sx={{ mb: 3 }}>
+                        <TextField
+                          placeholder="http://localhost:11434"
+                          variant="outlined"
+                          fullWidth
+                          value={llmBaseUrl}
+                          onChange={(e) => setLlmBaseUrl(e.target.value)}
+                          label="Ollama Base URL (Optional)"
+                        />
+                      </Box>
+                    )}
+
+                    <Button
+                      variant="contained"
+                      fullWidth
+                      onClick={async () => {
+                        if (!url.trim()) {
+                          notify('error', 'Please enter a valid URL');
+                          return;
+                        }
+                        if (!extractRobotName.trim()) {
+                          notify('error', 'Please enter a robot name');
+                          return;
+                        }
+                        if (!aiPrompt.trim()) {
+                          notify('error', 'Please enter an extraction prompt');
+                          return;
+                        }
+
+                        const tempRobotId = `temp-${Date.now()}`;
+                        const robotDisplayName = extractRobotName;
+
+                        const optimisticRobot = {
+                          id: tempRobotId,
+                          recording_meta: {
+                            id: tempRobotId,
+                            name: robotDisplayName,
+                            createdAt: new Date().toISOString(),
+                            updatedAt: new Date().toISOString(),
+                            pairs: 0,
+                            params: [],
+                            type: 'extract',
+                            url: url,
+                          },
+                          recording: { workflow: [] },
+                          isLoading: true,
+                          isOptimistic: true
+                        };
+
+                        addOptimisticRobot(optimisticRobot);
+
+                        notify('info', `Robot ${robotDisplayName} creation started`);
+                        navigate('/robots');
+
+                        try {
+                          const result = await createLLMRobot(
+                            url,
+                            aiPrompt,
+                            llmProvider,
+                            llmModel === 'default' ? undefined : llmModel,
+                            llmApiKey || undefined,
+                            llmBaseUrl || undefined,
+                            extractRobotName
+                          );
+
+                          removeOptimisticRobot(tempRobotId);
+
+                          if (!result || !result.robot) {
+                            notify('error', 'Failed to create AI robot. Please check your LLM configuration.');
+                            invalidateRecordings();
+                            return;
+                          }
+
+                          const robotMetaId = result.robot.recording_meta.id;
+                          const robotName = result.robot.recording_meta.name;
+
+                          invalidateRecordings();
+                          notify('success', `${robotName} created successfully!`);
+
+                          const optimisticRun = {
+                            id: robotMetaId,
+                            runId: `temp-${Date.now()}`,
+                            status: 'running',
+                            name: robotName,
+                            startedAt: new Date().toISOString(),
+                            finishedAt: '',
+                            robotMetaId: robotMetaId,
+                            log: 'Starting...',
+                            isOptimistic: true
+                          };
+
+                          addOptimisticRun(optimisticRun);
+
+                          const runResponse = await createAndRunRecording(robotMetaId, {
+                            maxConcurrency: 1,
+                            maxRepeats: 1,
+                            debug: false
+                          });
+
+                          invalidateRuns();
+
+                          if (runResponse && runResponse.runId) {
+                            await new Promise(resolve => setTimeout(resolve, 300));
+                            navigate(`/runs/${robotMetaId}/run/${runResponse.runId}`);
+                            notify('info', `Run started: ${robotName}`);
+                          } else {
+                            notify('warning', 'Robot created but failed to start execution.');
+                            navigate('/robots');
+                          }
+                        } catch (error: any) {
+                          console.error('Error in AI robot creation:', error);
+                          removeOptimisticRobot(tempRobotId);
+                          invalidateRecordings();
+                          notify('error', error?.message || 'Failed to create and run AI robot');
+                        }
+                      }}
+                      disabled={!url.trim() || !extractRobotName.trim() || !aiPrompt.trim() || isLoading}
+                      sx={{
+                        bgcolor: '#ff00c3',
+                        py: 1.4,
+                        fontSize: '1rem',
+                        textTransform: 'none',
+                        borderRadius: 2
+                      }}
+                      startIcon={isLoading ? <CircularProgress size={20} color="inherit" /> : null}
+                    >
+                      {isLoading ? 'Creating & Running...' : 'Create & Run Robot'}
+                    </Button>
+                  </Box>
+                )}
+
+                {generationMode === 'recorder' && (
+                  <Box sx={{ width: '100%', maxWidth: 700 }}>
+                    <Button
+                      variant="contained"
+                      fullWidth
+                      onClick={handleStartRecording}
+                      disabled={!url.trim() || isLoading}
+                      sx={{
+                        bgcolor: '#ff00c3',
+                        py: 1.4,
+                        fontSize: '1rem',
+                        textTransform: 'none',
+                        borderRadius: 2
+                      }}
+                      startIcon={isLoading ? <CircularProgress size={20} color="inherit" /> : null}
+                    >
+                      {isLoading ? 'Starting...' : 'Start Recording'}
+                    </Button>
+                  </Box>
+                )}
+              </Box>
           </Card>
-
-          <Box mt={6} textAlign="center">
-            <Typography variant="h6" gutterBottom>
-              First time creating a robot?
-            </Typography>
-            <Typography variant="body2" color="text.secondary" mb={3}>
-              Get help and learn how to use Maxun effectively.
-            </Typography>
-
-            <Grid container spacing={3} justifyContent="center">
-
-              {/* YouTube Tutorials */}
-              <Grid item xs={12} sm={6} md={4}>
-                <Card
-                  sx={{
-                    height: 140,
-                    cursor: "pointer",
-                  }}
-                  onClick={() => window.open("https://www.youtube.com/@MaxunOSS/videos", "_blank")}
-                >
-                  <CardContent
-                    sx={{
-                      display: "flex",
-                      flexDirection: "column",
-                      alignItems: "center",
-                      justifyContent: "center", // center content
-                      height: "100%",
-                      textAlign: "center",
-                      p: 2,
-                      color: (theme) =>
-                        theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.54)' : '',
-                    }}
-                  >
-                    <PlayCircleOutline sx={{ fontSize: "32px", mb: 2 }} />
-
-                    <Box sx={{ textAlign: "center" }}>
-                      <Typography variant="body1" fontWeight="600" sx={{ lineHeight: 1.2 }}>
-                        Video Tutorials
-                      </Typography>
-                      <Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.4, mt: 1 }}>
-                        Watch step-by-step guides
-                      </Typography>
-                    </Box>
-                  </CardContent>
-                </Card>
-              </Grid>
-
-              {/* Documentation */}
-              <Grid item xs={12} sm={6} md={4}>
-                <Card
-                  sx={{
-                    height: 140,
-                    cursor: "pointer",
-                  }}
-                  onClick={() => window.open("https://docs.maxun.dev", "_blank")}
-                >
-                  <CardContent
-                    sx={{
-                      display: "flex",
-                      flexDirection: "column",
-                      alignItems: "center",
-                      justifyContent: "center", // center everything
-                      height: "100%",
-                      textAlign: "center",
-                      p: 2,
-                      color: (theme) =>
-                        theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.54)' : '',
-                    }}
-                  >
-                    <Article sx={{ fontSize: "32px", mb: 2 }} />
-
-                    <Box sx={{ textAlign: "center" }}>
-                      <Typography variant="body1" fontWeight="600" sx={{ lineHeight: 1.2 }}>
-                        Documentation
-                      </Typography>
-                      <Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.4, mt: 1 }}>
-                        Explore detailed guides
-                      </Typography>
-                    </Box>
-                  </CardContent>
-                </Card>
-              </Grid>
-            </Grid>
-          </Box>
         </TabPanel>
 
         <TabPanel value={tabValue} index={1}>

src/components/run/RunsTable.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState, useRef } from "react";
 import { useTranslation } from 'react-i18next';
 import Paper from '@mui/material/Paper';
 import Table from '@mui/material/Table';
@@ -13,10 +13,12 @@ import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextFie
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import SearchIcon from '@mui/icons-material/Search';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useGlobalInfoStore, useCachedRuns } from "../../context/globalInfo";
+import { useGlobalInfoStore, useCachedRuns, useCacheInvalidation } from "../../context/globalInfo";
 import { RunSettings } from "./RunSettings";
 import { CollapsibleRow } from "./ColapsibleRow";
 import { ArrowDownward, ArrowUpward, UnfoldMore } from '@mui/icons-material';
+import { io, Socket } from 'socket.io-client';
+import { apiUrl } from '../../apiConfig';
 
 export const columns: readonly Column[] = [
   { id: 'runStatus', label: 'Status', minWidth: 80 },
@@ -133,6 +135,9 @@ export const RunsTable: React.FC<RunsTableProps> = ({
 
   const { notify, rerenderRuns, setRerenderRuns } = useGlobalInfoStore();
   const { data: rows = [], isLoading: isFetching, error, refetch } = useCachedRuns();
+  const { invalidateRuns } = useCacheInvalidation();
+  
+  const activeSocketsRef = useRef<Map<string, Socket>>(new Map());
 
   const [searchTerm, setSearchTerm] = useState('');
   const [paginationStates, setPaginationStates] = useState<PaginationState>({});
@@ -285,6 +290,98 @@ export const RunsTable: React.FC<RunsTableProps> = ({
     }
   }, [rerenderRuns, refetch, setRerenderRuns]);
 
+  useEffect(() => {
+    if (!rows || rows.length === 0) return;
+
+    const activeRuns = rows.filter((row: Data) => 
+      row.status === 'running' && row.browserId && row.browserId.trim() !== ''
+    );
+
+    activeRuns.forEach((run: Data) => {
+      const { browserId, runId: currentRunId, name } = run;
+      
+      if (activeSocketsRef.current.has(browserId)) {
+        return;
+      }
+
+      console.log(`[RunsTable] Connecting to browser socket: ${browserId} for run: ${currentRunId}`);
+
+      try {
+        const socket = io(`${apiUrl}/${browserId}`, {
+          transports: ['websocket'],
+          rejectUnauthorized: false
+        });
+
+        socket.on('connect', () => {
+          console.log(`[RunsTable] Connected to browser ${browserId}`);
+        });
+
+        socket.on('debugMessage', (msg: string) => {
+          console.log(`[RunsTable] Debug message for ${browserId}:`, msg);
+          // Optionally update logs in real-time here
+        });
+
+        socket.on('run-completed', (data: any) => {
+          console.log(`[RunsTable] Run completed for ${browserId}:`, data);
+          
+          // Invalidate cache to show updated run status
+          invalidateRuns();
+          setRerenderRuns(true);
+          
+          // Show notification
+          if (data.status === 'success') {
+            notify('success', t('main_page.notifications.interpretation_success', { name: data.robotName || name }));
+          } else {
+            notify('error', t('main_page.notifications.interpretation_failed', { name: data.robotName || name }));
+          }
+          
+          socket.disconnect();
+          activeSocketsRef.current.delete(browserId);
+        });
+
+        socket.on('urlChanged', (url: string) => {
+          console.log(`[RunsTable] URL changed for ${browserId}:`, url);
+        });
+
+        socket.on('dom-snapshot-loading', () => {
+          console.log(`[RunsTable] DOM snapshot loading for ${browserId}`);
+        });
+
+        socket.on('connect_error', (error: Error) => {
+          console.error(`[RunsTable] Connection error for browser ${browserId}:`, error.message);
+        });
+
+        socket.on('disconnect', (reason: string) => {
+          console.log(`[RunsTable] Disconnected from browser ${browserId}:`, reason);
+          activeSocketsRef.current.delete(browserId);
+        });
+
+        activeSocketsRef.current.set(browserId, socket);
+      } catch (error) {
+        console.error(`[RunsTable] Error connecting to browser ${browserId}:`, error);
+      }
+    });
+
+    // Disconnect from sockets for runs that are no longer active
+    const activeBrowserIds = new Set(activeRuns.map((run: Data) => run.browserId));
+    activeSocketsRef.current.forEach((socket, browserId) => {
+      if (!activeBrowserIds.has(browserId)) {
+        console.log(`[RunsTable] Disconnecting from inactive browser: ${browserId}`);
+        socket.disconnect();
+        activeSocketsRef.current.delete(browserId);
+      }
+    });
+
+    // Cleanup on unmount
+    return () => {
+      console.log('[RunsTable] Cleaning up all socket connections');
+      activeSocketsRef.current.forEach((socket) => {
+        socket.disconnect();
+      });
+      activeSocketsRef.current.clear();
+    };
+  }, [rows, notify, t, invalidateRuns, setRerenderRuns]);
+
   const handleDelete = useCallback(() => {
     notify('success', t('runstable.notifications.delete_success'));
     refetch();

src/context/globalInfo.tsx

@@ -204,31 +204,47 @@ export const useCachedRuns = () => {
 
 export const useCacheInvalidation = () => {
   const queryClient = useQueryClient();
-  
+
   const invalidateRuns = () => {
     queryClient.invalidateQueries({ queryKey: dataCacheKeys.runs });
   };
-  
+
   const invalidateRecordings = () => {
     queryClient.invalidateQueries({ queryKey: dataCacheKeys.recordings });
   };
-  
+
   const addOptimisticRun = (newRun: any) => {
     queryClient.setQueryData(dataCacheKeys.runs, (oldData: any) => {
       if (!oldData) return [{ id: 0, ...newRun }];
       return [{ id: oldData.length, ...newRun }, ...oldData];
     });
   };
-  
+
+  const addOptimisticRobot = (newRobot: any) => {
+    queryClient.setQueryData(dataCacheKeys.recordings, (oldData: any) => {
+      if (!oldData) return [newRobot];
+      return [newRobot, ...oldData];
+    });
+  };
+
+  const removeOptimisticRobot = (tempId: string) => {
+    queryClient.setQueryData(dataCacheKeys.recordings, (oldData: any) => {
+      if (!oldData) return [];
+      return oldData.filter((robot: any) => robot.id !== tempId);
+    });
+  };
+
   const invalidateAllCache = () => {
     invalidateRuns();
     invalidateRecordings();
   };
-  
+
   return {
     invalidateRuns,
-    invalidateRecordings, 
+    invalidateRecordings,
     addOptimisticRun,
+    addOptimisticRobot,
+    removeOptimisticRobot,
     invalidateAllCache
   };
 };

src/pages/MainPage.tsx

@@ -53,6 +53,10 @@ export const MainPage = ({ handleEditRecording, initialContent }: MainPageProps)
   const { invalidateRuns, addOptimisticRun } = useCacheInvalidation();
   const navigate  = useNavigate();
 
+  React.useEffect(() => {
+    setContent(initialContent);
+  }, [initialContent]);
+
   const { state } = useContext(AuthContext);
   const { user } = state;