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/theme/ThemeProvider.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { useThemeStore } from './theme-store';
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const theme = useThemeStore((s) => s.theme);
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+  }, [theme]);
+
+  return <>{children}</>;
+}

ui/src/theme/fonts.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

ui/src/theme/theme-store.ts

@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+
+type Theme = 'dark' | 'light';
+
+interface ThemeState {
+  theme: Theme;
+  toggle: () => void;
+}
+
+const stored = localStorage.getItem('cameleer-theme') as Theme | null;
+const initial: Theme = stored === 'light' ? 'light' : 'dark';
+
+export const useThemeStore = create<ThemeState>((set) => ({
+  theme: initial,
+  toggle: () =>
+    set((state) => {
+      const next = state.theme === 'dark' ? 'light' : 'dark';
+      localStorage.setItem('cameleer-theme', next);
+      return { theme: next };
+    }),
+}));

ui/src/theme/tokens.css

@@ -0,0 +1,143 @@
+/* ─── Dark Theme (default) ─── */
+:root {
+  --bg-deep: #060a13;
+  --bg-base: #0a0e17;
+  --bg-surface: #111827;
+  --bg-raised: #1a2332;
+  --bg-hover: #1e2d3d;
+  --border: #1e2d3d;
+  --border-subtle: #152030;
+  --text-primary: #e2e8f0;
+  --text-secondary: #8b9cb6;
+  --text-muted: #4a5e7a;
+  --amber: #f0b429;
+  --amber-dim: #b8860b;
+  --amber-glow: rgba(240, 180, 41, 0.15);
+  --cyan: #22d3ee;
+  --cyan-dim: #0e7490;
+  --cyan-glow: rgba(34, 211, 238, 0.12);
+  --rose: #f43f5e;
+  --rose-dim: #9f1239;
+  --rose-glow: rgba(244, 63, 94, 0.12);
+  --green: #10b981;
+  --green-glow: rgba(16, 185, 129, 0.12);
+  --blue: #3b82f6;
+  --purple: #a855f7;
+  --font-body: 'DM Sans', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+
+  /* TopNav glass */
+  --topnav-bg: rgba(6, 10, 19, 0.85);
+  /* Button primary hover */
+  --amber-hover: #d4a017;
+}
+
+/* ─── Light Theme ─── */
+[data-theme="light"] {
+  --bg-deep: #f7f5f2;
+  --bg-base: #efecea;
+  --bg-surface: #ffffff;
+  --bg-raised: #f3f1ee;
+  --bg-hover: #eae7e3;
+  --border: #d4cfc8;
+  --border-subtle: #e4e0db;
+  --text-primary: #1c1917;
+  --text-secondary: #57534e;
+  --text-muted: #a8a29e;
+  --amber: #b45309;
+  --amber-dim: #92400e;
+  --amber-glow: rgba(180, 83, 9, 0.07);
+  --cyan: #0e7490;
+  --cyan-dim: #155e75;
+  --cyan-glow: rgba(14, 116, 144, 0.06);
+  --rose: #be123c;
+  --rose-dim: #9f1239;
+  --rose-glow: rgba(190, 18, 60, 0.05);
+  --green: #047857;
+  --green-glow: rgba(4, 120, 87, 0.06);
+  --blue: #1d4ed8;
+  --purple: #7c3aed;
+
+  --topnav-bg: rgba(247, 245, 242, 0.85);
+  --amber-hover: #92400e;
+}
+
+/* ─── Global Reset & Body ─── */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: var(--bg-deep);
+  color: var(--text-primary);
+  font-family: var(--font-body);
+  font-size: 14px;
+  line-height: 1.5;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+a { color: var(--amber); text-decoration: none; }
+a:hover { color: var(--text-primary); }
+
+/* ─── Background Treatment ─── */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background:
+    radial-gradient(ellipse 800px 400px at 20% 20%, rgba(240, 180, 41, 0.03), transparent),
+    radial-gradient(ellipse 600px 600px at 80% 80%, rgba(34, 211, 238, 0.02), transparent);
+  pointer-events: none;
+  z-index: 0;
+}
+
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  opacity: 0.025;
+  background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 200 Q100 150 200 200 T400 200' fill='none' stroke='%23f0b429' stroke-width='1'/%3E%3Cpath d='M0 220 Q120 170 200 220 T400 220' fill='none' stroke='%23f0b429' stroke-width='0.5'/%3E%3Cpath d='M0 180 Q80 130 200 180 T400 180' fill='none' stroke='%23f0b429' stroke-width='0.5'/%3E%3Cpath d='M0 100 Q150 60 200 100 T400 100' fill='none' stroke='%2322d3ee' stroke-width='0.5'/%3E%3Cpath d='M0 300 Q100 260 200 300 T400 300' fill='none' stroke='%2322d3ee' stroke-width='0.5'/%3E%3C/svg%3E");
+  background-size: 400px 400px;
+  pointer-events: none;
+  z-index: 0;
+}
+
+[data-theme="light"] body::before,
+[data-theme="light"] body::after {
+  opacity: 0.015;
+}
+
+/* ─── Animations ─── */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes livePulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
+  50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
+}
+
+.animate-in { animation: fadeIn 0.3s ease-out both; }
+.delay-1 { animation-delay: 0.05s; }
+.delay-2 { animation-delay: 0.1s; }
+.delay-3 { animation-delay: 0.15s; }
+.delay-4 { animation-delay: 0.2s; }
+.delay-5 { animation-delay: 0.25s; }
+
+/* ─── Scrollbar ─── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+/* ─── Utility ─── */
+.mono { font-family: var(--font-mono); font-size: 12px; }
+.text-muted { color: var(--text-muted); }
+.text-secondary { color: var(--text-secondary); }