feat(env): add global production context and safety indicators

frontend/src/lib/components/layout/TopNavbar.svelte

@@ -16,7 +16,7 @@
    * @UX_TEST: ActivityClick -> {click: activity button, expected: task drawer opens}
    */
 
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import { page } from "$app/stores";
   import { activityStore } from "$lib/stores/activity.js";
   import {
@@ -30,6 +30,12 @@
   import { toggleAssistantChat } from "$lib/stores/assistantChat.js";
   import Icon from "$lib/ui/Icon.svelte";
   import LanguageSwitcher from "$lib/ui/LanguageSwitcher.svelte";
+  import {
+    environmentContextStore,
+    initializeEnvironmentContext,
+    setSelectedEnvironment,
+    selectedEnvironmentStore,
+  } from "$lib/stores/environmentContext.js";
 
   const dispatch = createEventDispatcher();
 
@@ -40,6 +46,10 @@
   $: activeCount = $activityStore?.activeCount || 0;
   $: recentTasks = $activityStore?.recentTasks || [];
   $: user = $auth?.user || null;
+  $: globalEnvironments = $environmentContextStore?.environments || [];
+  $: globalSelectedEnvId = $environmentContextStore?.selectedEnvId || "";
+  $: globalSelectedEnv = $selectedEnvironmentStore;
+  $: isProdContext = Boolean(globalSelectedEnv?.is_production);
 
   function toggleUserMenu(event) {
     event.stopPropagation();
@@ -94,6 +104,14 @@
     event.stopPropagation();
     toggleMobileSidebar();
   }
+
+  function handleGlobalEnvironmentChange(event) {
+    setSelectedEnvironment(event.target.value);
+  }
+
+  onMount(async () => {
+    await initializeEnvironmentContext();
+  });
 </script>
 
 <nav
@@ -137,6 +155,32 @@
 
   <!-- Nav Actions -->
   <div class="flex items-center gap-3 md:gap-4">
+    {#if globalEnvironments.length > 0}
+      <div class="hidden lg:flex items-center gap-2">
+        <select
+          class="h-9 rounded-lg border px-3 text-sm font-medium focus:outline-none focus:ring-2
+            {isProdContext
+              ? 'border-red-300 bg-red-50 text-red-900 focus:ring-red-200'
+              : 'border-slate-300 bg-white text-slate-700 focus:ring-sky-200'}"
+          value={globalSelectedEnvId}
+          on:change={handleGlobalEnvironmentChange}
+          aria-label={$t.dashboard?.environment || "Environment"}
+          title={$t.dashboard?.environment || "Environment"}
+        >
+          {#each globalEnvironments as env}
+            <option value={env.id}>
+              {env.name}{env.is_production ? " [PROD]" : ""}
+            </option>
+          {/each}
+        </select>
+        {#if isProdContext}
+          <span class="rounded-md bg-red-600 px-2 py-1 text-xs font-bold text-white">
+            PROD
+          </span>
+        {/if}
+      </div>
+    {/if}
+
     <LanguageSwitcher />
 
     <!-- Assistant -->