Merge pull request #18 from amhsirak/develop

feat: panels

src/components/molecules/AddWhatCondModal.tsx

@@ -0,0 +1,133 @@
+import { WhereWhatPair } from "@wbr-project/wbr-interpret";
+import { GenericModal } from "../atoms/GenericModal";
+import { modalStyle } from "./AddWhereCondModal";
+import { Button, MenuItem, TextField, Typography } from "@mui/material";
+import React, { useRef } from "react";
+import { Dropdown as MuiDropdown } from "../atoms/DropdownMui";
+import { KeyValueForm } from "./KeyValueForm";
+import { ClearButton } from "../atoms/buttons/ClearButton";
+import { useSocketStore } from "../../context/socket";
+
+interface AddWhatCondModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  pair: WhereWhatPair;
+  index: number;
+}
+
+export const AddWhatCondModal = ({isOpen, onClose, pair, index}: AddWhatCondModalProps) => {
+  const [action, setAction] = React.useState<string>('');
+  const [objectIndex, setObjectIndex] = React.useState<number>(0);
+  const [args, setArgs] = React.useState<({type: string, value: (string|number|object|unknown)})[]>([]);
+
+  const objectRefs = useRef<({getObject: () => object}|unknown)[]>([]);
+
+  const {socket} = useSocketStore();
+
+  const handleSubmit = () => {
+    const argsArray: (string|number|object|unknown)[] = [];
+    args.map((arg, index) => {
+      switch (arg.type) {
+        case 'string':
+        case 'number':
+          argsArray[index] = arg.value;
+          break;
+        case 'object':
+          // @ts-ignore
+          argsArray[index] = objectRefs.current[arg.value].getObject();
+      }
+    })
+    setArgs([]);
+    onClose();
+    pair.what.push({
+      // @ts-ignore
+      action,
+      args: argsArray,
+    })
+    socket?.emit('updatePair', {index: index-1, pair: pair});
+  }
+
+  return (
+    <GenericModal isOpen={isOpen} onClose={() => {
+      setArgs([]);
+      onClose();
+    }} modalStyle={modalStyle}>
+      <div>
+        <Typography sx={{margin: '20px 0px'}}>Add what condition:</Typography>
+        <div style={{margin:'8px'}}>
+          <Typography>Action:</Typography>
+          <TextField
+            size='small'
+            type="string"
+            onChange={(e) => setAction(e.target.value)}
+            value={action}
+            label='action'
+          />
+          <div>
+          <Typography>Add new argument of type:</Typography>
+            <Button onClick={() => setArgs([...args,{type: 'string', value: null}]) }>string</Button>
+            <Button onClick={() => setArgs([...args,{type: 'number', value: null}]) }>number</Button>
+            <Button onClick={() => {
+              setArgs([...args,{type: 'object', value: objectIndex}])
+              setObjectIndex(objectIndex+1);
+            } }>object</Button>
+          </div>
+          <Typography>args:</Typography>
+          {args.map((arg, index) => {
+            // @ts-ignore
+            return (
+              <div style={{border:'solid 1px gray', padding: '10px', display:'flex', flexDirection:'row', alignItems:'center' }}
+                   key={`wrapper-for-${arg.type}-${index}`}>
+                <ClearButton handleClick={() => {
+                  args.splice(index,1);
+                  setArgs([...args]);
+                }}/>
+            <Typography sx={{margin: '5px'}} key={`number-argument-${arg.type}-${index}`}>{index}: </Typography>
+              {arg.type === 'string' ?
+                <TextField
+                  size='small'
+                  type="string"
+                  onChange={(e) => setArgs([
+                    ...args.slice(0, index),
+                    {type: arg.type, value: e.target.value},
+                    ...args.slice(index + 1)
+                  ])}
+                  value={args[index].value || ''}
+                  label="string"
+                  key={`arg-${arg.type}-${index}`}
+                /> : arg.type === 'number' ?
+                  <TextField
+                    key={`arg-${arg.type}-${index}`}
+                    size='small'
+                    type="number"
+                    onChange={(e) => setArgs([
+                      ...args.slice(0, index),
+                      {type: arg.type, value: Number(e.target.value)},
+                      ...args.slice(index + 1)
+                    ])}
+                    value={args[index].value || ''}
+                    label="number"
+                  /> :
+                  <KeyValueForm ref={el =>
+                    //@ts-ignore
+                    objectRefs.current[arg.value] = el} key={`arg-${arg.type}-${index}`}/>
+              }
+            </div>
+            )})}
+          <Button
+            onClick={handleSubmit}
+            variant="outlined"
+            sx={{
+              display: "table-cell",
+              float: "right",
+              marginRight: "15px",
+              marginTop: "20px",
+            }}
+          >
+            {"Add Condition"}
+          </Button>
+        </div>
+        </div>
+    </GenericModal>
+  )
+}

src/components/molecules/AddWhereCondModal.tsx

@@ -0,0 +1,151 @@
+import { Dropdown as MuiDropdown } from "../atoms/DropdownMui";
+import {
+  Button,
+  MenuItem,
+  Typography
+} from "@mui/material";
+import React, { useRef } from "react";
+import { GenericModal } from "../atoms/GenericModal";
+import { WhereWhatPair } from "@wbr-project/wbr-interpret";
+import { SelectChangeEvent } from "@mui/material/Select/Select";
+import { DisplayConditionSettings } from "./DisplayWhereConditionSettings";
+import { useSocketStore } from "../../context/socket";
+
+interface AddWhereCondModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  pair: WhereWhatPair;
+  index: number;
+}
+
+export const AddWhereCondModal = ({isOpen, onClose, pair, index}: AddWhereCondModalProps) => {
+  const [whereProp, setWhereProp] = React.useState<string>('');
+  const [additionalSettings, setAdditionalSettings] = React.useState<string>('');
+  const [newValue, setNewValue] = React.useState<any>('');
+  const [checked, setChecked] = React.useState<boolean[]>(new Array(Object.keys(pair.where).length).fill(false));
+
+  const keyValueFormRef = useRef<{getObject: () => object}>(null);
+
+  const {socket} = useSocketStore();
+
+  const handlePropSelect = (event: SelectChangeEvent<string>) => {
+    setWhereProp(event.target.value);
+    switch (event.target.value) {
+      case 'url': setNewValue(''); break;
+      case 'selectors': setNewValue(['']); break;
+      case 'default': return;
+    }
+  }
+
+  const handleSubmit = () => {
+      switch (whereProp) {
+        case 'url':
+          if (additionalSettings === 'string'){
+            pair.where.url = newValue;
+          } else {
+            pair.where.url = { $regex: newValue };
+          }
+          break;
+        case 'selectors':
+          pair.where.selectors = newValue;
+          break;
+        case 'cookies':
+          pair.where.cookies = keyValueFormRef.current?.getObject() as Record<string,string>
+          break;
+        case 'before':
+          pair.where.$before = newValue;
+          break;
+        case 'after':
+          pair.where.$after = newValue;
+          break;
+        case 'boolean':
+          const booleanArr = [];
+          const deleteKeys: string[] = [];
+          for (let i = 0; i < checked.length; i++) {
+            if (checked[i]) {
+              if (Object.keys(pair.where)[i]) {
+                //@ts-ignore
+                if (pair.where[Object.keys(pair.where)[i]]) {
+                  booleanArr.push({
+                    //@ts-ignore
+                    [Object.keys(pair.where)[i]]: pair.where[Object.keys(pair.where)[i]]});
+                }
+                deleteKeys.push(Object.keys(pair.where)[i]);
+              }
+            }
+          }
+          // @ts-ignore
+          deleteKeys.forEach((key: string) => delete pair.where[key]);
+          //@ts-ignore
+          pair.where[`$${additionalSettings}`] = booleanArr;
+          break;
+        default:
+          return;
+      }
+    onClose();
+    setWhereProp('');
+    setAdditionalSettings('');
+    setNewValue('');
+    socket?.emit('updatePair', {index: index-1, pair: pair});
+  }
+
+  return (
+    <GenericModal isOpen={isOpen} onClose={() => {
+      setWhereProp('');
+      setAdditionalSettings('');
+      setNewValue('');
+      onClose();
+    }} modalStyle={modalStyle}>
+      <div>
+        <Typography sx={{margin: '20px 0px'}}>Add where condition:</Typography>
+      <div style={{margin:'8px'}}>
+        <MuiDropdown
+          id="whereProp"
+          label="Condition"
+          value={whereProp}
+          handleSelect={handlePropSelect}>
+          <MenuItem value="url">url</MenuItem>
+          <MenuItem value="selectors">selectors</MenuItem>
+          <MenuItem value="cookies">cookies</MenuItem>
+          <MenuItem value="before">before</MenuItem>
+          <MenuItem value="after">after</MenuItem>
+          <MenuItem value="boolean">boolean logic</MenuItem>
+        </MuiDropdown>
+      </div>
+        {whereProp ?
+          <div style={{margin: '8px'}}>
+            <DisplayConditionSettings
+              whereProp={whereProp} additionalSettings={additionalSettings} setAdditionalSettings={setAdditionalSettings}
+              newValue={newValue} setNewValue={setNewValue} checked={checked} setChecked={setChecked}
+              keyValueFormRef={keyValueFormRef} whereKeys={Object.keys(pair.where)}
+            />
+            <Button
+              onClick={handleSubmit}
+              variant="outlined"
+              sx={{
+                display: "table-cell",
+                float: "right",
+                marginRight: "15px",
+                marginTop: "20px",
+              }}
+            >
+              {"Add Condition"}
+            </Button>
+          </div>
+          : null}
+      </div>
+    </GenericModal>
+  )
+}
+
+export const modalStyle = {
+  top: '40%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '30%',
+  backgroundColor: 'background.paper',
+  p: 4,
+  height:'fit-content',
+  display:'block',
+  padding: '20px',
+};

