fix(ui): use global environment context on datasets page

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

@@ -24,6 +24,12 @@
   import { openDrawerForTask } from '$lib/stores/taskDrawer.js';
   import { api } from '$lib/api.js';
   import { debounce } from '$lib/utils/debounce.js';
+  import {
+    environmentContextStore,
+    initializeEnvironmentContext,
+    setSelectedEnvironment,
+    selectedEnvironmentStore
+  } from '$lib/stores/environmentContext.js';
 
   // State
   let selectedEnv = null;
@@ -66,30 +72,13 @@
 
   // Load environments and datasets on mount
   onMount(async () => {
-    await loadEnvironments();
+    await initializeEnvironmentContext();
+    if (!selectedEnv && $environmentContextStore?.selectedEnvId) {
+      selectedEnv = $environmentContextStore.selectedEnvId;
+    }
     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;
@@ -142,14 +131,6 @@
     }
   }
 
-  // Handle environment change
-  function handleEnvChange(event) {
-    selectedEnv = event.target.value;
-    currentPage = 1;
-    selectedIds.clear();
-    loadDatasets();
-  }
-
   // Handle search input
   function handleSearch(event) {
     debouncedSearch(event.target.value);
@@ -361,6 +342,19 @@
       return 'bg-blue-400';
     }
   }
+
+  $: environments = $environmentContextStore?.environments || [];
+  $: activeEnvironment = $selectedEnvironmentStore;
+  $: if (
+    $environmentContextStore?.selectedEnvId &&
+    selectedEnv !== $environmentContextStore.selectedEnvId
+  ) {
+    selectedEnv = $environmentContextStore.selectedEnvId;
+    setSelectedEnvironment(selectedEnv);
+    currentPage = 1;
+    selectedIds.clear();
+    loadDatasets();
+  }
 </script>
 
 
@@ -370,11 +364,9 @@
   <div class="flex items-center justify-between mb-6">
     <h1 class="text-2xl font-bold text-gray-900">{$t.nav?.datasets}</h1>
     <div class="flex items-center gap-4">
-      <select class="px-2 py-1 border border-gray-300 rounded bg-white focus:outline-none focus:ring-2 focus:ring-blue-500" bind:value={selectedEnv} on:change={handleEnvChange}>
+      <span class="px-3 py-1 text-sm rounded border border-gray-300 bg-gray-50 text-gray-700">
-        {#each environments as env}
+        {$t.dashboard?.environment}: {activeEnvironment?.name || selectedEnv || '-'}
-          <option value={env.id}>{env.name}</option>
+      </span>
-        {/each}
-      </select>
       <button class="px-2 py-1 bg-blue-600 text-white rounded hover:bg-blue-700" on:click={loadDatasets}>
         {$t.common?.refresh}
       </button>