diff --git a/src/tests/terminal_formatter_test.py b/src/tests/terminal_formatter_test.py
deleted file mode 100644
index 241507e8..00000000
--- a/src/tests/terminal_formatter_test.py
+++ /dev/null
@@ -1,135 +0,0 @@
-import unittest
-
-from utils.terminal_formatter import TerminalEmulator, FormattedText, TerminalOutputChunk, TerminalPosition
-
-FORMAT_ESCAPE_CHARACTER = ''
-
-
-class TerminalFormatterTest(unittest.TestCase):
-    def test_simple_text(self):
-        self._feed('some text')
-
-        self.assertListEqual(['some text'], self._get_output_texts())
-
-    def test_simple_multiple_chunks(self):
-        self._feed('some text')
-        self._feed('another text')
-        self._feed('1')
-
-        self.assertListEqual(['some text', 'another text', '1'], self._get_output_texts())
-
-    def test_simple_red_text(self):
-        self._feed('some text')
-
-        self.assertListEqual([self._output_chunk('some text', text_color='red')],
-                             self._get_output())
-
-    def test_formatting_with_reset_code(self):
-        self._feed('some text')
-
-        self.assertListEqual([self._output_chunk('some text', text_color='white', background_color='green')],
-                             self._get_output())
-
-    def test_caret_return_inside_chunk(self):
-        self._feed('some\rtext')
-
-        self.assertListEqual([self._output_chunk('text')],
-                             self._get_output())
-
-    def test_caret_return_between_chunks(self):
-        self._feed('some text\r')
-        self._feed('123')
-
-        self.assertListEqual([self._output_chunk('some text'), self._output_chunk('123', custom_position=(0, 0))],
-                             self._get_output())
-
-    def test_caret_return_and_new_line(self):
-        self._feed('some text\r\n123')
-
-        self.assertListEqual([self._output_chunk('some text\n123')],
-                             self._get_output())
-
-    def test_caret_return_and_new_line_when_separate_chunks(self):
-        self._feed('some text\r\n')
-        self._feed('123')
-
-        self.assertListEqual([self._output_chunk('some text\n'), self._output_chunk('123')],
-                             self._get_output())
-
-    def test_text_cr_and_then_multiline_starting_chunk(self):
-        self._feed('some text\r')
-        self._feed('\n\n\n123')
-
-        self.assertListEqual([self._output_chunk('some text'), self._output_chunk('\n\n\n123')],
-                             self._get_output())
-
-    def test_cr_lf_text_cr_and_chunk(self):
-        self._feed('some text\r\n123\r')
-        self._feed('987')
-
-        self.assertListEqual([self._output_chunk('some text\n123'),
-                              self._output_chunk('987', custom_position=(0, 1))],
-                             self._get_output())
-
-    def test_multiple_lines_with_cr_lf_in_single_chunk(self):
-        self._feed('line1\r\nline2\r\nline3\r\n')
-
-        self.assertListEqual([self._output_chunk('line1\nline2\nline3\n')],
-                             self._get_output())
-
-    def test_multiple_lines_with_cr_lf_in_multiple_chunks(self):
-        self._feed('line1\r\n')
-        self._feed('line2\r\n')
-        self._feed('line3\r\n')
-
-        self.assertListEqual([self._output_chunk('line1\n'),
-                              self._output_chunk('line2\n'),
-                              self._output_chunk('line3\n')],
-                             self._get_output())
-
-    def test_multiple_new_lines_as_single_chunk(self):
-        self._feed('\n\n\n')
-
-        self.assertListEqual([self._output_chunk('\n\n\n')],
-                             self._get_output())
-
-    def test_multiple_new_lines_as_multiple_chunks(self):
-        self._feed('\n')
-        self._feed('\n')
-        self._feed('\n')
-
-        self.assertListEqual([self._output_chunk('\n'), self._output_chunk('\n'), self._output_chunk('\n')],
-                             self._get_output())
-
-    def _output_chunk(self, text, *, text_color=None, background_color=None, styles=None, custom_position=None):
-        if styles is None:
-            styles = []
-
-        formatted_text = FormattedText(text=text,
-                                       text_color=text_color,
-                                       background_color=background_color,
-                                       styles=styles)
-        if custom_position is not None:
-            custom_position = TerminalPosition(*custom_position)
-
-        return TerminalOutputChunk(formatted_text, custom_position)
-
-    def setUp(self):
-        super().setUp()
-
-        self.output = []
-        self.terminal = TerminalEmulator(lambda text, position: self.output.append(TerminalOutputChunk(text, position)))
-
-    def _feed(self, chunk):
-        self.terminal.feed(chunk)
-
-    def _get_output(self):
-        self.terminal.flush_remaining()
-
-        result = []
-        result.extend(self.output)
-
-        return result
-
-    def _get_output_texts(self):
-        return [terminal_chunk.formatted_text.text for terminal_chunk in self._get_output()]
diff --git a/src/utils/terminal_formatter.py b/src/utils/terminal_formatter.py
deleted file mode 100644
index 3cee6aae..00000000
--- a/src/utils/terminal_formatter.py
+++ /dev/null
@@ -1,457 +0,0 @@
-from abc import ABC, abstractmethod
-from collections import namedtuple, defaultdict
-
-from react.observable import ReplayObservable
-
-FORMAT_ESCAPE_CHARACTER = ''
-
-
-class _CommandHandler(ABC):
-    def __init__(self, min_arguments_count=1, max_arguments_count=1) -> None:
-        super().__init__()
-        self.min_arguments_count = min_arguments_count
-        self.max_arguments_count = max_arguments_count
-
-    def is_valid_arguments_count(self, count):
-        return self.min_arguments_count <= count <= self.max_arguments_count
-
-    @abstractmethod
-    def handle(self, arguments, terminal):
-        pass
-
-
-class _SetGraphicsCommandHandler(_CommandHandler):
-    def __init__(self) -> None:
-        super().__init__(1, 10)
-
-    def handle(self, arguments, terminal):
-        reset_graphics = '0' in arguments
-        if reset_graphics:
-            terminal.reset_graphic_mode()
-
-        for key in TEXT_COLOR_DICT:
-            if key in arguments:
-                terminal.set_text_color(TEXT_COLOR_DICT[key])
-                break
-
-        for key in BACKGROUND_COLOR_DICT:
-            if key in arguments:
-                terminal.set_background_color(BACKGROUND_COLOR_DICT[key])
-                break
-
-        if not reset_graphics:
-            for key in TEXT_STYLES_DICT:
-                zero_padded_key = '0' + key
-                if (key in arguments) or (zero_padded_key in arguments):
-                    terminal.add_style(TEXT_STYLES_DICT[key])
-
-            for key in RESET_STYLES_DICT:
-                if key in arguments:
-                    terminal.remove_style(RESET_STYLES_DICT[key])
-
-
-COMMAND_HANDLERS = {
-    'm': _SetGraphicsCommandHandler(),
-    'K': None,
-    'H': None,
-    'f': None,
-    'A': None,
-    'B': None,
-    'C': None,
-    'D': None
-}
-
-TEXT_COLOR_DICT = {
-    '39': None,
-    '31': 'red',
-    '30': 'black',
-    '32': 'green',
-    '33': 'yellow',
-    '34': 'blue',
-    '35': 'magenta',
-    '36': 'cyan',
-    '37': 'lightgray',
-    '90': 'darkgray',
-    '91': 'lightred',
-    '92': 'lightgreen',
-    '93': 'lightyellow',
-    '94': 'lightblue',
-    '95': 'lightmagenta',
-    '96': 'lightcyan',
-    '97': 'white'
-}
-
-BACKGROUND_COLOR_DICT = {
-    '49': None,
-    '41': 'red',
-    '40': 'black',
-    '42': 'green',
-    '43': 'yellow',
-    '44': 'blue',
-    '45': 'magenta',
-    '46': 'cyan',
-    '47': 'lightgray',
-    '100': 'darkgray',
-    '101': 'lightred',
-    '102': 'lightgreen',
-    '103': 'lightyellow',
-    '104': 'lightblue',
-    '105': 'lightmagenta',
-    '106': 'lightcyan',
-    '107': 'white'
-}
-
-TEXT_STYLES_DICT = {
-    '1': 'bold',
-    '2': 'dim',
-    '4': 'underlined',
-    '8': 'hidden',
-}
-
-RESET_STYLES_DICT = {
-    '21': 'bold',
-    '22': 'dim',
-    '24': 'underlined',
-    '28': 'hidden'
-}
-
-FormattedText = namedtuple('FormattedText',
-                           ['text', 'text_color', 'background_color', 'styles'])
-
-
-class TerminalPosition:
-
-    def __init__(self, x, y) -> None:
-        self.x = x
-        self.y = y
-
-    def __gt__(self, another) -> bool:
-        if self.y != another.y:
-            return self.y > another.y
-        return self.x > another.x
-
-    def __lt__(self, another) -> bool:
-        if self.y != another.y:
-            return self.y < another.y
-        return self.x < another.x
-
-    def __le__(self, another) -> bool:
-        return (self < another) or (self == another)
-
-    def __ge__(self, another) -> bool:
-        return (self > another) or (self == another)
-
-    def __eq__(self, another: 'TerminalPosition') -> bool:
-        return (another is not None) and (self.x == another.x) and (self.y == another.y)
-
-    def set(self, x, y):
-        self.x = x
-        self.y = y
-
-    def new_line(self):
-        self.y += 1
-        self.x = 0
-
-    def inc_x(self, delta=1):
-        self.x += delta
-
-    def __repr__(self) -> str:
-        return '(x=%d, y=%d)' % (self.x, self.y)
-
-    def copy(self):
-        return TerminalPosition(self.x, self.y)
-
-
-class TerminalEmulator(object):
-    def __init__(self, output_callback):
-        self.buffer = ''
-        self.command_buffer = ''
-        self.modified_chunks = defaultdict(list)
-
-        self.current_text_color = None
-        self.current_background_color = None
-        self.current_styles = []
-
-        self.output_callback = output_callback
-
-        self.max_cursor_position = TerminalPosition(0, 0)
-        self.cursor_position = TerminalPosition(0, 0)
-        self.modification_start_position = TerminalPosition(0, 0)
-
-    def feed(self, output_chunk):
-        output_chunk = output_chunk.replace('\r\n', '\n')
-        for character in output_chunk:
-            if self.command_buffer:
-                self.command_buffer += character
-
-                if len(self.command_buffer) == 2:
-                    correct_command = (character == '[')
-
-                elif (len(self.command_buffer) > 2) and (character in COMMAND_HANDLERS):
-                    arguments = self._prepare_arguments(self.command_buffer[2:-1])
-
-                    self.command_buffer = ''
-
-                    self._handle_command(arguments, character)
-                    correct_command = False
-
-                else:
-                    correct_command = character.isdigit() or (character == ';')
-
-                if not correct_command:
-                    self._append_to_buffer(self.command_buffer)
-                    self.command_buffer = ''
-
-            elif character == FORMAT_ESCAPE_CHARACTER:
-                self._flush_buffer()
-
-                self.command_buffer = character
-
-            elif character == '\r':
-                self._move_cursor(0, self.cursor_position.y)
-
-            elif character == '\n':
-                self._move_cursor(0, self.cursor_position.y + 1)
-
-            else:
-                self._append_to_buffer(character)
-
-        if (self.modified_chunks or self.buffer) and not self.command_buffer:
-            self._flush_buffer()
-
-    def flush_remaining(self):
-        if self.buffer or self.command_buffer or self.modified_chunks:
-            self.buffer += self.command_buffer
-            self._flush_buffer()
-
-    def _append_to_buffer(self, text):
-        if text:
-            self.buffer += text
-            self.cursor_position.inc_x(len(text))
-
-    def to_formatted_text(self, text):
-        return FormattedText(
-            text,
-            self.current_text_color,
-            self.current_background_color,
-            self.current_styles)
-
-    def _prepare_arguments(self, arguments_text):
-        arguments = arguments_text.split(';')
-
-        prepared_arguments = []
-        for arg in arguments:
-            arg = arg.strip()
-            if arg == '':
-                arg = '0'
-
-            prepared_arguments.append(arg)
-
-        return prepared_arguments
-
-    def _handle_command(self, arguments, command_character):
-        handler = COMMAND_HANDLERS[command_character]
-        if handler is None:
-            return False
-
-        if not handler.is_valid_arguments_count(len(arguments)):
-            return False
-
-        for arg in arguments:
-            # string isdigit validates, that ALL characters are digits
-            if not arg.isdigit():
-                return False
-
-        handler.handle(arguments, self)
-        return True
-
-    def _move_cursor(self, x, y):
-        if not self.buffer and len(self.modified_chunks) == 1:
-            prev_chunk = next(iter(self.modified_chunks.values()))[0]
-            if y > prev_chunk['y'] or ((y == prev_chunk['y']) and (x >= prev_chunk['x_end'])):
-                self.buffer = prev_chunk['text']
-                self.modified_chunks.clear()
-
-        new_position = TerminalPosition(x, y)
-
-        if not self.buffer and not self.modified_chunks:
-            self.modification_start_position = new_position
-
-        if (not self.modified_chunks) \
-                and (self.modification_start_position >= self.max_cursor_position) \
-                and (new_position >= self.cursor_position):
-            if y > self.cursor_position.y:
-                self.buffer += '\n' * (y - self.cursor_position.y)
-                self.buffer += ' ' * x
-            else:
-                self.buffer += ' ' * (x - self.cursor_position.x)
-
-            self.cursor_position.set(x, y)
-            return
-
-        if not self.modified_chunks and '\n' in self.buffer:
-            self._flush_buffer()
-            self.cursor_position.set(x, y)
-            self.modification_start_position = self.cursor_position.copy()
-            return
-
-        if self.buffer:
-            self.add_modified_chunk(self.buffer)
-            self.buffer = ''
-
-        if y > self.max_cursor_position.y:
-            for current_y in range(self.max_cursor_position.y, y + 1):
-                line_chunks = self.modified_chunks[current_y]
-                if not line_chunks:
-                    line_chunks.append(self._create_buffer_chunk('', 0, current_y))
-
-        self.cursor_position.set(x, y)
-
-    def add_modified_chunk(self, text):
-        new_chunk = self._create_buffer_chunk(text, self.cursor_position.x, self.cursor_position.y)
-        to_remove = []
-        line_chunks = self.modified_chunks[self.cursor_position.y]
-        for another_chunk in reversed(line_chunks):
-            another_start = another_chunk['x_start']
-            new_start = new_chunk['x_start']
-            new_end = new_chunk['x_end']
-            another_end = another_chunk['x_end']
-            another_text = another_chunk['text']
-            new_text = new_chunk['text']
-
-            if (another_start <= new_end) and (new_start <= another_end):
-                min_start = min(another_start, new_start)
-                max_end = max(another_end, new_end)
-
-                if new_start <= another_start:
-                    another_start_offset = new_end - another_start
-                    text = new_text + another_text[another_start_offset:]
-                else:
-                    text = another_text[:new_start - another_start] + new_text
-                    if another_end > new_end:
-                        text += another_text[new_end - another_start:]
-
-                new_chunk['x_start'] = min_start
-                new_chunk['x_end'] = max_end
-                new_chunk['text'] = text
-                to_remove.append(another_chunk)
-
-        for obsolete in to_remove:
-            line_chunks.remove(obsolete)
-        line_chunks.append(new_chunk)
-
-    def _create_buffer_chunk(self, text, x_end, y):
-        return {
-            'text': text,
-            'y': y,
-            'x_start': x_end - len(text),
-            'x_end': x_end}
-
-    def _flush_buffer(self):
-        if (len(self.buffer) == 0) and (not self.modified_chunks):
-            return
-
-        current_buffer = self.buffer
-        self.buffer = ''
-
-        def send_data(text, start_position):
-            if len(text) == 0:
-                return
-
-            if start_position >= self.max_cursor_position:
-                custom_position = None
-            else:
-                custom_position = start_position
-            formatted_text = self.to_formatted_text(text)
-            self.output_callback(formatted_text, custom_position)
-
-        if not self.modified_chunks:
-            while current_buffer.startswith('\n') and self.modification_start_position.y <= self.max_cursor_position.y:
-                self.modification_start_position.new_line()
-                current_buffer = current_buffer[1:]
-
-            send_data(current_buffer, self.modification_start_position)
-            self.modification_start_position = self.cursor_position.copy()
-            self.max_cursor_position = max(self.max_cursor_position, self.cursor_position.copy())
-            return
-
-        self.add_modified_chunk(current_buffer)
-
-        modified_lines = sorted(self.modified_chunks.keys())
-        last_line = modified_lines[-1]
-        previous_line = None
-        previous_x = 0
-        current_text = ''
-        current_position = None
-        for line in modified_lines:
-            if (previous_line is not None) and ((previous_line + 1) != line):
-                send_data(current_text, current_position)
-                current_text = ''
-                current_position = None
-
-            previous_x = 0
-            for chunk in self.modified_chunks[line]:
-                if current_position is None:
-                    current_position = TerminalPosition(chunk['x_start'], line)
-                elif chunk['x_start'] != previous_x:
-                    send_data(current_text, current_position)
-                    current_text = ''
-                    current_position = None
-                    continue
-
-                previous_x = chunk['x_end']
-                current_text += chunk['text']
-
-            if (line >= self.max_cursor_position.y) and (line != last_line):
-                current_text += '\n'
-
-            previous_line = line
-
-        if current_text:
-            send_data(current_text, current_position)
-
-        self.modified_chunks.clear()
-
-        self.modification_start_position = self.cursor_position.copy()
-        self.max_cursor_position = max(TerminalPosition(previous_x, previous_line), self.max_cursor_position)
-
-    def reset_graphic_mode(self):
-        self.current_text_color = None
-        self.current_background_color = None
-        self.current_styles = []
-
-    def add_style(self, style):
-        if style not in self.current_styles:
-            self.current_styles.append(style)
-
-    def remove_style(self, style):
-        self.current_styles.remove(style)
-
-    def set_text_color(self, color):
-        self.current_text_color = color
-
-    def set_background_color(self, color):
-        self.current_background_color = color
-
-
-TerminalOutputChunk = namedtuple('TerminalOutputChunk',
-                                 ['formatted_text', 'custom_position'])
-
-
-class TerminalOutputTransformer(ReplayObservable):
-
-    def __init__(self, source_observable):
-        super().__init__()
-
-        self._terminal_emulator = TerminalEmulator(self.terminal_callback)
-        source_observable.subscribe(self)
-
-    def on_next(self, data):
-        self._terminal_emulator.feed(data)
-
-    def on_close(self):
-        self._terminal_emulator.flush_remaining()
-        self._close()
-
-    def terminal_callback(self, formatted_text, custom_position):
-        self._push(TerminalOutputChunk(formatted_text, custom_position))
diff --git a/src/web/server.py b/src/web/server.py
index 495be087..50fac1db 100755
--- a/src/web/server.py
+++ b/src/web/server.py
@@ -35,7 +35,6 @@
 from utils import audit_utils
 from utils import file_utils as file_utils
 from utils.audit_utils import get_audit_name_from_request