src/components/molecules/ColapsibleRow.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useRef, useState } from "react";
+import * as React from "react";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+import { Box, Collapse, IconButton, Typography } from "@mui/material";
+import { DeleteForever, KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
+import { deleteRunFromStorage } from "../../api/storage";
+import { columns, Data } from "./RunsTable";
+import { RunContent } from "./RunContent";
+
+interface CollapsibleRowProps {
+  row: Data;
+  handleDelete: () => void;
+  isOpen: boolean;
+  currentLog: string;
+  abortRunHandler: () => void;
+  runningRecordingName: string;
+}
+export const CollapsibleRow = ({ row, handleDelete, isOpen, currentLog, abortRunHandler,runningRecordingName }: CollapsibleRowProps) => {
+  const [open, setOpen] = useState(isOpen);
+
+  const logEndRef = useRef<HTMLDivElement|null>(null);
+
+  const scrollToLogBottom = () => {
+    if (logEndRef.current) {
+      logEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }
+
+  const handleAbort = () => {
+    abortRunHandler();
+  }
+
+  useEffect(() => {
+    scrollToLogBottom();
+  }, [currentLog])
+
+  return (
+    <React.Fragment>
+      <TableRow sx={{ '& > *': { borderBottom: 'unset' } }} hover role="checkbox" tabIndex={-1} key={row.id}>
+        <TableCell>
+          <IconButton
+            aria-label="expand row"
+            size="small"
+            onClick={() => {
+              setOpen(!open);
+              scrollToLogBottom();
+            }}
+          >
+            {open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
+          </IconButton>
+        </TableCell>
+        {columns.map((column) => {
+          // @ts-ignore
+          const value : any = row[column.id];
+          if (value !== undefined) {
+            return (
+              <TableCell key={column.id} align={column.align}>
+                {value}
+              </TableCell>
+            );
+          } else {
+            switch (column.id) {
+              case 'delete':
+                return (
+                  <TableCell key={column.id} align={column.align}>
+                    <IconButton aria-label="add" size= "small" onClick={() => {
+                      deleteRunFromStorage(`${row.name}_${row.runId}`).then((result: boolean) => {
+                        if (result) {
+                          handleDelete();
+                        }
+                      })
+                    }} sx={{'&:hover': { color: '#1976d2', backgroundColor: 'transparent' }}}>
+                      <DeleteForever/>
+                    </IconButton>
+                  </TableCell>
+                );
+              default:
+                return null;
+            }
+          }
+        })}
+      </TableRow>
+      <TableRow>
+        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <RunContent row={row} abortRunHandler={handleAbort} currentLog={currentLog}
+            logEndRef={logEndRef} interpretationInProgress={runningRecordingName === row.name} />
+          </Collapse>
+        </TableCell>
+      </TableRow>
+    </React.Fragment>
+  );
+}

src/components/molecules/DisplayWhereConditionSettings.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import { Dropdown as MuiDropdown } from "../atoms/DropdownMui";
+import { Checkbox, FormControlLabel, FormGroup, MenuItem, Stack, TextField } from "@mui/material";
+import { AddButton } from "../atoms/buttons/AddButton";
+import { RemoveButton } from "../atoms/buttons/RemoveButton";
+import { KeyValueForm } from "./KeyValueForm";
+import { WarningText } from "../atoms/texts";
+
+interface DisplayConditionSettingsProps {
+  whereProp: string;
+  additionalSettings: string;
+  setAdditionalSettings: (value: any) => void;
+  newValue: any;
+  setNewValue: (value: any) => void;
+  keyValueFormRef: React.RefObject<{getObject: () => object}>;
+  whereKeys: string[];
+  checked: boolean[];
+  setChecked: (value: boolean[]) => void;
+}
+
+export const DisplayConditionSettings = (
+  {whereProp, setAdditionalSettings, additionalSettings,
+    setNewValue, newValue, keyValueFormRef, whereKeys, checked, setChecked}
+    : DisplayConditionSettingsProps) => {
+  switch (whereProp) {
+    case 'url':
+      return (
+        <React.Fragment>
+          <MuiDropdown
+            id="url"
+            label="type"
+            value={additionalSettings}
+            handleSelect={(e) => setAdditionalSettings(e.target.value)}>
+            <MenuItem value="string">string</MenuItem>
+            <MenuItem value="regex">regex</MenuItem>
+          </MuiDropdown>
+          { additionalSettings ? <TextField
+            size='small'
+            type="string"
+            onChange={(e) => setNewValue(e.target.value)}
+            value={newValue}
+          /> : null}
+        </React.Fragment>
+      )
+    case 'selectors':
+      return (
+        <React.Fragment>
+          <Stack direction='column' spacing={2}>
+            {
+              newValue.map((selector: string, index: number) => {
+                return <TextField
+                  key={`whereProp-selector-${index}`}
+                  size='small'
+                  type="string"
+                  onChange={(e) => setNewValue([
+                    ...newValue.slice(0, index),
+                    e.target.value,
+                    ...newValue.slice(index + 1)
+                  ])}/>
+              })
+            }
+          </Stack>
+          <AddButton handleClick={() => setNewValue([...newValue, ''])}/>
+          <RemoveButton handleClick={()=> {
+            const arr = newValue;
+            arr.splice(-1);
+            setNewValue([...arr]);
+          }}/>
+        </React.Fragment>
+      )
+    case 'cookies':
+      return <KeyValueForm ref={keyValueFormRef}/>
+    case 'before':
+      return <TextField
+        label='pair id'
+        size='small'
+        type="string"
+        onChange={(e) => setNewValue(e.target.value)}
+      />
+    case 'after':
+      return <TextField
+        label='pair id'
+        size='small'
+        type="string"
+        onChange={(e) => setNewValue(e.target.value)}
+      />
+    case 'boolean':
+      return (
+        <React.Fragment>
+          <MuiDropdown
+            id="boolean"
+            label="operator"
+            value={additionalSettings}
+            handleSelect={(e) => setAdditionalSettings(e.target.value)}>
+            <MenuItem value="and">and</MenuItem>
+            <MenuItem value="or">or</MenuItem>
+          </MuiDropdown>
+          <FormGroup>
+          {
+            whereKeys.map((key: string, index: number) => {
+              return (
+                <FormControlLabel control={
+                  <Checkbox
+                    checked={checked[index]}
+                    onChange={() => setChecked([
+                      ...checked.slice(0, index),
+                      !checked[index],
+                      ...checked.slice(index + 1)
+                    ])}
+                    key={`checkbox-${key}-${index}`}
+                  />
+                } label={key} key={`control-label-form-${key}-${index}`}/>
+              )
+            })
+          }
+          </FormGroup>
+          <WarningText>
+            Choose at least 2 where conditions. Nesting of boolean operators
+            is possible by adding more conditions.
+          </WarningText>
+        </React.Fragment>
+      )
+    default:
+      return null;
+  }
+}

src/components/molecules/InterpretationButtons.tsx

@@ -0,0 +1,178 @@
+import { Box, Button, IconButton, Stack, Typography } from "@mui/material";
+import { PauseCircle, PlayCircle, StopCircle } from "@mui/icons-material";
+import React, { useCallback, useEffect, useState } from "react";
+import { interpretCurrentRecording, stopCurrentInterpretation } from "../../api/recording";
+import { useSocketStore } from "../../context/socket";
+import { useGlobalInfoStore } from "../../context/globalInfo";
+import { GenericModal } from "../atoms/GenericModal";
+import { WhereWhatPair } from "@wbr-project/wbr-interpret";
+import HelpIcon from '@mui/icons-material/Help';
+
+interface InterpretationButtonsProps {
+  enableStepping: (isPaused: boolean) => void;
+}
+
+interface InterpretationInfo {
+  running: boolean;
+  isPaused: boolean;
+}
+
+const interpretationInfo: InterpretationInfo = {
+  running: false,
+  isPaused: false,
+}
+
+export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsProps) => {
+  const [info, setInfo] = React.useState<InterpretationInfo>(interpretationInfo);
+  const [decisionModal, setDecisionModal] = useState<{
+    pair: WhereWhatPair | null,
+    actionType: string,
+    selector: string,
+    action: string,
+    open:boolean
+  }>({ pair: null, actionType: '', selector: '', action: '', open: false} );
+
+  const { socket } = useSocketStore();
+  const { notify } = useGlobalInfoStore();
+
+  const finishedHandler = useCallback(() => {
+    setInfo({...info, isPaused: false});
+    enableStepping(false);
+  }, [info, enableStepping]);
+
+  const breakpointHitHandler = useCallback(() => {
+    setInfo({running: false, isPaused: true});
+    notify('warning', 'Please restart the interpretation, after updating the recording');
+    enableStepping(true);
+  }, [info, enableStepping]);
+
+  const decisionHandler = useCallback(
+    ({pair, actionType, lastData}
+       : {pair: WhereWhatPair | null, actionType: string, lastData: { selector: string, action: string }}) => {
+      const {selector, action} = lastData;
+    setDecisionModal((prevState) => {
+      return {
+        pair,
+        actionType,
+        selector,
+        action,
+        open: true,
+      }
+    })
+  }, [decisionModal]);
+
+  const handleDecision = (decision: boolean) => {
+    const {pair, actionType} = decisionModal;
+    socket?.emit('decision', {pair, actionType, decision});
+    setDecisionModal({pair: null, actionType: '', selector: '', action: '', open: false});
+  }
+
+  const handleDescription = () => {
+    switch (decisionModal.actionType){
+      case 'customAction':
+        return (
+          <React.Fragment>
+          <Typography>
+          Do you want to use the previously recorded selector
+          as a where condition for matching the action?
+        </Typography>
+        <Box style={{marginTop: '4px'}}>
+          [previous action: <b>{decisionModal.action}</b>]
+          <pre>{decisionModal.selector}</pre>
+        </Box>
+          </React.Fragment>);
+      default: return null;}
+  }
+
+  useEffect(() => {
+    if (socket) {
+      socket.on('finished', finishedHandler);
+      socket.on('breakpointHit', breakpointHitHandler);
+      socket.on('decision', decisionHandler);
+    }
+    return () => {
+      socket?.off('finished', finishedHandler);
+      socket?.off('breakpointHit', breakpointHitHandler);
+      socket?.off('decision', decisionHandler);
+    }
+  }, [socket, finishedHandler, breakpointHitHandler]);
+
+  const handlePlay = async () => {
+    if (info.isPaused) {
+      socket?.emit("resume");
+      setInfo({running: true, isPaused: false});
+      enableStepping(false);
+    } else {
+      setInfo({...info, running: true});
+      const finished = await interpretCurrentRecording();
+      setInfo({...info, running: false});
+      if (finished) {
+        notify('info', 'Interpretation finished');
+      } else {
+        notify('error', 'Interpretation failed to start');
+      }
+    }
+  };
+
+  const handleStop = async () => {
+    setInfo({ running: false, isPaused: false });
+    enableStepping(false);
+    await stopCurrentInterpretation();
+  };
+
+  const handlePause = async () => {
+    if (info.running) {
+      socket?.emit("pause");
+      setInfo({ running: false, isPaused: true });
+      notify('warning', 'Please restart the interpretation, after updating the recording');
+      enableStepping(true);
+    }
+  };
+
+  return (
+    <Stack direction="row" spacing={3}
+    sx={{ marginTop: '10px', marginBottom: '5px', justifyContent: 'space-evenly',}} >
+      <IconButton disabled={!info.running} sx={{display:'grid', '&:hover': { color: '#1976d2', backgroundColor: 'transparent' }}}
+                  aria-label="pause" size="small" title="Pause" onClick={handlePause}>
+        <PauseCircle sx={{ fontSize: 30, justifySelf:'center' }}/>
+        Pause
+      </IconButton>
+      <IconButton disabled={info.running} sx={{display:'grid', '&:hover': { color: '#1976d2', backgroundColor: 'transparent' }}}
+                  aria-label="play" size="small" title="Play" onClick={handlePlay}>
+        <PlayCircle sx={{ fontSize: 30, justifySelf:'center' }}/>
+        {info.isPaused ? 'Resume' : 'Start'}
+      </IconButton>
+      <IconButton disabled={!info.running && !info.isPaused} sx={{display:'grid', '&:hover': { color: '#1976d2', backgroundColor: 'transparent' }}}
+        aria-label="stop" size="small" title="Stop" onClick={handleStop}>
+        <StopCircle sx={{ fontSize: 30, justifySelf:'center' }}/>
+        Stop
+      </IconButton>
+      <GenericModal onClose={() => {}} isOpen={decisionModal.open} canBeClosed={false}
+      modalStyle={{
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: 500,
+        background: 'white',
+        border: '2px solid #000',
+        boxShadow: '24',
+        height:'fit-content',
+        display:'block',
+        overflow:'scroll',
+        padding: '5px 25px 10px 25px',
+      }}>
+        <div style={{padding: '15px'}}>
+          <HelpIcon/>
+          {
+            handleDescription()
+          }
+          <div style={{float: 'right'}}>
+          <Button onClick={() => handleDecision(true)} color='success'>yes</Button>
+          <Button onClick={() => handleDecision(false)} color='error'>no</Button>
+          </div>
+        </div>
+      </GenericModal>
+    </Stack>
+  );
+};

src/components/molecules/InterpretationLog.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Highlight from 'react-highlight'
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useSocketStore } from "../../context/socket";
+
+export const InterpretationLog = () => {
+  const [expanded, setExpanded] = useState<boolean>(false);
+  const [log, setLog] = useState<string>('');
+
+  const logEndRef = useRef<HTMLDivElement | null>(null);
+
+  const handleChange = (isExpanded: boolean) => (event: React.SyntheticEvent) => {
+    setExpanded(isExpanded);
+  };
+
+  const { socket } = useSocketStore();
+
+  const scrollLogToBottom = () => {
+    if (logEndRef.current) {
+      logEndRef.current.scrollIntoView({ behavior: "smooth" })
+    }
+  }
+
+  const handleLog = useCallback((msg: string, date: boolean = true) => {
+    if (!date){
+      setLog((prevState) => prevState + '\n' + msg);
+    } else {
+      setLog((prevState) => prevState + '\n' + `[${new Date().toLocaleString()}] ` + msg);
+    }
+    scrollLogToBottom();
+  }, [log, scrollLogToBottom])
+
+  const handleSerializableCallback = useCallback((data: string) => {
+    setLog((prevState) =>
+      prevState + '\n' + '---------- Serializable output data received ----------' + '\n'
+      + JSON.stringify(data, null, 2) + '\n' + '--------------------------------------------------');
+    scrollLogToBottom();
+  }, [log, scrollLogToBottom])
+
+  const handleBinaryCallback = useCallback(({data, mimetype}: any) => {
+    setLog((prevState) =>
+    prevState + '\n' + '---------- Binary output data received ----------' + '\n'
+      + `mimetype: ${mimetype}` + '\n' + `data: ${JSON.stringify(data)}` + '\n'
+      + '------------------------------------------------');
+    scrollLogToBottom();
+  }, [log, scrollLogToBottom])
+
+  useEffect(() => {
+    socket?.on('log', handleLog);
+    socket?.on('serializableCallback', handleSerializableCallback);
+    socket?.on('binaryCallback', handleBinaryCallback);
+    return () => {
+      socket?.off('log', handleLog);
+      socket?.off('serializableCallback', handleSerializableCallback);
+      socket?.off('binaryCallback', handleBinaryCallback);
+    }
+  }, [socket, handleLog])
+
+  return (
+    <div>
+      <Accordion
+        expanded={expanded}
+        onChange={handleChange(!expanded)}
+        style={{background: '#3f4853', color: 'white', borderRadius: '0px'}}
+      >
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon sx={{color: 'white'}}/>}
+          aria-controls="panel1bh-content"
+          id="panel1bh-header"
+        >
+          <Typography sx={{ width: '33%', flexShrink: 0 }}>
+            Interpretation Log
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails sx={{
+          background: '#19171c',
+          overflowY: 'scroll',
+          width: '100%',
+          aspectRatio: '4/1',
+          boxSizing: 'border-box',
+        }}>
+          <div>
+            <Highlight className="javascript">
+              {log}
+            </Highlight>
+            <div style={{ float:"left", clear: "both" }}
+                 ref={logEndRef}/>
+          </div>
+        </AccordionDetails>
+      </Accordion>
+    </div>
+  );
+}

