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/EnvironmentSelector.module.css

@@ -0,0 +1,26 @@
+.select {
+  appearance: none;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 2px 20px 2px 6px;
+  font-size: 11px;
+  color: var(--text-muted);
+  cursor: pointer;
+  outline: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 5px center;
+  background-size: 10px 6px;
+  min-width: 80px;
+  line-height: 1.4;
+}
+
+.select:hover {
+  border-color: var(--text-muted);
+}
+
+.select:focus-visible {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent);
+}

ui/src/components/EnvironmentSelector.tsx

@@ -0,0 +1,25 @@
+import styles from './EnvironmentSelector.module.css';
+
+interface EnvironmentSelectorProps {
+  environments: string[];
+  value: string | undefined;
+  onChange: (env: string | undefined) => void;
+}
+
+export function EnvironmentSelector({ environments, value, onChange }: EnvironmentSelectorProps) {
+  if (environments.length === 0) return null;
+
+  return (
+    <select
+      className={styles.select}
+      value={value ?? ''}
+      onChange={(e) => onChange(e.target.value || undefined)}
+      aria-label="Environment filter"
+    >
+      <option value="">All Envs</option>
+      {environments.map((env) => (
+        <option key={env} value={env}>{env}</option>
+      ))}
+    </select>
+  );
+}

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} />
       )}