feat: integrate SvelteKit for seamless navigation and improved data loading

frontend/src/routes/+error.svelte

@@ -0,0 +1,11 @@
+<script>
+    import { page } from '$app/stores';
+</script>
+
+<div class="container mx-auto p-4 text-center mt-20">
+    <h1 class="text-6xl font-bold text-gray-800 mb-4">{$page.status}</h1>
+    <p class="text-2xl text-gray-600 mb-8">{$page.error?.message || 'Page not found'}</p>
+    <a href="/" class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition-colors">
+        Back to Dashboard
+    </a>
+</div>

frontend/src/routes/+layout.svelte

@@ -0,0 +1,17 @@
+<script>
+    import Navbar from '../components/Navbar.svelte';
+    import Footer from '../components/Footer.svelte';
+    import Toast from '../components/Toast.svelte';
+</script>
+
+<Toast />
+
+<main class="bg-gray-50 min-h-screen flex flex-col">
+    <Navbar />
+
+    <div class="p-4 flex-grow">
+        <slot />
+    </div>
+
+    <Footer />
+</main>

frontend/src/routes/+layout.ts

@@ -0,0 +1,2 @@
+export const ssr = false;
+export const prerender = false;

frontend/src/routes/+page.svelte

@@ -0,0 +1,71 @@
+<script>
+    import { plugins as pluginsStore, selectedPlugin, selectedTask } from '../lib/stores.js';
+    import TaskRunner from '../components/TaskRunner.svelte';
+    import DynamicForm from '../components/DynamicForm.svelte';
+    import { api } from '../lib/api.js';
+    import { get } from 'svelte/store';
+
+    /** @type {import('./$types').PageData} */
+    export let data;
+
+    // Sync store with loaded data if needed, or just use data.plugins directly
+    $: if (data.plugins) {
+        pluginsStore.set(data.plugins);
+    }
+
+    function selectPlugin(plugin) {
+        console.log(`[Dashboard][Action] Selecting plugin: ${plugin.id}`);
+        selectedPlugin.set(plugin);
+    }
+
+    async function handleFormSubmit(event) {
+        console.log("[App.handleFormSubmit][Action] Handling form submission for task creation.");
+        const params = event.detail;
+        try {
+            const plugin = get(selectedPlugin);
+            const task = await api.createTask(plugin.id, params);
+            selectedTask.set(task);
+            selectedPlugin.set(null);
+            console.log(`[App.handleFormSubmit][Coherence:OK] Task created id=${task.id}`);
+        } catch (error) {
+            console.error(`[App.handleFormSubmit][Coherence:Failed] Task creation failed error=${error}`);
+        }
+    }
+</script>
+
+<div class="container mx-auto p-4">
+    {#if $selectedTask}
+        <TaskRunner />
+        <button on:click={() => selectedTask.set(null)} class="mt-4 bg-blue-500 text-white p-2 rounded">
+            Back to Task List
+        </button>
+    {:else if $selectedPlugin}
+        <h2 class="text-2xl font-bold mb-4">{$selectedPlugin.name}</h2>
+        <DynamicForm schema={$selectedPlugin.schema} on:submit={handleFormSubmit} />
+        <button on:click={() => selectedPlugin.set(null)} class="mt-4 bg-gray-500 text-white p-2 rounded">
+            Back to Dashboard
+        </button>
+    {:else}
+        <h1 class="text-2xl font-bold mb-4">Available Tools</h1>
+        {#if data.error}
+            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+                {data.error}
+            </div>
+        {/if}
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {#each data.plugins as plugin}
+                <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>
+                    <span class="text-sm text-gray-400">v{plugin.version}</span>
+                </div>
+            {/each}
+        </div>
+    {/if}
+</div>

frontend/src/routes/+page.ts

@@ -0,0 +1,17 @@
+import { api } from '../lib/api';
+
+/** @type {import('./$types').PageLoad} */
+export async function load() {
+    try {
+        const plugins = await api.getPlugins();
+        return {
+            plugins
+        };
+    } catch (error) {
+        console.error('Failed to load plugins:', error);
+        return {
+            plugins: [],
+            error: 'Failed to load plugins'
+        };
+    }
+}

frontend/src/routes/settings/+page.svelte

@@ -0,0 +1,209 @@
+<script>
+    import { onMount } from 'svelte';
+    import { updateGlobalSettings, addEnvironment, updateEnvironment, deleteEnvironment, testEnvironmentConnection } from '../../lib/api';
+    import { addToast } from '../../lib/toasts';
+
+    /** @type {import('./$types').PageData} */
+    export let data;
+
+    let settings = data.settings;
+
+    $: settings = data.settings;
+
+    let newEnv = {
+        id: '',
+        name: '',
+        url: '',
+        username: '',
+        password: '',
+        is_default: false
+    };
+
+    let editingEnvId = null;
+
+    async function handleSaveGlobal() {
+        try {
+            console.log("[Settings.handleSaveGlobal][Action] Saving global settings.");
+            await updateGlobalSettings(settings.settings);
+            addToast('Global settings saved', 'success');
+            console.log("[Settings.handleSaveGlobal][Coherence:OK] Global settings saved.");
+        } catch (error) {
+            console.error("[Settings.handleSaveGlobal][Coherence:Failed] Failed to save global settings:", error);
+            addToast('Failed to save global settings', 'error');
+        }
+    }
+
+    async function handleAddOrUpdateEnv() {
+        try {
+            console.log(`[Settings.handleAddOrUpdateEnv][Action] ${editingEnvId ? 'Updating' : 'Adding'} environment.`);
+            if (editingEnvId) {
+                await updateEnvironment(editingEnvId, newEnv);
+                addToast('Environment updated', 'success');
+            } else {
+                await addEnvironment(newEnv);
+                addToast('Environment added', 'success');
+            }
+            resetEnvForm();
+            // In a real app, we might want to invalidate the load function here
+            // For now, we'll just manually update the local state or re-fetch
+            // But since we are using SvelteKit, we should ideally use invalidateAll()
+            location.reload(); // Simple way to refresh data for now
+            console.log("[Settings.handleAddOrUpdateEnv][Coherence:OK] Environment saved.");
+        } catch (error) {
+            console.error("[Settings.handleAddOrUpdateEnv][Coherence:Failed] Failed to save environment:", error);
+            addToast('Failed to save environment', 'error');
+        }
+    }
+
+    async function handleDeleteEnv(id) {
+        if (confirm('Are you sure you want to delete this environment?')) {
+            try {
+                console.log(`[Settings.handleDeleteEnv][Action] Deleting environment: ${id}`);
+                await deleteEnvironment(id);
+                addToast('Environment deleted', 'success');
+                location.reload();
+                console.log("[Settings.handleDeleteEnv][Coherence:OK] Environment deleted.");
+            } catch (error) {
+                console.error("[Settings.handleDeleteEnv][Coherence:Failed] Failed to delete environment:", error);
+                addToast('Failed to delete environment', 'error');
+            }
+        }
+    }
+
+    async function handleTestEnv(id) {
+        try {
+            console.log(`[Settings.handleTestEnv][Action] Testing environment: ${id}`);
+            const result = await testEnvironmentConnection(id);
+            if (result.status === 'success') {
+                addToast('Connection successful', 'success');
+                console.log("[Settings.handleTestEnv][Coherence:OK] Connection successful.");
+            } else {
+                addToast(`Connection failed: ${result.message}`, 'error');
+                console.log("[Settings.handleTestEnv][Coherence:Failed] Connection failed.");
+            }
+        } catch (error) {
+            console.error("[Settings.handleTestEnv][Coherence:Failed] Error testing connection:", error);
+            addToast('Failed to test connection', 'error');
+        }
+    }
+
+    function editEnv(env) {
+        newEnv = { ...env };
+        editingEnvId = env.id;
+    }
+
+    function resetEnvForm() {
+        newEnv = {
+            id: '',
+            name: '',
+            url: '',
+            username: '',
+            password: '',
+            is_default: false
+        };
+        editingEnvId = null;
+    }
+</script>
+
+<div class="container mx-auto p-4">
+    <h1 class="text-2xl font-bold mb-6">Settings</h1>
+
+    {#if data.error}
+        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+            {data.error}
+        </div>
+    {/if}
+
+    <section class="mb-8 bg-white p-6 rounded shadow">
+        <h2 class="text-xl font-semibold mb-4">Global Settings</h2>
+        <div class="grid grid-cols-1 gap-4">
+            <div>
+                <label for="backup_path" class="block text-sm font-medium text-gray-700">Backup Storage Path</label>
+                <input type="text" id="backup_path" bind:value={settings.settings.backup_path} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
+            </div>
+            <button on:click={handleSaveGlobal} class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-max">
+                Save Global Settings
+            </button>
+        </div>
+    </section>
+
+    <section class="mb-8 bg-white p-6 rounded shadow">
+        <h2 class="text-xl font-semibold mb-4">Superset Environments</h2>
+
+        {#if settings.environments.length === 0}
+            <div class="mb-4 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700">
+                <p class="font-bold">Warning</p>
+                <p>No Superset environments configured. You must add at least one environment to perform backups or migrations.</p>
+            </div>
+        {/if}
+        
+        <div class="mb-6 overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                    <tr>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">URL</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Username</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Default</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                    {#each settings.environments as env}
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">{env.name}</td>
+                            <td class="px-6 py-4 whitespace-nowrap">{env.url}</td>
+                            <td class="px-6 py-4 whitespace-nowrap">{env.username}</td>
+                            <td class="px-6 py-4 whitespace-nowrap">{env.is_default ? 'Yes' : 'No'}</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <button on:click={() => handleTestEnv(env.id)} class="text-green-600 hover:text-green-900 mr-4">Test</button>
+                                <button on:click={() => editEnv(env)} class="text-indigo-600 hover:text-indigo-900 mr-4">Edit</button>
+                                <button on:click={() => handleDeleteEnv(env.id)} class="text-red-600 hover:text-red-900">Delete</button>
+                            </td>
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </div>
+
+        <div class="bg-gray-50 p-4 rounded">
+            <h3 class="text-lg font-medium mb-4">{editingEnvId ? 'Edit' : 'Add'} Environment</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                    <label for="env_id" class="block text-sm font-medium text-gray-700">ID</label>
+                    <input type="text" id="env_id" bind:value={newEnv.id} disabled={!!editingEnvId} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
+                </div>
+                <div>
+                    <label for="env_name" class="block text-sm font-medium text-gray-700">Name</label>
+                    <input type="text" id="env_name" bind:value={newEnv.name} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
+                </div>
+                <div>
+                    <label for="env_url" class="block text-sm font-medium text-gray-700">URL</label>
+                    <input type="text" id="env_url" bind:value={newEnv.url} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
+                </div>
+                <div>
+                    <label for="env_user" class="block text-sm font-medium text-gray-700">Username</label>
+                    <input type="text" id="env_user" bind:value={newEnv.username} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
+                </div>
+                <div>
+                    <label for="env_pass" class="block text-sm font-medium text-gray-700">Password</label>
+                    <input type="password" id="env_pass" bind:value={newEnv.password} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
+                </div>
+                <div class="flex items-center">
+                    <input type="checkbox" id="env_default" bind:checked={newEnv.is_default} class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
+                    <label for="env_default" class="ml-2 block text-sm text-gray-900">Default Environment</label>
+                </div>
+            </div>
+            <div class="mt-4 flex gap-2">
+                <button on:click={handleAddOrUpdateEnv} class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
+                    {editingEnvId ? 'Update' : 'Add'} Environment
+                </button>
+                {#if editingEnvId}
+                    <button on:click={resetEnvForm} class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
+                        Cancel
+                    </button>
+                {/if}
+            </div>
+        </div>
+    </section>
+</div>

frontend/src/routes/settings/+page.ts

@@ -0,0 +1,23 @@
+import { api } from '../../lib/api';
+
+/** @type {import('./$types').PageLoad} */
+export async function load() {
+    try {
+        const settings = await api.getSettings();
+        return {
+            settings
+        };
+    } catch (error) {
+        console.error('Failed to load settings:', error);
+        return {
+            settings: {
+                environments: [],
+                settings: {
+                    backup_path: '',
+                    default_environment_id: null
+                }
+            },
+            error: 'Failed to load settings'
+        };
+    }
+}