src/components/molecules/KeyValueForm.tsx

@@ -0,0 +1,39 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { KeyValuePair } from "../atoms/KeyValuePair";
+import { AddButton } from "../atoms/buttons/AddButton";
+import { RemoveButton } from "../atoms/buttons/RemoveButton";
+
+export const KeyValueForm = forwardRef((props, ref) => {
+  const [numberOfPairs, setNumberOfPairs] = React.useState<number>(1);
+  const keyValuePairRefs = useRef<{getKeyValuePair: () => { key: string, value: string }}[]>([]);
+
+  useImperativeHandle(ref, () => ({
+    getObject() {
+      let reducedObject = {};
+      for (let i = 0; i < numberOfPairs; i++) {
+        const keyValuePair = keyValuePairRefs.current[i]?.getKeyValuePair();
+        if (keyValuePair) {
+          reducedObject = {
+            ...reducedObject,
+            [keyValuePair.key]: keyValuePair.value
+          }
+        }
+      }
+      return reducedObject;
+    }
+  }));
+
+  return (
+    <div>
+      {
+        new Array(numberOfPairs).fill(1).map((_, index) => {
+          return <KeyValuePair keyLabel={`key ${index + 1}`} valueLabel={`value ${index + 1}`} key={`keyValuePair-${index}`}
+         //@ts-ignore
+          ref={el => keyValuePairRefs.current[index] = el}/>
+        })
+      }
+      <AddButton handleClick={() => setNumberOfPairs(numberOfPairs + 1)} hoverEffect={false}/>
+      <RemoveButton handleClick={() => setNumberOfPairs(numberOfPairs - 1)}/>
+    </div>
+  );
+});

src/components/molecules/LeftSidePanelContent.tsx

@@ -0,0 +1,105 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import Box from "@mui/material/Box";
+import { Pair } from "./Pair";
+import { WhereWhatPair, WorkflowFile } from "@wbr-project/wbr-interpret";
+import { useSocketStore } from "../../context/socket";
+import { Add } from "@mui/icons-material";
+import { Socket } from "socket.io-client";
+import { AddButton } from "../atoms/buttons/AddButton";
+import { AddPair } from "../../api/workflow";
+import { GenericModal } from "../atoms/GenericModal";
+import { PairEditForm } from "./PairEditForm";
+import { Fab, Tooltip, Typography } from "@mui/material";
+
+interface LeftSidePanelContentProps {
+  workflow: WorkflowFile;
+  updateWorkflow: (workflow: WorkflowFile) => void;
+  recordingName: string;
+  handleSelectPairForEdit: (pair: WhereWhatPair, index: number) => void;
+}
+
+export const LeftSidePanelContent = ({ workflow, updateWorkflow, recordingName, handleSelectPairForEdit}: LeftSidePanelContentProps) => {
+  const [activeId, setActiveId] = React.useState<number>(0);
+  const [breakpoints, setBreakpoints] = React.useState<boolean[]>([]);
+  const [showEditModal, setShowEditModal] = useState(false);
+
+  const { socket } = useSocketStore();
+
+  const activePairIdHandler = useCallback((data: string, socket: Socket) => {
+    setActiveId(parseInt(data) + 1);
+    // -1 is specially emitted when the interpretation finishes
+    if (parseInt(data) === -1) {
+      return;
+    }
+    socket.emit('activeIndex', data);
+  }, [activeId])
+
+  const addPair = (pair: WhereWhatPair, index: number) => {
+    AddPair((index - 1), pair).then((updatedWorkflow) => {
+      updateWorkflow(updatedWorkflow);
+    }).catch((error) => {
+      console.error(error);
+    });
+    setShowEditModal(false);
+  };
+
+  useEffect(() => {
+    socket?.on("activePairId", (data) => activePairIdHandler(data, socket));
+    return () => {
+      socket?.off("activePairId", (data) => activePairIdHandler(data, socket));
+    }
+  }, [socket, setActiveId]);
+
+
+  const handleBreakpointClick = (id: number) => {
+    setBreakpoints(oldBreakpoints => {
+      const newArray = [...oldBreakpoints, ...Array(workflow.workflow.length - oldBreakpoints.length).fill(false)];
+      newArray[id] = !newArray[id];
+      socket?.emit("breakpoints", newArray);
+      return newArray;
+    });
+  };
+
+  const handleAddPair = () => {
+    setShowEditModal(true);
+  };
+
+  return (
+    <div>
+      <Tooltip title='Add pair' placement='left' arrow>
+        <div style={{ float: 'right'}}>
+          <AddButton
+            handleClick={handleAddPair}
+            title=''
+            hoverEffect={false}
+            style={{color: 'white', background: '#1976d2'}}
+          />
+        </div>
+      </Tooltip>
+      <GenericModal
+        isOpen={showEditModal}
+        onClose={() => setShowEditModal(false)}
+      >
+        <PairEditForm
+          onSubmitOfPair={addPair}
+          numberOfPairs={workflow.workflow.length}
+        />
+      </GenericModal>
+      <div>
+      {
+        workflow.workflow.map((pair, i, workflow, ) =>
+          <Pair
+            handleBreakpoint={() => handleBreakpointClick(i)}
+            isActive={ activeId === i + 1}
+            key={workflow.length - i}
+            index={workflow.length - i}
+            pair={pair}
+            updateWorkflow={updateWorkflow}
+            numberOfPairs={workflow.length}
+            handleSelectPairForEdit={handleSelectPairForEdit}
+          />)
+      }
+    </div>
+    </div>
+  );
+};

src/components/molecules/LeftSidePanelSettings.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { Button, MenuItem, TextField, Typography } from "@mui/material";
+import { Dropdown } from "../atoms/DropdownMui";
+import { RunSettings } from "./RunSettings";
+import { useSocketStore } from "../../context/socket";
+
+interface LeftSidePanelSettingsProps {
+  params: any[]
+  settings: RunSettings,
+  setSettings: (setting: RunSettings) => void
+}
+
+export const LeftSidePanelSettings = ({params, settings, setSettings}: LeftSidePanelSettingsProps) => {
+  const { socket } = useSocketStore();
+
+  return (
+    <div style={{ display: 'flex', flexDirection:'column', alignItems: 'flex-start'}}>
+      { params.length !== 0 && (
+          <React.Fragment>
+            <Typography>Parameters:</Typography>
+            { params?.map((item: string, index: number) => {
+              return <TextField
+                sx={{margin: '15px 0px'}}
+                value={settings.params ? settings.params[item] : ''}
+                key={`param-${index}`}
+                type="string"
+                label={item}
+                required
+                onChange={(e) => setSettings(
+                  {
+                    ...settings,
+                    params: settings.params
+                      ? {
+                        ...settings.params,
+                        [item]: e.target.value,
+                      }
+                      : {
+                        [item]: e.target.value,
+                      },
+                  })}
+              />
+            }) }
+          </React.Fragment>
+      )}
+      <Typography sx={{margin: '15px 0px'}}>Interpreter:</Typography>
+      <TextField
+        type="number"
+        label="maxConcurrency"
+        required
+        onChange={(e) => setSettings(
+          {
+            ...settings,
+            maxConcurrency: parseInt(e.target.value),
+          })}
+        defaultValue={settings.maxConcurrency}
+      />
+      <TextField
+        sx={{margin: '15px 0px'}}
+        type="number"
+        label="maxRepeats"
+        required
+        onChange={(e) => setSettings(
+          {
+            ...settings,
+            maxRepeats: parseInt(e.target.value),
+          })}
+        defaultValue={settings.maxRepeats}
+      />
+      <Dropdown
+        id="debug"
+        label="debug"
+        value={settings.debug?.toString()}
+        handleSelect={(e) => setSettings(
+          {
+            ...settings,
+            debug: e.target.value === "true",
+          })}
+      >
+        <MenuItem value="true">true</MenuItem>
+        <MenuItem value="false">false</MenuItem>
+      </Dropdown>
+      <Button sx={{margin: '15px 0px'}} variant='contained'
+              onClick={() => socket?.emit('settings', settings)}>change</Button>
+    </div>
+  );
+}

