CUB-121: build React pages with real API integration

- HubPage: agent summary stats, cards, status badges, progress bars, refresh
- LogsPage: activity feed from tasks, status filter, loading skeleton
- ProjectsPage: project cards with status badges and agent counts
- SessionsPage: responsive table/card view with model/token info
- SettingsPage: dark mode toggle, gateway URL, refresh interval persist
- ThemeProvider with dark/light mode via CSS custom properties
- useLocalStorage hook for settings persistence
- Loading/error/empty states across all pages
- npm run build passes cleanly

frontend/src/index.css

@@ -18,6 +18,17 @@
   --color-status-thinking: #A78BFA;
   --color-status-error: #F87171;
   --color-status-offline: #64748B;
+
+  /* Light mode overrides */
+  --color-light-surface-darkest: #F8FAFC;
+  --color-light-surface-dark: #F1F5F9;
+  --color-light-surface-medium: #E2E8F0;
+  --color-light-surface-light: #CBD5E1;
+  --color-light-surface-lighter: #94A3B8;
+  --color-light-on-surface: #0F172A;
+  --color-light-on-surface-variant: #475569;
+  --color-light-on-surface-muted: #64748B;
+  --color-light-primary: #0284C7;
 }
 
 body {
@@ -27,3 +38,39 @@ body {
   color: var(--color-on-surface);
   font-family: 'Inter', 'Roboto', sans-serif;
 }
+
+/* Dark theme (default) */
+html.dark body {
+  background-color: var(--color-surface-darkest);
+  color: var(--color-on-surface);
+}
+
+/* Light theme */
+html.light body {
+  background-color: var(--color-light-surface-darkest);
+  color: var(--color-light-on-surface);
+}
+
+html.light {
+  --color-surface-darkest: var(--color-light-surface-darkest);
+  --color-surface-dark: var(--color-light-surface-dark);
+  --color-surface-medium: var(--color-light-surface-medium);
+  --color-surface-light: var(--color-light-surface-light);
+  --color-surface-lighter: var(--color-light-surface-lighter);
+  --color-on-surface: var(--color-light-on-surface);
+  --color-on-surface-variant: var(--color-light-on-surface-variant);
+  --color-on-surface-muted: var(--color-light-on-surface-muted);
+  --color-primary: var(--color-light-primary);
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.skeleton {
+  background: linear-gradient(90deg, var(--color-surface-light) 25%, var(--color-surface-lighter) 50%, var(--color-surface-light) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 0.5rem;
+}