-from utils.terminal_formatter import TerminalOutputTransformer, TerminalOutputChunk
 from utils.tornado_utils import respond_error, redirect_relative
 from web.streaming_form_reader import StreamingFormReader
 
@@ -290,7 +289,6 @@ def open(self, execution_id):
 
         execution_service = self.application.execution_service
 
-        config = execution_service.get_config(execution_id)
         self.executor = execution_service.get_active_executor(execution_id)
 
         self.ioloop = tornado.ioloop.IOLoop.current()
@@ -300,8 +298,7 @@ def open(self, execution_id):
         user_id = _identify_user(self)
 
         output_stream = execution_service.get_raw_output_stream(execution_id, user_id)
-        ansi_enabled = config.ansi_enabled
-        pipe_output_to_http(output_stream, ansi_enabled, self.safe_write)
+        pipe_output_to_http(output_stream, self.safe_write)
 
         def finished(web_socket, downloads_folder, file_download_feature):
             try:
@@ -703,25 +700,6 @@ def get(self, execution_id):
         self.write(json.dumps(long_log))
 
 
-def wrap_script_output(text, text_color=None, background_color=None, text_styles=None, custom_position=None):
-    output_object = {'text': text}
-
-    if text_color:
-        output_object['text_color'] = text_color
-
-    if background_color:
-        output_object['background_color'] = background_color
-
-    if text_styles:
-        output_object['text_styles'] = text_styles
-
-    if custom_position:
-        output_object['replace'] = True
-        output_object['custom_position'] = {'x': custom_position.x, 'y': custom_position.y}
-
-    return wrap_to_server_event('output', output_object)
-
-
 def wrap_to_server_event(event_type, data):
     return json.dumps({
         "event": event_type,
@@ -729,37 +707,15 @@ def wrap_to_server_event(event_type, data):
     })
 
 
-def pipe_output_to_http(output_stream, ansi_enabled, write_callback):
-    if ansi_enabled:
-        terminal_output_stream = TerminalOutputTransformer(output_stream)
-
-        class OutputToHttpListener:
-            def on_next(self, terminal_output: TerminalOutputChunk):
-                formatted_text = terminal_output.formatted_text
-                custom_position = terminal_output.custom_position
-
-                write_callback(wrap_script_output(
-                    formatted_text.text,
-                    text_color=formatted_text.text_color,
-                    background_color=formatted_text.background_color,
-                    text_styles=formatted_text.styles,
-                    custom_position=custom_position))
-
-            def on_close(self):
-                terminal_output_stream.dispose()
-                pass
-
-        terminal_output_stream.subscribe(OutputToHttpListener())
-
-    else:
-        class OutputToHttpListener:
-            def on_next(self, output):
-                write_callback(wrap_script_output(output))
+def pipe_output_to_http(output_stream, write_callback):
+    class OutputToHttpListener:
+        def on_next(self, output):
+            write_callback(wrap_to_server_event('output', output))
 
-            def on_close(self):
-                pass
+        def on_close(self):
+            pass
 
-        output_stream.subscribe(OutputToHttpListener())
+    output_stream.subscribe(OutputToHttpListener())
 
 
 def _identify_user(request_handler):
diff --git a/web-src/admin.html b/web-src/admin.html
index 33e93905..04a82a2d 100644
--- a/web-src/admin.html
+++ b/web-src/admin.html
@@ -10,6 +10,7 @@
 
     <link rel="stylesheet" href="css/index.css">
     <link rel="stylesheet" href="css/admin.css">
+    <link rel="stylesheet" href="css/bash_styles.css">
 
     <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
     <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
diff --git a/web-src/css/bash_styles.css b/web-src/css/bash_styles.css
index d720d629..debbe8d1 100644
--- a/web-src/css/bash_styles.css
+++ b/web-src/css/bash_styles.css
@@ -1,164 +1,164 @@
-#script-panel-container .log-content > span.text_color_red,
-#script-panel-container .log-content > span.text_color_red a {
+span.text_color_red,
+span.text_color_red a {
     color: #f44336;
 }
 
-#script-panel-container .log-content > span.text_color_black,
-#script-panel-container .log-content > span.text_color_black a {
+span.text_color_black,
+span.text_color_black a {
     color: #000;
 }
 
-#script-panel-container .log-content > span.text_color_green,
-#script-panel-container .log-content > span.text_color_green a {
+span.text_color_green,
+span.text_color_green a {
     color: #689f38;
 }
 
-#script-panel-container .log-content > span.text_color_yellow,
-#script-panel-container .log-content > span.text_color_yellow a {
+span.text_color_yellow,
+span.text_color_yellow a {
     color: #fdd835;
 }
 
-#script-panel-container .log-content > span.text_color_blue,
-#script-panel-container .log-content > span.text_color_blue a {
+span.text_color_blue,
+span.text_color_blue a {
     color: #1976D2;
 }
 
-#script-panel-container .log-content > span.text_color_magenta,
-#script-panel-container .log-content > span.text_color_magenta a {
+span.text_color_magenta,
+span.text_color_magenta a {
     color: #d81b60;
 }
 
-#script-panel-container .log-content > span.text_color_cyan,
-#script-panel-container .log-content > span.text_color_cyan a {
+span.text_color_cyan,
+span.text_color_cyan a {
     color: #0097A7;
 }
 
-#script-panel-container .log-content > span.text_color_lightgray,
-#script-panel-container .log-content > span.text_color_lightgray a {
+span.text_color_lightgray,
+span.text_color_lightgray a {
     color: #BDBDBD;
 }
 
-#script-panel-container .log-content > span.text_color_darkgray,
-#script-panel-container .log-content > span.text_color_darkgray a {
+span.text_color_darkgray,
+span.text_color_darkgray a {
     color: #616161;
 }
 
-#script-panel-container .log-content > span.text_color_lightred,
-#script-panel-container .log-content > span.text_color_lightred a {
+span.text_color_lightred,
+span.text_color_lightred a {
     color: #EF9A9A;
 }
 
-#script-panel-container .log-content > span.text_color_lightgreen,
-#script-panel-container .log-content > span.text_color_lightgreen a {
+span.text_color_lightgreen,
+span.text_color_lightgreen a {
     color: #9ccc65;
 }
 
-#script-panel-container .log-content > span.text_color_lightyellow,
-#script-panel-container .log-content > span.text_color_lightyellow a {
+span.text_color_lightyellow,
+span.text_color_lightyellow a {
     color: #fff59d;
 }
 
-#script-panel-container .log-content > span.text_color_lightblue,
-#script-panel-container .log-content > span.text_color_lightblue a {
+span.text_color_lightblue,
+span.text_color_lightblue a {
     color: #90CAF9;
 }
 
-#script-panel-container .log-content > span.text_color_lightmagenta,
-#script-panel-container .log-content > span.text_color_lightmagenta a {
+span.text_color_lightmagenta,
+span.text_color_lightmagenta a {
     color: #f06292;
 }
 
-#script-panel-container .log-content > span.text_color_lightcyan,
-#script-panel-container .log-content > span.text_color_lightcyan a {
+span.text_color_lightcyan,
+span.text_color_lightcyan a {
     color: #26C6DA;
 }
 
-#script-panel-container .log-content > span.text_color_white,
-#script-panel-container .log-content > span.text_color_white a {
+span.text_color_white,
+span.text_color_white a {
     color: #fff;
 }
 
-#script-panel-container .log-content > span.background_red,
-#script-panel-container .log-content > span.background_red a {
+span.background_red,
+span.background_red a {
     background-color: #f44336;
 }
 
-#script-panel-container .log-content > span.background_black,
-#script-panel-container .log-content > span.background_black a {
+span.background_black,
+span.background_black a {
     background-color: #000;
 }
 
-#script-panel-container .log-content > span.background_green,
-#script-panel-container .log-content > span.background_green a {
+span.background_green,
+span.background_green a {
     background-color: #689f38;
 }
 
-#script-panel-container .log-content > span.background_yellow,
-#script-panel-container .log-content > span.background_yellow a {
+span.background_yellow,
+span.background_yellow a {
     background-color: #fdd835;
 }
 
-#script-panel-container .log-content > span.background_blue,
-#script-panel-container .log-content > span.background_blue a {
+span.background_blue,
+span.background_blue a {
     background-color: #1976D2;
 }
 
-#script-panel-container .log-content > span.background_magenta {
+span.background_magenta {
     background-color: #d81b60;
 }
 
-#script-panel-container .log-content > span.background_cyan {
+span.background_cyan {
     background-color: #0097A7;
 }
 
-#script-panel-container .log-content > span.background_lightgray {
+span.background_lightgray {
     background-color: #BDBDBD;
 }
 
-#script-panel-container .log-content > span.background_darkgray {
+span.background_darkgray {
     background-color: #616161;
 }
 
-#script-panel-container .log-content > span.background_lightred {
+span.background_lightred {
     background-color: #EF9A9A;
 }
 
-#script-panel-container .log-content > span.background_lightgreen {
+span.background_lightgreen {
     background-color: #9ccc65;
 }
 
-#script-panel-container .log-content > span.background_lightyellow {
+span.background_lightyellow {
     background-color: #fff59d;
 }
 
-#script-panel-container .log-content > span.background_lightblue {
+span.background_lightblue {
     background-color: #90CAF9;
 }
 
-#script-panel-container .log-content > span.background_lightmagenta {
+span.background_lightmagenta {
     background-color: #f06292;
 }
 
-#script-panel-container .log-content > span.background_lightcyan {
+span.background_lightcyan {
     background-color: #26C6DA;
 }
 
-#script-panel-container .log-content > span.background_white {
+span.background_white {
     background-color: #fff;
 }
 
-#script-panel-container .log-content > span.text_style_bold {
+span.text_style_bold {
     font-weight: bold;
 }
 
-#script-panel-container .log-content > span.text_style_underlined {
+span.text_style_underlined {
     text-decoration: underline;
 }
 
-#script-panel-container .log-content > span.text_style_dim {
+span.text_style_dim {
     opacity: 0.5;
 }
 
-#script-panel-container .log-content > span.text_style_hidden {
+span.text_style_hidden {
     opacity: 0;
 }
diff --git a/web-src/css/index.css b/web-src/css/index.css
index 34787fcb..2bd500a8 100644
--- a/web-src/css/index.css
+++ b/web-src/css/index.css
@@ -566,3 +566,31 @@ input[type=checkbox]:not(.browser-default) + span {
     margin-left: 10px;
     vertical-align: middle;
 }
+
+/*noinspection CssInvalidPropertyValue,CssOverwrittenProperties*/
+.log-content {
+    display: block;
+    overflow-y: auto;
+    height: 100%;
+
+    font-size: .875em;
+
+    padding: 1.5em;
+
+    white-space: pre-wrap; /* CSS 3 */
+    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+    white-space: -o-pre-wrap; /* Opera 7 */
+    overflow-wrap: break-word;
+
+    -ms-word-break: break-all;
+    /* This is the dangerous one in WebKit, as it breaks things wherever */
+    word-break: break-all;
+    /* Instead use this non-standard one: */
+    word-break: break-word;
+
+    /* Adds a hyphen where the word breaks, if supported (No Blink) */
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+}
\ No newline at end of file
diff --git a/web-src/js/components/log_panel.vue b/web-src/js/components/log_panel.vue
index bbd12a0b..e7545ce7 100644
--- a/web-src/js/components/log_panel.vue
+++ b/web-src/js/components/log_panel.vue
@@ -1,10 +1,5 @@
 <template>
     <div class="log-panel">
-        <code class="log-content"
-              v-on:scroll="recalculateScrollPosition"
-              ref="logContent"
-              v-on:mousedown="mouseDown = true"
-              v-on:mouseup="mouseDown = false"></code>
         <div class="log-panel-shadow"
              v-bind:class="{
              'shadow-top': !atTop && atBottom,
@@ -15,7 +10,9 @@
 </template>
 
 <script>
-    import {addClass, contains, destroyChildren, getLinesCount, isNull} from '../common';
+    import {isNull} from '../common';
+    import {TerminalModel} from './terminal/terminal_model';
+    import {Terminal} from './terminal/terminal_view';
 
     export default {
         props: {
@@ -30,22 +27,34 @@
                 atTop: false,
                 mouseDown: false,
                 scrollUpdater: null,
-                needScrollUpdate: false,
-                linesCount: 0
+                needScrollUpdate: false
             }
         },
 