src/components/molecules/NavBar.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import styled from "styled-components";
+import { stopRecording } from "../../api/recording";
+import { useGlobalInfoStore } from "../../context/globalInfo";
+import { Button, IconButton } from "@mui/material";
+import { RecordingIcon } from "../atoms/RecorderIcon";
+import { SaveRecording } from "./SaveRecording";
+import { Circle } from "@mui/icons-material";
+import MeetingRoomIcon from '@mui/icons-material/MeetingRoom';
+
+interface NavBarProps {
+  newRecording: () => void;
+  recordingName: string;
+  isRecording: boolean;
+}
+
+export const NavBar = ({newRecording, recordingName, isRecording}:NavBarProps) => {
+
+  const { notify, browserId, setBrowserId, recordingLength } = useGlobalInfoStore();
+
+  // If recording is in progress, the resources and change page view by setting browserId to null
+  // else it won't affect the page
+  const goToMainMenu = async() => {
+    if (browserId) {
+      await stopRecording(browserId);
+      notify('warning', 'Current Recording was terminated');
+      setBrowserId(null);
+    }
+  };
+
+  const handleNewRecording = async () => {
+    if (browserId) {
+      setBrowserId(null);
+      await stopRecording(browserId);
+    }
+    newRecording();
+    notify('info', 'New Recording started');
+  }
+
+  return (
+    <NavBarWrapper>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'flex-start',
+      }}>
+      <RecordingIcon/>
+      <div style={{padding: '11px'}}><ProjectName>Browser Recorder</ProjectName></div>
+      </div>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'flex-end',
+      }}>
+        <IconButton
+          aria-label="new"
+          size={"small"}
+          onClick={handleNewRecording}
+          sx={{
+            width: isRecording ? '100px' : '130px',
+            borderRadius: '5px',
+            padding: '8px',
+            background: 'white',
+            color: 'rgba(255,0,0,0.7)',
+            marginRight: '10px',
+            fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+            fontWeight: '500',
+            fontSize: '0.875rem',
+            lineHeight: '1.75',
+            letterSpacing: '0.02857em',
+            '&:hover': { color: 'red', backgroundColor: 'white' }}
+          }
+        >
+          <Circle sx={{marginRight: '5px'}}/> {isRecording ? 'NEW' : 'RECORD'}
+        </IconButton>
+        {
+          recordingLength > 0
+            ? <SaveRecording fileName={recordingName}/>
+            :null
+        }
+        { isRecording ? <Button sx={{
+          width:'100px',
+          background: '#fff',
+          color: 'rgba(25, 118, 210, 0.7)',
+          padding: '9px',
+          marginRight: '19px',
+          '&:hover': {
+            background: 'white',
+            color: 'rgb(25, 118, 210)',
+          }
+        }} onClick={goToMainMenu}>
+          <MeetingRoomIcon sx={{marginRight: '5px'}}/>
+          exit</Button>
+          : null }
+      </div>
+
+    </NavBarWrapper>
+  );
+};
+
+const NavBarWrapper = styled.div`
+  grid-area: navbar;
+  background-color: #3f4853;
+  padding:5px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const ProjectName = styled.b`
+  color: white;
+  font-size: 1.3em;
+`;

src/components/molecules/Pair.tsx

@@ -0,0 +1,181 @@
+import React, { FC, useState } from 'react';
+import { Stack, Button, IconButton, Tooltip, Chip, Badge } from "@mui/material";
+import { AddPair, deletePair, UpdatePair } from "../../api/workflow";
+import { WorkflowFile } from "@wbr-project/wbr-interpret";
+import { ClearButton } from "../atoms/buttons/ClearButton";
+import { GenericModal } from "../atoms/GenericModal";
+import { PairEditForm } from "./PairEditForm";
+import { PairDisplayDiv } from "../atoms/PairDisplayDiv";
+import { EditButton } from "../atoms/buttons/EditButton";
+import { BreakpointButton } from "../atoms/buttons/BreakpointButton";
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import styled from "styled-components";
+import { LoadingButton } from "@mui/lab";
+
+type WhereWhatPair = WorkflowFile["workflow"][number];
+
+
+interface PairProps {
+  handleBreakpoint: () => void;
+  isActive: boolean;
+  index: number;
+  pair: WhereWhatPair;
+  updateWorkflow: (workflow: WorkflowFile) => void;
+  numberOfPairs: number;
+  handleSelectPairForEdit: (pair: WhereWhatPair, index: number) => void;
+}
+
+
+export const Pair: FC<PairProps> = (
+  {
+    handleBreakpoint, isActive, index,
+    pair, updateWorkflow, numberOfPairs,
+    handleSelectPairForEdit
+  }) => {
+  const [open, setOpen] = useState(false);
+  const [edit, setEdit] = useState(false);
+  const [breakpoint, setBreakpoint] = useState(false);
+
+  const enableEdit = () => setEdit(true);
+  const disableEdit = () => setEdit(false);
+
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => {
+    setOpen(false);
+    disableEdit();
+  }
+
+  const handleDelete = () => {
+    deletePair(index - 1).then((updatedWorkflow) => {
+      updateWorkflow(updatedWorkflow);
+    }).catch((error) => {
+      console.error(error);
+    });
+  };
+
+  const handleEdit = (pair: WhereWhatPair, newIndex: number) => {
+  if (newIndex !== index){
+    AddPair((newIndex - 1), pair).then((updatedWorkflow) => {
+      updateWorkflow(updatedWorkflow);
+    }).catch((error) => {
+      console.error(error);
+    });
+  } else {
+    UpdatePair((index - 1), pair).then((updatedWorkflow) => {
+      updateWorkflow(updatedWorkflow);
+    }).catch((error) => {
+      console.error(error);
+    });
+  }
+    handleClose();
+  };
+
+  const handleBreakpointClick = () => {
+    setBreakpoint(!breakpoint);
+    handleBreakpoint();
+  };
+
+  return (
+    <PairWrapper isActive={isActive}>
+      <Stack direction="row">
+        <div style={{display: 'flex', maxWidth:'20px', alignItems:'center', justifyContent: 'center', }}>
+          {isActive ? <LoadingButton loading variant="text"/>
+            : breakpoint ? <BreakpointButton changeColor={true} handleClick={handleBreakpointClick}/>
+              : <BreakpointButton handleClick={handleBreakpointClick}/>
+          }
+        </div>
+        <Badge badgeContent={pair.what.length} color="primary">
+          <Button sx={{
+            position: 'relative',
+            color: 'black',
+            padding: '5px 20px',
+            fontSize: '1rem',
+            textTransform: 'none',
+          }} variant='text' key={`pair-${index}`}
+          onClick={() => handleSelectPairForEdit(pair, index)}>
+            index: {index}
+          </Button>
+        </Badge>
+        <Stack direction="row" spacing={0}
+        sx={{
+          color: 'inherit',
+          "&:hover": {
+            color: 'inherit',
+          }
+        }}>
+          <Tooltip title="View" placement='right' arrow>
+          <div>
+          <ViewButton
+            handleClick={handleOpen}
+          />
+          </div>
+          </Tooltip>
+
+          <Tooltip title="Raw edit" placement='right' arrow>
+            <div>
+          <EditButton
+            handleClick={() => {
+              enableEdit();
+              handleOpen();
+            }}
+          />
+            </div>
+            </Tooltip>
+          <Tooltip title="Delete" placement='right' arrow>
+            <div>
+              <ClearButton handleClick={handleDelete}/>
+            </div>
+          </Tooltip>
+        </Stack>
+      </Stack>
+      <GenericModal isOpen={open} onClose={handleClose}>
+        { edit
+          ?
+            <PairEditForm
+              onSubmitOfPair={handleEdit}
+              numberOfPairs={numberOfPairs}
+              index={index.toString()}
+              where={pair.where ? JSON.stringify(pair.where) : undefined}
+              what={pair.what ? JSON.stringify(pair.what) : undefined}
+              id={pair.id}
+            />
+          :
+          <div>
+            <PairDisplayDiv
+              index={index.toString()}
+              pair={pair}
+            />
+          </div>
+        }
+      </GenericModal>
+    </PairWrapper>
+    );
+};
+
+interface ViewButtonProps {
+  handleClick: () => void;
+}
+
+const ViewButton = ({handleClick}: ViewButtonProps) => {
+  return (
+    <IconButton aria-label="add" size={"small"} onClick={handleClick}
+                sx={{color: 'inherit', '&:hover': { color: '#1976d2', backgroundColor: 'transparent' }}}>
+      <VisibilityIcon/>
+    </IconButton>
+  );
+}
+
+
+const PairWrapper = styled.div<{ isActive: boolean }>`
+  background-color: ${({ isActive }) => isActive ? 'rgba(255, 0, 0, 0.1)' : 'transparent' };
+  border: ${({ isActive }) => isActive ? 'solid 2px red' : 'none' };
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  width: 98%;
+  color: gray;
+  &:hover { 
+    color: dimgray; 
+    background: ${({ isActive }) => isActive ? 'rgba(255, 0, 0, 0.1)' : 'transparent' };
+  }
+`;

src/components/molecules/PairDetail.tsx

@@ -0,0 +1,310 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { WhereWhatPair } from "@wbr-project/wbr-interpret";
+import { Box, Button, IconButton, MenuItem, Stack, TextField, Tooltip, Typography } from "@mui/material";
+import { Close, KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
+import TreeView from '@mui/lab/TreeView';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import TreeItem from '@mui/lab/TreeItem';
+import { AddButton } from "../atoms/buttons/AddButton";
+import { WarningText } from "../atoms/texts";
+import NotificationImportantIcon from '@mui/icons-material/NotificationImportant';
+import { RemoveButton } from "../atoms/buttons/RemoveButton";
+import { AddWhereCondModal } from "./AddWhereCondModal";
+import { UpdatePair } from "../../api/workflow";
+import { useSocketStore } from "../../context/socket";
+import { AddWhatCondModal } from "./AddWhatCondModal";
+
+interface PairDetailProps {
+  pair: WhereWhatPair | null;
+  index: number;
+}
+
+export const PairDetail = ({ pair, index }: PairDetailProps) => {
+  const [pairIsSelected, setPairIsSelected] = useState(false);
+  const [collapseWhere, setCollapseWhere] = useState(true);
+  const [collapseWhat, setCollapseWhat] = useState(true);
+  const [rerender, setRerender] = useState(false);
+  const [expanded, setExpanded] = React.useState<string[]>(
+    pair ? Object.keys(pair.where).map((key, index) => `${key}-${index}`) : []
+  );
+  const [addWhereCondOpen, setAddWhereCondOpen] = useState(false);
+  const [addWhatCondOpen, setAddWhatCondOpen] = useState(false);
+
+  const { socket } = useSocketStore();
+
+  const handleCollapseWhere = () => {
+      setCollapseWhere(!collapseWhere);
+  }
+
+  const handleCollapseWhat = () => {
+    setCollapseWhat(!collapseWhat);
+  }
+
+  const handleToggle = (event: React.SyntheticEvent, nodeIds: string[]) => {
+    setExpanded(nodeIds);
+  };
+
+  useLayoutEffect(() => {
+    if (pair) {
+      setPairIsSelected(true);
+    }
+  }, [pair])
+
+  const handleChangeValue = (value: any, where: boolean, keys: (string|number)[]) => {
+    // a moving reference to internal objects within pair.where or pair.what
+    let schema: any = where ? pair?.where : pair?.what;
+    const length = keys.length;
+    for(let i = 0; i < length-1; i++) {
+      const elem = keys[i];
+      if( !schema[elem] ) schema[elem] = {}
+      schema = schema[elem];
+    }
+
+    schema[keys[length-1]] = value;
+    if (pair && socket) {
+      socket.emit('updatePair', {index: index-1, pair: pair});
+    }
+    setRerender(!rerender);
+  }
+
+
+    const DisplayValueContent = (value: any, keys: (string|number)[], where: boolean = true) => {
+    switch (typeof(value)) {
+      case 'string':
+        return <TextField
+          size='small'
+          type="string"
+          onChange={(e) => {
+            try {
+              const obj = JSON.parse(e.target.value);
+              handleChangeValue(obj, where, keys);
+            } catch (error) {
+              const num = Number(e.target.value);
+              if (!isNaN(num)) {
+                handleChangeValue(num, where, keys);
+              }
+              handleChangeValue(e.target.value, where, keys)
+            }
+          }}
+          defaultValue={value}
+          key={`text-field-${keys.join('-')}-${where}`}
+        />
+      case 'number':
+        return <TextField
+          size='small'
+          type="number"
+          onChange={(e) => handleChangeValue(Number(e.target.value), where, keys)}
+          defaultValue={value}
+          key={`text-field-${keys.join('-')}-${where}`}
+        />
+      case 'object':
+        if (value) {
+          if (Array.isArray(value)) {
+            return (
+              <React.Fragment>
+                {
+                  value.map((element, index) => {
+                  return DisplayValueContent(element, [...keys, index], where);
+                  })
+                }
+                <AddButton handleClick={()=> {
+                  let prevValue:any = where ? pair?.where : pair?.what;
+                  for (const key of keys) {
+                    prevValue = prevValue[key];
+                  }
+                  handleChangeValue([...prevValue, ''], where, keys);
+                  setRerender(!rerender);
+                }} hoverEffect={false}/>
+                <RemoveButton handleClick={()=> {
+                  let prevValue:any = where ? pair?.where : pair?.what;
+                  for (const key of keys) {
+                    prevValue = prevValue[key];
+                  }
+                  prevValue.splice(-1);
+                  handleChangeValue(prevValue, where, keys);
+                  setRerender(!rerender);
+                }}/>
+              </React.Fragment>
+            )
+          } else {
+            return (
+              <TreeView
+                defaultCollapseIcon={<ExpandMoreIcon />}
+                defaultExpandIcon={<ChevronRightIcon />}
+                sx={{ flexGrow: 1, overflowY: 'auto' }}
+                key={`tree-view-nested-${keys.join('-')}-${where}`}
+              >
+                {
+                  Object.keys(value).map((key2, index) =>
+                  {
+                    return (
+                      <TreeItem nodeId={`${key2}-${index}`} label={`${key2}:`} key={`${key2}-${index}`}>
+                        { DisplayValueContent(value[key2], [...keys, key2], where) }
+                      </TreeItem>
+                    )
+                  })
+                }
+              </TreeView>
+            )
+          }
+        }
+        break;
+      default:
+        return null;
+    }
+  }
+
+  return (
+    <React.Fragment>
+      { pair &&
+        <React.Fragment>
+          <AddWhatCondModal isOpen={addWhatCondOpen} onClose={() => setAddWhatCondOpen(false)}
+                            pair={pair} index={index}/>
+          <AddWhereCondModal isOpen={addWhereCondOpen} onClose={() => setAddWhereCondOpen(false)}
+                         pair={pair} index={index}/>
+        </React.Fragment>
+      }
+    {
+      pairIsSelected
+        ? (
+          <div style={{padding: '10px', overflow: 'hidden'}}>
+            <Typography>Pair number: {index}</Typography>
+             <TextField
+              size='small'
+              label='id'
+              onChange={(e) => {
+                if (pair && socket) {
+                  socket.emit('updatePair', {index: index-1, pair: pair});
+                  pair.id = e.target.value;
+                }
+              }}
+              value={pair ? pair.id ? pair.id : '' : ''}
+            />
+            <Stack spacing={0} direction='row' sx={{
+              display: 'flex',
+              alignItems: 'center',
+              background: 'lightGray',
+            }}>
+              <CollapseButton
+                handleClick={handleCollapseWhere}
+                isCollapsed={collapseWhere}
+              />
+              <Typography>Where</Typography>
+              <Tooltip title='Add where condition' placement='right'>
+                <div>
+                  <AddButton handleClick={()=> {
+                    setAddWhereCondOpen(true);
+                  }} style={{color:'rgba(0, 0, 0, 0.54)', background:'transparent'}}/>
+                </div>
+              </Tooltip>
+            </Stack>
+              {(collapseWhere && pair && pair.where)
+                ?
+                <React.Fragment>
+                    { Object.keys(pair.where).map((key, index) => {
+                  return (
+                    <TreeView
+                      expanded={expanded}
+                      defaultCollapseIcon={<ExpandMoreIcon />}
+                      defaultExpandIcon={<ChevronRightIcon />}
+                      sx={{ flexGrow: 1, overflowY: 'auto' }}
+                      onNodeToggle={handleToggle}
+                      key={`tree-view-${key}-${index}`}
+                    >
+                      <TreeItem nodeId={`${key}-${index}`} label={`${key}:`} key={`${key}-${index}`}>
+                        {
+                          // @ts-ignore
+                          DisplayValueContent(pair.where[key], [key])
+                        }
+                      </TreeItem>
+                    </TreeView>
+                    );
+                })}
+                </React.Fragment>
+                : null
+              }
+            <Stack spacing={0} direction='row' sx={{
+              display: 'flex',
+              alignItems: 'center',
+              background: 'lightGray',
+            }}>
+              <CollapseButton
+                handleClick={handleCollapseWhat}
+                isCollapsed={collapseWhat}
+              />
+              <Typography>What</Typography>
+
+              <Tooltip title='Add what condition' placement='right'>
+                <div>
+                  <AddButton handleClick={()=> {
+                    setAddWhatCondOpen(true);
+                  }} style={{color:'rgba(0, 0, 0, 0.54)', background:'transparent'}}/>
+                </div>
+              </Tooltip>
+            </Stack>
+            {(collapseWhat && pair && pair.what)
+              ?(
+              <React.Fragment>
+              { Object.keys(pair.what).map((key, index) => {
+                return (
+                  <TreeView
+                    defaultCollapseIcon={<ExpandMoreIcon />}
+                    defaultExpandIcon={<ChevronRightIcon />}
+                    sx={{ flexGrow: 1, overflowY: 'auto' }}
+                    key={`tree-view-2-${key}-${index}`}
+                  >
+                    <TreeItem nodeId={`${key}-${index}`} label={`${pair.what[index].action}`}>
+                      {
+                        // @ts-ignore
+                        DisplayValueContent(pair.what[key], [key], false)
+                      }
+                      <Tooltip title='remove action' placement='left'>
+                      <div style={{float:'right'}}>
+                      <CloseButton handleClick={() => {
+                        //@ts-ignore
+                        pair.what.splice(key, 1);
+                        setRerender(!rerender);
+                      }}/>
+                      </div>
+                      </Tooltip>
+                    </TreeItem>
+                  </TreeView>
+                );
+              })}
+              </React.Fragment>
+              )
+              : null
+            }
+          </div>
+        )
+        : <WarningText>
+          <NotificationImportantIcon color="warning"/>
+          No pair from the left side panel was selected.
+          </WarningText>
+    }
+    </React.Fragment>
+  );
+}
+
+interface CollapseButtonProps {
+  handleClick: () => void;
+  isCollapsed?: boolean;
+}
+
+const CollapseButton = ({handleClick, isCollapsed } : CollapseButtonProps) => {
+  return (
+    <IconButton aria-label="add" size={"small"} onClick={handleClick}>
+      { isCollapsed ?  <KeyboardArrowDown/> : <KeyboardArrowUp/>}
+    </IconButton>
+  );
+}
+
+const CloseButton = ({handleClick } : CollapseButtonProps) => {
+  return (
+    <IconButton aria-label="add" size={"small"} onClick={handleClick}
+                sx={{'&:hover': { color: '#1976d2', backgroundColor: 'white' }}}>
+      <Close/>
+    </IconButton>
+  );
+}

src/components/molecules/PairEditForm.tsx

@@ -0,0 +1,161 @@
+import { Button, TextField, Typography } from "@mui/material";
+import React, { FC } from "react";
+import { Preprocessor, WhereWhatPair } from "@wbr-project/wbr-interpret";
+
+interface PairProps {
+  index: string;
+  id?: string;
+  where: string | null;
+  what: string | null;
+}
+
+interface PairEditFormProps {
+  onSubmitOfPair: (value: WhereWhatPair, index: number) => void;
+  numberOfPairs: number;
+  index?: string;
+  where?: string;
+  what?: string;
+  id?: string;
+}
+
+export const PairEditForm: FC<PairEditFormProps> = (
+  {
+    onSubmitOfPair,
+    numberOfPairs,
+    index,
+    where,
+    what,
+    id,
+  }) => {
+  const [pairProps, setPairProps] = React.useState<PairProps>({
+    where: where || null,
+    what: what || null,
+    index: index || "1",
+    id: id || '',
+  });
+  const [errors, setErrors] = React.useState<PairProps>({
+    where: null,
+    what: null,
+    index: '',
+  });
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { id, value } = event.target;
+    if (id === 'index') {
+      if (parseInt(value, 10) < 1) {
+        setErrors({ ...errors, index: 'Index must be greater than 0' });
+        return;
+      } else {
+        setErrors({ ...errors, index: '' });
+      }
+    }
+    setPairProps({ ...pairProps, [id]: value });
+  };
+
+  const validateAndSubmit = (event: React.SyntheticEvent) => {
+    event.preventDefault();
+    let whereFromPair, whatFromPair;
+    // validate where
+      whereFromPair = {
+        where: pairProps.where && pairProps.where !== '{"url":"","selectors":[""] }'
+          ? JSON.parse(pairProps.where)
+          : {},
+        what: [],
+      };
+      const validationError = Preprocessor.validateWorkflow({workflow: [whereFromPair]});
+      setErrors({ ...errors, where: null });
+    if (validationError) {
+      setErrors({ ...errors, where: validationError.message });
+      return;
+    }
+    // validate what
+      whatFromPair = {
+        where: {},
+        what: pairProps.what && pairProps.what !== '[{"action":"","args":[""] }]'
+          ? JSON.parse(pairProps.what): [],
+      };
+      const validationErrorWhat = Preprocessor.validateWorkflow({workflow: [whatFromPair]});
+      setErrors({ ...errors, "what": null });
+      if (validationErrorWhat) {
+        setErrors({ ...errors, what: validationErrorWhat.message });
+        return;
+      }
+    //validate index
+    const index = parseInt(pairProps?.index, 10);
+    if (index > (numberOfPairs + 1)) {
+      if (numberOfPairs === 0) {
+        setErrors(prevState => ({
+          ...prevState,
+          index: 'Index of the first pair must be 1'
+        }));
+        return;
+      } else {
+        setErrors(prevState => ({
+          ...prevState,
+          index: `Index must be in the range 1-${numberOfPairs + 1}`
+        }));
+        return;
+      }
+    } else {
+      setErrors({ ...errors, index: '' });
+    }
+      // submit the pair
+      onSubmitOfPair(pairProps.id
+      ? {
+        id: pairProps.id,
+        where: whereFromPair?.where || {},
+        what: whatFromPair?.what || [],
+      }
+      : {
+          where: whereFromPair?.where || {},
+          what: whatFromPair?.what || [],
+        }
+        , index);
+  };
+
+  return (
+    <form
+      onSubmit={validateAndSubmit}
+      style={{
+        display: "grid",
+        padding: "0px 30px 0px 30px",
+        marginTop: "36px",
+      }}
+    >
+      <Typography sx={{marginBottom:'30px'}} variant='h5'>Raw pair edit form:</Typography>
+      <TextField sx={{
+        display:"block",
+        marginBottom: "20px"
+      }} id="index" label="Index" type="number"
+                 InputProps={{ inputProps: { min: 1 } }}
+                 InputLabelProps={{
+          shrink: true,
+        }} defaultValue={pairProps.index}
+                 onChange={handleInputChange}
+                 error={!!errors.index} helperText={errors.index}
+                 required
+      />
+      <TextField sx={{
+        marginBottom: "20px"
+      }} id="id" label="Id" type="string"
+                 defaultValue={pairProps.id}
+                 onChange={handleInputChange}
+      />
+      <TextField multiline sx={{marginBottom: "20px"}}
+                 id="where" label="Where" variant="outlined" onChange={handleInputChange}
+                 defaultValue={ where || '{"url":"","selectors":[""]}' }
+                 error={!!errors.where} helperText={errors.where}/>
+      <TextField multiline sx={{marginBottom: "20px"}}
+                 id="what" label="What" variant="outlined" onChange={handleInputChange}
+                 defaultValue={ what || '[{"action":"","args":[""]}]' }
+                 error={!!errors.what} helperText={errors.what}/>
+      <Button
+        type="submit"
+        variant="contained"
+        sx={{ padding: "8px 20px", }}
+      >
+        Save
+      </Button>
+    </form>
+  );
+};

src/components/molecules/RecordingsTable.tsx

@@ -0,0 +1,220 @@
+import * as React from 'react';
+import Paper from '@mui/material/Paper';
+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 { useEffect } from "react";
+import { WorkflowFile } from "@wbr-project/wbr-interpret";
+import { IconButton } from "@mui/material";
+import { Assignment, DeleteForever, Edit, PlayCircle } from "@mui/icons-material";
+import { useGlobalInfoStore } from "../../context/globalInfo";
+import { deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage";
+
+interface Column {
+  id: 'interpret' | 'name' | 'create_date' | 'edit' | 'pairs' | 'update_date'| 'delete';
+  label: string;
+  minWidth?: number;
+  align?: 'right';
+  format?: (value: string) => string;
+}
+
+const columns: readonly Column[] = [
+  { id: 'interpret', label: 'Run', minWidth: 80 },
+  { id: 'name', label: 'Name', minWidth: 80 },
+  {
+    id: 'create_date',
+    label: 'Created at',
+    minWidth: 80,
+    //format: (value: string) => value.toLocaleString('en-US'),
+  },
+  {
+    id: 'edit',
+    label: 'Edit',
+    minWidth: 80,
+  },
+  {
+    id: 'pairs',
+    label: 'Pairs',
+    minWidth: 80,
+  },
+  {
+    id: 'update_date',
+    label: 'Updated at',
+    minWidth: 80,
+    //format: (value: string) => value.toLocaleString('en-US'),
+  },
+  {
+    id: 'delete',
+    label: 'Delete',
+    minWidth: 80,
+  },
+];
+
+interface Data {
+  id: number;
+  name: string;
+  create_date: string;
+  pairs: number;
+  update_date: string;
+  content: WorkflowFile;
+  params: string[];
+}
+
+interface RecordingsTableProps {
+  handleEditRecording: (fileName:string) => void;
+  handleRunRecording: (fileName:string, params: string[]) => void;
+}
+
+export const RecordingsTable = ({ handleEditRecording, handleRunRecording }: RecordingsTableProps) => {
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+  const [rows, setRows] = React.useState<Data[]>([]);
+
+  const { notify, setRecordings } = useGlobalInfoStore();
+
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(+event.target.value);
+    setPage(0);
+  };
+
+  const fetchRecordings = async () => {
+    const recordings = await getStoredRecordings();
+    if (recordings) {
+      const parsedRows: Data[] = [];
+      recordings.map((recording, index) => {
+        const parsedRecording = JSON.parse(recording);
+        if (parsedRecording.recording_meta) {
+          parsedRows.push({
+            id: index,
+            ...parsedRecording.recording_meta,
+            content: parsedRecording.recording
+          });
+        }
+      });
+      setRecordings(parsedRows.map((recording) => recording.name));
+      setRows(parsedRows);
+    } else {
+      console.log('No recordings found.');
+    }
+  }
+
+  useEffect( () => {
+    if (rows.length === 0) {
+      fetchRecordings();
+    }
+
+  }, []);
+
+  return (
+    <React.Fragment>
+      <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
+        <Table stickyHeader aria-label="sticky table">
+          <TableHead>
+            <TableRow>
+              {columns.map((column) => (
+                <TableCell
+                  key={column.id}
+                  align={column.align}
+                  style={{ minWidth: column.minWidth }}
+                >
+                  {column.label}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.length !== 0 ? rows
+              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+              .map((row) => {
+                return (
+                  <TableRow hover role="checkbox" tabIndex={-1} key={row.id}>
+                    {columns.map((column) => {
+                      // @ts-ignore
+                      const value : any = row[column.id];
+                      if (value !== undefined) {
+                        return (
+                          <TableCell key={column.id} align={column.align}>
+                            {value}
+                          </TableCell>
+                        );
+                      } else {
+                        switch (column.id) {
+                          case 'interpret':
+                            return (
+                              <TableCell key={column.id} align={column.align}>
+                                <InterpretButton handleInterpret={() => handleRunRecording(row.name, row.params || [])}/>
+                              </TableCell>
+                            );
+                          case 'edit':
+                            return (
+                              <TableCell key={column.id} align={column.align}>
+                                <IconButton aria-label="add" size= "small" onClick={() => {
+                                  handleEditRecording(row.name);
+                                }} sx={{'&:hover': { color: '#1976d2', backgroundColor: 'transparent' }}}>
+                                  <Edit/>
+                                </IconButton>
+                              </TableCell>
+                            );
+                          case 'delete':
+                            return (
+                              <TableCell key={column.id} align={column.align}>
+                                <IconButton aria-label="add" size= "small" onClick={() => {
+                                  deleteRecordingFromStorage(row.name).then((result: boolean) => {
+                                    if (result) {
+                                      setRows([]);
+                                      notify('success', 'Recording deleted successfully');
+                                      fetchRecordings();
+                                    }
+                                  })
+                                }} sx={{'&:hover': { color: '#1976d2', backgroundColor: 'transparent' }}}>
+                                  <DeleteForever/>
+                                </IconButton>
+                              </TableCell>
+                            );
+                          default:
+                              return null;
+                        }
+                      }
+                    })}
+                  </TableRow>
+                );
+              })
+              : null }
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <TablePagination
+        rowsPerPageOptions={[10, 25, 50]}
+        component="div"
+        count={rows ? rows.length : 0}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+      />
+    </React.Fragment>
+  );
+}
+
+interface InterpretButtonProps {
+  handleInterpret: () => void;
+}
+
+const InterpretButton = ( {handleInterpret}:InterpretButtonProps) => {
+  return (
+    <IconButton aria-label="add" size= "small" onClick={() => {
+      handleInterpret();
+    }}
+                sx={{'&:hover': { color: '#1976d2', backgroundColor: 'transparent' }}}>
+      <PlayCircle/>
+    </IconButton>
+  )
+}

src/components/molecules/RunContent.tsx

@@ -0,0 +1,170 @@
+import { Box, Tabs, Typography, Tab } from "@mui/material";
+import Highlight from "react-highlight";
+import Button from "@mui/material/Button";
+import * as React from "react";
+import { Data } from "./RunsTable";
+import { TabPanel, TabContext } from "@mui/lab";
+import SettingsIcon from '@mui/icons-material/Settings';
+import ImageIcon from '@mui/icons-material/Image';
+import ArticleIcon from '@mui/icons-material/Article';
+import {Buffer} from 'buffer';
+import { useEffect } from "react";
+import AssignmentIcon from '@mui/icons-material/Assignment';
+
+interface RunContentProps {
+  row: Data,
+  currentLog: string,
+  interpretationInProgress: boolean,
+  logEndRef: React.RefObject<HTMLDivElement>,
+  abortRunHandler: () => void,
+}
+
+export const RunContent = ({row, currentLog, interpretationInProgress, logEndRef, abortRunHandler}: RunContentProps) => {
+  const [tab, setTab] = React.useState<string>('log');
+
+  useEffect(() => {
+    setTab(tab);
+  }, [interpretationInProgress])
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <TabContext value={tab}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs value={tab} onChange={(e, newTab) => setTab(newTab)} aria-label="run-content-tabs">
+          <Tab label="Log" value='log' />
+          <Tab label="Input" value='input' />
+          <Tab label="Output" value='output' />
+        </Tabs>
+      </Box>
+      <TabPanel value='log'>
+        <Box sx={{ margin: 1,
+          background: '#19171c',
+          overflowY: 'scroll',
+          overflowX: 'scroll',
+          width: '700px',
+          height: 'fit-content',
+          maxHeight: '450px',
+        }}>
+          <div>
+            <Highlight className="javascript">
+              {interpretationInProgress ? currentLog : row.log}
+            </Highlight>
+            <div style={{ float:"left", clear: "both" }}
+                 ref={logEndRef}/>
+          </div>
+        </Box>
+        {interpretationInProgress ? <Button
+          color="error"
+          onClick={abortRunHandler}
+        >
+          Stop
+        </Button> : null}
+      </TabPanel>
+      <TabPanel value='input' sx={{width: '700px'}}>
+        <Typography variant='h6' sx={{display:'flex', alignItems:'center'}}>
+          <SettingsIcon sx={{marginRight: '15px'}}/>
+          Interpreter settings
+        </Typography>
+        {
+          Object.keys(row.interpreterSettings).map((setting, index) => {
+            if (setting === 'params') {
+              return (
+                <div key={`settings-${setting}-${index}`}>
+                <Typography variant='h6' sx={{display:'flex', alignItems:'center'}} key={`setting-${index}`}>
+                  <AssignmentIcon sx={{marginRight: '15px'}}/>
+                  Recording parameters
+                </Typography>
+                  {
+                    Object.keys(row.interpreterSettings.params).map((param, index) => {
+                      return (
+                        <Typography key={`recording-params-item-${index}`} sx={{margin: '10px'}}>
+                          {/*@ts-ignore*/}
+                          {param}: {row.interpreterSettings.params[param].toString()}
+                        </Typography>
+                      )
+                    })
+                  }
+                </div>
+              )
+            }
+            return (
+              <Typography key={`interpreter-settings-item-${index}`} sx={{margin: '10px'}}>
+                {/*@ts-ignore*/}
+                {setting}: {row.interpreterSettings[setting].toString()}
+              </Typography>
+            )
+          })
+        }
+      </TabPanel>
+      <TabPanel value='output' sx={{width: '700px'}}>
+        { !row || !row.serializableOutput || !row.binaryOutput
+          || (Object.keys(row.serializableOutput).length === 0 && Object.keys(row.binaryOutput).length === 0)
+          ? <Typography>The output is empty.</Typography> : null }
+
+        {row.serializableOutput &&
+          Object.keys(row.serializableOutput).length !== 0 &&
+          <div>
+              <Typography variant='h6' sx={{display:'flex', alignItems:'center'}}>
+                  <ArticleIcon sx={{marginRight: '15px'}}/>
+                  Serializable output</Typography>
+            { Object.keys(row.serializableOutput).map((key) => {
+              return (
+                <div key={`number-of-serializable-output-${key}`}>
+                  <Typography>
+                    {key}:
+                    <a href={`data:application/json;utf8,${JSON.stringify(row.serializableOutput[key], null, 2)}`}
+                       download={key} style={{margin:'10px'}}>Download</a>
+                  </Typography>
+                <Box sx={{
+                  width: 'fit-content',
+                  background: 'rgba(0,0,0,0.06)',
+                  maxHeight: '300px',
+                  overflow: 'scroll',
+                }}>
+                  <pre key={`serializable-output-${key}`}>
+                    {row.serializableOutput[key] ? JSON.stringify(row.serializableOutput[key], null, 2)
+                    : 'The output is empty.'}
+                  </pre>
+                </Box>
+                </div>
+              )
+            })}
+          </div>
+        }
+        {row.binaryOutput
+          && Object.keys(row.binaryOutput).length !== 0 &&
+          <div>
+            <Typography variant='h6' sx={{display:'flex', alignItems:'center'}}>
+                <ImageIcon sx={{marginRight:'15px'}}/>
+                Binary output</Typography>
+            { Object.keys(row.binaryOutput).map((key) => {
+              try {
+                const binaryBuffer = JSON.parse(row.binaryOutput[key].data);
+                const b64 = Buffer.from(binaryBuffer.data).toString('base64');
+                return (
+                  <Box key={`number-of-binary-output-${key}`} sx={{
+                    width: 'max-content',
+                  }}>
+                    <Typography key={`binary-output-key-${key}`}>
+                      {key}:
+                      <a href={`data:${row.binaryOutput[key].mimetype};base64,${b64}`}
+                         download={key} style={{margin:'10px'}}>Download</a>
+                    </Typography>
+                    <img key={`image-${key}`} src={`data:${row.binaryOutput[key].mimetype};base64,${b64}`}
+                         alt={key} height='auto' width='700px'/>
+                  </Box>
+                )
+              } catch (e) {
+                console.log(e)
+                return <Typography key={`number-of-binary-output-${key}`}>
+                  {key}: The image failed to render
+                </Typography>
+              }
+              })}
+          </div>
+        }
+      </TabPanel>
+      </TabContext>
+    </Box>
+  );
+}

src/components/molecules/RunSettings.tsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { GenericModal } from "../atoms/GenericModal";
+import { MenuItem, TextField, Typography } from "@mui/material";
+import { Dropdown } from "../atoms/DropdownMui";
+import Button from "@mui/material/Button";
+import { modalStyle } from "./AddWhereCondModal";
+
+interface RunSettingsProps {
+  isOpen: boolean;
+  handleStart: (settings: RunSettings) => void;
+  handleClose: () => void;
+  isTask: boolean;
+  params?: string[];
+}
+
+export interface RunSettings {
+  maxConcurrency: number;
+  maxRepeats: number;
+  debug: boolean;
+  params?: any;
+}
+
+export const RunSettingsModal = ({ isOpen, handleStart, handleClose, isTask, params }: RunSettingsProps) => {
+
+  const [settings, setSettings] = React.useState<RunSettings>({
+    maxConcurrency: 1,
+    maxRepeats: 1,
+    debug: true,
+  });
+
+  return (
+    <GenericModal
+      isOpen={isOpen}
+      onClose={handleClose}
+      modalStyle={modalStyle}
+    >
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        marginLeft: '65px',
+      }}>
+        { isTask
+          ?
+          (
+            <React.Fragment>
+            <Typography sx={{ margin: '20px 0px' }} >Recording parameters:</Typography>
+              { params?.map((item, index) => {
+            return <TextField
+              sx={{ marginBottom: '15px' }}
+              key={`param-${index}`}
+              type="string"
+              label={item}
+              required
+              onChange={(e) => setSettings(
+                {
+                  ...settings,
+                  params: settings.params
+                    ? {
+                    ...settings.params,
+                    [item]: e.target.value,
+                  }
+                  : {
+                    [item]: e.target.value,
+                  },
+                })}
+            />
+          }) }
+            </React.Fragment>)
+          : null
+        }
+        <Typography sx={{ margin: '20px 0px' }} >Interpreter settings:</Typography>
+        <TextField
+          sx={{ marginBottom: '15px' }}
+          type="number"
+          label="maxConcurrency"
+          required
+          onChange={(e) => setSettings(
+            {
+              ...settings,
+              maxConcurrency: parseInt(e.target.value),
+            })}
+          defaultValue={settings.maxConcurrency}
+        />
+        <TextField
+          sx={{ marginBottom: '15px' }}
+          type="number"
+          label="maxRepeats"
+          required
+          onChange={(e) => setSettings(
+            {
+              ...settings,
+              maxRepeats: parseInt(e.target.value),
+            })}
+          defaultValue={settings.maxRepeats}
+        />
+        <Dropdown
+          id="debug"
+          label="debug"
+          value={settings.debug?.toString()}
+          handleSelect={(e) => setSettings(
+            {
+              ...settings,
+              debug: e.target.value === "true",
+            })}
+        >
+          <MenuItem value="true">true</MenuItem>
+          <MenuItem value="false">false</MenuItem>
+        </Dropdown>
+        <Button onClick={() => handleStart(settings)}>Start</Button>
+      </div>
+    </GenericModal>
+  );
+}

src/components/molecules/RunsTable.tsx

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import Paper from '@mui/material/Paper';
+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 { useEffect, useState } from "react";
+import { useGlobalInfoStore } from "../../context/globalInfo";
+import { getStoredRuns } from "../../api/storage";
+import { RunSettings } from "./RunSettings";
+import { CollapsibleRow } from "./ColapsibleRow";
+
+interface Column {
+  id: 'status' | 'name' | 'startedAt' | 'finishedAt' | 'duration' | 'task' | 'runId' | 'delete';
+  label: string;
+  minWidth?: number;
+  align?: 'right';
+  format?: (value: string) => string;
+}
+
+export const columns: readonly Column[] = [
+  { id: 'status', label: 'Status', minWidth: 80 },
+  { id: 'name', label: 'Name', minWidth: 80 },
+  { id: 'startedAt', label: 'Started at', minWidth: 80 },
+  { id: 'finishedAt', label: 'Finished at', minWidth: 80 },
+  { id: 'duration', label: 'Duration', minWidth: 80 },
+  { id: 'runId', label: 'Run id', minWidth: 80 },
+  { id: 'task', label: 'Task', minWidth: 80 },
+  { id: 'delete', label: 'Delete', minWidth: 80 },
+];
+
+export interface Data {
+  id: number;
+  status: string;
+  name: string;
+  startedAt: string;
+  finishedAt: string;
+  duration: string;
+  task: string;
+  log: string;
+  runId: string;
+  interpreterSettings: RunSettings;
+  serializableOutput: any;
+  binaryOutput: any;
+}
+
+interface RunsTableProps {
+  currentInterpretationLog: string;
+  abortRunHandler: () => void;
+  runId: string;
+  runningRecordingName: string;
+}
+
+export const RunsTable = (
+  { currentInterpretationLog, abortRunHandler, runId, runningRecordingName }: RunsTableProps) => {
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [rows, setRows] = useState<Data[]>([]);
+
+  const { notify, rerenderRuns, setRerenderRuns } = useGlobalInfoStore();
+
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(+event.target.value);
+    setPage(0);
+  };
+
+  const fetchRuns = async () => {
+    const runs = await getStoredRuns();
+    if (runs) {
+      const parsedRows: Data[] = [];
+      runs.map((run, index) => {
+        const parsedRun = JSON.parse(run);
+          parsedRows.push({
+              id: index,
+              ...parsedRun,
+            });
+      });
+      setRows(parsedRows);
+    } else {
+      console.log('No runs found.');
+    }
+  }
+
+  useEffect( () => {
+    if (rows.length === 0 || rerenderRuns) {
+      fetchRuns();
+      setRerenderRuns(false);
+    }
+
+  }, [rerenderRuns]);
+
+
+  const handleDelete = () => {
+    setRows([]);
+    notify('success', 'Run deleted successfully');
+    fetchRuns();
+  }
+
+  return (
+    <React.Fragment>
+      <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
+        <Table stickyHeader aria-label="sticky table" >
+          <TableHead>
+            <TableRow>
+              <TableCell />
+              {columns.map((column) => (
+                <TableCell
+                  key={column.id}
+                  align={column.align}
+                  style={{ minWidth: column.minWidth }}
+                >
+                  {column.label}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.length !== 0 ? rows
+                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                .map((row, index) =>
+                  <CollapsibleRow
+                    row={row}
+                    handleDelete={handleDelete}
+                    key={`row-${row.id}`}
+                    isOpen={runId === row.runId && runningRecordingName === row.name}
+                    currentLog={currentInterpretationLog}
+                    abortRunHandler={abortRunHandler}
+                    runningRecordingName={runningRecordingName}
+                  />
+                )
+              : null }
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <TablePagination
+        rowsPerPageOptions={[10, 25, 50]}
+        component="div"
+        count={rows ? rows.length : 0}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+      />
+  </React.Fragment>
+  );
+}

src/components/molecules/SaveRecording.tsx

@@ -0,0 +1,125 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { IconButton, Button, Box, LinearProgress, Tooltip } from "@mui/material";
+import { GenericModal } from "../atoms/GenericModal";
+import { stopRecording } from "../../api/recording";
+import { useGlobalInfoStore } from "../../context/globalInfo";
+import { useSocketStore } from "../../context/socket";
+import { TextField, Typography } from "@mui/material";
+import { WarningText } from "../atoms/texts";
+import NotificationImportantIcon from "@mui/icons-material/NotificationImportant";
+import FlagIcon from '@mui/icons-material/Flag';
+
+interface SaveRecordingProps {
+  fileName: string;
+}
+
+export const SaveRecording = ({fileName}: SaveRecordingProps) => {
+
+  const [openModal, setOpenModal] = useState<boolean>(false);
+  const [needConfirm, setNeedConfirm] = useState<boolean>(false);
+  const [recordingName, setRecordingName] = useState<string>(fileName);
+  const [waitingForSave, setWaitingForSave] = useState<boolean>(false);
+
+  const { browserId, setBrowserId, notify, recordings } =  useGlobalInfoStore();
+  const { socket } = useSocketStore();
+
+  const handleChangeOfTitle = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+    if (needConfirm) {
+      setNeedConfirm(false);
+    }
+    setRecordingName(value);
+  }
+
+  const handleSaveRecording = async (event: React.SyntheticEvent) => {
+    event.preventDefault();
+    if (recordings.includes(recordingName)) {
+      if (needConfirm) { return; }
+      setNeedConfirm(true);
+    } else {
+      await saveRecording();
+    }
+  };
+
+  const exitRecording = useCallback(async() => {
+    notify('success', 'Recording saved successfully');
+    if (browserId) {
+      await stopRecording(browserId);
+    }
+    setBrowserId(null);
+  }, [setBrowserId, browserId, notify]);
+
+  // notifies backed to save the recording in progress,
+  // releases resources and changes the view for main page by clearing the global browserId
+  const saveRecording = async () => {
+    socket?.emit('save', recordingName)
+    setWaitingForSave(true);
+  }
+
+  useEffect(() => {
+    socket?.on('fileSaved', exitRecording);
+    return () => {
+      socket?.off('fileSaved', exitRecording);
+    }
+  }, [socket, exitRecording]);
+
+  return (
+    <div>
+      <Button sx={{
+        width:'100px',
+        background: 'white',
+        color: 'rgba(0,128,0,0.7)',
+        '&:hover': {background: 'white', color: 'green'},
+        padding: '11px',
+        marginRight: '10px',
+      }} onClick={() => setOpenModal(true)}>
+        <FlagIcon sx={{marginRight:'3px'}}/> FINISH
+      </Button>
+
+      <GenericModal isOpen={openModal} onClose={() => setOpenModal(false)} modalStyle={modalStyle}>
+        <form onSubmit={handleSaveRecording} style={{paddingTop:'50px', display: 'flex', flexDirection: 'column'}} >
+          <Typography>Save the recording as:</Typography>
+          <TextField
+            required
+            sx={{width: '250px', paddingBottom: '10px', margin: '15px 0px'}}
+            onChange={handleChangeOfTitle}
+            id="title"
+            label="Recording title"
+            variant="outlined"
+            defaultValue={recordingName ? recordingName : null}
+          />
+            { needConfirm
+              ?
+              (<React.Fragment>
+                <Button color="error" variant="contained" onClick={saveRecording}>Confirm</Button>
+                <WarningText>
+                  <NotificationImportantIcon color="warning"/>
+                  Recording already exists, please confirm the recording's overwrite.
+                </WarningText>
+              </React.Fragment>)
+              : <Button type="submit" variant="contained">Save</Button>
+            }
+          { waitingForSave &&
+              <Tooltip title='Optimizing and saving the workflow' placement={"bottom"}>
+                  <Box sx={{ width: '100%' }}>
+                      <LinearProgress/>
+                  </Box>
+              </Tooltip>
+          }
+        </form>
+      </GenericModal>
+    </div>
+  );
+}
+
+const modalStyle = {
+  top: '25%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '20%',
+  backgroundColor: 'background.paper',
+  p: 4,
+  height:'fit-content',
+  display:'block',
+  padding: '20px',
+};

src/components/molecules/SidePanelHeader.tsx

@@ -0,0 +1,38 @@
+import React, { FC, useState } from 'react';
+import { InterpretationButtons } from "./InterpretationButtons";
+import { AddButton } from "../atoms/buttons/AddButton";
+import { GenericModal } from "../atoms/GenericModal";
+import { PairEditForm } from "./PairEditForm";
+import { WhereWhatPair, WorkflowFile } from "@wbr-project/wbr-interpret";
+import { AddPair } from "../../api/workflow";
+import { Button, Stack } from "@mui/material";
+import { FastForward } from "@mui/icons-material";
+import { useSocketStore } from "../../context/socket";
+import { useGlobalInfoStore } from "../../context/globalInfo";
+
+export const SidePanelHeader = () => {
+
+ const [steppingIsDisabled, setSteppingIsDisabled] = useState(true);
+
+ const { socket } = useSocketStore();
+
+ const handleStep = () => {
+   socket?.emit('step');
+ };
+
+ return (
+   <div style={{width: 'inherit'}}>
+    <InterpretationButtons enableStepping={(isPaused) => setSteppingIsDisabled(!isPaused)}/>
+     <Button
+       variant='outlined'
+       disabled={steppingIsDisabled}
+       onClick={handleStep}
+       sx={{marginLeft:'15px'}}
+     >
+       step
+       <FastForward/>
+     </Button>
+    <hr/>
+   </div>
+ );
+};

src/components/molecules/ToggleButton.tsx

@@ -0,0 +1,61 @@
+import React, { FC } from "react";
+import styled from "styled-components";
+
+interface ToggleButtonProps {
+  isChecked?: boolean;
+  onChange: () => void;
+};
+
+export const ToggleButton: FC<ToggleButtonProps> = ({ isChecked = false, onChange }) => (
+  <CheckBoxWrapper>
+    <CheckBox id="checkbox" type="checkbox" onClick={onChange} checked={isChecked}/>
+    <CheckBoxLabel htmlFor="checkbox"/>
+  </CheckBoxWrapper>
+);
+
+const CheckBoxWrapper = styled.div`
+  position: relative;
+`;
+const CheckBoxLabel = styled.label`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 42px;
+  height: 26px;
+  border-radius: 15px;
+  background: #bebebe;
+  cursor: pointer;
+
+  &::after {
+    content: "";
+    display: block;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    margin: 3px;
+    background: #ffffff;
+    box-shadow: 1px 3px 3px 1px rgba(0, 0, 0, 0.2);
+    transition: 0.2s;
+  }
+`;
+const CheckBox = styled.input`
+  opacity: 0;
+  z-index: 1;
+  border-radius: 15px;
+  width: 42px;
+  height: 26px;
+
+  &:checked + ${CheckBoxLabel} {
+    background: #2196F3;
+
+    &::after {
+      content: "";
+      display: block;
+      border-radius: 50%;
+      width: 18px;
+      height: 18px;
+      margin-left: 21px;
+      transition: 0.2s;
+    }
+  }
+`;

src/components/organisms/LeftSidePanel.tsx

@@ -0,0 +1,135 @@
+import { Box, Paper, Tab, Tabs } from "@mui/material";
+import React, { useCallback, useEffect, useState } from "react";
+import { getActiveWorkflow, getParamsOfActiveWorkflow } from "../../api/workflow";
+import { useSocketStore } from '../../context/socket';
+import { WhereWhatPair, WorkflowFile } from "@wbr-project/wbr-interpret";
+import { SidePanelHeader } from "../molecules/SidePanelHeader";
+import { emptyWorkflow } from "../../shared/constants";
+import { LeftSidePanelContent } from "../molecules/LeftSidePanelContent";
+import { useBrowserDimensionsStore } from "../../context/browserDimensions";
+import { useGlobalInfoStore } from "../../context/globalInfo";
+import { TabContext, TabPanel } from "@mui/lab";
+import { LeftSidePanelSettings } from "../molecules/LeftSidePanelSettings";
+import { RunSettings } from "../molecules/RunSettings";
+
+const fetchWorkflow = (id: string, callback: (response: WorkflowFile) => void) => {
+  getActiveWorkflow(id).then(
+    (response ) => {
+      if (response){
+        callback(response);
+      } else {
+        throw new Error("No workflow found");
+      }
+    }
+  ).catch((error) => {console.log(error.message)})
+};
+
+interface LeftSidePanelProps {
+  sidePanelRef: HTMLDivElement | null;
+  alreadyHasScrollbar: boolean;
+  recordingName: string;
+  handleSelectPairForEdit: (pair:WhereWhatPair, index:number) => void;
+}
+
+export const LeftSidePanel = (
+  { sidePanelRef, alreadyHasScrollbar, recordingName, handleSelectPairForEdit }: LeftSidePanelProps) => {
+
+  const [workflow, setWorkflow] = useState<WorkflowFile>(emptyWorkflow);
+  const [hasScrollbar, setHasScrollbar] = useState<boolean>(alreadyHasScrollbar);
+  const [tab, setTab] = useState<string>('recording');
+  const [params, setParams] = useState<string[]>([]);
+  const [settings, setSettings] = React.useState<RunSettings>({
+    maxConcurrency: 1,
+    maxRepeats: 1,
+    debug: false,
+  });
+
+  const { id, socket } = useSocketStore();
+  const { setWidth, width } = useBrowserDimensionsStore();
+  const { setRecordingLength } = useGlobalInfoStore();
+
+  const workflowHandler = useCallback((data: WorkflowFile) => {
+    setWorkflow(data);
+    setRecordingLength(data.workflow.length);
+  }, [workflow])
+
+  useEffect(() => {
+    // fetch the workflow every time the id changes
+    if (id) {
+      fetchWorkflow(id, workflowHandler);
+    }
+    // fetch workflow in 15min intervals
+    let interval = setInterval(() =>{
+    if (id) {
+      fetchWorkflow(id, workflowHandler);
+    }}, (1000 * 60 * 15));
+    return () => clearInterval(interval)
+  }, [id]);
+
+  useEffect(() => {
+    if (socket) {
+      socket.on("workflow", workflowHandler);
+    }
+
+    if (sidePanelRef) {
+      const workflowListHeight = sidePanelRef.clientHeight;
+      const innerHeightWithoutNavbar = window.innerHeight - 70;
+      if (innerHeightWithoutNavbar <= workflowListHeight) {
+        if (!hasScrollbar) {
+          setWidth(width - 10);
+          setHasScrollbar(true);
+        }
+      } else {
+        if (hasScrollbar && !alreadyHasScrollbar) {
+          setWidth(width + 10);
+          setHasScrollbar(false);
+        }
+      }
+    }
+
+    return () => {
+      socket?.off('workflow', workflowHandler);
+    }
+  }, [socket, workflowHandler]);
+
+  return (
+    <Paper
+      sx={{
+        height: '100%',
+        width: '100%',
+        backgroundColor: 'lightgray',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        flexDirection: 'column',
+      }}
+    >
+      <SidePanelHeader/>
+      <TabContext value={tab}>
+          <Tabs value={tab} onChange={(e, newTab) => setTab(newTab)}>
+            <Tab label="Recording" value='recording' />
+            <Tab label="Settings" value='settings' onClick={() => {
+              getParamsOfActiveWorkflow(id).then((response) => {
+                if (response) {
+                  setParams(response);
+                }
+              })
+            }}/>
+          </Tabs>
+        <TabPanel value='recording' sx={{padding: '0px'}}>
+          <LeftSidePanelContent
+            workflow={workflow}
+            updateWorkflow={setWorkflow}
+            recordingName={recordingName}
+            handleSelectPairForEdit={handleSelectPairForEdit}
+          />
+        </TabPanel>
+        <TabPanel value='settings'>
+          <LeftSidePanelSettings params={params}
+          settings={settings} setSettings={setSettings}/>
+        </TabPanel>
+      </TabContext>
+    </Paper>
+  );
+
+};

src/components/organisms/MainMenu.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Box from '@mui/material/Box';
+import { Paper } from "@mui/material";
+import styled from "styled-components";
+
+interface MainMenuProps {
+  value: string;
+  handleChangeContent: (newValue: string) => void;
+}
+
+export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenuProps) => {
+
+  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+    handleChangeContent(newValue);
+  };
+
+  return (
+    <Paper
+      sx={{
+        height: 'auto',
+        maxWidth: 'fit-content',
+        backgroundColor: 'lightgray',
+        paddingTop: '2rem',
+      }}
+    >
+      <Box sx={{
+        width: '100%',
+        paddingBottom: '22rem',
+      }}>
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          textColor="primary"
+          indicatorColor="primary"
+          orientation="vertical"
+        >
+          <Tab sx={{
+            alignItems: 'baseline',
+            fontSize:'medium',
+          }} value="recordings" label="Recordings" />
+          <Tab sx={{
+            alignItems: 'baseline',
+            fontSize:'medium',
+          }} value="runs" label="Runs" />
+      </Tabs>
+      </Box>
+    </Paper>
+  );
+}

src/components/organisms/Recordings.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { RecordingsTable } from "../molecules/RecordingsTable";
+import { Grid } from "@mui/material";
+import { RunSettings, RunSettingsModal } from "../molecules/RunSettings";
+
+interface RecordingsProps {
+  handleEditRecording: (fileName: string) => void;
+  handleRunRecording: (settings: RunSettings) => void;
+  setFileName: (fileName: string) => void;
+
+}
+
+export const Recordings = ({ handleEditRecording, handleRunRecording, setFileName }: RecordingsProps) => {
+  const [runSettingsAreOpen, setRunSettingsAreOpen] = useState(false);
+  const [params, setParams] = useState<string[]>([]);
+
+  const handleSettingsAndRun = (fileName: string, params: string[]) => {
+    if (params.length === 0) {
+      setRunSettingsAreOpen(true);
+      setFileName(fileName);
+    } else {
+      setParams(params);
+      setRunSettingsAreOpen(true);
+      setFileName(fileName);
+    }
+  }
+
+  const handleClose = () => {
+    setParams([]);
+    setRunSettingsAreOpen(false);
+    setFileName('');
+  }
+
+  return (
+    <React.Fragment>
+    <RunSettingsModal isOpen={runSettingsAreOpen}
+                      handleClose={handleClose}
+                      handleStart={ (settings) => handleRunRecording(settings) }
+                      isTask={params.length !== 0}
+                      params={params}
+    />
+    <Grid container direction="column" sx={{ padding: '30px'}}>
+      <Grid item xs>
+        <RecordingsTable
+          handleEditRecording={handleEditRecording}
+          handleRunRecording={handleSettingsAndRun}
+        />
+      </Grid>
+    </Grid>
+    </React.Fragment>
+  );
+}

src/components/organisms/RightSidePanel.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from 'react';
+import { Button, MenuItem, Paper, Stack, Tabs, Tab } from "@mui/material";
+import { Dropdown as MuiDropdown } from '../atoms/DropdownMui';
+import styled from "styled-components";
+import { ActionSettings } from "../molecules/ActionSettings";
+import { SelectChangeEvent } from "@mui/material/Select/Select";
+import { SimpleBox } from "../atoms/Box";
+import Typography from "@mui/material/Typography";
+import { useGlobalInfoStore } from "../../context/globalInfo";
+import { PairDetail } from "../molecules/PairDetail";
+import { PairForEdit } from "../../pages/RecordingPage";
+
+interface RightSidePanelProps {
+  pairForEdit: PairForEdit;
+  changeBrowserDimensions: () => void;
+}
+
+export const RightSidePanel = ({pairForEdit, changeBrowserDimensions}: RightSidePanelProps) => {
+
+  const [content, setContent] = useState<string>('action');
+  const [action, setAction] = React.useState<string>('');
+  const [isSettingsDisplayed, setIsSettingsDisplayed] = React.useState<boolean>(false);
+
+  const { lastAction } = useGlobalInfoStore();
+
+  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+    setContent(newValue);
+  };
+
+  const handleActionSelect = (event: SelectChangeEvent) => {
+    const { value } = event.target;
+    setAction(value);
+    setIsSettingsDisplayed(true);
+  };
+
+  useEffect(() => {
+    if (content !== 'detail' && pairForEdit.pair !== null) {
+      setContent('detail');
+    }
+  }, [pairForEdit])
+
+  return (
+    <Paper
+      variant="outlined"
+      sx={{
+        height: '100%',
+        width: '100%',
+        backgroundColor: 'white',
+        alignItems: "center",
+      }}>
+      <Button onClick={() => {
+        changeBrowserDimensions();
+      }}>resize browser</Button>
+      <SimpleBox height={60} width='100%' background='lightGray' radius='0%'>
+        <Typography sx={{ padding: '10px' }}>
+          Last action:
+          {` ${lastAction}`}
+        </Typography>
+      </SimpleBox>
+
+      <Tabs value={content} onChange={handleChange} centered>
+        <Tab label="Actions" value="action" />
+        <Tab label="Pair detail" value="detail"/>
+      </Tabs>
+
+      {content === 'action' ? (
+          <React.Fragment>
+            <ActionDescription>Type of action:</ActionDescription>
+            <ActionTypeWrapper>
+              <MuiDropdown
+                id="action"
+                label="Action"
+                value={action}
+                handleSelect={handleActionSelect}>
+                <MenuItem value="mouse.click">click on coordinates</MenuItem>
+                <MenuItem value="enqueueLinks">enqueueLinks</MenuItem>
+                <MenuItem value="scrape">scrape</MenuItem>
+                <MenuItem value="scrapeSchema">scrapeSchema</MenuItem>
+                <MenuItem value="screenshot">screenshot</MenuItem>
+                <MenuItem value="script">script</MenuItem>
+                <MenuItem value="scroll">scroll</MenuItem>
+              </MuiDropdown>
+            </ActionTypeWrapper>
+
+            {isSettingsDisplayed &&
+                <ActionSettings action={action}/>
+            }
+          </React.Fragment>
+        )
+        : <PairDetail pair={pairForEdit.pair} index={pairForEdit.index}/>
+      }
+    </Paper>
+  );
+};
+
+const ActionTypeWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+`;
+
+export const ActionDescription = styled.p`
+  margin-left: 15px;
+`;

