feat: integrate SvelteKit for seamless navigation and improved data loading

frontend/src/components/TaskRunner.svelte

@@ -1,5 +1,5 @@
+<!-- [DEF:TaskRunner:Component] -->
 <!--
-[DEF:TaskRunner:Component]
 @SEMANTICS: task, runner, logs, websocket
 @PURPOSE: Connects to a WebSocket to display real-time logs for a running task.
 @LAYER: UI
@@ -9,19 +9,25 @@
 @EVENTS: None
 -->
 <script>
+    // [SECTION: IMPORTS]
     import { onMount, onDestroy } from 'svelte';
+    import { get } from 'svelte/store';
     import { selectedTask, taskLogs } from '../lib/stores.js';
+    // [/SECTION]
 
     let ws;
 
     // [DEF:onMount:Function]
-    // @PURPOSE: Initialize WebSocket connection for task logs.
+    /**
+     * @purpose Initialize WebSocket connection for task logs.
+     */
     onMount(() => {
-        if ($selectedTask) {
-            console.log(`[TaskRunner][Entry] Connecting to logs for task: ${$selectedTask.id}`);
+        const task = get(selectedTask);
+        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/${$selectedTask.id}`;
+            const wsUrl = `${protocol}//${window.location.host}/ws/logs/${task.id}`;
             ws = new WebSocket(wsUrl);
 
             ws.onopen = () => {
@@ -45,7 +51,9 @@
     // [/DEF:onMount]
 
     // [DEF:onDestroy:Function]
-    // @PURPOSE: Close WebSocket connection when the component is destroyed.
+    /**
+     * @purpose Close WebSocket connection when the component is destroyed.
+     */
     onDestroy(() => {
         if (ws) {
             console.log("[TaskRunner][Action] Closing WebSocket connection.");
@@ -55,6 +63,7 @@
     // [/DEF:onDestroy]
 </script>
 
+<!-- [SECTION: TEMPLATE] -->
 <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>
@@ -71,4 +80,6 @@
         <p>No task selected.</p>
     {/if}
 </div>
-<!-- [/DEF:TaskRunner] -->
+<!-- [/SECTION] -->
+
+<!-- [/DEF:TaskRunner] -->