feat: integrate SvelteKit for seamless navigation and improved data loading

frontend/src/pages/Dashboard.svelte

@@ -1,5 +1,5 @@
+<!-- [DEF:Dashboard:Component] -->
 <!--
-[DEF:Dashboard:Component]
 @SEMANTICS: dashboard, plugins, tools, list
 @PURPOSE: Displays the list of available plugins and allows selecting one.
 @LAYER: UI
@@ -9,11 +9,15 @@
 @EVENTS: None
 -->
 <script>
+    // [SECTION: IMPORTS]
     import { onMount } from 'svelte';
     import { plugins, fetchPlugins, selectedPlugin } from '../lib/stores.js';
+    // [/SECTION]
 
     // [DEF:onMount:Function]
-    // @PURPOSE: Fetch plugins when the component mounts.
+    /**
+     * @purpose Fetch plugins when the component mounts.
+     */
     onMount(async () => {
         console.log("[Dashboard][Entry] Component mounted, fetching plugins.");
         await fetchPlugins();
@@ -21,8 +25,10 @@
     // [/DEF:onMount]
 
     // [DEF:selectPlugin:Function]
-    // @PURPOSE: Selects a plugin to display its form.
-    // @PARAM: plugin (Object) - The plugin object to select.
+    /**
+     * @purpose Selects a plugin to display its form.
+     * @param {Object} plugin - The plugin object to select.
+     */
     function selectPlugin(plugin) {
         console.log(`[Dashboard][Action] Selecting plugin: ${plugin.id}`);
         selectedPlugin.set(plugin);
@@ -30,6 +36,7 @@
     // [/DEF:selectPlugin]
 </script>
 
+<!-- [SECTION: TEMPLATE] -->
 <div class="container mx-auto p-4">
     <h1 class="text-2xl font-bold mb-4">Available Tools</h1>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -37,6 +44,9 @@
             <div 
                 class="border rounded-lg p-4 cursor-pointer hover:bg-gray-100"
                 on:click={() => selectPlugin(plugin)}
+                role="button"
+                tabindex="0"
+                on:keydown={(e) => e.key === 'Enter' && selectPlugin(plugin)}
             >
                 <h2 class="text-xl font-semibold">{plugin.name}</h2>
                 <p class="text-gray-600">{plugin.description}</p>
@@ -45,4 +55,6 @@
         {/each}
     </div>
 </div>
-<!-- [/DEF:Dashboard] -->
+<!-- [/SECTION] -->
+
+<!-- [/DEF:Dashboard] -->