feat: implement plugin architecture and application settings with Svelte UI

- Added plugin base and loader for backend extensibility
- Implemented application settings management with config persistence
- Created Svelte-based frontend with Dashboard and Settings pages
- Added API routes for plugins, tasks, and settings
- Updated documentation and specifications
- Improved project structure and developer tools

frontend/src/components/Toast.svelte

@@ -1,15 +1,26 @@
-<script>
-    import { toasts } from '../lib/toasts.js';
-</script>
-
-<div class="fixed bottom-0 right-0 p-4 space-y-2">
-    {#each $toasts as toast (toast.id)}
-        <div class="p-4 rounded-md shadow-lg text-white
-            {toast.type === 'info' && 'bg-blue-500'}
-            {toast.type === 'success' && 'bg-green-500'}
-            {toast.type === 'error' && 'bg-red-500'}
-        ">
-            {toast.message}
-        </div>
-    {/each}
-</div>
+<!--
+[DEF:Toast:Component]
+@SEMANTICS: toast, notification, feedback, ui
+@PURPOSE: Displays transient notifications (toasts) in the bottom-right corner.
+@LAYER: UI
+@RELATION: DEPENDS_ON -> frontend/src/lib/toasts.js
+
+@PROPS: None
+@EVENTS: None
+-->
+<script>
+    import { toasts } from '../lib/toasts.js';
+</script>
+
+<div class="fixed bottom-0 right-0 p-4 space-y-2">
+    {#each $toasts as toast (toast.id)}
+        <div class="p-4 rounded-md shadow-lg text-white
+            {toast.type === 'info' && 'bg-blue-500'}
+            {toast.type === 'success' && 'bg-green-500'}
+            {toast.type === 'error' && 'bg-red-500'}
+        ">
+            {toast.message}
+        </div>
+    {/each}
+</div>
+<!-- [/DEF:Toast] -->