+        created() {
+            this.terminalModel = new TerminalModel();
+            this.terminal = new Terminal(this.terminalModel);
+        },
+
         mounted: function () {
+            const terminal = this.terminal.element;
+            terminal.classList.add('log-content');
+            terminal.addEventListener('scroll', () => this.recalculateScrollPosition());
+            terminal.addEventListener('mousedown', () => this.mouseDown = true);
+            terminal.addEventListener('mouseup', () => this.mouseDown = false);
+
+            this.$el.insertBefore(terminal, this.$el.children[0]);
+
             this.recalculateScrollPosition();
             window.addEventListener('resize', this.revalidateScroll);
 
-            this.scrollUpdater = window.setInterval(function () {
+            this.scrollUpdater = window.setInterval(() => {
                 if (!this.needScrollUpdate) {
                     return;
                 }
                 this.needScrollUpdate = false;
 
-                var autoscrolled = false;
+                let autoscrolled = false;
                 if (this.autoscrollEnabled) {
                     autoscrolled = this.autoscroll();
                 }
@@ -53,12 +62,12 @@
                 if (!autoscrolled) {
                     this.recalculateScrollPosition();
                 }
-            }.bind(this), 40);
+            }, 40);
         },
 
         methods: {
             recalculateScrollPosition: function () {
-                var logContent = this.$refs.logContent;
+                var logContent = this.terminal.element;
 
                 var scrollTop = logContent.scrollTop;
                 var newAtBottom = (scrollTop + logContent.clientHeight + 5) > (logContent.scrollHeight);
@@ -72,7 +81,7 @@
             },
 
             autoscroll: function () {
-                var logContent = this.$refs.logContent;
+                var logContent = this.terminal.element;
                 if ((this.atBottom) && (!this.mouseDown)) {
                     logContent.scrollTop = logContent.scrollHeight;
                     return true;
@@ -85,444 +94,28 @@
             },
 
             setLog: function (text) {
-                destroyChildren(this.$refs.logContent);
+                this.terminalModel.clear();
 
                 this.appendLog(text);
             },
 
-            appendLog: function (text, textColor, backgroundColor, textStyles) {
+            appendLog: function (text) {
                 if (isNull(text) || (text === '')) {
                     return;
                 }
 
-                var logElement = this.createLogElement(text, textColor, backgroundColor, textStyles);
-                this.$refs.logContent.appendChild(logElement);
+                this.terminalModel.write(text);
 
                 this.revalidateScroll();
-            },
-
-            replaceLog: function (text, textColor, backgroundColor, textStyles, x, y) {
-                this._updateLinesCache();
-
-                var logContent = this.$refs.logContent;
-                var firstMatchingElement = _findFirstElementAtLine(logContent, y);
-
-                if (isNull(firstMatchingElement)) {
-                    console.log('WARN! Could not find element for line ' + y);
-                    this.appendLog(text, textColor, backgroundColor, textStyles);
-                    return;
-                }
-
-                var replaceLinesCount = getLinesCount(text);
-
-                var currentLines = _createLinesFromElements(y, replaceLinesCount, firstMatchingElement);
-                _replaceInLines(x, text, currentLines);
-                _appendNewLineCharacter(currentLines);
-                _updateElementsFromLines(currentLines, logContent, function (text) {
-                    return this.createLogElement(text, textColor, backgroundColor, textStyles);
-                }.bind(this));
-
-                this.revalidateScroll();
-            },
-
-            _updateLinesCache: function () {
-                var logContent = this.$refs.logContent;
-
-                var linesCount = 0;
-                for (var i = 0; i < logContent.childNodes.length; i++) {
-                    var child = logContent.childNodes[i];
-
-                    if (isNull(child.linesCount)) {
-                        child.linesCount = getLinesCount(getLogElementText(child));
-                    }
-
-                    child.firstLine = linesCount;
-                    linesCount += child.linesCount;
-                    child.lastLine = linesCount;
-                }
-            },
-
-            createTextAndAnchorElements: function (text) {
-                var textElements;
-                if (urlRegex.test(text)) {
-                    textElements = [];
-
-                    var match;
-                    var lastEnd = 0;
-                    urlRegex.lastIndex = 0;
-                    while ((match = urlRegex.exec(text)) !== null) {
-                        if (match.index > lastEnd) {
-                            var prevText = text.substring(lastEnd, match.index);
-                            textElements.push(document.createTextNode(prevText));
-                        }
-                        var anchorElement = document.createElement('a');
-                        anchorElement.href = match[0];
-                        anchorElement.innerText = match[0];
-                        textElements.push(anchorElement);
-
-                        lastEnd = urlRegex.lastIndex;
-                    }
-
-                    if (lastEnd < (text.length - 1)) {
-                        var endText = text.substring(lastEnd, text.length);
-                        textElements.push(document.createTextNode(endText));
-                    }
-
-                } else {
-                    textElements = [document.createTextNode(text)];
-                }
-                return textElements;
-            },
-
-            createLogElement: function (text, textColor, backgroundColor, textStyles) {
-                var outputElement = null;
-
-                var textElements = this.createTextAndAnchorElements(text);
-
-                if (!isNull(textColor) || !isNull(backgroundColor) || !isNull(textStyles)) {
-                    outputElement = document.createElement('span');
-                    if (!isNull(textColor)) {
-                        addClass(outputElement, 'text_color_' + textColor);
-                    }
-                    if (!isNull(backgroundColor)) {
-                        addClass(outputElement, 'background_' + backgroundColor);
-                    }
-
-                    if (!isNull(textStyles)) {
-                        for (var styleIndex = 0; styleIndex < textStyles.length; styleIndex++) {
-                            addClass(outputElement, 'text_style_' + textStyles[styleIndex]);
-                        }
-                    }
-
-                    textElements.forEach(outputElement.appendChild.bind(outputElement));
-
-                } else {
-                    if (textElements.length === 1) {
-                        outputElement = textElements[0];
-                    } else {
-                        outputElement = document.createElement('span');
-                        textElements.forEach(outputElement.appendChild.bind(outputElement));
-                    }
-                }
-
-                return outputElement;
             }
         },
+
         beforeDestroy: function () {
             window.removeEventListener('resize', this.revalidateScroll);
             window.clearInterval(this.scrollUpdater);
         }
     }
 
-    var urlRegex = new RegExp('https?:\\/\\/(www\\.)?[-a-zA-Z0-9@:%._\\+~#=]{2,256}(\\.[a-z]{2,6})?(:\\d{2,6})?' +
-        '(\\.*([-a-zA-Z0-9@:%_\\+~#?//=])+&?)*',
-        'g');
-
-    function getLogElementTextNode(logElement) {
-        if (logElement.nodeType === 3) {
-            return logElement;
-        } else {
-            for (var i = 0; i < logElement.childNodes.length; i++) {
-                if (logElement.childNodes[i].nodeType === 3) {
-                    return logElement.childNodes[i];
-                }
-            }
-            return null;
-        }
-    }
-
-    function getLogElementText(logElement) {
-        return getLogElementTextNode(logElement).nodeValue;
-    }
-
-    function setLogElementText(logElement, text) {
-        getLogElementTextNode(logElement).nodeValue = text;
-    }
-
-    function _findFirstElementAtLine(logContent, y) {
-        var firstMatchingElement = null;
-        for (var i = logContent.childNodes.length - 1; i >= 0; i--) {
-            var child = logContent.childNodes[i];
-            if (child.firstLine > y) {
-                continue;
-            } else if (child.lastLine < y) {
-                break;
-            }
-            firstMatchingElement = child;
-        }
-        return firstMatchingElement;
-    }
-
-    function _createLinesFromElements(firstLine, maxLinesCount, startingElement) {
-        var currentLines = [];
-        var lastLine = firstLine + maxLinesCount;
-        for (var i = firstLine; i <= lastLine; i++) {
-            currentLines.push([]);
-        }
-
-        var currentElement = startingElement;
-        var currentLine = startingElement.firstLine;
-
-        while (!isNull(currentElement) && (currentElement.firstLine <= lastLine)) {
-            var currentIndex = 0;
-            var currentElementText = getLogElementText(currentElement);
-
-            while ((currentIndex >= 0) && (currentIndex < currentElementText.length) && (currentLine <= lastLine)) {
-                var nextIndex = currentElementText.indexOf('\n', currentIndex);
-
-                var linesOffset = currentLine - firstLine;
-                if (linesOffset >= 0) {
-                    var lineText;
-                    var end;
-                    var hasNextLine;
-                    if (nextIndex < 0) {
-                        lineText = currentElementText.substr(currentIndex);
-                        end = currentElementText.length;
-                        hasNextLine = !isNull(currentElement.nextSibling);
-                    } else {
-                        lineText = currentElementText.substring(currentIndex, nextIndex);
-                        end = nextIndex + 1;
-                        hasNextLine = true;
-                    }
-
-                    var line = currentLines[linesOffset];
-                    line.hasNextLine = hasNextLine;
-                    line.push({
-                        'text': lineText,
-                        'element': currentElement,
-                        'start': currentIndex,
-                        'end': end
-                    });
-                }
-
-                if (nextIndex < 0) {
-                    break;
-                }
-
-                currentLine++;
-                currentIndex = nextIndex + 1;
-            }
-
-            currentElement = currentElement.nextSibling;
-        }
-
-        return currentLines;
-    }
-
-    function _replaceInLines(x, text, currentLines) {
-        var xOffset = x;
-
-        var incomingLines = text.split(/\n/);
-
-        for (var lineIndex = 0; lineIndex < incomingLines.length; lineIndex++) {
-            var incomingLine = incomingLines[lineIndex];
-
-            if (incomingLine === '') {
-                xOffset = 0;
-                continue;
-            }
-
-            var existingLine = currentLines[lineIndex];
-
-            var currentLinePosition = 0;
-            var incomingLinePosition = 0;
-
-            for (var chunkIndex = 0; chunkIndex < existingLine.length; chunkIndex++) {
-                var chunk = existingLine[chunkIndex];
-                var chunkLength = chunk.text.length;
-                var chunkReplaceOffset = 0;
-
-                if (currentLinePosition < xOffset) {
-                    chunkReplaceOffset = Math.min(xOffset - currentLinePosition, chunkLength);
-                    currentLinePosition += chunkReplaceOffset;
-                }
-
-                if (chunkReplaceOffset >= chunkLength) {
-                    continue;
-                }
-
-                if (chunkReplaceOffset > 0) {
-                    var newChunk = {
-                        'text': chunk.text.substr(0, chunkReplaceOffset),
-                        'element': chunk.element,
-                        'start': chunk.start,
-                        'end': chunk.start + chunkReplaceOffset
-                    };
-                    existingLine.splice(chunkIndex, 0, newChunk);
-                    chunk.text = chunk.text.substr(chunkReplaceOffset);
-                    chunk.start = chunk.start + chunkReplaceOffset;
-                    chunkLength = chunk.text.length;
-                    chunkIndex++;
-                }
-
-                var chunkReplaceLength = Math.min(
-                    chunkLength,
-                    incomingLine.length - incomingLinePosition);
-
-                if (chunkReplaceLength > 0) {
-                    chunk.text = chunk.text.substr(chunkReplaceLength);
-
-                    incomingLinePosition += chunkReplaceLength;
-                }
-
-                if (incomingLinePosition >= incomingLine.length) {
-                    break;
-                }
-            }
-
-            var incomingLineChunk = {
-                'text': incomingLine
-            };
-            existingLine.splice(chunkIndex, 0, incomingLineChunk);
-
-            xOffset = 0;
-        }
-    }
-
-    function _appendNewLineCharacter(linesArray) {
-        for (var i = 0; i < linesArray.length; i++) {
-            var line = linesArray[i];
-
-            if ((i === linesArray.length - 1) && (!line.hasNextLine)) {
-                break;
-            }
-
-            var added = false;
-
-            for (var chunkIndex = line.length - 1; chunkIndex >= 0; chunkIndex--) {
-                var chunk = line[chunkIndex];
-                if (chunk.text.length > 0) {
-                    if (chunk.text.indexOf('\n') === -1) {
-                        chunk.text += '\n';
-                    }
-                    added = true;
-                    break;
-                }
-            }
-
-            if (!added) {
-                if (line.length > 0) {
-                    var lastChunk = line[line.length - 1];
-                    lastChunk.text += '\n';
-                } else {
-                    line.push({'text': '\n'});
-                }
-            }
-        }
-    }
-
-    function _findLastChunkWithElement(lines) {
-        for (var i = lines.length - 1; i >= 0; i--) {
-            var line = lines[i];
-
-            for (var j = line.length - 1; j >= 0; j--) {
-                var chunk = line[j];
-                if (!isNull(chunk.element)) {
-                    return chunk;
-                }
-            }
-        }
-
-        return null;
-    }
-
-    function _updateElementsFromLines(lines, container, newElementCreator) {
-        var visitedElements = [];
-        var currentElement = null;
-        var prevElementNew = false;
-
-        var lastChunk = _findLastChunkWithElement(lines);
-        if (!isNull(lastChunk)) {
-            if (lastChunk.end < getLogElementText(lastChunk.element).length) {
-                currentElement = lastChunk.element;
-            } else {
-                currentElement = lastChunk.element.nextSibling;
-            }
-        }
-
-        function appendNewElement(newElement) {
-            if (isNull(currentElement)) {
-                container.appendChild(newElement);
-            } else {
-                container.insertBefore(newElement, currentElement);
-            }
-        }
-
-        const elementReplacements = new Map();
-
-        for (var i = lines.length - 1; i >= 0; i--) {
-            var line = lines[i];
-
-            for (var j = line.length - 1; j >= 0; j--) {
-                var chunk = line[j];
-
-                var chunkElement = chunk.element;
-
-                if (chunkElement == null) {
-                    if (prevElementNew) {
-                        var currentText = getLogElementText(currentElement);
-                        currentText = chunk.text + currentText;
-                        setLogElementText(currentElement, currentText);
-                    } else {
-                        const newElement = newElementCreator(chunk.text);
-                        appendNewElement(newElement);
-                        currentElement = newElement;
-                    }
-
-                    prevElementNew = true;
-
-                } else {
-
-                    chunkElement.linesCount = null;
-
-                    prevElementNew = false;
-
-                    if (elementReplacements.has(chunkElement)) {
-                        chunkElement = elementReplacements.get(chunkElement);
-                    }
-
-                    if ((chunkElement !== currentElement) && (contains(visitedElements, chunkElement))) {
-                        var fullElementText = getLogElementText(chunkElement);
-                        var endPart = fullElementText.substr(chunk.end);
-
-                        if (endPart === '') {
-                            container.insertBefore(chunkElement, currentElement);
-                        } else {
-                            setLogElementText(chunkElement, endPart);
-
-                            var newElement = chunkElement.cloneNode(true);
-                            appendNewElement(newElement);
-                            elementReplacements.set(chunk.element, newElement);
-                            chunkElement = newElement;
-                        }
-
-                        setLogElementText(chunkElement, fullElementText.substr(0, chunk.end));
-                    }
-
-                    if (!contains(visitedElements, chunkElement)) {
-                        visitedElements.push(chunkElement);
-                    }
-
-                    var elementText = getLogElementText(chunkElement);
-                    var updatedElementText = '';
-                    if (chunk.start > 0) {
-                        updatedElementText += elementText.substr(0, chunk.start);
-                    }
-                    updatedElementText += chunk.text;
-                    if (elementText.length > chunk.end) {
-                        updatedElementText += elementText.substr(chunk.end);
-                    }
-
-                    if (updatedElementText !== '') {
-                        setLogElementText(chunkElement, updatedElementText);
-                        currentElement = chunkElement;
-                    } else {
-                        container.removeChild(chunkElement);
-                    }
-                }
-            }
-        }
-    }
 </script>
 
 <style scoped>
@@ -540,34 +133,6 @@
         border-radius: 2px;
     }
 
