feat: add backend logs window to electron

Author: maximka76667

electron-app/main.js

@@ -4,13 +4,14 @@
  * Handles application lifecycle, initialization, and cleanup of processes and windows.
  */
 
-import { app, BrowserWindow, dialog } from "electron";
+import { app, BrowserWindow, dialog, screen } from "electron";
 import pkg from "electron-updater";
 import { getConfigManager } from "./src/config/configInstance.js";
 import { setupIpcHandlers } from "./src/ipc/handlers.js";
 import { startBackend, stopBackend } from "./src/processes/backend.js";
 import { stopPacketSender } from "./src/processes/packetSender.js";
 import { logger } from "./src/utils/logger.js";
+import { createLogWindow } from "./src/windows/logWindow.js";
 import { createWindow } from "./src/windows/mainWindow.js";
 
 const { autoUpdater } = pkg;
@@ -38,23 +39,32 @@ app.setName("hyperloop-control-station");
 
 // App lifecycle: wait for Electron to be ready
 app.whenReady().then(async () => {
+  // Get the screen width and height
+  // Only can be used inside app.whenReady()
+  const { width: screenWidth, height: screenHeight } =
+    screen.getPrimaryDisplay().workAreaSize;
+
   // Initialize ConfigManager and ensure config exists BEFORE starting backend
   logger.electron.header("Initializing configuration...");
   // Get ConfigManager instance (creates config from template if needed)
   await getConfigManager();
   logger.electron.header("Configuration ready");
 
+  const logWindow = createLogWindow(screenWidth, screenHeight);
+
   // Start backend process
   try {
-    await startBackend();
+    await startBackend(logWindow);
     logger.electron.header("Backend process spawned");
   } catch (error) {
     // Start backend already shows these errors
     return;
   }
 
   // Create main application window
-  createWindow();
+  const mainWindow = createWindow(screenWidth, screenHeight);
+  mainWindow.maximize();
+
   logger.electron.header("Main application window created");
 
   // Updater setup

electron-app/package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@iarna/toml": "^2.2.5",
+    "ansi-to-html": "^0.7.2",
     "electron-store": "^11.0.2",
     "electron-updater": "^6.7.3",
     "picocolors": "^1.1.1"

electron-app/preload.js

@@ -36,4 +36,7 @@ contextBridge.exposeInMainWorld("electronAPI", {
   importConfig: () => ipcRenderer.invoke("import-config"),
   // Open folder selection dialog
   selectFolder: () => ipcRenderer.invoke("select-folder"),
+  // Receive log message from backend
+  onLog: (callback) =>
+    ipcRenderer.on("log", (_event, value) => callback(value)),
 });

electron-app/src/processes/backend.js

@@ -4,6 +4,7 @@
  * Handles starting, stopping, and restarting the backend process with proper error handling and logging.
  */
 
+import AnsiToHtml from "ansi-to-html";
 import { spawn } from "child_process";
 import { app, dialog } from "electron";
 import fs from "fs";
@@ -15,6 +16,9 @@ import {
   getUserConfigPath,
 } from "../utils/paths.js";
 
+// Create ANSI to HTML converter
+const convert = new AnsiToHtml();
+
 // Get the application root path
 const appPath = getAppPath();
 
@@ -30,7 +34,7 @@ let lastBackendError = null;
  * @example
  * startBackend();
  */
-function startBackend() {
+function startBackend(logWindow = null) {
   return new Promise((resolve, reject) => {
     // Get paths for binary and config
     const backendBin = getBinaryPath("backend");
@@ -63,6 +67,12 @@ function startBackend() {
     // Log stdout output from backend
     backendProcess.stdout.on("data", (data) => {
       logger.backend.info(`${data.toString().trim()}`);
+
+      // Send log message to log window
+      if (logWindow) {
+        const htmlData = convert.toHtml(data.toString().trim());
+        logWindow.webContents.send("log", htmlData);
+      }
     });
 
     // Capture stderr output (where Go errors/panics are written)
@@ -71,6 +81,12 @@ function startBackend() {
       logger.backend.error(errorMsg);
       // Store the last error message
       lastBackendError = errorMsg;
+
+      // Send error message to log window
+      if (logWindow) {
+        const htmlError = convert.toHtml(errorMsg);
+        logWindow.webContents.send("log", htmlError);
+      }
     });
 
     // Handle spawn errors
@@ -120,8 +136,20 @@ function stopBackend() {
   // Only stop if process exists and is still running
   if (backendProcess && !backendProcess.killed) {
     logger.backend.info("Stopping backend...");
-    // Send termination signal
-    backendProcess.kill("SIGTERM");
+
+    backendProcess.stdin.end();
+
+    const fallbackTimer = setTimeout(() => {
+      if (backendProcess && !backendProcess.killed) {
+        logger.backend.warning(
+          "Backend did not exit gracefully, force killing..."
+        );
+        backendProcess.kill("SIGKILL");
+      }
+    }, 2000);
+
+    fallbackTimer.unref();
+
     // Clear the process reference
     backendProcess = null;
   }

electron-app/src/windows/logWindow.js

@@ -0,0 +1,26 @@
+import { BrowserWindow } from "electron";
+import path from "path";
+
+import { getAppPath } from "../utils/paths.js";
+
+// Get the application root path
+const appPath = getAppPath();
+
+export const createLogWindow = (screenWidth, screenHeight) => {
+  const logWindow = new BrowserWindow({
+    x: Math.floor(screenWidth * 0.65),
+    y: 0,
+    width: Math.floor(screenWidth * 0.35),
+    height: screenHeight,
+    title: "Backend Logs",
+    webPreferences: {
+      preload: path.join(appPath, "preload.js"),
+      contextIsolation: true,
+      nodeIntegration: false,
+    },
+  });
+
+  logWindow.loadFile(path.join(appPath, "src/logs/logs.html"));
+
+  return logWindow;
+};

electron-app/src/windows/mainWindow.js

@@ -24,13 +24,15 @@ let currentView = "testing-view";
  * @example
  * createWindow();
  */
-function createWindow() {
+function createWindow(screenWidth, screenHeight) {
   // Create new browser window with configuration
   mainWindow = new BrowserWindow({
-    width: 1920,
-    height: 1080,
-    minWidth: 1280,
-    minHeight: 720,
+    x: 0,
+    y: 0,
+    width: screenWidth,
+    height: screenHeight,
+    minWidth: 800,
+    minHeight: 600,
     webPreferences: {
       // Path to preload script for secure IPC
       preload: path.join(appPath, "preload.js"),
@@ -60,6 +62,8 @@ function createWindow() {
   mainWindow.on("closed", () => {
     mainWindow = null;
   });
+
+  return mainWindow;
 }
 
 /**