fix: auto-compute environment slug + respect environment filter globally

Part A: Environment creation slug is now auto-derived from display name
and shown read-only (matching app creation pattern). Removes manual slug
input.

Part B: All data queries now pass the selected environment to backend:
- Exchanges search, Dashboard L1/L2/L3 stats, Routes metrics, Route
  detail, correlation chains, and processor metrics all filter by
  selected environment.
- Backend RouteMetricsController now accepts environment parameter for
  both route and processor metrics endpoints.

Closes #XYZ

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/api/queries/catalog.ts

@@ -61,16 +61,17 @@ export function useCatalog(environment?: string) {
   });
 }
 
-export function useRouteMetrics(from?: string, to?: string, appId?: string) {
+export function useRouteMetrics(from?: string, to?: string, appId?: string, environment?: string) {
   const refetchInterval = useRefreshInterval(30_000);
   return useQuery({
-    queryKey: ['routes', 'metrics', from, to, appId],
+    queryKey: ['routes', 'metrics', from, to, appId, environment],
     queryFn: async () => {
       const token = useAuthStore.getState().accessToken;
       const params = new URLSearchParams();
       if (from) params.set('from', from);
       if (to) params.set('to', to);
       if (appId) params.set('appId', appId);
+      if (environment) params.set('environment', environment);
       const res = await fetch(`${config.apiBaseUrl}/routes/metrics?${params}`, {
         headers: {
           Authorization: `Bearer ${token}`,

ui/src/api/queries/correlation.ts

@@ -1,13 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
 import { api } from '../client';
 
-export function useCorrelationChain(correlationId: string | null) {
+export function useCorrelationChain(correlationId: string | null, environment?: string) {
   return useQuery({
-    queryKey: ['correlation-chain', correlationId],
+    queryKey: ['correlation-chain', correlationId, environment],
     queryFn: async () => {
       const { data } = await api.POST('/search/executions', {
         body: {
           correlationId: correlationId!,
+          environment,
           limit: 20,
           sortField: 'startTime',
           sortDir: 'asc',

ui/src/api/queries/processor-metrics.ts

@@ -3,15 +3,16 @@ import { config } from '../../config';
 import { useAuthStore } from '../../auth/auth-store';
 import { useRefreshInterval } from './use-refresh-interval';
 
-export function useProcessorMetrics(routeId: string | null, appId?: string) {
+export function useProcessorMetrics(routeId: string | null, appId?: string, environment?: string) {
   const refetchInterval = useRefreshInterval(30_000);
   return useQuery({
-    queryKey: ['processor-metrics', routeId, appId],
+    queryKey: ['processor-metrics', routeId, appId, environment],
     queryFn: async () => {
       const token = useAuthStore.getState().accessToken;
       const params = new URLSearchParams();
       if (routeId) params.set('routeId', routeId);
       if (appId) params.set('appId', appId);
+      if (environment) params.set('environment', environment);
       const res = await fetch(`${config.apiBaseUrl}/routes/metrics/processors?${params}`, {
         headers: {
           Authorization: `Bearer ${token}`,