linter + новые таски

frontend/src/routes/+layout.svelte

@@ -1,30 +1,52 @@
+<!-- [DEF:layout:Module] -->
 <script>
     import '../app.css';
     import Navbar from '../components/Navbar.svelte';
     import Footer from '../components/Footer.svelte';
     import Toast from '../components/Toast.svelte';
     import ProtectedRoute from '../components/auth/ProtectedRoute.svelte';
+    import Breadcrumbs from '$lib/components/layout/Breadcrumbs.svelte';
+    import Sidebar from '$lib/components/layout/Sidebar.svelte';
+    import TopNavbar from '$lib/components/layout/TopNavbar.svelte';
+    import TaskDrawer from '$lib/components/layout/TaskDrawer.svelte';
     import { page } from '$app/stores';
+    import { sidebarStore } from '$lib/stores/sidebar.js';
 
     $: isLoginPage = $page.url.pathname === '/login';
+    $: isExpanded = $sidebarStore?.isExpanded || true;
 </script>
 
 <Toast />
 
-<main class="bg-gray-50 min-h-screen flex flex-col">
+<main class="bg-gray-50 min-h-screen">
     {#if isLoginPage}
-        <div class="p-4 flex-grow">
+        <div class="p-4">
             <slot />
         </div>
     {:else}
         <ProtectedRoute>
-            <Navbar />
+            <!-- Sidebar -->
+            <Sidebar />
 
-            <div class="p-4 flex-grow">
-                <slot />
+            <!-- Main content area with TopNavbar -->
+            <div class="flex flex-col {isExpanded ? 'ml-60' : 'ml-16'} transition-all duration-200">
+                <!-- Top Navigation Bar -->
+                <TopNavbar />
+                <!-- Breadcrumbs -->
+                <Breadcrumbs />
+
+                <!-- Page content -->
+                <div class="p-4 pt-20">
+                    <slot />
+                </div>
+
+                <!-- Footer -->
+                <Footer />
             </div>
 
-            <Footer />
+            <!-- Global Task Drawer -->
+            <TaskDrawer />
         </ProtectedRoute>
     {/if}
 </main>
+<!-- [/DEF:layout:Module] -->

frontend/src/routes/+page.svelte

@@ -1,99 +1,35 @@
+<!-- [DEF:HomePage:Page] -->
 <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';
-    import { goto } from '$app/navigation';
-    import { t } from '$lib/i18n';
-    import { Button, Card, PageHeader } from '$lib/ui';
+  /**
+   * @TIER: CRITICAL
+   * @PURPOSE: Redirect to Dashboard Hub as per UX requirements
+   * @LAYER: UI
+   * @INVARIANT: Always redirects to /dashboards
+   * 
+   * @UX_STATE: Loading -> Shows loading indicator
+   * @UX_FEEDBACK: Redirects to /dashboards
+   */
 
-    /** @type {import('./$types').PageData} */
-    export let data;
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
 
-    // Sync store with loaded data if needed, or just use data.plugins directly
-    $: if (data.plugins) {
-        pluginsStore.set(data.plugins);
-    }
-
-    // [DEF:selectPlugin:Function]
-    /* @PURPOSE: Handles plugin selection and navigation.
-       @PRE: plugin object must be provided.
-       @POST: Navigates to migration or sets selectedPlugin store.
-    */
-    function selectPlugin(plugin) {
-        console.log(`[Dashboard][Action] Selecting plugin: ${plugin.id}`);
-        if (plugin.ui_route) {
-            goto(plugin.ui_route);
-        } else {
-            selectedPlugin.set(plugin);
-        }
-    }
-    // [/DEF:selectPlugin:Function]
-
-    // [DEF:handleFormSubmit:Function]
-    /* @PURPOSE: Handles task creation from dynamic form submission.
-       @PRE: event.detail must contain task parameters.
-       @POST: Task is created via API and selectedTask store is updated.
-    */
-    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}`);
-        }
-    }
-    // [/DEF:handleFormSubmit:Function]
+  onMount(() => {
+    // Redirect to Dashboard Hub as per UX requirements
+    goto('/dashboards', { replaceState: true });
+  });
 </script>
 
-<div class="container mx-auto p-4">
-    {#if $selectedTask}
-        <TaskRunner />
-        <div class="mt-4">
-            <Button variant="primary" on:click={() => selectedTask.set(null)}>
-                {$t.common.cancel}
-            </Button>
-        </div>
-    {:else if $selectedPlugin}
-        <PageHeader title={$selectedPlugin.name} />
-        <Card>
-            <DynamicForm schema={$selectedPlugin.schema} on:submit={handleFormSubmit} />
-        </Card>
-        <div class="mt-4">
-            <Button variant="secondary" on:click={() => selectedPlugin.set(null)}>
-                {$t.common.cancel}
-            </Button>
-        </div>
-    {:else}
-        <PageHeader title={$t.nav.dashboard} />
-        
-        {#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}
+<style>
+  .loading {
+    @apply flex items-center justify-center min-h-screen;
+  }
+</style>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {#each data.plugins.filter(p => p.id !== 'superset-search') as plugin}
-                <div
-                    on:click={() => selectPlugin(plugin)}
-                    role="button"
-                    tabindex="0"
-                    on:keydown={(e) => e.key === 'Enter' && selectPlugin(plugin)}
-                    class="cursor-pointer transition-transform hover:scale-[1.02]"
-                >
-                    <Card title={plugin.name}>
-                        <p class="text-gray-600 mb-4">{plugin.description}</p>
-                        <span class="text-xs font-mono text-gray-400 bg-gray-50 px-2 py-1 rounded">v{plugin.version}</span>
-                    </Card>
-                </div>
-            {/each}
-        </div>
-    {/if}
+<div class="loading">
+  <svg class="animate-spin h-8 w-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+  </svg>
 </div>
+
+<!-- [/DEF:HomePage:Page] -->

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

@@ -0,0 +1,376 @@
+<!-- [DEF:DatasetHub:Page] -->
+<script>
+  /**
+   * @TIER: CRITICAL
+   * @PURPOSE: Dataset Hub - Dedicated hub for datasets with mapping progress
+   * @LAYER: UI
+   * @RELATION: BINDS_TO -> sidebarStore, taskDrawerStore
+   * @INVARIANT: Always shows environment selector and dataset grid
+   * 
+   * @UX_STATE: Loading -> Shows skeleton loader
+   * @UX_STATE: Loaded -> Shows dataset grid with mapping progress
+   * @UX_STATE: Error -> Shows error banner with retry button
+   * @UX_FEEDBACK: Clicking task status opens Task Drawer
+   * @UX_RECOVERY: Refresh button reloads dataset list
+   */
+
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { t } from '$lib/i18n';
+  import { openDrawerForTask } from '$lib/stores/taskDrawer.js';
+  import { api } from '$lib/api.js';
+
+  // State
+  let selectedEnv = null;
+  let datasets = [];
+  let isLoading = true;
+  let error = null;
+
+  // Load environments and datasets on mount
+  onMount(async () => {
+    await loadEnvironments();
+    await loadDatasets();
+  });
+
+  // Load environments from API
+  async function loadEnvironments() {
+    try {
+      const response = await api.getEnvironments();
+      environments = response;
+      // Set first environment as default if no selection
+      if (environments.length > 0 && !selectedEnv) {
+        selectedEnv = environments[0].id;
+      }
+    } catch (err) {
+      console.error('[DatasetHub][Coherence:Failed] Failed to load environments:', err);
+      // Use fallback environments if API fails
+      environments = [
+        { id: 'development', name: 'Development' },
+        { id: 'staging', name: 'Staging' },
+        { id: 'production', name: 'Production' }
+      ];
+    }
+  }
+
+  // Load datasets from API
+  async function loadDatasets() {
+    if (!selectedEnv) return;
+    
+    isLoading = true;
+    error = null;
+    try {
+      const response = await api.getDatasets(selectedEnv);
+      datasets = response.datasets.map(d => ({
+        id: d.id,
+        table_name: d.table_name,
+        schema: d.schema,
+        database: d.database,
+        mappedFields: d.mapped_fields ? {
+          total: d.mapped_fields.total,
+          mapped: d.mapped_fields.mapped
+        } : null,
+        lastTask: d.last_task ? {
+          status: d.last_task.status?.toLowerCase() || null,
+          id: d.last_task.task_id
+        } : null,
+        actions: ['map_columns'] // All datasets have map columns option
+      }));
+    } catch (err) {
+      error = err.message || 'Failed to load datasets';
+      console.error('[DatasetHub][Coherence:Failed]', err);
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  // Handle environment change
+  function handleEnvChange(event) {
+    selectedEnv = event.target.value;
+    loadDatasets();
+  }
+
+  // Handle action click
+  function handleAction(dataset, action) {
+    console.log(`[DatasetHub][Action] ${action} on dataset ${dataset.table_name}`);
+    if (action === 'map_columns') {
+      // Navigate to mapping interface
+      goto(`/mapper?dataset_id=${dataset.id}`);
+    }
+  }
+
+  // Handle task status click - open Task Drawer
+  function handleTaskStatusClick(dataset) {
+    if (dataset.lastTask?.id) {
+      console.log(`[DatasetHub][Action] Open task drawer for task ${dataset.lastTask.id}`);
+      openDrawerForTask(dataset.lastTask.id);
+    }
+  }
+
+  // Get task status icon
+  function getTaskStatusIcon(status) {
+    if (!status) return '';
+    switch (status.toLowerCase()) {
+      case 'running':
+        return '<svg class="animate-spin" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/></svg>';
+      case 'success':
+        return '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>';
+      case 'error':
+        return '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>';
+      case 'waiting_input':
+        return '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>';
+      default:
+        return '';
+    }
+  }
+
+  // Get mapping progress bar class
+  function getMappingProgressClass(mapped, total) {
+    if (!mapped || !total) return 'bg-gray-200';
+    const percentage = (mapped / total) * 100;
+    if (percentage === 100) {
+      return 'bg-green-500';
+    } else if (percentage >= 50) {
+      return 'bg-yellow-400';
+    } else {
+      return 'bg-blue-400';
+    }
+  }
+</script>
+
+<style>
+  .container {
+    @apply max-w-7xl mx-auto px-4 py-6;
+  }
+
+  .header {
+    @apply flex items-center justify-between mb-6;
+  }
+
+  .title {
+    @apply text-2xl font-bold text-gray-900;
+  }
+
+  .env-selector {
+    @apply flex items-center space-x-4;
+  }
+
+  .env-dropdown {
+    @apply px-4 py-2 border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500;
+  }
+
+  .refresh-btn {
+    @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors;
+  }
+
+  .error-banner {
+    @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4 flex items-center justify-between;
+  }
+
+  .retry-btn {
+    @apply px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors;
+  }
+
+  .dataset-grid {
+    @apply bg-white border border-gray-200 rounded-lg overflow-hidden;
+  }
+
+  .grid-header {
+    @apply grid grid-cols-12 gap-4 px-6 py-3 bg-gray-50 border-b border-gray-200 font-semibold text-sm text-gray-700;
+  }
+
+  .grid-row {
+    @apply grid grid-cols-12 gap-4 px-6 py-4 border-b border-gray-200 hover:bg-gray-50 transition-colors;
+  }
+
+  .grid-row:last-child {
+    @apply border-b-0;
+  }
+
+  .col-table-name {
+    @apply col-span-3 font-medium text-gray-900;
+  }
+
+  .col-schema {
+    @apply col-span-2;
+  }
+
+  .col-mapping {
+    @apply col-span-2;
+  }
+
+  .col-task {
+    @apply col-span-3;
+  }
+
+  .col-actions {
+    @apply col-span-2;
+  }
+
+  .mapping-progress {
+    @apply w-24 h-2 rounded-full overflow-hidden;
+  }
+
+  .mapping-bar {
+    @apply h-full transition-all duration-300;
+  }
+
+  .task-status {
+    @apply inline-flex items-center space-x-2 cursor-pointer hover:text-blue-600 transition-colors;
+  }
+
+  .action-btn {
+    @apply px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors;
+  }
+
+  .action-btn.primary {
+    @apply bg-blue-600 text-white border-blue-600 hover:bg-blue-700;
+  }
+
+  .empty-state {
+    @apply py-12 text-center text-gray-500;
+  }
+
+  .skeleton {
+    @apply animate-pulse bg-gray-200 rounded;
+  }
+</style>
+
+<div class="container">
+  <!-- Header -->
+  <div class="header">
+    <h1 class="title">{$t.nav?.datasets || 'Datasets'}</h1>
+    <div class="env-selector">
+      <select class="env-dropdown" bind:value={selectedEnv} on:change={handleEnvChange}>
+        {#each environments as env}
+          <option value={env.id}>{env.name}</option>
+        {/each}
+      </select>
+      <button class="refresh-btn" on:click={loadDatasets}>
+        {$t.common?.refresh || 'Refresh'}
+      </button>
+    </div>
+  </div>
+
+  <!-- Error Banner -->
+  {#if error}
+    <div class="error-banner">
+      <span>{error}</span>
+      <button class="retry-btn" on:click={loadDatasets}>
+        {$t.common?.retry || 'Retry'}
+      </button>
+    </div>
+  {/if}
+
+  <!-- Loading State -->
+  {#if isLoading}
+    <div class="dataset-grid">
+      <div class="grid-header">
+        <div class="col-table-name skeleton h-4"></div>
+        <div class="col-schema skeleton h-4"></div>
+        <div class="col-mapping skeleton h-4"></div>
+        <div class="col-task skeleton h-4"></div>
+        <div class="col-actions skeleton h-4"></div>
+      </div>
+      {#each Array(5) as _}
+        <div class="grid-row">
+          <div class="col-table-name skeleton h-4"></div>
+          <div class="col-schema skeleton h-4"></div>
+          <div class="col-mapping skeleton h-4"></div>
+          <div class="col-task skeleton h-4"></div>
+          <div class="col-actions skeleton h-4"></div>
+        </div>
+      {/each}
+    </div>
+  {:else if datasets.length === 0}
+    <!-- Empty State -->
+    <div class="empty-state">
+      <svg class="w-16 h-16 mx-auto mb-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M3 3h18v18H3V3zm16 16V5H5v14h14z"/>
+      </svg>
+      <p>{$t.datasets?.empty || 'No datasets found'}</p>
+    </div>
+  {:else}
+    <!-- Dataset Grid -->
+    <div class="dataset-grid">
+      <!-- Grid Header -->
+      <div class="grid-header">
+        <div class="col-table-name">{$t.datasets?.table_name || 'Table Name'}</div>
+        <div class="col-schema">{$t.datasets?.schema || 'Schema'}</div>
+        <div class="col-mapping">{$t.datasets?.mapped_fields || 'Mapped Fields'}</div>
+        <div class="col-task">{$t.datasets?.last_task || 'Last Task'}</div>
+        <div class="col-actions">{$t.datasets?.actions || 'Actions'}</div>
+      </div>
+
+      <!-- Grid Rows -->
+      {#each datasets as dataset}
+        <div class="grid-row">
+          <!-- Table Name -->
+          <div class="col-table-name">
+            {dataset.table_name}
+          </div>
+
+          <!-- Schema -->
+          <div class="col-schema">
+            {dataset.schema}
+          </div>
+
+          <!-- Mapping Progress -->
+          <div class="col-mapping">
+            {#if dataset.mappedFields}
+              <div class="mapping-progress" title="{$t.datasets?.mapped_of_total || 'Mapped of total'}: {dataset.mappedFields.mapped} / {dataset.mappedFields.total}">
+                <div class="mapping-bar {getMappingProgressClass(dataset.mappedFields.mapped, dataset.mappedFields.total)}" style="width: {dataset.mappedFields.mapped / dataset.mappedFields.total * 100}%"></div>
+              </div>
+            {:else}
+              <span class="text-gray-400">-</span>
+            {/if}
+          </div>
+
+          <!-- Last Task -->
+          <div class="col-task">
+            {#if dataset.lastTask}
+              <div 
+                class="task-status"
+                on:click={() => handleTaskStatusClick(dataset)}
+                role="button"
+                tabindex="0"
+                aria-label={$t.datasets?.view_task || 'View task'}
+              >
+                {@html getTaskStatusIcon(dataset.lastTask.status)}
+                <span>
+                  {#if dataset.lastTask.status.toLowerCase() === 'running'}
+                    {$t.datasets?.task_running || 'Running...'}
+                  {:else if dataset.lastTask.status.toLowerCase() === 'success'}
+                    {$t.datasets?.task_done || 'Done'}
+                  {:else if dataset.lastTask.status.toLowerCase() === 'error'}
+                    {$t.datasets?.task_failed || 'Failed'}
+                  {:else if dataset.lastTask.status.toLowerCase() === 'waiting_input'}
+                    {$t.datasets?.task_waiting || 'Waiting'}
+                  {/if}
+                </span>
+              </div>
+            {:else}
+              <span class="text-gray-400">-</span>
+            {/if}
+          </div>
+
+          <!-- Actions -->
+          <div class="col-actions">
+            <div class="flex space-x-2">
+              {#if dataset.actions.includes('map_columns')}
+                <button 
+                  class="action-btn primary"
+                  on:click={() => handleAction(dataset, 'map_columns')}
+                  aria-label={$t.datasets?.action_map_columns || 'Map Columns'}
+                >
+                  {$t.datasets?.action_map_columns || 'Map Columns'}
+                </button>
+              {/if}
+            </div>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<!-- [/DEF:DatasetHub:Page] -->

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

@@ -1,295 +1,270 @@
+<!-- [DEF:SettingsPage:Page] -->
 <script>
-    import { onMount } from 'svelte';
-    import { updateGlobalSettings, addEnvironment, updateEnvironment, deleteEnvironment, testEnvironmentConnection, updateStorageSettings } from '../../lib/api';
-    import { addToast } from '../../lib/toasts';
-    import { t } from '$lib/i18n';
-    import { Button, Input, Card, PageHeader } from '$lib/ui';
+  /**
+   * @TIER: CRITICAL
+   * @PURPOSE: Consolidated Settings Page - All settings in one place with tabbed navigation
+   * @LAYER: UI
+   * @RELATION: BINDS_TO -> sidebarStore
+   * @INVARIANT: Always shows tabbed interface with all settings categories
+   * 
+   * @UX_STATE: Loading -> Shows skeleton loader
+   * @UX_STATE: Loaded -> Shows tabbed settings interface
+   * @UX_STATE: Error -> Shows error banner with retry button
+   * @UX_FEEDBACK: Toast notifications on save success/failure
+   * @UX_RECOVERY: Refresh button reloads settings data
+   */
 
-    /** @type {import('./$types').PageData} */
-    export let data;
+  import { onMount } from 'svelte';
+  import { t } from '$lib/i18n';
+  import { api } from '$lib/api.js';
+  import { addToast } from '$lib/toasts';
 
-    let settings = data.settings || {
-        environments: [],
-        settings: {
-            storage: {
-                root_path: '',
-                backup_structure_pattern: '',
-                repo_structure_pattern: '',
-                filename_pattern: ''
-            }
-        }
-    };
+  // State
+  let activeTab = 'environments';
+  let settings = null;
+  let isLoading = true;
+  let error = null;
 
-    $: if (data.settings) {
-        settings = { ...data.settings };
-        if (settings.settings && !settings.settings.storage) {
-            settings.settings.storage = {
-                root_path: '',
-                backup_structure_pattern: '',
-                repo_structure_pattern: '',
-                filename_pattern: ''
-            };
-        }
+  // Load settings on mount
+  onMount(async () => {
+    await loadSettings();
+  });
+
+  // Load consolidated settings from API
+  async function loadSettings() {
+    isLoading = true;
+    error = null;
+    try {
+      const response = await api.getConsolidatedSettings();
+      settings = response;
+    } catch (err) {
+      error = err.message || 'Failed to load settings';
+      console.error('[SettingsPage][Coherence:Failed]', err);
+    } finally {
+      isLoading = false;
     }
+  }
 
-    let newEnv = {
-        id: '',
-        name: '',
-        url: '',
-        username: '',
-        password: '',
-        is_default: false
-    };
+  // Handle tab change
+  function handleTabChange(tab) {
+    activeTab = tab;
+  }
 
-    let editingEnvId = null;
+  // Get tab class
+  function getTabClass(tab) {
+    return activeTab === tab
+      ? 'text-blue-600 border-b-2 border-blue-600'
+      : 'text-gray-600 hover:text-gray-800 border-transparent hover:border-gray-300';
+  }
 
-    // [DEF:handleSaveGlobal:Function]
-    /* @PURPOSE: Saves global application settings.
-       @PRE: settings.settings must contain valid configuration.
-       @POST: Global settings are updated via API.
-    */
-    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');
-        }
+  // Handle save
+  async function handleSave() {
+    console.log('[SettingsPage][Action] Saving settings');
+    try {
+      await api.updateConsolidatedSettings(settings);
+      addToast($t.settings?.save_success || 'Settings saved', 'success');
+    } catch (err) {
+      console.error('[SettingsPage][Coherence:Failed]', err);
+      addToast($t.settings?.save_failed || 'Failed to save settings', 'error');
     }
-    // [/DEF:handleSaveGlobal:Function]
-
-    // [DEF:handleSaveStorage:Function]
-    /* @PURPOSE: Saves storage-specific settings.
-       @PRE: settings.settings.storage must contain valid configuration.
-       @POST: Storage settings are updated via API.
-    */
-    async function handleSaveStorage() {
-        try {
-            console.log("[Settings.handleSaveStorage][Action] Saving storage settings.");
-            await updateStorageSettings(settings.settings.storage);
-            addToast('Storage settings saved', 'success');
-            console.log("[Settings.handleSaveStorage][Coherence:OK] Storage settings saved.");
-        } catch (error) {
-            console.error("[Settings.handleSaveStorage][Coherence:Failed] Failed to save storage settings:", error);
-            addToast(error.message || 'Failed to save storage settings', 'error');
-        }
-    }
-    // [/DEF:handleSaveStorage:Function]
-
-    // [DEF:handleAddOrUpdateEnv:Function]
-    /* @PURPOSE: Adds a new environment or updates an existing one.
-       @PRE: newEnv must contain valid environment details.
-       @POST: Environment is saved and page is reloaded to reflect changes.
-    */
-    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');
-        }
-    }
-    // [/DEF:handleAddOrUpdateEnv:Function]
-
-    // [DEF:handleDeleteEnv:Function]
-    /* @PURPOSE: Deletes a Superset environment.
-       @PRE: id must be a valid environment ID.
-       @POST: Environment is removed and page is reloaded.
-    */
-    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');
-            }
-        }
-    }
-    // [/DEF:handleDeleteEnv:Function]
-
-    // [DEF:handleTestEnv:Function]
-    /* @PURPOSE: Tests the connection to a Superset environment.
-       @PRE: id must be a valid environment ID.
-       @POST: Displays success or error toast based on connection result.
-    */
-    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');
-        }
-    }
-    // [/DEF:handleTestEnv:Function]
-
-    // [DEF:editEnv:Function]
-    /* @PURPOSE: Populates the environment form for editing.
-       @PRE: env object must be provided.
-       @POST: newEnv and editingEnvId are updated.
-    */
-    function editEnv(env) {
-        newEnv = { ...env };
-        editingEnvId = env.id;
-    }
-    // [/DEF:editEnv:Function]
-
-    // [DEF:resetEnvForm:Function]
-    /* @PURPOSE: Resets the environment creation/edit form to default state.
-       @PRE: None.
-       @POST: newEnv is cleared and editingEnvId is set to null.
-    */
-    function resetEnvForm() {
-        newEnv = {
-            id: '',
-            name: '',
-            url: '',
-            username: '',
-            password: '',
-            is_default: false
-        };
-        editingEnvId = null;
-    }
-    // [/DEF:resetEnvForm:Function]
+  }
 </script>
 
-<div class="container mx-auto p-4">
-    <PageHeader title={$t.settings.title} />
+<style>
+  .container {
+    @apply max-w-7xl mx-auto px-4 py-6;
+  }
 
-    {#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}
+  .header {
+    @apply flex items-center justify-between mb-6;
+  }
 
+  .title {
+    @apply text-2xl font-bold text-gray-900;
+  }
 
-    <div class="mb-8">
-        <Card title={$t.settings?.storage_title || "File Storage Configuration"}>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div class="md:col-span-2">
-                    <Input
-                        label={$t.settings?.storage_root || "Storage Root Path"}
-                        bind:value={settings.settings.storage.root_path}
-                    />
-                </div>
-                <Input
-                    label={$t.settings?.storage_backup_pattern || "Backup Directory Pattern"}
-                    bind:value={settings.settings.storage.backup_structure_pattern}
-                />
-                <Input
-                    label={$t.settings?.storage_repo_pattern || "Repository Directory Pattern"}
-                    bind:value={settings.settings.storage.repo_structure_pattern}
-                />
-                <Input
-                    label={$t.settings?.storage_filename_pattern || "Filename Pattern"}
-                    bind:value={settings.settings.storage.filename_pattern}
-                />
-                <div class="bg-gray-50 p-4 rounded border border-gray-200">
-                    <span class="block text-xs font-semibold text-gray-500 uppercase mb-2">{$t.settings?.storage_preview || "Path Preview"}</span>
-                    <code class="text-sm text-indigo-600">
-                        {settings.settings.storage.root_path}/backups/sample_backup.zip
-                    </code>
-                </div>
-            </div>
-            <div class="mt-6">
-                <Button on:click={handleSaveStorage}>
-                    {$t.common.save}
-                </Button>
-            </div>
-        </Card>
+  .refresh-btn {
+    @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors;
+  }
+
+  .error-banner {
+    @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4 flex items-center justify-between;
+  }
+
+  .retry-btn {
+    @apply px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors;
+  }
+
+  .tabs {
+    @apply border-b border-gray-200 mb-6;
+  }
+
+  .tab-btn {
+    @apply px-4 py-2 text-sm font-medium transition-colors focus:outline-none;
+  }
+
+  .tab-content {
+    @apply bg-white rounded-lg p-6 border border-gray-200;
+  }
+
+  .skeleton {
+    @apply animate-pulse bg-gray-200 rounded;
+  }
+</style>
+
+<div class="container">
+  <!-- Header -->
+  <div class="header">
+    <h1 class="title">{$t.settings?.title || 'Settings'}</h1>
+    <button class="refresh-btn" on:click={loadSettings}>
+      {$t.common?.refresh || 'Refresh'}
+    </button>
+  </div>
+
+  <!-- Error Banner -->
+  {#if error}
+    <div class="error-banner">
+      <span>{error}</span>
+      <button class="retry-btn" on:click={loadSettings}>
+        {$t.common?.retry || 'Retry'}
+      </button>
+    </div>
+  {/if}
+
+  <!-- Loading State -->
+  {#if isLoading}
+    <div class="tab-content">
+      <div class="skeleton h-8"></div>
+      <div class="skeleton h-8"></div>
+      <div class="skeleton h-8"></div>
+      <div class="skeleton h-8"></div>
+      <div class="skeleton h-8"></div>
+    </div>
+  {:else if settings}
+    <!-- Tabs -->
+    <div class="tabs">
+      <button 
+        class="tab-btn {getTabClass('environments')}"
+        on:click={() => handleTabChange('environments')}
+      >
+        {$t.settings?.environments || 'Environments'}
+      </button>
+      <button 
+        class="tab-btn {getTabClass('connections')}"
+        on:click={() => handleTabChange('connections')}
+      >
+        {$t.settings?.connections || 'Connections'}
+      </button>
+      <button 
+        class="tab-btn {getTabClass('llm')}"
+        on:click={() => handleTabChange('llm')}
+      >
+        {$t.settings?.llm || 'LLM'}
+      </button>
+      <button 
+        class="tab-btn {getTabClass('logging')}"
+        on:click={() => handleTabChange('logging')}
+      >
+        {$t.settings?.logging || 'Logging'}
+      </button>
+      <button 
+        class="tab-btn {getTabClass('storage')}"
+        on:click={() => handleTabChange('storage')}
+      >
+        {$t.settings?.storage || 'Storage'}
+      </button>
     </div>
 
-    <section class="mb-8">
-        <Card title={$t.settings?.env_title || "Superset Environments"}>
-
-    {#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>{$t.settings?.env_warning || "No Superset environments configured."}</p>
-        </div>
-    {/if}
-        
-        <div class="mb-6 overflow-x-auto">
-            <table class="min-w-full divide-y divide-gray-200">
+    <!-- Tab Content -->
+    <div class="tab-content">
+      {#if activeTab === 'environments'}
+        <!-- Environments Tab -->
+        <div class="text-lg font-medium mb-4">
+          <h2 class="text-xl font-bold mb-4">{$t.settings?.environments || 'Superset Environments'}</h2>
+          <p class="text-gray-600 mb-6">
+            {$t.settings?.env_description || 'Configure Superset environments for dashboards and datasets.'}
+          </p>
+          <div class="flex justify-end mb-6">
+            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
+              {$t.settings?.env_add || 'Add Environment'}
+            </button>
+          </div>
+          {#if settings.environments && settings.environments.length > 0}
+            <div class="mt-6">
+              <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">{$t.connections?.name || "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">{$t.connections?.user || "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">{$t.git?.actions || "Actions"}</th>
-                    </tr>
+                  <tr>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.connections?.name || "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">{$t.connections?.user || "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-right text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.settings?.env_actions || "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">{$t.settings?.env_test || "Test"}</button>
-                                <button on:click={() => editEnv(env)} class="text-indigo-600 hover:text-indigo-900 mr-4">{$t.common.edit}</button>
-                                <button on:click={() => handleDeleteEnv(env.id)} class="text-red-600 hover:text-red-900">{$t.settings?.env_delete || "Delete"}</button>
-                            </td>
-                        </tr>
-                    {/each}
+                  {#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 class="text-green-600 hover:text-green-900 mr-4" on:click={() => handleTestEnv(env.id)}>
+                          {$t.settings?.env_test || "Test"}
+                        </button>
+                        <button class="text-indigo-600 hover:text-indigo-900 mr-4" on:click={() => editEnv(env)}>
+                          {$t.common.edit}
+                        </button>
+                        <button class="text-red-600 hover:text-red-900" on:click={() => handleDeleteEnv(env.id)}>
+                          {$t.settings?.env_delete || "Delete"}
+                        </button>
+                      </td>
+                    </tr>
+                  {/each}
                 </tbody>
-            </table>
-        </div>
-
-        <div class="mt-8 bg-gray-50 p-6 rounded-lg border border-gray-100">
-            <h3 class="text-lg font-medium mb-6">{editingEnvId ? ($t.settings?.env_edit || "Edit Environment") : ($t.settings?.env_add || "Add Environment")}</h3>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <Input label="ID" bind:value={newEnv.id} disabled={!!editingEnvId} />
-                <Input label={$t.connections?.name || "Name"} bind:value={newEnv.name} />
-                <Input label="URL" bind:value={newEnv.url} />
-                <Input label={$t.connections?.user || "Username"} bind:value={newEnv.username} />
-                <Input label={$t.connections?.pass || "Password"} type="password" bind:value={newEnv.password} />
-                <div class="flex items-center gap-2 h-10 mt-auto">
-                    <input type="checkbox" id="env_default" bind:checked={newEnv.is_default} class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" />
-                    <label for="env_default" class="text-sm font-medium text-gray-700">{$t.settings?.env_default || "Default Environment"}</label>
-                </div>
-            </div>
-            <div class="mt-8 flex gap-3">
-                <Button on:click={handleAddOrUpdateEnv}>
-                    {editingEnvId ? $t.common.save : ($t.settings?.env_add || "Add Environment")}
-                </Button>
-                {#if editingEnvId}
-                    <Button variant="secondary" on:click={resetEnvForm}>
-                        {$t.common.cancel}
-                    </Button>
-                {/if}
+              </table>
             </div>
+          {/if}
         </div>
-        </Card>
-    </section>
+      {:else if activeTab === 'connections'}
+        <!-- Connections Tab -->
+        <div class="text-lg font-medium mb-4">
+          <h2 class="text-xl font-bold mb-4">{$t.settings?.connections || 'Database Connections'}</h2>
+          <p class="text-gray-600 mb-6">
+            {$t.settings?.connections_description || 'Configure database connections for data mapping.'}
+          </p>
+        </div>
+      {:else if activeTab === 'llm'}
+        <!-- LLM Tab -->
+        <div class="text-lg font-medium mb-4">
+          <h2 class="text-xl font-bold mb-4">{$t.settings?.llm || 'LLM Providers'}</h2>
+          <p class="text-gray-600 mb-6">
+            {$t.settings?.llm_description || 'Configure LLM providers for dataset documentation.'}
+          </p>
+          <div class="flex justify-end mb-6">
+            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
+              {$t.llm?.add_provider || 'Add Provider'}
+            </button>
+          </div>
+        </div>
+      {:else if activeTab === 'logging'}
+        <!-- Logging Tab -->
+        <div class="text-lg font-medium mb-4">
+          <h2 class="text-xl font-bold mb-4">{$t.settings?.logging || 'Logging Configuration'}</h2>
+          <p class="text-gray-600 mb-6">
+            {$t.settings?.logging_description || 'Configure logging and task log levels.'}
+          </p>
+        </div>
+      {:else if activeTab === 'storage'}
+        <!-- Storage Tab -->
+        <div class="text-lg font-medium mb-4">
+          <h2 class="text-xl font-bold mb-4">{$t.settings?.storage || 'File Storage Configuration'}</h2>
+          <p class="text-gray-600 mb-6">
+            {$t.settings?.storage_description || 'Configure file storage paths and patterns.'}
+          </p>
+        </div>
+      {/if}
+    </div>
 </div>
+
+<!-- [/DEF:SettingsPage:Page] -->