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/api/queries/agents.ts

@@ -1,19 +1,27 @@
 import { useQuery } from '@tanstack/react-query';
-import { api } from '../client';
 import { config } from '../../config';
 import { useAuthStore } from '../../auth/auth-store';
 import { useRefreshInterval } from './use-refresh-interval';
 
-export function useAgents(status?: string, application?: string) {
+export function useAgents(status?: string, application?: string, environment?: string) {
   const refetchInterval = useRefreshInterval(10_000);
   return useQuery({
-    queryKey: ['agents', status, application],
+    queryKey: ['agents', status, application, environment],
     queryFn: async () => {
-      const { data, error } = await api.GET('/agents', {
-        params: { query: { ...(status ? { status } : {}), ...(application ? { application } : {}) } },
+      const token = useAuthStore.getState().accessToken;
+      const params = new URLSearchParams();
+      if (status) params.set('status', status);
+      if (application) params.set('application', application);
+      if (environment) params.set('environment', environment);
+      const qs = params.toString();
+      const res = await fetch(`${config.apiBaseUrl}/agents${qs ? `?${qs}` : ''}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'X-Cameleer-Protocol-Version': '1',
+        },
       });
-      if (error) throw new Error('Failed to load agents');
-      return data!;
+      if (!res.ok) throw new Error('Failed to load agents');
+      return res.json();
     },
     refetchInterval,
   });

ui/src/api/queries/catalog.ts

@@ -3,15 +3,16 @@ import { config } from '../../config';
 import { useAuthStore } from '../../auth/auth-store';
 import { useRefreshInterval } from './use-refresh-interval';
 
-export function useRouteCatalog(from?: string, to?: string) {
+export function useRouteCatalog(from?: string, to?: string, environment?: string) {
   const refetchInterval = useRefreshInterval(15_000);
   return useQuery({
-    queryKey: ['routes', 'catalog', from, to],
+    queryKey: ['routes', 'catalog', from, to, 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 (environment) params.set('environment', environment);
       const qs = params.toString();
       const res = await fetch(`${config.apiBaseUrl}/routes/catalog${qs ? `?${qs}` : ''}`, {
         headers: {

ui/src/api/queries/dashboard.ts

@@ -39,12 +39,12 @@ export interface GroupedTimeseries {
   [key: string]: { buckets: TimeseriesBucket[] };
 }
 
-export function useTimeseriesByApp(from?: string, to?: string) {
+export function useTimeseriesByApp(from?: string, to?: string, environment?: string) {
   const refetchInterval = useRefreshInterval(30_000);
   return useQuery({
-    queryKey: ['dashboard', 'timeseries-by-app', from, to],
+    queryKey: ['dashboard', 'timeseries-by-app', from, to, environment],
     queryFn: () => fetchJson<GroupedTimeseries>('/search/stats/timeseries/by-app', {
-      from, to, buckets: '24',
+      from, to, buckets: '24', environment,
     }),
     enabled: !!from,
     placeholderData: (prev: GroupedTimeseries | undefined) => prev,
@@ -54,12 +54,12 @@ export function useTimeseriesByApp(from?: string, to?: string) {
 
 // ── Timeseries by route (L2 charts) ───────────────────────────────────
 
-export function useTimeseriesByRoute(from?: string, to?: string, application?: string) {
+export function useTimeseriesByRoute(from?: string, to?: string, application?: string, environment?: string) {
   const refetchInterval = useRefreshInterval(30_000);
   return useQuery({
-    queryKey: ['dashboard', 'timeseries-by-route', from, to, application],
+    queryKey: ['dashboard', 'timeseries-by-route', from, to, application, environment],
     queryFn: () => fetchJson<GroupedTimeseries>('/search/stats/timeseries/by-route', {
-      from, to, application, buckets: '24',
+      from, to, application, buckets: '24', environment,
     }),
     enabled: !!from && !!application,
     placeholderData: (prev: GroupedTimeseries | undefined) => prev,
@@ -79,12 +79,12 @@ export interface TopError {
   lastSeen: string;
 }
 
-export function useTopErrors(from?: string, to?: string, application?: string, routeId?: string) {
+export function useTopErrors(from?: string, to?: string, application?: string, routeId?: string, environment?: string) {
   const refetchInterval = useRefreshInterval(10_000);
   return useQuery({
-    queryKey: ['dashboard', 'top-errors', from, to, application, routeId],
+    queryKey: ['dashboard', 'top-errors', from, to, application, routeId, environment],
     queryFn: () => fetchJson<TopError[]>('/search/errors/top', {
-      from, to, application, routeId, limit: '5',
+      from, to, application, routeId, limit: '5', environment,
     }),
     enabled: !!from,
     placeholderData: (prev: TopError[] | undefined) => prev,
@@ -101,11 +101,11 @@ export interface PunchcardCell {
   failedCount: number;
 }
 
-export function usePunchcard(application?: string) {
+export function usePunchcard(application?: string, environment?: string) {
   const refetchInterval = useRefreshInterval(60_000);
   return useQuery({
-    queryKey: ['dashboard', 'punchcard', application],
-    queryFn: () => fetchJson<PunchcardCell[]>('/search/stats/punchcard', { application }),
+    queryKey: ['dashboard', 'punchcard', application, environment],
+    queryFn: () => fetchJson<PunchcardCell[]>('/search/stats/punchcard', { application, environment }),
     placeholderData: (prev: PunchcardCell[] | undefined) => prev ?? [],
     refetchInterval,
   });

ui/src/api/queries/executions.ts

@@ -8,10 +8,11 @@ export function useExecutionStats(
   timeTo: string | undefined,
   routeId?: string,
   application?: string,
+  environment?: string,
 ) {
   const live = useLiveQuery(10_000);
   return useQuery({
-    queryKey: ['executions', 'stats', timeFrom, timeTo, routeId, application],
+    queryKey: ['executions', 'stats', timeFrom, timeTo, routeId, application, environment],
     queryFn: async () => {
       const { data, error } = await api.GET('/search/stats', {
         params: {
@@ -20,6 +21,7 @@ export function useExecutionStats(
             to: timeTo || undefined,
             routeId: routeId || undefined,
             application: application || undefined,
+            environment: environment || undefined,
           },
         },
       });
@@ -70,10 +72,11 @@ export function useStatsTimeseries(
   timeTo: string | undefined,
   routeId?: string,
   application?: string,
+  environment?: string,
 ) {
   const live = useLiveQuery(30_000);
   return useQuery({
-    queryKey: ['executions', 'timeseries', timeFrom, timeTo, routeId, application],
+    queryKey: ['executions', 'timeseries', timeFrom, timeTo, routeId, application, environment],
     queryFn: async () => {
       const { data, error } = await api.GET('/search/stats/timeseries', {
         params: {
@@ -83,6 +86,7 @@ export function useStatsTimeseries(
             buckets: 24,
             routeId: routeId || undefined,
             application: application || undefined,
+            environment: environment || undefined,
           },
         },
       });

ui/src/api/schema.d.ts

@@ -1502,6 +1502,7 @@ export interface components {
             limit?: number;
             sortField?: string;
             sortDir?: string;
+            environment?: string;
         };
         ExecutionSummary: {
             executionId: string;
@@ -1960,6 +1961,7 @@ export interface components {
             instanceId: string;
             displayName: string;
             applicationId: string;
+            environmentId?: string;
             status: string;
             routeIds: string[];
             /** Format: date-time */
@@ -2773,6 +2775,7 @@ export interface operations {
                 agentId?: string;
                 processorType?: string;
                 application?: string;
+                environment?: string;
                 offset?: number;
                 limit?: number;
                 sortField?: string;
@@ -3795,6 +3798,7 @@ export interface operations {
                 to?: string;
                 routeId?: string;
                 application?: string;
+                environment?: string;
             };
             header?: never;
             path?: never;
@@ -3821,6 +3825,7 @@ export interface operations {
                 buckets?: number;
                 routeId?: string;
                 application?: string;
+                environment?: string;
             };
             header?: never;
             path?: never;
@@ -3846,6 +3851,7 @@ export interface operations {
                 to?: string;
                 buckets?: number;
                 application: string;
+                environment?: string;
             };
             header?: never;
             path?: never;
@@ -3872,6 +3878,7 @@ export interface operations {
                 from: string;
                 to?: string;
                 buckets?: number;
+                environment?: string;
             };
             header?: never;
             path?: never;
@@ -3896,6 +3903,7 @@ export interface operations {
         parameters: {
             query?: {
                 application?: string;
+                environment?: string;
             };
             header?: never;
             path?: never;
@@ -3921,6 +3929,7 @@ export interface operations {
                 to?: string;
                 application?: string;
                 routeId?: string;
+                environment?: string;
                 limit?: number;
             };
             header?: never;
@@ -4334,6 +4343,7 @@ export interface operations {
             query?: {
                 status?: string;
                 application?: string;
+                environment?: string;
             };
             header?: never;
             path?: never;

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