refactor

frontend/src/routes/+layout.svelte

@@ -1,3 +1,18 @@
+<!-- [DEF:frontend.src.routes.+layout:Module] -->
+<!--
+@TIER:      STANDARD
+@SEMANTICS: layout, root, navigation, sidebar, toast
+@PURPOSE:   Root layout component that provides global UI structure (Sidebar, Navbar, Footer, TaskDrawer, Toasts).
+@LAYER:     UI (Layout)
+@RELATION:  DEPENDS_ON -> Sidebar
+@RELATION:  DEPENDS_ON -> TopNavbar
+@RELATION:  DEPENDS_ON -> Footer
+@RELATION:  DEPENDS_ON -> Toast
+@RELATION:  DEPENDS_ON -> ProtectedRoute
+@RELATION:  DEPENDS_ON -> TaskDrawer
+@INVARIANT: All pages except /login are wrapped in ProtectedRoute.
+-->
+
 <!-- [DEF:layout:Module] -->
 <script>
     import '../app.css';
@@ -52,3 +67,4 @@
     {/if}
 </main>
 <!-- [/DEF:layout:Module] -->
+<!-- [/DEF:frontend.src.routes.+layout:Module] -->

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

@@ -49,8 +49,9 @@
   let showMapColumnsModal = false;
   let showGenerateDocsModal = false;
   let mapSourceType = 'postgresql';
-  let mapConnectionId = null;
+  let mapConnectionId = '';
   let mapFileData = null;
+  let mapFileInput;
   let llmProvider = '';
   let llmOptions = {};
 
