fixed css

frontend/src/components/TaskRunner.svelte

@@ -13,6 +13,7 @@
     import { onMount, onDestroy } from 'svelte';
     import { get } from 'svelte/store';
     import { selectedTask, taskLogs } from '../lib/stores.js';
+    import { getWsUrl } from '../lib/api.js';
     // [/SECTION]
 
     let ws;
@@ -26,8 +27,7 @@
         if (task) {
             console.log(`[TaskRunner][Entry] Connecting to logs for task: ${task.id}`);
             taskLogs.set([]); // Clear previous logs
-            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-            const wsUrl = `${protocol}//${window.location.host}/ws/logs/${task.id}`;
+            const wsUrl = getWsUrl(task.id);
             ws = new WebSocket(wsUrl);
 
             ws.onopen = () => {

frontend/src/lib/api.js

@@ -4,9 +4,20 @@
 // @LAYER: Infra-API
 
 import { addToast } from './toasts.js';
+import { PUBLIC_WS_URL } from '$env/static/public';
 
 const API_BASE_URL = '/api';
 
+/**
+ * Returns the WebSocket URL for a specific task, with fallback logic.
+ * @param {string} taskId
+ * @returns {string}
+ */
+export const getWsUrl = (taskId) => {
+    const baseUrl = PUBLIC_WS_URL || `ws://${window.location.hostname}:8000`;
+    return `${baseUrl}/ws/logs/${taskId}`;
+};
+
 // [DEF:fetchApi:Function]
 // @PURPOSE: Generic GET request wrapper.
 // @PARAM: endpoint (string) - API endpoint.

frontend/src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 <script>
+    import '../app.css';
     import Navbar from '../components/Navbar.svelte';
     import Footer from '../components/Footer.svelte';
     import Toast from '../components/Toast.svelte';