Add live/paused toggle, env badge, remove topnav search, rename labels

- Add LIVE/PAUSED toggle button that auto-refreshes search results every 5s
- Source environment badge from VITE_ENV_NAME env var (defaults to DEV locally, PRODUCTION in Docker)
- Remove search trigger button from topnav (command palette still available via keyboard)
- Rename "Transaction Explorer" to "Route Explorer" and "Active Now" to "In-Flight"

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ui/src/pages/executions/ExecutionExplorer.module.css

@@ -19,22 +19,48 @@
   margin-top: 2px;
 }
 
-.liveIndicator {
+.liveToggle {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 12px;
-  color: var(--green);
   font-family: var(--font-mono);
   font-weight: 500;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 14px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.liveToggle:hover {
+  background: var(--surface-hover);
+}
+
+.liveOn {
+  color: var(--green);
+  border-color: var(--green);
+}
+
+.liveOff {
+  color: var(--text-muted);
+}
+
+.liveOn .liveDot {
+  background: var(--green);
+  animation: livePulse 2s ease-in-out infinite;
+}
+
+.liveOff .liveDot {
+  background: var(--text-muted);
+  animation: none;
 }
 
 .liveDot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--green);
-  animation: livePulse 2s ease-in-out infinite;
 }
 
 .statsBar {

ui/src/pages/executions/ExecutionExplorer.tsx

@@ -7,9 +7,9 @@ import { ResultsTable } from './ResultsTable';
 import styles from './ExecutionExplorer.module.css';
 
 export function ExecutionExplorer() {
-  const { toSearchRequest, offset, limit, setOffset } = useExecutionSearch();
+  const { toSearchRequest, offset, limit, setOffset, live, toggleLive } = useExecutionSearch();
   const searchRequest = toSearchRequest();
-  const { data, isLoading, isFetching } = useSearchExecutions(searchRequest);
+  const { data, isLoading, isFetching } = useSearchExecutions(searchRequest, live);
   const { data: stats } = useExecutionStats();
   const { data: timeseries } = useStatsTimeseries(
     searchRequest.timeFrom ?? undefined,
@@ -39,13 +39,13 @@ export function ExecutionExplorer() {
       {/* Page Header */}
       <div className={`${styles.pageHeader} animate-in`}>
         <div>
-          <h1>Transaction Explorer</h1>
+          <h1>Route Explorer</h1>
           <div className={styles.subtitle}>Search and analyze route executions</div>
         </div>
-        <div className={styles.liveIndicator}>
+        <button className={`${styles.liveToggle} ${live ? styles.liveOn : styles.liveOff}`} onClick={toggleLive}>
           <span className={styles.liveDot} />
-          LIVE
-        </div>
+          {live ? 'LIVE' : 'PAUSED'}
+        </button>
       </div>
 
       {/* Stats Bar */}
@@ -54,7 +54,7 @@ export function ExecutionExplorer() {
         <StatCard label="Avg Duration" value={`${avgDuration}ms`} accent="cyan" sparkData={sparkAvgDuration} />
         <StatCard label="Failed (page)" value={failedCount.toString()} accent="rose" sparkData={sparkFailed} />
         <StatCard label="P99 Latency" value={stats ? `${stats.p99LatencyMs}ms` : '--'} accent="green" change="last hour" sparkData={sparkP99} />
-        <StatCard label="Active Now" value={stats ? stats.activeCount.toString() : '--'} accent="blue" change="running executions" sparkData={sparkActive} />
+        <StatCard label="In-Flight" value={stats ? stats.activeCount.toString() : '--'} accent="blue" change="running executions" sparkData={sparkActive} />
       </div>
 
       {/* Filters */}

ui/src/pages/executions/use-execution-search.ts

@@ -19,9 +19,11 @@ interface ExecutionSearchState {
   routeId: string;
   agentId: string;
   processorType: string;
+  live: boolean;
   offset: number;
   limit: number;
 
+  toggleLive: () => void;
   setStatus: (statuses: string[]) => void;
   toggleStatus: (s: string) => void;
   setTimeFrom: (v: string) => void;
@@ -47,9 +49,11 @@ export const useExecutionSearch = create<ExecutionSearchState>((set, get) => ({
   routeId: '',
   agentId: '',
   processorType: '',
+  live: true,
   offset: 0,
   limit: 25,
 
+  toggleLive: () => set((state) => ({ live: !state.live })),
   setStatus: (statuses) => set({ status: statuses, offset: 0 }),
   toggleStatus: (s) =>
     set((state) => ({