@@ -239,15 +240,42 @@
 
   // Handle bulk map columns
   async function handleBulkMapColumns() {
-    if (selectedIds.size === 0) return;
+    console.log('[DatasetHub][handleBulkMapColumns][Entry]', {
+      selectedIds: Array.from(selectedIds),
+      mapSourceType,
+      mapConnectionId,
+      mapFileData
+    });
+    
+    if (selectedIds.size === 0) {
+      console.log('[DatasetHub][handleBulkMapColumns] No datasets selected');
+      return;
+    }
+    
+    if (mapSourceType === 'postgresql' && !mapConnectionId) {
+      console.log('[DatasetHub][handleBulkMapColumns] No connection ID provided for PostgreSQL');
+      return;
+    }
+    
+    if (mapSourceType === 'xlsx' && (!mapFileData || mapFileData.length === 0)) {
+      console.log('[DatasetHub][handleBulkMapColumns] No file selected for XLSX');
+      return;
+    }
     
     try {
+      let fileData = null;
+      if (mapSourceType === 'xlsx' && mapFileData && mapFileData.length > 0) {
+        // For now we send the filename as a placeholder or handle upload if needed.
+        // The backend expects a string 'file_data' in the current schema.
+        fileData = mapFileData[0].name;
+      }
+
       const response = await api.postApi('/datasets/map-columns', {
         env_id: selectedEnv,
         dataset_ids: Array.from(selectedIds),
         source_type: mapSourceType,
         connection_id: mapConnectionId || undefined,
-        file_data: mapFileData || undefined
+        file_data: fileData || undefined
       });
       console.log('[DatasetHub][Action] Bulk map columns task created:', response.task_id);
       
@@ -808,9 +836,9 @@
             {#if mapSourceType === 'postgresql'}
               <div>
                 <label class="block text-sm font-medium mb-2">Connection ID</label>
-                <input 
-                  type="text" 
-                  class="search-input w-full" 
+                <input
+                  type="text"
+                  class="search-input w-full"
                   placeholder="Enter connection ID..."
                   bind:value={mapConnectionId}
                 />
@@ -818,11 +846,12 @@
             {:else}
               <div>
                 <label class="block text-sm font-medium mb-2">XLSX File</label>
-                <input 
-                  type="file" 
+                <input
+                  type="file"
                   class="w-full"
                   accept=".xlsx,.xls"
                   bind:files={mapFileData}
+                  bind:this={mapFileInput}
                 />
               </div>
             {/if}
@@ -842,10 +871,11 @@
         </div>
         <div class="modal-footer">
           <button class="action-btn" on:click={() => showMapColumnsModal = false}>Cancel</button>
-          <button 
-            class="action-btn primary" 
-            on:click={handleBulkMapColumns}
-            disabled={selectedIds.size === 0}
+          <button
+            type="button"
+            class="action-btn primary"
+            on:click|preventDefault={handleBulkMapColumns}
+            disabled={selectedIds.size === 0 || (mapSourceType === 'postgresql' && !mapConnectionId) || (mapSourceType === 'xlsx' && (!mapFileData || mapFileData.length === 0))}
           >
             Start Mapping
           </button>

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

@@ -18,12 +18,29 @@
   import { t } from '$lib/i18n';
   import { api } from '$lib/api.js';
   import { addToast } from '$lib/toasts';
+  import ProviderConfig from '../../components/llm/ProviderConfig.svelte';
 
   // State
   let activeTab = 'environments';
   let settings = null;
   let isLoading = true;
   let error = null;
+  
+  // Environment editing state
+  let editingEnvId = null;
+  let isAddingEnv = false;
+  let newEnv = {
+    id: '',
+    name: '',
+    url: '',
+    username: '',
+    password: '',
+    is_default: false,
+    backup_schedule: {
+      enabled: false,
+      cron_expression: '0 0 * * *'
+    }
+  };
 
   // Load settings on mount
   onMount(async () => {
@@ -57,10 +74,13 @@
       : 'text-gray-600 hover:text-gray-800 border-transparent hover:border-gray-300';
   }
 
-  // Handle save
+  // Handle global settings save (Logging, Storage)
   async function handleSave() {
     console.log('[SettingsPage][Action] Saving settings');
     try {
+      // In a real app we might want to only send the changed section, 
+      // but updateConsolidatedSettings expects full object or we can use specific endpoints.
+      // For now we use the consolidated update.
       await api.updateConsolidatedSettings(settings);
       addToast($t.settings?.save_success || 'Settings saved', 'success');
     } catch (err) {
@@ -69,21 +89,89 @@
     }
   }
 
-  // Placeholder functions for environment actions
-  function handleTestEnv(id) {
+  // Handle environment actions
+  async function handleTestEnv(id) {
     console.log(`[SettingsPage][Action] Test environment ${id}`);
-    addToast('Environment test started', 'info');
+    addToast('Testing connection...', 'info');
+    try {
+      const result = await api.testEnvironmentConnection(id);
+      if (result.status === 'success') {
+        addToast('Connection successful', 'success');
+      } else {
+        addToast(`Connection failed: ${result.message}`, 'error');
+      }
+    } catch (err) {
+      console.error('[SettingsPage][Coherence:Failed] Error testing connection:', err);
+      addToast('Failed to test connection', 'error');
+    }
   }
 
   function editEnv(env) {
     console.log(`[SettingsPage][Action] Edit environment ${env.id}`);
-    // TODO: Open edit modal
+    newEnv = JSON.parse(JSON.stringify(env)); // Deep copy
+    // Ensure backup_schedule exists
+    if (!newEnv.backup_schedule) {
+        newEnv.backup_schedule = { enabled: false, cron_expression: '0 0 * * *' };
+    }
+    editingEnvId = env.id;
+    isAddingEnv = false;
   }
 
-  function handleDeleteEnv(id) {
+  function resetEnvForm() {
+    newEnv = {
+      id: '',
+      name: '',
+      url: '',
+      username: '',
+      password: '',
+      is_default: false,
+      backup_schedule: {
+        enabled: false,
+        cron_expression: '0 0 * * *'
+      }
+    };
+    editingEnvId = null;
+  }
+
+  async function handleAddOrUpdateEnv() {
+      try {
+          console.log(`[SettingsPage][Action] ${editingEnvId ? 'Updating' : 'Adding'} environment.`);
+          
+          // Basic validation
+          if (!newEnv.id || !newEnv.name || !newEnv.url) {
+              addToast('Please fill in all required fields (ID, Name, URL)', 'error');
+              return;
+          }
+
+          if (editingEnvId) {
+              await api.updateEnvironment(editingEnvId, newEnv);
+              addToast('Environment updated', 'success');
+          } else {
+              await api.addEnvironment(newEnv);
+              addToast('Environment added', 'success');
+          }
+          
+          resetEnvForm();
+          editingEnvId = null;
+          isAddingEnv = false;
+          await loadSettings();
+      } catch (error) {
+          console.error("[SettingsPage][Coherence:Failed] Failed to save environment:", error);
+          addToast(error.message || 'Failed to save environment', 'error');
+      }
+  }
+
+  async function handleDeleteEnv(id) {
     if (confirm('Are you sure you want to delete this environment?')) {
       console.log(`[SettingsPage][Action] Delete environment ${id}`);
-      // TODO: Call API to delete
+      try {
+          await api.deleteEnvironment(id);
+          addToast('Environment deleted', 'success');
+          await loadSettings();
+      } catch (error) {
+          console.error("[SettingsPage][Coherence:Failed] Failed to delete environment:", error);
+          addToast('Failed to delete environment', 'error');
+      }
     }
   }
 </script>
@@ -167,6 +255,12 @@
       >
         {$t.settings?.environments || 'Environments'}
       </button>
+      <button 
+        class="tab-btn {getTabClass('logging')}"
+        on:click={() => handleTabChange('logging')}
+      >
+        {$t.settings?.logging || 'Logging'}
+      </button>
       <button 
         class="tab-btn {getTabClass('connections')}"
         on:click={() => handleTabChange('connections')}
@@ -179,12 +273,6 @@
       >
         {$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')}
@@ -202,13 +290,87 @@
           <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 !editingEnvId && !isAddingEnv}
+            <div class="flex justify-end mb-6">
+              <button 
+                class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
+                on:click={() => { isAddingEnv = true; resetEnvForm(); }}
+              >
+                {$t.settings?.env_add || 'Add Environment'}
+              </button>
+            </div>
+          {/if}
+
+          {#if editingEnvId || isAddingEnv}
+            <!-- Add/Edit Environment Form -->
+            <div class="bg-gray-50 p-6 rounded-lg mb-6 border border-gray-200">
+              <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 disabled:bg-gray-100 disabled:text-gray-500" 
+                  />
+                </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 mt-6">
+                  <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>
+
+              <h3 class="text-lg font-medium mb-4 mt-6">Backup Schedule</h3>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="flex items-center">
+                  <input type="checkbox" id="backup_enabled" bind:checked={newEnv.backup_schedule.enabled} class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
+                  <label for="backup_enabled" class="ml-2 block text-sm text-gray-900">Enable Automatic Backups</label>
+                </div>
+                <div>
+                  <label for="cron_expression" class="block text-sm font-medium text-gray-700">Cron Expression</label>
+                  <input type="text" id="cron_expression" bind:value={newEnv.backup_schedule.cron_expression} placeholder="0 0 * * *" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
+                  <p class="text-xs text-gray-500 mt-1">Example: 0 0 * * * (daily at midnight)</p>
+                </div>
+              </div>
+
+              <div class="mt-6 flex gap-2 justify-end">
+                <button 
+                  on:click={() => { isAddingEnv = false; editingEnvId = null; resetEnvForm(); }} 
+                  class="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300"
+                >
+                  Cancel
+                </button>
+                <button 
+                  on:click={handleAddOrUpdateEnv} 
+                  class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+                >
+                  {editingEnvId ? 'Update' : 'Add'} Environment
+                </button>
+              </div>
+            </div>
+          {/if}
+
           {#if settings.environments && settings.environments.length > 0}
-            <div class="mt-6">
+            <div class="mt-6 overflow-x-auto border border-gray-200 rounded-lg">
               <table class="min-w-full divide-y divide-gray-200">
                 <thead class="bg-gray-50">
                   <tr>
@@ -225,13 +387,21 @@
                       <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">
+                        {#if env.is_default}
+                          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                            Yes
+                          </span>
+                        {:else}
+                          <span class="text-gray-500">No</span>
+                        {/if}
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                         <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}
+                          {$t.common.edit || "Edit"}
                         </button>
                         <button class="text-red-600 hover:text-red-900" on:click={() => handleDeleteEnv(env.id)}>
                           {$t.settings?.env_delete || "Delete"}
@@ -242,29 +412,13 @@
                 </tbody>
               </table>
             </div>
+          {:else if !isAddingEnv}
+            <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>
-      {: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">
@@ -272,6 +426,76 @@
           <p class="text-gray-600 mb-6">
             {$t.settings?.logging_description || 'Configure logging and task log levels.'}
           </p>
+          
+          <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label for="log_level" class="block text-sm font-medium text-gray-700">Log Level</label>
+                <select id="log_level" bind:value={settings.logging.level} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
+                  <option value="DEBUG">DEBUG</option>
+                  <option value="INFO">INFO</option>
+                  <option value="WARNING">WARNING</option>
+                  <option value="ERROR">ERROR</option>
+                  <option value="CRITICAL">CRITICAL</option>
+                </select>
+              </div>
+              <div>
+                <label for="task_log_level" class="block text-sm font-medium text-gray-700">Task Log Level</label>
+                <select id="task_log_level" bind:value={settings.logging.task_log_level} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
+                  <option value="DEBUG">DEBUG</option>
+                  <option value="INFO">INFO</option>
+                  <option value="WARNING">WARNING</option>
+                  <option value="ERROR">ERROR</option>
+                </select>
+              </div>
+              <div class="md:col-span-2">
+                <label class="flex items-center">
+                  <input type="checkbox" id="enable_belief_state" bind:checked={settings.logging.enable_belief_state} class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
+                  <span class="ml-2 block text-sm text-gray-900">Enable Belief State Logging (Beta)</span>
+                </label>
+                <p class="text-xs text-gray-500 mt-1 ml-6">Logs agent reasoning and internal state changes for debugging.</p>
+              </div>
+            </div>
+
+            <div class="mt-6 flex justify-end">
+              <button 
+                on:click={handleSave} 
+                class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+              >
+                Save Logging Config
+              </button>
+            </div>
+          </div>
+        </div>
+      {: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>
+          
+          {#if settings.connections && settings.connections.length > 0}
+             <!-- Connections list would go here -->
+             <p class="text-gray-500 italic">No additional connections configured. Superset database connections are used by default.</p>
+          {:else}
+             <div class="text-center py-8 bg-gray-50 rounded-lg border border-dashed border-gray-300">
+                <p class="text-gray-500">No external connections configured.</p>
+                <button class="mt-4 px-4 py-2 border border-blue-600 text-blue-600 rounded hover:bg-blue-50">
+                   Add Connection
+                </button>
+             </div>
+          {/if}
+        </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>
+          
+          <ProviderConfig providers={settings.llm_providers || []} onSave={loadSettings} />
         </div>
       {:else if activeTab === 'storage'}
         <!-- Storage Tab -->
@@ -280,6 +504,32 @@
           <p class="text-gray-600 mb-6">
             {$t.settings?.storage_description || 'Configure file storage paths and patterns.'}
           </p>
+          
+          <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
+             <div class="grid grid-cols-1 gap-4">
+                <div>
+                   <label for="storage_path" class="block text-sm font-medium text-gray-700">Root Path</label>
+                   <input type="text" id="storage_path" bind:value={settings.storage.root_path} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
+                </div>
+                <div>
+                   <label for="backup_path" class="block text-sm font-medium text-gray-700">Backup Path</label>
+                   <input type="text" id="backup_path" bind:value={settings.storage.backup_path} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
+                </div>
+                 <div>
+                   <label for="repo_path" class="block text-sm font-medium text-gray-700">Repository Path</label>
+                   <input type="text" id="repo_path" bind:value={settings.storage.repo_path} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
+                </div>
+             </div>
+             
+             <div class="mt-6 flex justify-end">
+               <button 
+                 on:click={() => handleSave()} 
+                 class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+               >
+                 Save Storage Config
+               </button>
+             </div>
+          </div>
         </div>
       {/if}
     </div>

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

@@ -0,0 +1,16 @@
+<!-- [DEF:StorageIndexPage:Page] -->
+<!--
+@TIER:      TRIVIAL
+@PURPOSE:   Redirect to the backups page as the default storage view.
+@LAYER:     Page
+@INVARIANT: Always redirects to /storage/backups.
+-->
+<script>
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+
+  onMount(() => {
+    goto('/storage/backups');
+  });
+</script>
+<!-- [/DEF:StorageIndexPage:Page] -->

frontend/src/routes/storage/backups/+page.svelte

@@ -0,0 +1,35 @@
+<!-- [DEF:StorageBackupsPage:Page] -->
+<!--
+@TIER:      STANDARD
+@SEMANTICS: backup, page, tools
+@PURPOSE:   Entry point for the Backup Management interface (moved from /tools/backups).
+@LAYER:     Page
+@RELATION:  USES -> BackupManager
+
+@INVARIANT: BackupManager component is always rendered.
+-->
+
+<script lang="ts">
+  /**
+   * @UX_STATE: Loading -> (via BackupManager) showing spinner.
+   * @UX_STATE: Idle -> Showing BackupManager interface.
+   * @UX_FEEDBACK: Toast -> (via BackupManager) success/error notifications.
+   */
+  // [SECTION: IMPORTS]
+  import { t } from '$lib/i18n';
+  import { PageHeader } from '$lib/ui';
+  import BackupManager from '../../../components/backups/BackupManager.svelte';
+  // [/SECTION]
+</script>
+
+<!-- [SECTION: TEMPLATE] -->
+<div class="container mx-auto p-4 max-w-6xl">
+  <PageHeader title={$t.nav?.backups || "Backups"} />
+  
+  <div class="mt-6">
+    <BackupManager />
+  </div>
+</div>
+<!-- [/SECTION] -->
+
+<!-- [/DEF:StorageBackupsPage:Page] -->

frontend/src/routes/storage/repos/+page.svelte

@@ -0,0 +1,110 @@
+<!-- [DEF:frontend.src.routes.storage.repos.+page:Module] -->
+<!--
+@TIER:      STANDARD
+@SEMANTICS: git, dashboard, management, ui
+@PURPOSE:   Dashboard management page for Git integration (moved from /git).
+@LAYER:     UI (Page)
+@RELATION:  DEPENDS_ON -> DashboardGrid
+@RELATION:  DEPENDS_ON -> api
+@INVARIANT: Dashboard grid is always shown when an environment is selected.
+-->
+
+<!-- [DEF:StorageReposPage:Page] -->
+<script lang="ts">
+  /**
+   * @UX_STATE: Loading -> Showing spinner while fetching environments/dashboards.
+   * @UX_STATE: Idle -> Showing dashboard grid with actions.
+   * @UX_FEEDBACK: Toast -> Error messages on fetch failure.
+   * @UX_RECOVERY: Environment Selection -> Switch environment to retry loading.
+   */
+  import { onMount } from 'svelte';
+  import DashboardGrid from '../../../components/DashboardGrid.svelte';
+  import { addToast as toast } from '$lib/toasts.js';
+  import { api } from '$lib/api.js';
+  import type { DashboardMetadata } from '$lib/types/dashboard';
+  import { t } from '$lib/i18n';
+  import { Button, Card, PageHeader, Select } from '$lib/ui';
+
+  let environments: any[] = [];
+  let selectedEnvId = "";
+  let dashboards: DashboardMetadata[] = [];
+  let loading = true;
+  let fetchingDashboards = false;
+
+  // [DEF:fetchEnvironments:Function]
+  /**
+   * @PURPOSE: Fetches the list of available environments.
+   * @PRE: None.
+   * @POST: environments array is populated, selectedEnvId is set to first env if available.
+   */
+  async function fetchEnvironments() {
+    try {
+      environments = await api.getEnvironmentsList();
+      if (environments.length > 0) {
+        selectedEnvId = environments[0].id;
+      }
+    } catch (e) {
+      toast(e.message, 'error');
+    } finally {
+      loading = false;
+    }
+  }
+  // [/DEF:fetchEnvironments:Function]
+
+  // [DEF:fetchDashboards:Function]
+  /**
+   * @PURPOSE: Fetches dashboards for a specific environment.
+   * @PRE: envId is a valid environment ID.
+   * @POST: dashboards array is populated with metadata for the selected environment.
+   */
+  async function fetchDashboards(envId: string) {
+    if (!envId) return;
+    fetchingDashboards = true;
+    try {
+      dashboards = await api.requestApi(`/environments/${envId}/dashboards`);
+    } catch (e) {
+      toast(e.message, 'error');
+      dashboards = [];
+    } finally {
+      fetchingDashboards = false;
+    }
+  }
+  // [/DEF:fetchDashboards:Function]
+
+  onMount(fetchEnvironments);
+
+  $: if (selectedEnvId) {
+    fetchDashboards(selectedEnvId);
+    localStorage.setItem('selected_env_id', selectedEnvId);
+  }
+</script>
+
+<div class="max-w-6xl mx-auto p-6">
+  <PageHeader title={$t.nav?.repositories || "Git Repositories"}>
+    <div slot="actions" class="flex items-center space-x-4">
+      <Select
+        label="Environment"
+        bind:value={selectedEnvId}
+        options={environments.map(e => ({ value: e.id, label: e.name }))}
+      />
+    </div>
+  </PageHeader>
+
+  {#if loading}
+    <div class="flex justify-center py-12">
+      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+    </div>
+  {:else}
+    <Card title="Select Dashboard to Manage">
+      {#if fetchingDashboards}
+        <p class="text-gray-500">Loading dashboards...</p>
+      {:else if dashboards.length > 0}
+        <DashboardGrid {dashboards} />
+      {:else}
+        <p class="text-gray-500 italic">No dashboards found in this environment.</p>
+      {/if}
+    </Card>
+  {/if}
+</div>
+<!-- [/DEF:StorageReposPage:Page] -->
+<!-- [/DEF:frontend.src.routes.storage.repos.+page:Module] -->