WIP: Staged all changes

frontend/src/components/TaskRunner.svelte

@@ -0,0 +1,54 @@
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { selectedTask, taskLogs } from '../lib/stores.js';
+
+    let ws;
+
+    onMount(() => {
+        if ($selectedTask) {
+            taskLogs.set([]); // Clear previous logs
+            const wsUrl = `ws://localhost:8000/ws/logs/${$selectedTask.id}`;
+            ws = new WebSocket(wsUrl);
+
+            ws.onopen = () => {
+                console.log('WebSocket connection established');
+            };
+
+            ws.onmessage = (event) => {
+                const logEntry = JSON.parse(event.data);
+                taskLogs.update(logs => [...logs, logEntry]);
+            };
+
+            ws.onerror = (error) => {
+                console.error('WebSocket error:', error);
+            };
+
+            ws.onclose = () => {
+                console.log('WebSocket connection closed');
+            };
+        }
+    });
+
+    onDestroy(() => {
+        if (ws) {
+            ws.close();
+        }
+    });
+</script>
+
+<div class="p-4 border rounded-lg bg-white shadow-md">
+    {#if $selectedTask}
+        <h2 class="text-xl font-semibold mb-2">Task: {$selectedTask.plugin_id}</h2>
+        <div class="bg-gray-900 text-white font-mono text-sm p-4 rounded-md h-96 overflow-y-auto">
+            {#each $taskLogs as log}
+                <div>
+                    <span class="text-gray-400">{new Date(log.timestamp).toLocaleTimeString()}</span>
+                    <span class="{log.level === 'ERROR' ? 'text-red-500' : 'text-green-400'}">[{log.level}]</span>
+                    <span>{log.message}</span>
+                </div>
+            {/each}
+        </div>
+    {:else}
+        <p>No task selected.</p>
+    {/if}
+</div>