src/components/organisms/Runs.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import { Grid } from "@mui/material";
+import { RunsTable } from "../molecules/RunsTable";
+
+interface RunsProps {
+  currentInterpretationLog: string;
+  abortRunHandler: () => void;
+  runId: string;
+  runningRecordingName: string;
+}
+
+export const Runs = (
+  { currentInterpretationLog, abortRunHandler, runId, runningRecordingName }: RunsProps) => {
+
+  return (
+    <Grid container direction="column" sx={{ padding: '30px'}}>
+      <Grid item xs>
+        <RunsTable
+          currentInterpretationLog={currentInterpretationLog}
+          abortRunHandler={abortRunHandler}
+          runId={runId}
+          runningRecordingName={runningRecordingName}
+        />
+      </Grid>
+    </Grid>
+  );
+}

src/pages/MainPage.tsx

@@ -0,0 +1,124 @@
+import React, { useCallback, useEffect } from 'react';
+import { MainMenu } from "../components/organisms/MainMenu";
+import { Grid, Stack } from "@mui/material";
+import { Recordings } from "../components/organisms/Recordings";
+import { Runs } from "../components/organisms/Runs";
+import { useGlobalInfoStore } from "../context/globalInfo";
+import { createRunForStoredRecording, interpretStoredRecording, notifyAboutAbort } from "../api/storage";
+import { io, Socket } from "socket.io-client";
+import { stopRecording } from "../api/recording";
+import { RunSettings } from "../components/molecules/RunSettings";
+
+interface MainPageProps {
+  handleEditRecording: (fileName: string) => void;
+}
+
+export interface CreateRunResponse {
+  browserId: string;
+  runId: string;
+}
+
+export const MainPage = ({ handleEditRecording }: MainPageProps) => {
+
+  const [content, setContent] = React.useState('recordings');
+  const [sockets, setSockets] = React.useState<Socket[]>([]);
+  const [runningRecordingName, setRunningRecordingName] = React.useState('');
+  const [currentInterpretationLog, setCurrentInterpretationLog] = React.useState('');
+  const [ids, setIds] = React.useState<CreateRunResponse>({
+    browserId: '',
+    runId: ''
+  });
+
+  let aborted = false;
+
+  const { notify, setRerenderRuns } = useGlobalInfoStore();
+
+  const abortRunHandler = (runId: string) => {
+    aborted = true;
+    notifyAboutAbort(runningRecordingName, runId).then(async (response) => {
+      if (response) {
+        notify('success', `Interpretation of ${runningRecordingName} aborted successfully`);
+        await stopRecording(ids.browserId);
+      } else {
+        notify('error', `Failed to abort the interpretation ${runningRecordingName} recording`);
+      }
+    })
+  }
+
+  const setFileName = (fileName: string) => {
+    setRunningRecordingName(fileName);
+  }
+
+  const readyForRunHandler = useCallback( (browserId: string, runId: string) => {
+    interpretStoredRecording(runningRecordingName, runId).then( async (interpretation: boolean) => {
+      if (!aborted) {
+        if (interpretation) {
+          notify('success', `Interpretation of ${runningRecordingName} succeeded`);
+        } else {
+          notify('success', `Failed to interpret ${runningRecordingName} recording`);
+          // destroy the created browser
+          await stopRecording(browserId);
+        }
+      }
+      setRunningRecordingName('');
+      setCurrentInterpretationLog('');
+      setRerenderRuns(true);
+    })
+  }, [runningRecordingName, aborted, currentInterpretationLog, notify, setRerenderRuns]);
+
+  const debugMessageHandler = useCallback((msg: string) => {
+    setCurrentInterpretationLog((prevState) =>
+      prevState + '\n' + `[${new Date().toLocaleString()}] ` + msg);
+  }, [currentInterpretationLog])
+
+  const handleRunRecording = useCallback((settings: RunSettings) => {
+    createRunForStoredRecording(runningRecordingName, settings).then(({browserId, runId}: CreateRunResponse) => {
+      setIds({browserId, runId});
+      const socket =
+        io(`http://localhost:8080/${browserId}`, {
+          transports: ["websocket"],
+          rejectUnauthorized: false
+        });
+      setSockets(sockets => [...sockets, socket]);
+      socket.on('ready-for-run', () => readyForRunHandler(browserId, runId));
+      socket.on('debugMessage', debugMessageHandler);
+      setContent('runs');
+      if (browserId) {
+        notify('info', `Running recording: ${runningRecordingName}`);
+      } else {
+        notify('error', `Failed to run recording: ${runningRecordingName}`);
+      }
+    });
+    return (socket: Socket, browserId: string, runId: string) => {
+      socket.off('ready-for-run', () => readyForRunHandler(browserId, runId));
+      socket.off('debugMessage', debugMessageHandler);
+    }
+  }, [runningRecordingName, sockets, ids, readyForRunHandler, debugMessageHandler])
+
+  const DisplayContent = () => {
+    switch (content) {
+      case 'recordings':
+        return <Recordings
+          handleEditRecording={handleEditRecording}
+          handleRunRecording={handleRunRecording}
+          setFileName={setFileName}
+        />;
+      case 'runs':
+        return <Runs
+          currentInterpretationLog={currentInterpretationLog}
+          abortRunHandler={() => abortRunHandler(ids.runId)}
+          runId={ids.runId}
+          runningRecordingName={runningRecordingName}
+        />;
+      default:
+        return null;
+    }
+  }
+
+  return (
+    <Stack direction='row' spacing={0} sx={{minHeight: '800px'}}>
+        <MainMenu value={content} handleChangeContent={setContent}/>
+      { DisplayContent() }
+    </Stack>
+  );
+};

