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/DynamicForm.svelte

@@ -1,56 +1,79 @@
-<script>
-    import { createEventDispatcher } from 'svelte';
-
-    export let schema;
-    let formData = {};
-
-    const dispatch = createEventDispatcher();
-
-    function handleSubmit() {
-        dispatch('submit', formData);
-    }
-
-    // Initialize form data with default values from the schema
-    if (schema && schema.properties) {
-        for (const key in schema.properties) {
-            formData[key] = schema.properties[key].default || '';
-        }
-    }
-</script>
-
-<form on:submit|preventDefault={handleSubmit} class="space-y-4">
-    {#if schema && schema.properties}
-        {#each Object.entries(schema.properties) as [key, prop]}
-            <div class="flex flex-col">
-                <label for={key} class="mb-1 font-semibold text-gray-700">{prop.title || key}</label>
-                {#if prop.type === 'string'}
-                    <input
-                        type="text"
-                        id={key}
-                        bind:value={formData[key]}
-                        placeholder={prop.description || ''}
-                        class="p-2 border rounded-md"
-                    />
-                {:else if prop.type === 'number' || prop.type === 'integer'}
-                    <input
-                        type="number"
-                        id={key}
-                        bind:value={formData[key]}
-                        placeholder={prop.description || ''}
-                        class="p-2 border rounded-md"
-                    />
-                {:else if prop.type === 'boolean'}
-                    <input
-                        type="checkbox"
-                        id={key}
-                        bind:checked={formData[key]}
-                        class="h-5 w-5"
-                    />
-                {/if}
-            </div>
-        {/each}
-        <button type="submit" class="w-full bg-green-500 text-white p-2 rounded-md hover:bg-green-600">
-            Run Task
-        </button>
-    {/if}
-</form>
+<!--
+[DEF:DynamicForm:Component]
+@SEMANTICS: form, schema, dynamic, json-schema
+@PURPOSE: Generates a form dynamically based on a JSON schema.
+@LAYER: UI
+@RELATION: DEPENDS_ON -> svelte:createEventDispatcher
+
+@PROPS:
+- schema: Object - JSON schema for the form.
+@EVENTS:
+- submit: Object - Dispatched when the form is submitted, containing the form data.
+-->
+<script>
+    import { createEventDispatcher } from 'svelte';
+
+    export let schema;
+    let formData = {};
+
+    const dispatch = createEventDispatcher();
+
+    // [DEF:handleSubmit:Function]
+    // @PURPOSE: Dispatches the submit event with the form data.
+    function handleSubmit() {
+        console.log("[DynamicForm][Action] Submitting form data.", { formData });
+        dispatch('submit', formData);
+    }
+    // [/DEF:handleSubmit]
+
+    // [DEF:initializeForm:Function]
+    // @PURPOSE: Initialize form data with default values from the schema.
+    function initializeForm() {
+        if (schema && schema.properties) {
+            for (const key in schema.properties) {
+                formData[key] = schema.properties[key].default || '';
+            }
+        }
+    }
+    // [/DEF:initializeForm]
+
+    initializeForm();
+</script>
+
+<form on:submit|preventDefault={handleSubmit} class="space-y-4">
+    {#if schema && schema.properties}
+        {#each Object.entries(schema.properties) as [key, prop]}
+            <div class="flex flex-col">
+                <label for={key} class="mb-1 font-semibold text-gray-700">{prop.title || key}</label>
+                {#if prop.type === 'string'}
+                    <input
+                        type="text"
+                        id={key}
+                        bind:value={formData[key]}
+                        placeholder={prop.description || ''}
+                        class="p-2 border rounded-md"
+                    />
+                {:else if prop.type === 'number' || prop.type === 'integer'}
+                    <input
+                        type="number"
+                        id={key}
+                        bind:value={formData[key]}
+                        placeholder={prop.description || ''}
+                        class="p-2 border rounded-md"
+                    />
+                {:else if prop.type === 'boolean'}
+                    <input
+                        type="checkbox"
+                        id={key}
+                        bind:checked={formData[key]}
+                        class="h-5 w-5"
+                    />
+                {/if}
+            </div>
+        {/each}
+        <button type="submit" class="w-full bg-green-500 text-white p-2 rounded-md hover:bg-green-600">
+            Run Task
+        </button>
+    {/if}
+</form>
+<!-- [/DEF:DynamicForm] -->