feat: add environment filtering across all APIs and UI

Backend: Added optional `environment` query parameter to catalog,
search, stats, timeseries, punchcard, top-errors, logs, and agents
endpoints. ClickHouse queries filter by environment when specified
(literal SQL for AggregatingMergeTree, ? binds for raw tables).
StatsStore interface methods all accept environment parameter.

UI: Added EnvironmentSelector component (compact native select).
LayoutShell extracts distinct environments from agent data and
passes selected environment to catalog and agent queries via URL
search param (?env=). TopBar shows current environment label.

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

ui/src/components/LayoutShell.tsx

@@ -1,4 +1,4 @@
-import { Outlet, useNavigate, useLocation } from 'react-router';
+import { Outlet, useNavigate, useLocation, useSearchParams } from 'react-router';
 import {
   AppShell,
   Sidebar,
@@ -26,6 +26,7 @@ import { useAuthStore } from '../auth/auth-store';
 import { useState, useMemo, useCallback, useEffect, useRef, createElement } from 'react';
 import type { ReactNode } from 'react';
 import { ContentTabs } from './ContentTabs';
+import { EnvironmentSelector } from './EnvironmentSelector';
 import { useScope } from '../hooks/useScope';
 import {
   buildAppTreeNodes,
@@ -271,12 +272,38 @@ const SK_COLLAPSED = 'sidebar:collapsed';
 function LayoutContent() {
   const navigate = useNavigate();
   const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
   const queryClient = useQueryClient();
   const { timeRange, autoRefresh, refreshTimeRange } = useGlobalFilters();
-  const { data: catalog } = useRouteCatalog(timeRange.start.toISOString(), timeRange.end.toISOString());
-  const { data: agents } = useAgents();
+
+  // --- Environment filtering -----------------------------------------
+  const selectedEnv = searchParams.get('env') || undefined;
+  const setSelectedEnv = useCallback((env: string | undefined) => {
+    setSearchParams((prev) => {
+      const next = new URLSearchParams(prev);
+      if (env) {
+        next.set('env', env);
+      } else {
+        next.delete('env');
+      }
+      return next;
+    }, { replace: true });
+  }, [setSearchParams]);
+
+  const { data: catalog } = useRouteCatalog(timeRange.start.toISOString(), timeRange.end.toISOString(), selectedEnv);
+  const { data: agents } = useAgents(undefined, undefined, selectedEnv);
   const { data: attributeKeys } = useAttributeKeys();
 
+  // Extract distinct environments from agents
+  const environments: string[] = useMemo(() => {
+    if (!agents) return [];
+    const envSet = new Set<string>();
+    for (const a of agents as any[]) {
+      if (a.environmentId) envSet.add(a.environmentId);
+    }
+    return [...envSet].sort();
+  }, [agents]);
+
   // --- Admin search data (only fetched on admin pages) ----------------
   const isAdminPage = location.pathname.startsWith('/admin');
   const { data: adminUsers } = useUsers(isAdminPage);
@@ -675,6 +702,7 @@ function LayoutContent() {
     <AppShell sidebar={sidebarElement}>
       <TopBar
         breadcrumb={breadcrumb}
+        environment={selectedEnv}
         user={username ? { name: username } : undefined}
         onLogout={handleLogout}
       />
@@ -689,6 +717,16 @@ function LayoutContent() {
         data={searchData}
       />
 
+      {!isAdminPage && environments.length > 0 && (
+        <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '4px 1.5rem 0' }}>
+          <EnvironmentSelector
+            environments={environments}
+            value={selectedEnv}
+            onChange={setSelectedEnv}
+          />
+        </div>
+      )}
+
       {!isAdminPage && (
         <ContentTabs active={scope.tab} onChange={setTab} scope={scope} />
       )}