src/pages/PageWrappper.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import { NavBar } from "../components/molecules/NavBar";
+import { SocketProvider } from "../context/socket";
+import { BrowserDimensionsProvider } from "../context/browserDimensions";
+import { RecordingPage } from "./RecordingPage";
+import { MainPage } from "./MainPage";
+import { useGlobalInfoStore } from "../context/globalInfo";
+import { getActiveBrowserId } from "../api/recording";
+import { AlertSnackbar } from "../components/atoms/AlertSnackbar";
+import { InterpretationLog } from "../components/molecules/InterpretationLog";
+
+
+export const PageWrapper = () => {
+
+  const [recordingName, setRecordingName] = useState('');
+  const [open, setOpen] = useState(false);
+
+  const { browserId, setBrowserId, notification } =  useGlobalInfoStore();
+
+  const handleNewRecording = () => {
+    setBrowserId('new-recording');
+    setRecordingName('');
+  }
+
+  const handleEditRecording = (fileName: string) => {
+    setRecordingName(fileName);
+    setBrowserId('new-recording');
+  }
+
+  const isNotification = (): boolean=> {
+    if (notification.isOpen && !open){
+      setOpen(true);
+    }
+    return notification.isOpen;
+  }
+
+  useEffect(() => {
+    const isRecordingInProgress = async() => {
+      const id = await getActiveBrowserId();
+      if (id) {
+        setBrowserId(id);
+      }
+    }
+    isRecordingInProgress();
+  }, []);
+
+  return (
+    <div>
+      <SocketProvider>
+        <React.Fragment>
+          <NavBar newRecording={handleNewRecording} recordingName={recordingName} isRecording={!!browserId}/>
+            {browserId
+              ? (
+                  <BrowserDimensionsProvider>
+                    <React.Fragment>
+                      <RecordingPage recordingName={recordingName}/>
+                      <InterpretationLog/>
+                    </React.Fragment>
+                  </BrowserDimensionsProvider>
+              )
+              : <MainPage
+                handleEditRecording={handleEditRecording}
+              />
+            }
+        </React.Fragment>
+      </SocketProvider>
+      { isNotification() ?
+        <AlertSnackbar severity={notification.severity}
+                       message={notification.message}
+                       isOpen={notification.isOpen}/>
+        : null
+      }
+    </div>
+  );
+}