-    /*noinspection CssInvalidPropertyValue,CssOverwrittenProperties*/
-    .log-content {
-        display: block;
-        overflow-y: auto;
-        height: 100%;
-
-        font-size: .875em;
-
-        padding: 1.5em;
-
-        white-space: pre-wrap; /* CSS 3 */
-        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
-        white-space: -o-pre-wrap; /* Opera 7 */
-        overflow-wrap: break-word;
-
-        -ms-word-break: break-all;
-        /* This is the dangerous one in WebKit, as it breaks things wherever */
-        word-break: break-all;
-        /* Instead use this non-standard one: */
-        word-break: break-word;
-
-        /* Adds a hyphen where the word breaks, if supported (No Blink) */
-        -ms-hyphens: auto;
-        -moz-hyphens: auto;
-        -webkit-hyphens: auto;
-        hyphens: auto;
-    }
-
     .log-panel-shadow {
         position: absolute;
 
diff --git a/web-src/js/components/terminal/terminal_model.js b/web-src/js/components/terminal/terminal_model.js
new file mode 100644
index 00000000..8c4db239
--- /dev/null
+++ b/web-src/js/components/terminal/terminal_model.js
@@ -0,0 +1,501 @@
+import {arraysEqual, contains, isEmptyArray, isNull, removeElement} from '../../common';
+
+const DIGITS = new Set(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']);
+
+function isDigit(char) {
+    return DIGITS.has(char);
+}
+
+function addUniqueSortedInt(arr, value, start, end) {
+    const length = arr.length;
+    if (start >= length) {
+        arr.push(value);
+        return;
+    }
+
+    if (start === end) {
+        const existing = arr[start];
+        if (existing < value) {
+            arr.splice(start + 1, 0, value);
+        } else if (existing > value) {
+            arr.splice(start, 0, value);
+        }
+        return;
+    }
+
+    const mid = Math.floor((end + start) / 2);
+    const midValue = arr[mid];
+    if (midValue === value) {
+        return;
+    }
+
+    if (midValue < value) {
+        addUniqueSortedInt(arr, value, mid + 1, end);
+    } else {
+        addUniqueSortedInt(arr, value, start, mid - 1);
+    }
+}
+
+export class TerminalModel {
+    constructor() {
+        this.listeners = [];
+
+        this.clear();
+    }
+
+    addListener(listener) {
+        this.listeners.push(listener);
+    }
+
+    write(text) {
+        this.buffer += text;
+        let lastReadIndex = 0;
+
+        let commandBuffer = null;
+        let currentText = '';
+
+        let changedLines = [];
+
+        for (let i = 0; i < this.buffer.length; i++) {
+            const char = this.buffer[i];
+
+            if (commandBuffer !== null) {
+                commandBuffer += char;
+
+                let correctCommand = true;
+                if (commandBuffer.length === 2) {
+                    correctCommand = (char === '[');
+                } else if ((commandBuffer.length > 2) && (COMMAND_HANDLERS.has(char))) {
+                    const args = prepareArguments(commandBuffer.substr(2, commandBuffer.length - 3));
+
+                    commandBuffer = null;
+
+                    this.handleCommand(args, char);
+
+                    correctCommand = false;
+                } else {
+                    correctCommand = isDigit(char) || (char === ';');
+                }
+
+                if (!correctCommand) {
+                    if (commandBuffer !== null) {
+                        this.flushText(commandBuffer, changedLines);
+                        commandBuffer = null;
+                    }
+
+                    lastReadIndex = i;
+                }
+
+            } else if (char === FORMAT_ESCAPE_CHARACTER) {
+                this.flushText(currentText, changedLines);
+                currentText = '';
+
+                commandBuffer = char;
+
+            } else if (char === '\n') {
+                this.flushText(currentText, changedLines);
+                currentText = '';
+
+                this.currentPosition = 0;
+                this.currentLine++;
+                lastReadIndex = i;
+
+            } else if (char === '\r') {
+                this.flushText(currentText, changedLines);
+                currentText = '';
+
+                this.currentPosition = 0;
+                lastReadIndex = i;
+
+            } else {
+                currentText += char;
+                lastReadIndex = i;
+            }
+        }
+
+        this.flushText(currentText, changedLines);
+        this.buffer = this.buffer.substr(lastReadIndex + 1);
+
+        if (changedLines.length > 0) {
+            for (const listener of this.listeners) {
+                listener.linesChanges(changedLines);
+            }
+        }
+    }
+
+    clear() {
+        this.lines = [];
+        this.lineStyles = new Map();
+
+        this.currentLine = 0;
+        this.currentPosition = 0;
+
+        this.buffer = '';
+
+        this.currentStyle = null;
+
+        for (const listener of this.listeners) {
+            listener.cleared();
+        }
+    }
+
+    getStyle(line) {
+        return this.lineStyles.get(line);
+    }
+
+    flushText(text, changedLines) {
+        if (text.length === 0) {
+            return;
+        }
+
+        const line = this.getLine(this.currentLine);
+        this.lines[this.currentLine] = replaceAt(line, this.currentPosition, text);
+
+        const end = this.currentPosition + text.length;
+        this.updateTextStyle(this.currentLine, this.currentPosition, end, this.currentStyle);
+
+        this.currentPosition = end;
+
+        addUniqueSortedInt(changedLines, this.currentLine, 0, changedLines.length);
+    }
+
+    getLine(lineIndex) {
+        let length = this.lines.length;
+        while (length <= lineIndex) {
+            this.lines.push('');
+            length++;
+        }
+
+        return this.lines[lineIndex];
+    }
+
+    setStyle(style) {
+        if (style.isEmpty()) {
+            this.currentStyle = null;
+        } else {
+            this.currentStyle = style;
+        }
+    }
+
+    setCursorPosition(line, row) {
+        this.currentLine = line;
+        this.currentPosition = row;
+    }
+
+    handleCommand(args, commandCharacter) {
+        const handler = COMMAND_HANDLERS.get(commandCharacter);
+        if (handler === null) {
+            return false;
+        }
+
+        if (!handler.isValidArgumentsCount(args.length)) {
+            return false;
+        }
+
+        handler.handle(args, this);
+        return true
+    }
+
+    updateTextStyle(lineIndex, start, end, style) {
+        const emptyStyle = (style === null) || (style.isEmpty());
+
+        if (!this.lineStyles.has(lineIndex)) {
+            if (!emptyStyle) {
+                this.lineStyles.set(lineIndex, [new StyledRange(start, end, style)]);
+            }
+            return;
+        }
+
+        const styles = this.lineStyles.get(lineIndex);
+
+        let index = 0;
+        while ((index < styles.length) && (styles[index].end <= start)) {
+            index++;
+        }
+
+        if (index >= styles.length) {
+            if (!emptyStyle) {
+                styles.push(new StyledRange(start, end, style));
+            }
+            return;
+        }
+
+        const firstIntersection = styles[index];
+        if (firstIntersection.start < start) {
+            index++;
+
+            if (firstIntersection.end > end) {
+                styles.splice(index, 0, new StyledRange(start, end, style));
+                styles.splice(index + 1, 0,
+                    new StyledRange(end, firstIntersection.end, firstIntersection.style));
+                firstIntersection.end = start;
+                return;
+            }
+
+            firstIntersection.end = start;
+        }
+
+        styles.splice(index, 0, new StyledRange(start, end, style));
+        index++;
+
+        while (index < styles.length) {
+            const existing = styles[index];
+            if (existing.end <= end) {
+                styles.splice(index, 1);
+            } else if (existing.start >= end) {
+                return;
+            } else {
+                existing.start = end;
+                return;
+            }
+        }
+    }
+}
+
+export class Style {
+    constructor(params) {
+        this.styles = [];
+
+        if (!isNull(params)) {
+            let {color, background, styles} = params;
+            if (!isNull(color)) {
+                this.color = color;
+            }
+
+            if (!isNull(background)) {
+                this.background = background;
+            }
+
+            if (!isEmptyArray(styles)) {
+                this.styles.push(...styles);
+            }
+        }
+    }
+
+    clone() {
+        const style = new Style();
+        style.color = this.color;
+        style.background = this.background;
+        style.styles = [...this.styles];
+        return style;
+    }
+
+    isEmpty() {
+        return isNull(this.color)
+            && isNull(this.background)
+            && isEmptyArray(this.styles)
+    }
+
+    equals(anotherStyle) {
+        return (this.color === anotherStyle.color)
+            && (this.background === anotherStyle.background)
+            && (arraysEqual(this.styles, anotherStyle.styles));
+    }
+}
+
+export class StyledRange {
+    constructor(start, end, style) {
+        this.start = start;
+        this.end = end;
+        this.style = style;
+    }
+}
+
+function replaceAt(str, index, substr) {
+    if (str.length < index) {
+        return str + (' '.repeat(index - str.length)) + substr;
+    }
+
+    if (str.length === index) {
+        return str + substr;
+    }
+
+    return str.substr(0, index) + substr + str.substr(index + substr.length);
+}
+
+function prepareArguments(argsStr) {
+    const chunks = fastSplit(argsStr, ';');
+
+    const preparedArguments = [];
+
+    for (const arg of chunks) {
+        if (arg === '') {
+            preparedArguments.push(0);
+            continue;
+        }
+
+        const intArg = parseInt(arg);
+        if ((intArg < 0) || isNaN(intArg)) {
+            continue;
+        }
+
+        preparedArguments.push(intArg);
+    }
+
+    return preparedArguments;
+}
+
+// for some reason default split (on chrome) is slower in 3-4 times
+function fastSplit(str, separatorChar) {
+    if (str === '') {
+        return [''];
+    }
+
+    let result = [];
+
+    let lastIndex = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str[i];
+        if (char === separatorChar) {
+            const chunk = str.substr(lastIndex, i - lastIndex);
+            lastIndex = i + 1;
+            result.push(chunk);
+        }
+    }
+
+    if (lastIndex < str.length) {
+        const lastChunk = str.substr(lastIndex, str.length - lastIndex);
+        result.push(lastChunk);
+    }
+
+    return result;
+}
+
+class CommandHandler {
+    constructor(minArgumentsCount = 1, maxArgumentsCount = 1) {
+        this.minArgumentsCount = minArgumentsCount;
+        this.maxArgumentsCount = maxArgumentsCount;
+    }
+
+    isValidArgumentsCount(count) {
+        return this.minArgumentsCount <= count <= this.maxArgumentsCount;
+    }
+}
+
+class SetGraphicsCommandHandler extends CommandHandler {
+    constructor() {
+        super(1, 10);
+    }
+
+    handle(args, terminal) {
+        const resetGraphics = contains(args, 0);
+
+        let style = (resetGraphics || terminal.currentStyle == null) ? new Style() : terminal.currentStyle.clone();
+        for (let arg of args) {
+            if (TEXT_COLOR_DICT.has(arg)) {
+                style.color = TEXT_COLOR_DICT.get(arg);
+            } else if (BACKGROUND_COLOR_DICT.has(arg)) {
+                style.background = BACKGROUND_COLOR_DICT.get(arg);
+            } else if (TEXT_STYLES_DICT.has(arg)) {
+                style.styles.push(TEXT_STYLES_DICT.get(arg));
+            } else if (RESET_STYLES_DICT.has(arg)) {
+                removeElement(style.styles, RESET_STYLES_DICT.get(arg));
+            }
+        }
+
+        terminal.setStyle(style);
+    }
+}
+
+
+class MoveCursorVerticallyHandler extends CommandHandler {
+    constructor(moveUp) {
+        super();
+
+        this.moveUp = moveUp;
+    }
+
+    handle(args, terminal) {
+        const delta = args[0];
+
+        let newLine;
+        if (this.moveUp) {
+            newLine = Math.max(0, terminal.currentLine - delta);
+        } else {
+            newLine = terminal.currentLine + delta;
+        }
+        terminal.setCursorPosition(newLine, terminal.currentPosition);
+    }
+}
+
+class MoveCursorHorizontallyHandler extends CommandHandler {
+    constructor(moveRight) {
+        super();
+
+        this.moveRight = moveRight;
+    }
+
+    handle(args, terminal) {
+        const delta = args[0];
+
+        let newPosition;
+        if (this.moveRight) {
+            newPosition = terminal.currentPosition + delta;
+        } else {
+            newPosition = Math.max(0, terminal.currentPosition - delta);
+        }
+        terminal.setCursorPosition(terminal.currentLine, newPosition);
+    }
+}
+
+const COMMAND_HANDLERS = new Map();
+COMMAND_HANDLERS.set('m', new SetGraphicsCommandHandler());
+COMMAND_HANDLERS.set('K', null);
+COMMAND_HANDLERS.set('H', null);
+COMMAND_HANDLERS.set('f', null);
+COMMAND_HANDLERS.set('A', new MoveCursorVerticallyHandler(true));
+COMMAND_HANDLERS.set('B', new MoveCursorVerticallyHandler(false));
+COMMAND_HANDLERS.set('C', new MoveCursorHorizontallyHandler(true));
+COMMAND_HANDLERS.set('D', new MoveCursorHorizontallyHandler(false));
+
+const TEXT_COLOR_DICT = new Map();
+TEXT_COLOR_DICT.set(39, null);
+TEXT_COLOR_DICT.set(31, 'red');
+TEXT_COLOR_DICT.set(30, 'black');
+TEXT_COLOR_DICT.set(32, 'green');
+TEXT_COLOR_DICT.set(33, 'yellow');
+TEXT_COLOR_DICT.set(34, 'blue');
+TEXT_COLOR_DICT.set(35, 'magenta');
+TEXT_COLOR_DICT.set(36, 'cyan');
+TEXT_COLOR_DICT.set(37, 'lightgray');
+TEXT_COLOR_DICT.set(90, 'darkgray');
+TEXT_COLOR_DICT.set(91, 'lightred');
+TEXT_COLOR_DICT.set(92, 'lightgreen');
+TEXT_COLOR_DICT.set(93, 'lightyellow');
+TEXT_COLOR_DICT.set(94, 'lightblue');
+TEXT_COLOR_DICT.set(95, 'lightmagenta');
+TEXT_COLOR_DICT.set(96, 'lightcyan');
+TEXT_COLOR_DICT.set(97, 'white');
+
+const BACKGROUND_COLOR_DICT = new Map();
+BACKGROUND_COLOR_DICT.set(49, null);
+BACKGROUND_COLOR_DICT.set(41, 'red');
+BACKGROUND_COLOR_DICT.set(40, 'black');
+BACKGROUND_COLOR_DICT.set(42, 'green');
+BACKGROUND_COLOR_DICT.set(43, 'yellow');
+BACKGROUND_COLOR_DICT.set(44, 'blue');
+BACKGROUND_COLOR_DICT.set(45, 'magenta');
+BACKGROUND_COLOR_DICT.set(46, 'cyan');
+BACKGROUND_COLOR_DICT.set(47, 'lightgray');
+BACKGROUND_COLOR_DICT.set(100, 'darkgray');
+BACKGROUND_COLOR_DICT.set(101, 'lightred');
+BACKGROUND_COLOR_DICT.set(102, 'lightgreen');
+BACKGROUND_COLOR_DICT.set(103, 'lightyellow');
+BACKGROUND_COLOR_DICT.set(104, 'lightblue');
+BACKGROUND_COLOR_DICT.set(105, 'lightmagenta');
+BACKGROUND_COLOR_DICT.set(106, 'lightcyan');
+BACKGROUND_COLOR_DICT.set(107, 'white');
+
+const TEXT_STYLES_DICT = new Map();
+TEXT_STYLES_DICT.set(1, 'bold');
+TEXT_STYLES_DICT.set(2, 'dim');
+TEXT_STYLES_DICT.set(4, 'underlined');
+TEXT_STYLES_DICT.set(8, 'hidden');
+
+const RESET_STYLES_DICT = new Map();
+RESET_STYLES_DICT.set(21, 'bold');
+RESET_STYLES_DICT.set(22, 'dim');
+RESET_STYLES_DICT.set(24, 'underlined');
+RESET_STYLES_DICT.set(28, 'hidden');
+
+const FORMAT_ESCAPE_CHARACTER = '\u001B';
\ No newline at end of file
diff --git a/web-src/js/components/terminal/terminal_view.js b/web-src/js/components/terminal/terminal_view.js
new file mode 100644
index 00000000..22b5e786
--- /dev/null
+++ b/web-src/js/components/terminal/terminal_view.js
@@ -0,0 +1,174 @@
+import {destroyChildren, isNull} from '../../common';
+
+const lineElementTemplate = document.createElement('div');
+
+const urlRegex = new RegExp('https?:\\/\\/(www\\.)?[-a-zA-Z0-9@:%._\\+~#=]{2,256}(\\.[a-z]{2,6})?(:\\d{2,6})?' +
+    '(\\.*([-a-zA-Z0-9@:%_\\+~#?//=])+&?)*',
+    'g');
+
+
+export class Terminal {
+    constructor(terminalModel) {
+        this.element = document.createElement('code');
+        this.terminalModel = terminalModel;
+
+        terminalModel.addListener(this);
+    }
+
+    static createLineElement() {
+        return lineElementTemplate.cloneNode();
+    }
+
+    static createTextAndAnchorElements(text) {
+        const textElements = [];
+        if (urlRegex.test(text)) {
+            let match;
+            let lastEnd = 0;
+            urlRegex.lastIndex = 0;
+            while ((match = urlRegex.exec(text)) !== null) {
+                if (match.index > lastEnd) {
+                    const prevText = text.substring(lastEnd, match.index);
+                    textElements.push(document.createTextNode(prevText));
+                }
+                const anchorElement = document.createElement('a');
+                anchorElement.href = match[0];
+                anchorElement.innerText = match[0];
+                textElements.push(anchorElement);
+
+                lastEnd = urlRegex.lastIndex;
+            }
+
+            if (lastEnd < text.length) {
+                const endText = text.substring(lastEnd, text.length);
+                textElements.push(document.createTextNode(endText));
+            }
+
+        } else {
+            textElements.push(document.createTextNode(text));
+        }
+        return textElements;
+    }
+
+    static createLogLineChildren(lineText, styleRanges) {
+        if (isNull(styleRanges)) {
+            return Terminal.createTextAndAnchorElements(lineText);
+        }
+
+        let lastIndex = 0;
+
+        const result = [];
+        for (const styleRange of styleRanges) {
+            if (styleRange.start > lastIndex) {
+                const prevText = lineText.substr(lastIndex, styleRange.start - lastIndex);
+                const nonStyledElements = Terminal.createStyledElements(prevText);
+                result.push(...nonStyledElements);
+            }
+
+            if (isNull(styleRange.style) || styleRange.style.isEmpty()) {
+                continue;
+            }
+
+            const subtext = lineText.substr(styleRange.start, styleRange.end - styleRange.start);
+            const styledElements = Terminal.createStyledElements(
+                subtext,
+                styleRange.style.color,
+                styleRange.style.background,
+                styleRange.style.styles);
+            result.push(...styledElements);
+
+            lastIndex = styleRange.end;
+        }
+
+        if (lastIndex < lineText.length) {
+            const nonStyledElements = Terminal.createStyledElements(lineText.substr(lastIndex));
+            result.push(...nonStyledElements);
+        }
+
+        return result;
+    }
+
+    static createStyledElements(text, textColor, backgroundColor, textStyles) {
+        const textElements = Terminal.createTextAndAnchorElements(text);
+
+        if (!isNull(textColor) || !isNull(backgroundColor) || !isNull(textStyles)) {
+            const outputElement = document.createElement('span');
+
+            let className = '';
+
+            if (!isNull(textColor)) {
+                className += ' text_color_' + textColor;
+            }
+            if (!isNull(backgroundColor)) {
+                className += ' background_' + backgroundColor;
+            }
+
+            if (!isNull(textStyles)) {
+                for (let styleIndex = 0; styleIndex < textStyles.length; styleIndex++) {
+                    className += ' text_style_' + textStyles[styleIndex];
+                }
+            }
+
+            outputElement.className = className;
+            textElements.forEach(outputElement.appendChild.bind(outputElement));
+            return [outputElement];
+
+        }
+
+        return textElements;
+    }
+
+    linesChanges(changedLines) {
+        const terminalModel = this.terminalModel;
+        if (changedLines.length === 0) {
+            return;
+        }
+
+        const modelLines = terminalModel.lines;
+
+        const parentElement = this.element;
+
+        const oldLinesCounts = parentElement.childElementCount;
+
+        const replacedLines = new Map();
+
+        const newLinesFragment = document.createDocumentFragment();
+
+        const lastIndex = changedLines[changedLines.length - 1];
+        for (let i = oldLinesCounts; i <= lastIndex; i++) {
+            const lineElement = Terminal.createLineElement();
+            newLinesFragment.appendChild(lineElement);
+        }
+
+        for (const lineIndex of changedLines) {
+            let lineElement;
+
+            if (lineIndex >= oldLinesCounts) {
+                lineElement = newLinesFragment.children[lineIndex - oldLinesCounts];
+            } else {
+                lineElement = Terminal.createLineElement();
+                replacedLines.set(lineIndex, lineElement);
+            }
+
+            const lineText = modelLines[lineIndex];
+            const styleRanges = terminalModel.getStyle(lineIndex);
+
+            const children = Terminal.createLogLineChildren(lineText, styleRanges);
+            children.forEach(child => lineElement.appendChild(child));
+        }
+
+        for (const child of newLinesFragment.children) {
+            if (child.firstChild === null) {
+                newLinesFragment.replaceChild(document.createElement('br'), child);
+            }
+        }
+
+        replacedLines.forEach((value, key) => {
+            parentElement.replaceChild(value, parentElement.children[key]);
+        });
+        parentElement.appendChild(newLinesFragment);
+    }
+
+    cleared() {
+        destroyChildren(this.element);
+    }
+}
diff --git a/web-src/js/script/script-controller.js b/web-src/js/script/script-controller.js
index a57bb554..0523af17 100644
--- a/web-src/js/script/script-controller.js
+++ b/web-src/js/script/script-controller.js
@@ -488,7 +488,7 @@ ScriptController.prototype._initStore = function () {
             },
 
             [SET_LOG](state, log) {
-                state.logChunks = [{text: log}]
+                state.logChunks = [log]
             },
 
             [APPEND_LOG_CHUNK](state, logChunk) {
@@ -527,7 +527,7 @@ ScriptController.prototype._initStore = function () {
                     if (!(error instanceof HttpUnauthorizedError)) {
                         logError(error);
 
-                        commit(APPEND_LOG_CHUNK, {text: '\n\n' + error.message});
+                        commit(APPEND_LOG_CHUNK, '\n\n' + error.message);
                     }
                 }
 
diff --git a/web-src/js/script/script-view.vue b/web-src/js/script/script-view.vue
index a34b0f7a..f03d63b4 100644
--- a/web-src/js/script/script-view.vue
+++ b/web-src/js/script/script-view.vue
@@ -47,7 +47,7 @@
 
     import marked from 'marked';
     import {mapActions, mapState} from 'vuex'
-    import {forEachKeyValue, isEmptyObject, isEmptyString, isNull, toBoolean} from '../common';
+    import {forEachKeyValue, isEmptyObject, isEmptyString, isNull} from '../common';
     import LogPanel from '../components/log_panel'
     import ScriptParametersView from './script-parameters-view'
     import {RESET_DOWNLOADABLE_FILES, SEND_USER_INPUT, START_EXECUTION, STOP_EXECUTION} from './vuex_constants';
@@ -144,12 +144,8 @@
                 this.$refs.logPanel.setLog(text);
             },
 
-            appendLog: function (text, textColor, backgroundColor, textStyles) {
-                this.$refs.logPanel.appendLog(text, textColor, backgroundColor, textStyles);
-            },
-
-            replaceLog: function (text, textColor, backgroundColor, textStyles, x, y) {
-                this.$refs.logPanel.replaceLog(text, textColor, backgroundColor, textStyles, x, y);
+            appendLog: function (text) {
+                this.$refs.logPanel.appendLog(text);
             },
 
             getParameterErrors: function () {
@@ -194,17 +190,7 @@
                     for (; this.nextLogIndex < newValue.length; this.nextLogIndex++) {
                         const logChunk = newValue[this.nextLogIndex];
 
-                        var text = logChunk.text;
-                        var textColor = logChunk.text_color;
-                        var backgroundColor = logChunk.background_color;
-                        var textStyles = logChunk.text_styles;
-
-                        if (toBoolean(logChunk.replace)) {
-                            this.replaceLog(text, textColor, backgroundColor, textStyles, logChunk.custom_position.x, logChunk.custom_position.y);
-                        } else {
-                            this.appendLog(text, textColor, backgroundColor, textStyles);
-                        }
-
+                        this.appendLog(logChunk);
                     }
                 }
             }
diff --git a/web-src/package.json b/web-src/package.json
index 0d81ecf8..7b7e8562 100644
--- a/web-src/package.json
+++ b/web-src/package.json
@@ -2,6 +2,7 @@
   "name": "script-server",
   "version": "1.13.0",
   "dependencies": {
+    "@babel/runtime": "^7.3.4",
     "jquery": "^3.3.1",
     "marked": "^0.5.1",
     "material-design-icons": "^3.0.1",
@@ -13,7 +14,14 @@
   },
   "devDependencies": {
     "@babel/core": "^7.1.2",
+    "@babel/plugin-transform-runtime": "^7.3.4",
     "@babel/preset-env": "^7.1.2",
+    "@stryker-mutator/babel-transpiler": "^1.1.0",
+    "@stryker-mutator/core": "^1.1.0",
+    "@stryker-mutator/javascript-mutator": "^1.1.0",
+    "@stryker-mutator/karma-runner": "^1.1.0",
+    "@stryker-mutator/mocha-framework": "^1.1.0",
+    "@stryker-mutator/webpack-transpiler": "^1.1.0",
     "@vue/test-utils": "^1.0.0-beta.27",
     "babel-loader": "^8.0.4",
     "chai": "^4.2.0",
@@ -21,7 +29,7 @@
     "css-loader": "^2.1.0",
     "file-loader": "^3.0.0",
     "html-webpack-plugin": "^3.2.0",
-    "karma": "3.1.0",
+    "karma": "^3.1.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-mocha": "^1.3.0",
     "karma-sourcemap-loader": "^0.3.7",
@@ -42,6 +50,7 @@
     "start:dev": "webpack-dev-server --config webpack.dev.js",
     "build:prod": "webpack --mode production --config webpack.prod.js",
     "build:dev": "webpack --mode development --config webpack.dev.js",
-    "test": "karma start tests/karma.conf.js"
+    "test": "karma start tests/karma.conf.js",
+    "stryker": "stryker run tests/stryker.conf.js"
   }
 }
