Add React UI with Execution Explorer, auth, and standalone deployment

- Scaffold Vite + React + TypeScript frontend in ui/ with full design
  system (dark/light themes) matching the HTML mockups
- Implement Execution Explorer page: search filters, results table with
  expandable processor tree and exchange detail sidebar, pagination
- Add UI authentication: UiAuthController (login/refresh endpoints),
  JWT filter handles ui: subject prefix, CORS configuration
- Shared components: StatusPill, DurationBar, StatCard, AppBadge,
  FilterChip, Pagination — all using CSS Modules with design tokens
- API client layer: openapi-fetch with auth middleware, TanStack Query
  hooks for search/detail/snapshot queries, Zustand for state
- Standalone deployment: Nginx Dockerfile, K8s Deployment + ConfigMap +
  NodePort (30080), runtime config.js for API base URL
- Embedded mode: maven-resources-plugin copies ui/dist into JAR static
  resources, SPA forward controller for client-side routing
- CI/CD: UI build step, Docker build/push for server-ui image, K8s
  deploy step for UI, UI credential secrets

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

ui/src/pages/executions/ExecutionExplorer.tsx

@@ -0,0 +1,67 @@
+import { useSearchExecutions } from '../../api/queries/executions';
+import { useExecutionSearch } from './use-execution-search';
+import { StatCard } from '../../components/shared/StatCard';
+import { Pagination } from '../../components/shared/Pagination';
+import { SearchFilters } from './SearchFilters';
+import { ResultsTable } from './ResultsTable';
+import styles from './ExecutionExplorer.module.css';
+
+export function ExecutionExplorer() {
+  const { toSearchRequest, offset, limit, setOffset } = useExecutionSearch();
+  const searchRequest = toSearchRequest();
+  const { data, isLoading, isFetching } = useSearchExecutions(searchRequest);
+
+  const total = data?.total ?? 0;
+  const results = data?.results ?? [];
+
+  // Derive stats from current search results
+  const failedCount = results.filter((r) => r.status === 'FAILED').length;
+  const avgDuration = results.length > 0
+    ? Math.round(results.reduce((sum, r) => sum + r.duration, 0) / results.length)
+    : 0;
+
+  const showFrom = total > 0 ? offset + 1 : 0;
+  const showTo = Math.min(offset + limit, total);
+
+  return (
+    <>
+      {/* Page Header */}
+      <div className={`${styles.pageHeader} animate-in`}>
+        <div>
+          <h1>Transaction Explorer</h1>
+          <div className={styles.subtitle}>Search and analyze route executions</div>
+        </div>
+        <div className={styles.liveIndicator}>
+          <span className={styles.liveDot} />
+          LIVE
+        </div>
+      </div>
+
+      {/* Stats Bar */}
+      <div className={styles.statsBar}>
+        <StatCard label="Total Matches" value={total.toLocaleString()} accent="amber" change={`from current search`} />
+        <StatCard label="Avg Duration" value={`${avgDuration}ms`} accent="cyan" />
+        <StatCard label="Failed (page)" value={failedCount.toString()} accent="rose" />
+        <StatCard label="P99 Latency" value="--" accent="green" change="stats endpoint coming soon" />
+        <StatCard label="Active Now" value="--" accent="blue" change="stats endpoint coming soon" />
+      </div>
+
+      {/* Filters */}
+      <SearchFilters />
+
+      {/* Results Header */}
+      <div className={`${styles.resultsHeader} animate-in delay-4`}>
+        <span className={styles.resultsCount}>
+          Showing <strong>{showFrom}–{showTo}</strong> of <strong>{total.toLocaleString()}</strong> results
+          {isFetching && !isLoading && ' · updating...'}
+        </span>
+      </div>
+
+      {/* Results Table */}
+      <ResultsTable results={results} loading={isLoading} />
+
+      {/* Pagination */}
+      <Pagination total={total} offset={offset} limit={limit} onChange={setOffset} />
+    </>
+  );
+}