I think I have both sides synchronized well

src/main/main.ts

@@ -137,20 +137,23 @@ const startListeningToServerLog = async () => {
   const logFile = path.join(server_dir, 'local_server.log');
   let tail = new Tail(logFile);
 
-  let currentlyWatching = false;
+  let currentlySubscribed = false;
 
   ipcMain.on('serverLog:startListening', async (event) => {
+    console.log('main.js: start listening');
     event.reply('serverLog:update', '**starting to listen to the log**');
 
     console.log('logFile', logFile);
 
-    if (currentlyWatching) {
+    console.log(tail);
+
+    if (currentlySubscribed) {
       console.log('already watching');
       return;
     }
 
-    currentlyWatching = true;
-    tail.watch();
+    currentlySubscribed = true;
+    // tail.watch();
 
     tail.on('line', function (data) {
       // console.log(data);
@@ -163,9 +166,10 @@ const startListeningToServerLog = async () => {
   });
 
   ipcMain.on('serverLog:stopListening', async (event) => {
-    console.log('stopping listening');
+    console.log('main.js: stopping listening');
+    event.reply('serverLog:update', '**Stopping listening to the log**');
     tail.unwatch();
-    currentlyWatching = false;
+    currentlySubscribed = false;
   });
 };
 

src/renderer/components/Connect/LogViewer.tsx

 import { Sheet } from '@mui/joy';
-import React, { useState, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
+
+import 'xterm/css/xterm.css';
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+
+export default function LogViewer({}) {
+  const terminalRef = useRef(null);
+
+  let term: Terminal | null = null;
 
-const BlankPage: React.FC = () => {
   useEffect(() => {
     async function fetchData() {
-      await window.electron.ipcRenderer.sendMessage('serverLog:startListening');
+      setTimeout(() => {
+        window.electron.ipcRenderer.sendMessage('serverLog:startListening');
+      }, 1500);
       window.electron.ipcRenderer.removeAllListeners('serverLog:onUpdate');
       window.electron.ipcRenderer.on('serverLog:update', (data: any) => {
         // append data to the log-viewer div
-        const logViewer = document.getElementById('log-viewer');
-        if (logViewer) {
-          logViewer.innerHTML += `${data}\n`;
+        if (term != null) {
+          term.writeln(`${data}`);
         }
       });
     }
+
+    if (term != null) {
+      term.dispose;
+    } else {
+      term = new Terminal();
+      const fitAddon = new FitAddon();
+      term.loadAddon(fitAddon);
+
+      term.open(terminalRef.current);
+      fitAddon.fit();
+    }
+
     fetchData();
 
     return () => {
@@ -22,6 +43,7 @@ const BlankPage: React.FC = () => {
       window.electron.ipcRenderer.removeAllListeners(
         'serverLog:startListening'
       );
+      window.electron.ipcRenderer.removeAllListeners('serverLog:onUpdate');
     };
   }, []);
 
@@ -30,13 +52,11 @@ const BlankPage: React.FC = () => {
       sx={{
         height: '100%',
         overflow: 'auto',
-        backgroundColor: '#222',
-        color: 'white',
+        // backgroundColor: '#222',
+        // color: 'white',
       }}
-    >
-      <pre id="log-viewer" style={{ whiteSpace: 'pre-wrap' }}></pre>
-    </Sheet>
+      ref={terminalRef}
+    ></Sheet>
   );
 };
 
-export default BlankPage;