diff --git a/web-src/tests/log_panel_test.js b/web-src/tests/log_panel_test.js
deleted file mode 100644
index 12739f92..00000000
--- a/web-src/tests/log_panel_test.js
+++ /dev/null
@@ -1,364 +0,0 @@
-'use strict';
-
-import {mount} from '@vue/test-utils';
-import {assert, config as chaiConfig} from 'chai';
-import LogPanel from '../js/components/log_panel'
-
-chaiConfig.truncateThreshold = 0;
-
-describe('Test logPanel', function () {
-
-    before(function () {
-
-    });
-    beforeEach(function () {
-        this.logPanel = mount(LogPanel, {});
-        this.logContent = this.logPanel.vm.$refs.logContent;
-    });
-
-    afterEach(function () {
-    });
-    after(function () {
-    });
-
-    function getTextNodeText(textNode) {
-        return textNode.nodeValue;
-    }
-
-    function getComplexNodeText(complexNode) {
-        return getTextNodeText(complexNode.childNodes[0]);
-    }
-
-    function getText(element) {
-        if (element.nodeType === 3) {
-            return getTextNodeText(element);
-        } else {
-            return getComplexNodeText(element);
-        }
-    }
-
-    function assertTextNode(element, text) {
-        assert.equal(3, element.nodeType);
-        assert.equal(text, getTextNodeText(element));
-    }
-
-    function assertAnchor(element, href) {
-        assert.equal('A', element.tagName);
-        assert.equal(href, element.href.replace(/\/+$/, ''));
-        assert.equal(href, element.innerText);
-    }
-
-    function assertComplexNode(element, text, className) {
-        assert.equal(1, element.nodeType);
-        assert.equal(text, getComplexNodeText(element));
-        assert.equal(className, element.className);
-    }
-
-    function assertTexts(logContent, expectedTexts) {
-        var actualTexts = [];
-        for (var i = 0; i < logContent.childNodes.length; i++) {
-            var childText = getText(logContent.childNodes[i]);
-            actualTexts.push(childText);
-        }
-
-        assert.deepEqual(expectedTexts, actualTexts);
-    }
-
-    describe('change log content', function () {
-
-        it('Set log', function () {
-            this.logPanel.vm.setLog('some text');
-
-            assert.equal(1, this.logContent.childNodes.length);
-            assertTextNode(this.logContent.childNodes[0], 'some text');
-        });
-
-        it('Append text log', function () {
-            this.logPanel.vm.setLog('some text');
-
-            this.logPanel.vm.appendLog('|another text');
-            assert.equal(2, this.logContent.childNodes.length);
-            assertTextNode(this.logContent.childNodes[1], '|another text');
-        });
-
-        it('Append URL', function () {
-            this.logPanel.vm.setLog('some text');
-
-            this.logPanel.vm.appendLog('https://google.com');
-            assert.equal(2, this.logContent.childNodes.length);
-            assertAnchor(this.logContent.childNodes[1], 'https://google.com');
-        });
-
-        it('Append URL inside text', function () {
-            this.logPanel.vm.setLog('some text');
-
-            this.logPanel.vm.appendLog('begin http://wiki.org end');
-            assert.equal(2, this.logContent.childNodes.length);
-
-            let textContainer = this.logContent.childNodes[1];
-            assertTextNode(textContainer.childNodes[0], 'begin ');
-            assertAnchor(textContainer.childNodes[1], 'http://wiki.org');
-            assertTextNode(textContainer.childNodes[2], ' end');
-        });
-
-        it('Append multiple separated URLs', function () {
-            this.logPanel.vm.setLog('some text');
-
-            this.logPanel.vm.appendLog('http://wiki.org, https://google.com,http://localhost:5000');
-            assert.equal(2, this.logContent.childNodes.length);
-
-            let textContainer = this.logContent.childNodes[1];
-            assertAnchor(textContainer.childNodes[0], 'http://wiki.org');
-            assertTextNode(textContainer.childNodes[1], ', ');
-            assertAnchor(textContainer.childNodes[2], 'https://google.com');
-            assertTextNode(textContainer.childNodes[3], ',');
-            assertAnchor(textContainer.childNodes[4], 'http://localhost:5000');
-        });
-
-        it('Append complex URL', function () {
-            this.logPanel.vm.setLog('some text');
-
-            this.logPanel.vm.appendLog('http://api.plos.org/search'
-                + '?q=title:%22Drosophila%22%20and%20body:%22RNA%22&fl=id');
-            assert.equal(2, this.logContent.childNodes.length);
-            assertAnchor(this.logContent.childNodes[1],
-                'http://api.plos.org/search?q=title:%22Drosophila%22%20and%20body:%22RNA%22&fl=id');
-        });
-
-        it('Append colored URL', function () {
-            this.logPanel.vm.setLog('some text');
-
-            this.logPanel.vm.appendLog('https://google.com', 'red');
-            assert.equal(2, this.logContent.childNodes.length);
-
-            let formattedContainer = this.logContent.childNodes[1];
-            assert.equal(1, formattedContainer.nodeType);
-            assertAnchor(formattedContainer.childNodes[0], 'https://google.com');
-            assert.equal('text_color_red', formattedContainer.className);
-        });
-
-        it('Append colored log', function () {
-            this.logPanel.vm.setLog('some text');
-
-            this.logPanel.vm.appendLog('|colored text', 'red');
-            assert.equal(2, this.logContent.childNodes.length);
-            assertComplexNode(this.logContent.childNodes[1], '|colored text', 'text_color_red');
-        });
-
-        it('Replace single line', function () {
-            this.logPanel.vm.setLog('some text');
-
-            this.logPanel.vm.replaceLog('_another_', null, null, null, 0, 0);
-            assert.equal(1, this.logContent.childNodes.length);
-            assertTextNode(this.logContent.childNodes[0], '_another_');
-        });
-
-        it('Replace line beginning', function () {
-            this.logPanel.vm.setLog('some text');
-
-            this.logPanel.vm.replaceLog('_NEW_', null, null, null, 0, 0);
-
-            assertTexts(this.logContent, ['_NEW_', 'text']);
-        });
-
-        it('Replace line end', function () {
-            this.logPanel.vm.setLog('some text');
-
-            this.logPanel.vm.replaceLog('_NEW_', null, null, null, 4, 0);
-
-            assertTexts(this.logContent, ['some', '_NEW_']);
-        });
-
-        it('Replace line middle', function () {
-            this.logPanel.vm.setLog('some text');
-
-            this.logPanel.vm.replaceLog('12345', null, null, null, 2, 0);
-
-            assertTexts(this.logContent, ['so', '12345', 'xt']);
-        });
-
-        it('Replace 2 elements', function () {
-            this.logPanel.vm.setLog('123');
-            this.logPanel.vm.appendLog('456');
-
-            this.logPanel.vm.replaceLog('abcdef', null, null, null, 0, 0);
-
-            assertTexts(this.logContent, ['abcdef']);
-        });
-
-        it('Replace 3 elements in middle', function () {
-            this.logPanel.vm.setLog('123');
-            this.logPanel.vm.appendLog('456');
-            this.logPanel.vm.appendLog('789');
-
-            this.logPanel.vm.replaceLog('abcdef', null, null, null, 1, 0);
-
-            assertTexts(this.logContent, ['1', 'abcdef', '89']);
-        });
-
-        it('Replace first line in multiline (complete)', function () {
-            this.logPanel.vm.setLog('line1\nline2');
-
-            this.logPanel.vm.replaceLog('replacement', null, null, null, 0, 0);
-
-            assertTexts(this.logContent, ['replacement\n', 'line2']);
-        });
-
-        it('Replace first line in multiline (middle)', function () {
-            this.logPanel.vm.setLog('line1\nline2');
-
-            this.logPanel.vm.replaceLog('X', null, null, null, 2, 0);
-
-            assertTexts(this.logContent, ['li', 'X', 'e1\nline2']);
-        });
-
-        it('Replace several lines in multiline', function () {
-            this.logPanel.vm.setLog('line1\nline2\nline3\nline4');
-
-            this.logPanel.vm.replaceLog('a\nb\nlong line\n', null, null, null, 2, 0);
-
-            assertTexts(this.logContent, ['li', 'a', 'e1\n', 'b', 'ine2\n', 'long line\n', 'line4']);
-        });
-
-        it('Replace at the line end', function () {
-            this.logPanel.vm.setLog('line1\n');
-
-            this.logPanel.vm.replaceLog('a', null, null, null, 5, 0);
-
-            assertTexts(this.logContent, ['line1', 'a\n']);
-        });
-
-        it('Replace multiline in several multiline elements', function () {
-            this.logPanel.vm.setLog('line1\n');
-            this.logPanel.vm.appendLog('line2\nlin');
-            this.logPanel.vm.appendLog('e3\nl\nine4');
-
-            this.logPanel.vm.replaceLog('a\nb\nlong line\n', null, null, null, 5, 0);
-
-            assertTexts(this.logContent, ['line1', 'a\nb', 'ine2\n', 'long line\n', 'l\nine4']);
-        });
-
-        it('Replace 2nd line from 2', function () {
-            this.logPanel.vm.setLog('line1\n');
-            this.logPanel.vm.appendLog('line2');
-
-            this.logPanel.vm.replaceLog('REPLACE', null, null, null, 0, 1);
-
-            assertTexts(this.logContent, ['line1\n', 'REPLACE']);
-        });
-
-        it('Replace 2nd line from 3', function () {
-            this.logPanel.vm.setLog('line1\n');
-            this.logPanel.vm.appendLog('line2\n');
-            this.logPanel.vm.appendLog('line3');
-
-            this.logPanel.vm.replaceLog('REPLACE', null, null, null, 0, 1);
-
-            assertTexts(this.logContent, ['line1\n', 'REPLACE\n', 'line3']);
-        });
-
-        it('Replace middle of Nth complex line', function () {
-            this.logPanel.vm.setLog('line1\n');
-            this.logPanel.vm.appendLog('line2\n');
-            this.logPanel.vm.appendLog('abc');
-            this.logPanel.vm.appendLog('def');
-            this.logPanel.vm.appendLog('ghi\n');
-            this.logPanel.vm.appendLog('line4');
-
-            this.logPanel.vm.replaceLog('OPQRS', null, null, null, 2, 2);
-
-            assertTexts(this.logContent, ['line1\n', 'line2\n', 'ab', 'OPQRS', 'hi\n', 'line4']);
-        });
-
-        it('Replace line multiple times', function () {
-            this.logPanel.vm.setLog('line1\n');
-
-            for (var i = 0; i < 3; i++) {
-                this.logPanel.vm.replaceLog('REPL' + i, null, null, null, 0, 0);
-            }
-
-            assertTexts(this.logContent, ['REPL2\n']);
-        });
-
-        it('Replace last line multiple times', function () {
-            this.logPanel.vm.setLog('line1\n');
-            this.logPanel.vm.appendLog('line2\n');
-            this.logPanel.vm.appendLog('line3\n');
-
-            for (var i = 0; i < 3; i++) {
-                this.logPanel.vm.replaceLog('REPL' + i, null, null, null, 0, 2);
-            }
-
-            assertTexts(this.logContent, ['line1\n', 'line2\n', 'REPL2\n']);
-        });
-
-        it('Replace first line in multiline without text', function () {
-            this.logPanel.vm.setLog('\n');
-            this.logPanel.vm.appendLog('\n');
-            this.logPanel.vm.appendLog('\n');
-
-            this.logPanel.vm.replaceLog('some text', null, null, null, 0, 0);
-
-            assertTexts(this.logContent, ['some text\n', '\n', '\n']);
-        });
-
-        it('Replace 2nd line in multiline without text', function () {
-            this.logPanel.vm.setLog('\n');
-            this.logPanel.vm.appendLog('\n');
-            this.logPanel.vm.appendLog('\n');
-
-            this.logPanel.vm.replaceLog('some text', null, null, null, 0, 1);
-
-            assertTexts(this.logContent, ['\n', 'some text\n', '\n']);
-        });
-
-        it('Replace last line in multiline without text', function () {
-            this.logPanel.vm.setLog('\n');
-            this.logPanel.vm.appendLog('\n');
-            this.logPanel.vm.appendLog('\n');
-
-            this.logPanel.vm.replaceLog('some text', null, null, null, 0, 2);
-
-            assertTexts(this.logContent, ['\n', '\n', 'some text\n']);
-        });
-
-        it('Replace newlines with newlines only', function () {
-            this.logPanel.vm.setLog('\n\n');
-            this.logPanel.vm.appendLog('\n');
-            this.logPanel.vm.appendLog('\n');
-
-            this.logPanel.vm.replaceLog('\n\n', null, null, null, 0, 0);
-
-            assertTexts(this.logContent, ['\n\n', '\n', '\n']);
-        });
-
-        it('Replace split formatted text by replace', function () {
-            this.logPanel.vm.setLog('');
-            this.logPanel.vm.appendLog('some very long line', 'red', 'blue', ['bold']);
-
-            this.logPanel.vm.replaceLog('OOPS', null, null, null, 5, 0);
-
-            assertComplexNode(this.logContent.childNodes[0], 'some ', 'text_color_red background_blue text_style_bold');
-            assertTextNode(this.logContent.childNodes[1], 'OOPS');
-            assertComplexNode(this.logContent.childNodes[2], ' long line', 'text_color_red background_blue text_style_bold');
-        });
-
-        it('Replace with formatted text', function () {
-            this.logPanel.vm.setLog('some very long line');
-
-            this.logPanel.vm.replaceLog('OOPS', null, 'green', null, 5, 0);
-
-            assertTextNode(this.logContent.childNodes[0], 'some ');
-            assertComplexNode(this.logContent.childNodes[1], 'OOPS', 'background_green');
-            assertTextNode(this.logContent.childNodes[2], ' long line');
-        });
-
-        it('Replace with new line and then some text', function () {
-            this.logPanel.vm.setLog('line1\nline2');
-            this.logPanel.vm.replaceLog('\ntest', null, null, null, 0, 1);
-            this.logPanel.vm.replaceLog('hello', null, null, null, 0, 2);
-
-            assertTexts(this.logContent, ['line1\nline2\n', 'hello'])
-        })
-    })
-});
\ No newline at end of file
diff --git a/web-src/tests/stryker.conf.js b/web-src/tests/stryker.conf.js
new file mode 100644
index 00000000..96687942
--- /dev/null
+++ b/web-src/tests/stryker.conf.js
@@ -0,0 +1,22 @@
+module.exports = function (config) {
+    config.set({
+        testRunner: 'karma',
+        testFramework: 'mocha',
+        karma: {
+            project: 'custom',
+            configFile: 'tests/karma.conf.js',
+            config: {
+                basePath: null,
+                files: ['../../web/test_entry.js']
+            }
+        },
+        tempDir: '/tmp',
+        mutate: ['js/components/terminal/terminal_model.js'],
+        mutator: 'javascript',
+        coverageAnalysis: 'off',
+        transpilers: ['webpack'],
+        webpack: {
+            configFile: 'webpack.mutation.js'
+        }
+    });
+};
\ No newline at end of file
diff --git a/web-src/tests/terminal_model_test.js b/web-src/tests/terminal_model_test.js
new file mode 100644
index 00000000..2faf9d10
--- /dev/null
+++ b/web-src/tests/terminal_model_test.js
@@ -0,0 +1,600 @@
+'use strict';
+
+import {assert, config as chaiConfig} from 'chai';
+import {isNull} from '../js/common';
+import {Style, StyledRange, TerminalModel} from '../js/components/terminal/terminal_model';
+import {format, moveCursorDown, moveCursorLeft, moveCursorRight, moveCursorUp} from './terminal_test_utils';
+
+chaiConfig.truncateThreshold = 0;
+
+describe('Test terminal model', function () {
+
+    beforeEach(function () {
+        this.model = new TerminalModel();
+    });
+
+    describe('Test simple writes', function () {
+
+        it('Test write one char', function () {
+            this.model.write('a');
+
+            assert.deepEqual(['a'], this.model.lines);
+        });
+
+        it('Test write a string', function () {
+            this.model.write('hello world');
+
+            assert.deepEqual(['hello world'], this.model.lines);
+        });
+
+        it('Test write multiline string', function () {
+            this.model.write('hello world\n1\nanother line');
+
+            assert.deepEqual(['hello world', '1', 'another line'], this.model.lines);
+        });
+
+        it('Test multiple writes one char', function () {
+            this.model.write('a');
+            this.model.write('b');
+            this.model.write('c');
+
+            assert.deepEqual(['abc'], this.model.lines);
+        });
+
+        it('Test multiple writes string', function () {
+            this.model.write('Lorem ');
+            this.model.write('ipsum');
+            this.model.write(' dolor');
+
+            assert.deepEqual(['Lorem ipsum dolor'], this.model.lines);
+        });
+
+        it('Test multiple writes with newline', function () {
+            this.model.write('sit\n');
+            this.model.write('am\net, ');
+            this.model.write('consectetur');
+
+            assert.deepEqual(['sit', 'am', 'et, consectetur'], this.model.lines);
+        });
+    });
+
+    function removeNullStyledRanges(styleRanges) {
+        const result = [];
+
+        for (const styleRange of styleRanges) {
+            if (!isNull(styleRange.style)) {
+                result.push(styleRange);
+            }
+        }
+
+        return result;
+    }
+
+    function assertStyles(actual, expected) {
+        function str(val) {
+            return JSON.stringify(val, null, 2);
+        }
+
+        if (isNull(actual) && isNull(expected)) {
+            return;
+        }
+
+        if (isNull(actual)) {
+            assert.fail('Actual style is empty, but expected\n' + str(expected));
+        }
+
+        if (isNull(expected)) {
+            assert.fail('Expected empty style but was\n' + str(actual));
+        }
+
+        const normalizedActual = removeNullStyledRanges(actual);
+        const normalizedExpected = removeNullStyledRanges(expected);
+
+        assert.equal(normalizedActual.length, normalizedExpected.length,
+            'Different styles length. Expected:\n' + str(normalizedExpected) + '\n\nActual:\n' + str(normalizedActual));
+
+        for (let i = 0; i < normalizedActual.length; i++) {
+            const actualRange = normalizedActual[i];
+            const expectedRange = normalizedExpected[i];
+
+            const suffix = ` at index ${i}. Expected:\n${str(expectedRange)}\n\nActual:\n${str(actualRange)}`;
+            assert.equal(actualRange.start, expectedRange.start, 'Different start' + suffix);
+            assert.equal(actualRange.end, expectedRange.end, 'Different end' + suffix);
+
+            const actualStyle = actualRange.style;
+            const expectedStyle = expectedRange.style;
+
+            if (isNull(actualStyle) !== isNull(expectedStyle)) {
+                assert.fail('Undefined style' + suffix);
+            }
+            if (isNull(actualStyle)) {
+                continue;
+            }
+
+            assert.equal(actualStyle.color, expectedStyle.color, 'Different color' + suffix);
+            assert.equal(actualStyle.background, expectedStyle.background, 'Different background' + suffix);
+            assert.deepEqual(actualStyle.styles, expectedStyle.styles, 'Different text styles' + suffix);
+        }
+    }
+
+    describe('Test styles', function () {
+
+        it('Test text without styles', function () {
+            this.model.write('Lorem');
+
+            assert.deepEqual(['Lorem'], this.model.lines);
+            assert(isNull(this.model.getStyle(0)));
+        });
+
+        it('Test colored text', function () {
+            this.model.write(format(31) + 'ipsum');
+
+            assert.deepEqual(['ipsum'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [new StyledRange(0, 5, new Style({color: 'red'}))]);
+        });
+
+        it('Test text style', function () {
+            this.model.write(format(1) + 'ipsum');
+
+            assert.deepEqual(['ipsum'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [new StyledRange(0, 5, new Style({styles: ['bold']}))]);
+        });
+
+        it('Test text style zero-padded', function () {
+            this.model.write(format('02') + 'ipsum');
+
+            assert.deepEqual(['ipsum'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [new StyledRange(0, 5, new Style({styles: ['dim']}))]);
+        });
+
+        it('Test mixed colored text', function () {
+            this.model.write(format(31) + '12345 ' + format(0) + '678 ' + format(32) + '90ab');
+
+            assert.deepEqual(['12345 678 90ab'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [
+                new StyledRange(0, 6, new Style({color: 'red'})),
+                new StyledRange(10, 14, new Style({color: 'green'}))]);
+        });
+
+        it('Test mixed colored text with new lines', function () {
+            this.model.write(
+                format(33) + '123 ' + format(34) + '45\n'
+                + ' 6789 ' + format(31) + '0ab' + format(0) + ' ' + format(35) + 'cdefgh ijklmn' + format(0) + ' \n'
+                + 'op\n'
+                + format(36) + 'qrstuv');
+
+            assert.deepEqual(['123 45', ' 6789 0ab cdefgh ijklmn ', 'op', 'qrstuv'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [
+                new StyledRange(0, 4, new Style({color: 'yellow'})),
+                new StyledRange(4, 6, new Style({color: 'blue'}))]);
+            assertStyles(this.model.getStyle(1), [
+                new StyledRange(0, 6, new Style({color: 'blue'})),
+                new StyledRange(6, 9, new Style({color: 'red'})),
+                new StyledRange(10, 23, new Style({color: 'magenta'}))]);
+
+            assert(isNull(this.model.getStyle(2)));
+
+            assertStyles(this.model.getStyle(3), [
+                new StyledRange(0, 6, new Style({color: 'cyan'}))]);
+        });
+
+        it('Test color + background + styles', function () {
+            this.model.write(format(37, 41, 1, 4) + '12345');
+
+            assert.deepEqual(['12345'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [
+                new StyledRange(0, 5, new Style({
+                    color: 'lightgray',
+                    background: 'red',
+                    styles: ['bold', 'underlined']
+                }))]);
+        });
+
+        it('Test change color', function () {
+            this.model.write(format(31, 41) + '123'
+                + format(32) + '4'
+                + format(39) + '567'
+                + format(33) + '890abc');
+
+            assert.deepEqual(['1234567890abc'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [
+                new StyledRange(0, 3, new Style({color: 'red', background: 'red'})),
+                new StyledRange(3, 4, new Style({color: 'green', background: 'red'})),
+                new StyledRange(4, 7, new Style({background: 'red'})),
+                new StyledRange(7, 13, new Style({color: 'yellow', background: 'red'}))]);
+        });
+
+        it('Test change styles', function () {
+            this.model.write(
+                format(34) + '123'
+                + format(1) + '45'
+                + format(4) + '67890'
+                + format(21) + 'a'
+                + format(24) + 'bcd'
+                + format(1, 2) + 'e'
+                + format(21, 22) + 'f'
+                + format(0) + 'ghi'
+                + format(8) + 'jkl'
+                + format(28) + 'mno'
+                + format(2) + 'pq');
+
+            assert.deepEqual(['1234567890abcdefghijklmnopq'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [
+                new StyledRange(0, 3, new Style({color: 'blue'})),
+                new StyledRange(3, 5, new Style({color: 'blue', styles: ['bold']})),
+                new StyledRange(5, 10, new Style({color: 'blue', styles: ['bold', 'underlined']})),
+                new StyledRange(10, 11, new Style({color: 'blue', styles: ['underlined']})),
+                new StyledRange(11, 14, new Style({color: 'blue'})),
+                new StyledRange(14, 15, new Style({color: 'blue', styles: ['bold', 'dim']})),
+                new StyledRange(15, 16, new Style({color: 'blue'})),
+                new StyledRange(19, 22, new Style({styles: ['hidden']})),
+                new StyledRange(25, 27, new Style({styles: ['dim']}))]);
+        });
+
+        it('Test replace style on ', function () {
+            this.model.write(
+                format(34) + '123'
+                + format(1) + '45'
+                + format(4) + '67890'
+                + format(21) + 'a'
+                + format(24) + 'bcd'
+                + format(1, 2) + 'e'
+                + format(21, 22) + 'f'
+                + format(0) + 'ghi'
+                + format(8) + 'jkl'
+                + format(28) + 'mno'
+                + format(2) + 'pq');
+
+            assert.deepEqual(['1234567890abcdefghijklmnopq'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [
+                new StyledRange(0, 3, new Style({color: 'blue'})),
+                new StyledRange(3, 5, new Style({color: 'blue', styles: ['bold']})),
+                new StyledRange(5, 10, new Style({color: 'blue', styles: ['bold', 'underlined']})),
+                new StyledRange(10, 11, new Style({color: 'blue', styles: ['underlined']})),
+                new StyledRange(11, 14, new Style({color: 'blue'})),
+                new StyledRange(14, 15, new Style({color: 'blue', styles: ['bold', 'dim']})),
+                new StyledRange(15, 16, new Style({color: 'blue'})),
+                new StyledRange(19, 22, new Style({styles: ['hidden']})),
+                new StyledRange(25, 27, new Style({styles: ['dim']}))]);
+        });
+
+        it('Test fully replace styled line with another styled line', function () {
+            this.model.write(format(31) + '12345' + format(32) + '\r67890');
+
+            assert.deepEqual(['67890'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [
+                new StyledRange(0, 5, new Style({color: 'green'}))]);
+        });
+
+        it('Test fully replace unstyled line with a styled line', function () {
+            this.model.write('12345' + format(32) + '\r67890');
+
+            assert.deepEqual(['67890'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [
+                new StyledRange(0, 5, new Style({color: 'green'}))]);
+        });
+
+        it('Test fully replace styled line with an unstyled line', function () {
+            this.model.write(format(31) + '12345' + format(0) + '\r67890');
+
+            assert.deepEqual(['67890'], this.model.lines);
+            assertStyles(this.model.getStyle(0), []);
+        });
+
+        it('Test replace beginning of styled line', function () {
+            this.model.write(format(31) + '12345' + format(0, 42) + '\rabc');
+
+            assert.deepEqual(['abc45'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [
+                new StyledRange(0, 3, new Style({background: 'green'})),
+                new StyledRange(3, 5, new Style({color: 'red'}))]);
+        });
+
+        it('Test replace mid of styled line', function () {
+            this.model.write(format(31) + '12345' + format(0, 42) + moveCursorLeft(4) + 'abc');
+
+            assert.deepEqual(['1abc5'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [
+                new StyledRange(0, 1, new Style({color: 'red'})),
+                new StyledRange(1, 4, new Style({background: 'green'})),
+                new StyledRange(4, 5, new Style({color: 'red'}))]);
+        });
+
+        it('Test replace end of styled line', function () {
+            this.model.write(format(31) + '12345' + format(0, 42) + moveCursorLeft(2) + 'abc');
+
+            assert.deepEqual(['123abc'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [
+                new StyledRange(0, 3, new Style({color: 'red'})),
+                new StyledRange(3, 6, new Style({background: 'green'}))]);
+        });
+
+        it('Test replace multiple styles', function () {
+            this.model.write('123' + format(31) + '456' + format(42) + '78' + format(2) + '90'
+                + format(0, 33) + '\r' + 'abcdefghi');
+
+            assert.deepEqual(['abcdefghi0'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [
+                new StyledRange(0, 9, new Style({color: 'yellow'})),
+                new StyledRange(9, 10, new Style({color: 'red', background: 'green', styles: ['dim']}))]);
+        });
+
+        it('Test replace multiple styles without format', function () {
+            this.model.write(format(31) + '123' + format(2) + '456' + format(42) + '78' + format(0, 33) + '90'
+                + format(0) + '\r' + moveCursorRight(1) + 'abcdefgh');
+
+            assert.deepEqual(['1abcdefgh0'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [
+                new StyledRange(0, 1, new Style({color: 'red'})),
+                new StyledRange(9, 10, new Style({color: 'yellow'}))]);
+        });
+
+        it('Test replace multiple styles with intervals', function () {
+            this.model.write(
+                format(31) + 'abcd' + format(2) + 'efg' + format(44) + 'h' + format(0) + 'ij' + format(33) + 'klmno'
+                + format(0, 32) + '\r' + moveCursorRight(1) + '1' + moveCursorRight(5) + '23' + moveCursorRight(2) + '45');
+
+            assert.deepEqual(['a1cdefg23jk45no'], this.model.lines);
+            assertStyles(this.model.getStyle(0), [
+                new StyledRange(0, 1, new Style({color: 'red'})),
+                new StyledRange(1, 2, new Style({color: 'green'})),
+                new StyledRange(2, 4, new Style({color: 'red'})),
+                new StyledRange(4, 7, new Style({color: 'red', styles: ['dim']})),
+                new StyledRange(7, 9, new Style({color: 'green'})),
+                new StyledRange(10, 11, new Style({color: 'yellow'})),
+                new StyledRange(11, 13, new Style({color: 'green'})),
+                new StyledRange(13, 15, new Style({color: 'yellow'}))]);
+        });
+
+    });
+
+    describe('Test changed lines', function () {
+
+        beforeEach(function () {
+            const changedLinesField = [];
+            this.changedLines = changedLinesField;
+
+            this.model.addListener({
+                linesChanges: function (changedLines) {
+                    changedLinesField.push(changedLines);
+                },
+
+                cleared: function () {
+
+                }
+            });
+        });
+
+        it('Test write one char', function () {
+            this.model.write('a');
+
+            assert.deepEqual([[0]], this.changedLines);
+        });
+
+        it('Test text with newline', function () {
+            this.model.write('hello world\n');
+
+            assert.deepEqual([[0]], this.changedLines);
+        });
+
+        it('Test write multiline string', function () {
+            this.model.write('hello world\n1\nanother line');
+
+            assert.deepEqual([[0, 1, 2]], this.changedLines);
+        });
+
+        it('Test multiple writes', function () {
+            this.model.write('12');
+            this.model.write('3');
+
+            assert.deepEqual([[0], [0]], this.changedLines);
+        });
+
+        it('Test write after multiline', function () {
+            this.model.write('hello\n');
+            this.model.write('world');
+
+            assert.deepEqual([[0], [1]], this.changedLines);
+        });
+
+        it('Test write with first char newline', function () {
+            this.model.write('hello');
+            this.model.write('\nworld');
+
+            assert.deepEqual([[0], [1]], this.changedLines);
+        });
+
+        it('Test multiple newlines', function () {
+            this.model.write('123\n\n\n456');
+
+            assert.deepEqual([[0, 3]], this.changedLines);
+        });
+
+        it('Test multiple writes with newline', function () {
+            this.model.write('123\n');
+            this.model.write('45\n678');
+            this.model.write('9\n10\n11');
+
+            assert.deepEqual([[0], [1, 2], [2, 3, 4]], this.changedLines);
+        });
+    });
+
+    describe('Test cursor move', function () {
+
+        it('Test caret return without changes', function () {
+            this.model.write('12345\r');
+
+            assert.deepEqual(['12345'], this.model.lines);
+        });
+
+        it('Test caret return and char change', function () {
+            this.model.write('12345\ra');
+
+            assert.deepEqual(['a2345'], this.model.lines);
+        });
+
+        it('Test caret return and long change', function () {
+            this.model.write('12345\rabcdef');
+
+            assert.deepEqual(['abcdef'], this.model.lines);
+        });
+
+        it('Test caret return and newline', function () {
+            this.model.write('12345\r\nabcdef');
+
+            assert.deepEqual(['12345', 'abcdef'], this.model.lines);
+        });
+
+        it('Test caret return and newline after a char', function () {
+            this.model.write('12345\ra\nbcdef');
+
+            assert.deepEqual(['a2345', 'bcdef'], this.model.lines);
+        });
+
+        it('Test caret return in multiple lines', function () {
+            this.model.write('12345\ra\nb\n\rcdef');
+
+            assert.deepEqual(['a2345', 'b', 'cdef'], this.model.lines);
+        });
+
+        it('Test move cursor up when one line only', function () {
+            this.model.write('12345' + moveCursorUp(1) + 'abc');
+
+            assert.deepEqual(['12345abc'], this.model.lines);
+        });
+
+        it('Test move cursor up from the second line', function () {
+            this.model.write('12345\nabc' + moveCursorUp(1) + 'def');
+
+            assert.deepEqual(['123def', 'abc'], this.model.lines);
+        });
+
+        it('Test move cursor up when upper line is shorter', function () {
+            this.model.write('1\nabc' + moveCursorUp(1) + 'def');
+
+            assert.deepEqual(['1  def', 'abc'], this.model.lines);
+        });
+
+        it('Test move cursor up above terminal', function () {
+            this.model.write('123\n456\n78' + moveCursorUp(100) + 'def');
+
+            assert.deepEqual(['12def', '456', '78'], this.model.lines);
+        });
+
+        it('Test move cursor down to unexisting line', function () {
+            this.model.write('1' + moveCursorDown(1) + 'abc');
+
+            assert.deepEqual(['1', ' abc'], this.model.lines);
+        });
+
+        it('Test move cursor down N to unexisting line', function () {
+            this.model.write('12345' + moveCursorDown(3) + 'a');
+
+            assert.deepEqual(['12345', '', '', '     a'], this.model.lines);
+        });
+
+
+        it('Test move cursor down when bottom line is shorter', function () {
+            this.model.write('12\n34\n56' + moveCursorUp(3) + '\rabcdef' + moveCursorDown(2) + 'gh');
+
+            assert.deepEqual(['abcdef', '34', '56    gh'], this.model.lines);
+        });
+
+        it('Test move cursor down when bottom line is longer', function () {
+            this.model.write('12\n3456789\n' + moveCursorUp(2) + '\ra' + moveCursorDown(1) + 'bc');
+
+            assert.deepEqual(['a2', '3bc6789'], this.model.lines);
+        });
+
+        it('Test move cursor down N to existing line', function () {
+            this.model.write('12\n34\n56\n78\n' + moveCursorUp(4) + 'a' + moveCursorDown(3) + 'b');
+
+            assert.deepEqual(['a2', '34', '56', '7b'], this.model.lines);
+        });
+
+        it('Test move cursor down multiple times', function () {
+            this.model.write('12\n34\n56\n78\n90\n' + moveCursorUp(5)
+                + moveCursorDown(2) + moveCursorDown(1) + 'b');
+
+            assert.deepEqual(['12', '34', '56', 'b8', '90'], this.model.lines);
+        });
+
+        it('Test move cursor right 1 position', function () {
+            this.model.write('123' + moveCursorRight(1) + 'abc');
+
+            assert.deepEqual(['123 abc'], this.model.lines);
+        });
+
+        it('Test move cursor right N positions', function () {
+            this.model.write('123' + moveCursorRight(5) + 'abc');
+
+            assert.deepEqual(['123     abc'], this.model.lines);
+        });
+
+        it('Test move cursor right when existing text is shorter', function () {
+            this.model.write('123\r' + moveCursorRight(5) + 'abc');
+
+            assert.deepEqual(['123  abc'], this.model.lines);
+        });
+
+        it('Test move cursor right when existing text is longer', function () {
+            this.model.write('1234567890\r' + moveCursorRight(5) + 'abc');
+
+            assert.deepEqual(['12345abc90'], this.model.lines);
+        });
+
+        it('Test move cursor right multiple times', function () {
+            this.model.write('1234567890\r' + moveCursorRight(3) + moveCursorRight(1) + moveCursorRight(2) + 'abc');
+
+            assert.deepEqual(['123456abc0'], this.model.lines);
+        });
+
+        it('Test move cursor left 1 position and single char', function () {
+            this.model.write('12345' + moveCursorLeft(1) + 'a');
+
+            assert.deepEqual(['1234a'], this.model.lines);
+        });
+
+        it('Test move cursor left 1 position and long string', function () {
+            this.model.write('12345' + moveCursorLeft(1) + 'abcde');
+
+            assert.deepEqual(['1234abcde'], this.model.lines);
+        });
+
+        it('Test move cursor left N positions ', function () {
+            this.model.write('12345' + moveCursorLeft(4) + 'abc');
+
+            assert.deepEqual(['1abc5'], this.model.lines);
+        });
+
+        it('Test move cursor left out of terminal', function () {
+            this.model.write('12345' + moveCursorLeft(100) + 'abc');
+
+            assert.deepEqual(['abc45'], this.model.lines);
+        });
+
+        it('Test move cursor right left has no effect', function () {
+            this.model.write('12345' + moveCursorRight(5) + moveCursorLeft(5) + 'abc');
+
+            assert.deepEqual(['12345abc'], this.model.lines);
+        });
+
+        it('Test move cursor left right has no effect', function () {
+            this.model.write('12345' + moveCursorLeft(3) + moveCursorRight(3) + 'abc');
+
+            assert.deepEqual(['12345abc'], this.model.lines);
+        });
+
+        it('Test move cursor down up has no effect', function () {
+            this.model.write('12345' + moveCursorDown(5) + moveCursorUp(5) + 'abc');
+
+            assert.deepEqual(['12345abc'], this.model.lines);
+        });
+
+        it('Test move cursor up down has no effect', function () {
+            this.model.write('12\n34\n56\n78\n90' + moveCursorUp(3) + moveCursorDown(3) + 'abc');
+
+            assert.deepEqual(['12', '34', '56', '78', '90abc'], this.model.lines);
+        });
+    });
+});
\ No newline at end of file
diff --git a/web-src/tests/terminal_test_utils.js b/web-src/tests/terminal_test_utils.js
new file mode 100644
index 00000000..41d707e5
--- /dev/null
+++ b/web-src/tests/terminal_test_utils.js
@@ -0,0 +1,25 @@
+const escapePrefix = '\u001B[';
+
+export function format(...styles) {
+    if (!Array.isArray(styles)) {
+        styles = [styles];
+    }
+
+    return escapePrefix + styles.join(';') + 'm';
+}
+
+export function moveCursorUp(lines) {
+    return escapePrefix + lines + 'A';
+}
+
+export function moveCursorDown(lines) {
+    return escapePrefix + lines + 'B';
+}
+
+export function moveCursorLeft(lines) {
+    return escapePrefix + lines + 'D';
+}
+
+export function moveCursorRight(lines) {
+    return escapePrefix + lines + 'C';
+}
\ No newline at end of file
diff --git a/web-src/tests/terminal_view_test.js b/web-src/tests/terminal_view_test.js
new file mode 100644
index 00000000..2bde5961
--- /dev/null
+++ b/web-src/tests/terminal_view_test.js
@@ -0,0 +1,392 @@
+'use strict';
+
+import {assert, config as chaiConfig} from 'chai';
+import {removeElement} from '../js/common';
+import {TerminalModel} from '../js/components/terminal/terminal_model';
+import {Terminal} from '../js/components/terminal/terminal_view';
+import {format, moveCursorUp} from './terminal_test_utils';
+
+chaiConfig.truncateThreshold = 0;
+
+function styledNode(text, styles = []) {
+    return {
+        'type': 'styledNode',
+        'text': text,
+        'styles': styles
+    }
+}
+
+function styledComplexNode(styles = [], children) {
+    return {
+        'type': 'styledComplexNode',
+        'styles': styles,
+        'children': children
+    }
+}
+
+function textNode(text) {
+    return {
+        'type': 'textNode',
+        'text': text,
+        'styles': []
+    }
+}
+
+function anchorNode(url, styles = []) {
+    return {
+        'type': 'anchorNode',
+        'text': url,
+        'styles': styles,
+        'href': url.replace(/\/+$/, '')
+    }
+}
+
+function getElementClasses(element) {
+    const classes = element.className.split(' ');
+    removeElement(classes, '');
+    return classes;
+}
+
+describe('Test terminal view', function () {
+
+    before(function () {
+
+    });
+    beforeEach(function () {
+        this.model = new TerminalModel();
+        this.terminal = new Terminal(this.model);
+    });
+
+    afterEach(function () {
+    });
+    after(function () {
+    });
+
+    function getTextNodeText(textNode) {
+        return textNode.nodeValue;
+    }
+
+    function getComplexNodeText(complexNode) {
+        const firstChild = complexNode.childNodes[0];
+        if (firstChild.nodeType === 1) {
+            if (firstChild.tagName !== 'A') {
+                throw Error('Unsupported child ' + firstChild);
+            }
+            return firstChild.innerText;
+        }
+
+        return getTextNodeText(firstChild);
+    }
+
+    function getText(element) {
+        if (element.nodeType === 3) {
+            return getTextNodeText(element);
+        } else {
+            return getComplexNodeText(element);
+        }
+    }
+
+    function assertTextNode(element, text) {
+        assert.equal(3, element.nodeType);
+        assert.equal(text, getTextNodeText(element));
+    }
+
+    function assertAnchor(element, href) {
+        assert.equal('A', element.tagName);
+        assert.equal(href, element.href.replace(/\/+$/, ''));
+        assert.equal(href, element.innerText);
+    }
+
+    function assertStyledNode(element, text, classes) {
+        assert.equal(1, element.nodeType);
+        assert.equal('SPAN', element.tagName);
+        assert.equal(text, getComplexNodeText(element));
+
+        const actualClasses = getElementClasses(element);
+        assert.sameOrderedMembers(actualClasses, classes);
+    }
+
+    function assertTexts(expectedTexts, element) {
+        const actualTexts = [];
+        for (let i = 0; i < element.childNodes.length; i++) {
+            const lineElement = element.childNodes[i];
+
+            let lineText = '';
+            for (const textElement of lineElement.childNodes) {
+                lineText += getText(textElement);
+            }
+            actualTexts.push(lineText);
+        }
+
+        assert.deepEqual(expectedTexts, actualTexts);
+    }
+
+    function assertLine(lineElement, expectedNodes) {
+        assert.equal('DIV', lineElement.tagName);
+
+        const actualNodes = [];
+        for (const childNode of lineElement.childNodes) {
+            const text = getText(childNode);
+
+            if (childNode.nodeType === 3) {
+                actualNodes.push(textNode(text));
+                continue;
+            }
+
+            if (childNode.tagName === 'A') {
+                actualNodes.push(anchorNode(text, []));
+                continue;
+            }
+
+            assert.equal('SPAN', childNode.tagName, 'Unexpected styled element ' + childNode.innerHTML);
+
+            const classes = getElementClasses(childNode);
+
+            if (childNode.childNodes.length === 1) {
+                if (childNode.childNodes[0].nodeType === 3) {
+                    actualNodes.push(styledNode(text, classes));
+                    continue;
+                }
+
+                assert.equal('A', childNode.childNodes[0].tagName, 'Unexpected anchor structure: ' + childNode.innerHTML);
+                actualNodes.push(anchorNode(text, classes));
+                continue;
+            }
+
+            const grandChildrenNodes = [];
+            for (const grandchild of childNode.childNodes) {
+                if (grandchild.nodeType === 3) {
+                    grandChildrenNodes.push(textNode(getTextNodeText(grandchild)));
+                    continue;
+                }
+
+                assert.equal('A', grandchild.tagName, 'Unexpected anchor structure: ' + childNode.innerHTML);
+                grandChildrenNodes.push(anchorNode(getText(grandchild)));
+            }
+            actualNodes.push(styledComplexNode(classes, grandChildrenNodes));
+        }
+
+        assert.deepEqual(expectedNodes, actualNodes);
+    }
+
+    describe('change log content', function () {
+
+        it('Test simple text', function () {
+            this.model.write('some text');
+
+            assert.equal(1, this.terminal.element.childNodes.length);
+
+            assertLine(this.terminal.element.childNodes[0], [textNode('some text')]);
+        });
+
+        it('Test styled text', function () {
+            this.model.write(format(31) + '1234');
+
+            assert.equal(1, this.terminal.element.childNodes.length);
+            assertLine(this.terminal.element.childNodes[0], [styledNode('1234', ['text_color_red'])]);
+        });
+
+        it('Test mixed styled text', function () {
+            this.model.write('1234' + format(31, 1, 2) + 'abc' + format(42, 21) + '5' + format(0) + 'def');
+
+            assert.equal(1, this.terminal.element.childNodes.length);
+            const lineElement = this.terminal.element.childNodes[0];
+
+            assertLine(this.terminal.element.childNodes[0], [
+                textNode('1234'),
+                styledNode('abc', ['text_color_red', 'text_style_bold', 'text_style_dim']),
+                styledNode('5', ['text_color_red', 'background_green', 'text_style_dim']),
+                textNode('def')
+            ]);
+        });
+
+        it('URL', function () {
+            this.model.write('https://google.com');
+
+            const lineElement = this.terminal.element.childNodes[0];
+            assertLine(lineElement, [anchorNode('https://google.com')]);
+        });
+
+        it('URL between text', function () {
+            this.model.write('begin http://wiki.org end');
+
+            const lineElement = this.terminal.element.childNodes[0];
+
+            assertLine(lineElement, [
+                textNode('begin '),
+                anchorNode('http://wiki.org'),
+                textNode(' end')
+            ]);
+        });
+
+        it('URL between styled text', function () {
+            this.model.write(format(31) + 'begin' + format(0) + ' http://wiki.org ' + format(31) + 'end');
+
+            const lineElement = this.terminal.element.childNodes[0];
+
+            assertLine(lineElement, [
+                styledNode('begin', ['text_color_red']),
+                textNode(' '),
+                anchorNode('http://wiki.org', []),
+                textNode(' '),
+                styledNode('end', ['text_color_red'])]);
+        });
+
+        it('Styled URL between texts', function () {
+            this.model.write('begin' + format(31) + ' http://wiki.org ' + format(0) + 'end');
+
+            const lineElement = this.terminal.element.childNodes[0];
+
+            assertLine(lineElement, [
+                textNode('begin'),
+                styledComplexNode(['text_color_red'], [
+                    textNode(' '),
+                    anchorNode('http://wiki.org'),
+                    textNode(' ')
+                ]),
+                textNode('end')]);
+        });
+
+        it('Unstyled URL after styled text', function () {
+            this.model.write(format(31) + 'begin' + format(0) + ' http://wiki.org');
+
+            const lineElement = this.terminal.element.childNodes[0];
+
+            assertLine(lineElement, [
+                styledNode('begin', ['text_color_red']),
+                textNode(' '),
+                anchorNode('http://wiki.org')]);
+        });
+
+        it('Append multiple separated URLs', function () {
+            this.model.write('http://wiki.org, https://google.com,http://localhost:5000');
+
+            const lineElement = this.terminal.element.childNodes[0];
+
+            assertLine(lineElement, [
+                anchorNode('http://wiki.org'),
+                textNode(', '),
+                anchorNode('https://google.com'),
+                textNode(','),
+                anchorNode('http://localhost:5000')
+            ]);
+        });
+
+        it('Append complex URL', function () {
+            this.model.write('http://api.plos.org/search'
+                + '?q=title:%22Drosophila%22%20and%20body:%22RNA%22&fl=id');
+
+            const lineElement = this.terminal.element.childNodes[0];
+            assertLine(lineElement, [anchorNode(
+                'http://api.plos.org/search?q=title:%22Drosophila%22%20and%20body:%22RNA%22&fl=id')]);
+        });
+
+        it('Append colored URL', function () {
+            this.model.write(format(31) + 'https://google.com');
+
+            const lineElement = this.terminal.element.childNodes[0];
+
+            assertLine(lineElement, [anchorNode('https://google.com', ['text_color_red'])]);
+        });
+
+        it('Replace single line', function () {
+            this.model.write('some text');
+            this.model.write('\rHello world');
+
+            const lineElement = this.terminal.element.childNodes[0];
+            assertLine(lineElement, [textNode('Hello world')]);
+        });
+
+        it('Replace line beginning', function () {
+            this.model.write('some text\r');
+            this.model.write('1234');
+
+            const lineElement = this.terminal.element.childNodes[0];
+            assertLine(lineElement, [textNode('1234 text')]);
+        });
+
+        it('Replace normal and styled element with plain text', function () {
+            this.model.write('123 ' + format(31) + 'abc');
+            this.model.write(format(0) + '\r0987654');
+
+            const lineElement = this.terminal.element.childNodes[0];
+            assertLine(lineElement, [textNode('0987654')]);
+        });
+
+        it('Replace normal and styled element with mixed text', function () {
+            this.model.write('123 ' + format(31) + 'abc');
+            this.model.write('\r0' + format(0) + '98' + format(32) + '76' + format(42) + '54');
+
+            const lineElement = this.terminal.element.childNodes[0];
+            assertLine(lineElement, [
+                styledNode('0', ['text_color_red']),
+                textNode('98'),
+                styledNode('76', ['text_color_green']),
+                styledNode('54', ['text_color_green', 'background_green'])
+            ]);
+        });
+
+        it('Replace first line in multiline (complete)', function () {
+            this.model.write('line1\nline2\n');
+            this.model.write(moveCursorUp(2) + 'replacement');
+
+            assertLine(this.terminal.element.childNodes[0], [textNode('replacement')]);
+            assertLine(this.terminal.element.childNodes[1], [textNode('line2')])
+        });
+
+        it('Replace first line in multiline (middle)', function () {
+            this.model.write('line1\n12' + moveCursorUp(1) + 'X');
+
+            assertLine(this.terminal.element.childNodes[0], [textNode('liXe1')]);
+            assertLine(this.terminal.element.childNodes[1], [textNode('12')])
+        });
+
+        it('Replace several lines in multiline', function () {
+            this.model.write('line1\nline2\nline3\nline4\n');
+            this.model.write(moveCursorUp(4) + 'a\nb\nlong line\n');
+
+            assertTexts(['aine1', 'bine2', 'long line', 'line4'], this.terminal.element);
+        });
+
+        it('Replace at the line end', function () {
+            this.model.write('line1\nline2' + moveCursorUp(1) + '987');
+
+            assertTexts(['line1987', 'line2'], this.terminal.element);
+        });
+
+        it('Replace middle of Nth line', function () {
+            this.model.write('line1\n');
+            this.model.write('line2\n');
+            this.model.write('abc');
+            this.model.write('def');
+            this.model.write('ghi\n');
+            this.model.write('line4\n');
+            this.model.write(moveCursorUp(2) + '9876');
+
+            assertTexts(['line1', 'line2', '9876efghi', 'line4'], this.terminal.element);
+        });
+
+        it('Replace line multiple times', function () {
+            this.model.write('lineX');
+
+            for (var i = 0; i < 3; i++) {
+                this.model.write('\r' + i + 'abc');
+            }
+
+            assertTexts(['2abcX'], this.terminal.element);
+        });
+
+        it('CR LF has no effect', function () {
+            this.model.write('123\r\n456');
+
+            assertTexts(['123', '456'], this.terminal.element);
+        });
+
+        it('Replace empty line after multiple newlines', function () {
+            this.model.write('123\n\n\n\n456\r' + moveCursorUp(2) + 'abc');
+
+            assertTexts(['123', '', 'abc', '', '456'], this.terminal.element);
+        });
+
+    })
+});
\ No newline at end of file
diff --git a/web-src/webpack.common.js b/web-src/webpack.common.js
index 01b9cacb..9b85451f 100644
--- a/web-src/webpack.common.js
+++ b/web-src/webpack.common.js
@@ -70,7 +70,8 @@ module.exports = {
                         options: {
                             presets: [
                                 ['@babel/preset-env', {
-                                    'useBuiltIns': 'usage'
+                                    'useBuiltIns': 'usage',
+                                    'targets': '> 0.25%, not dead'
                                 }]
                             ],
                             babelrc: false
diff --git a/web-src/webpack.mutation.js b/web-src/webpack.mutation.js
new file mode 100644
index 00000000..53ab7c78
--- /dev/null
+++ b/web-src/webpack.mutation.js
@@ -0,0 +1,8 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    entry: {'test_entry': './tests/terminal_model_test.js'},
+    mode: 'development',
+    devtool: 'inline-source-map'
+});
\ No newline at end of file