feat: make demo mode data more realistic

dashboard/src/App.tsx

@@ -1,5 +1,5 @@
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
-import { useEffect, lazy, Suspense } from "react";
+import { Component, useEffect, lazy, Suspense, type ReactNode } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Toaster } from "./components/ui/sonner";
@@ -17,6 +17,52 @@ import { AuthProvider, useAuth } from "./contexts/auth";
 import { useAuthorization } from "./utils";
 import { useRegistrationInfo } from "./api/control-layer/hooks";
 
+// Error boundary to catch and display React render errors
+class ErrorBoundary extends Component<
+  { children: ReactNode },
+  { error: Error | null }
+> {
+  state = { error: null as Error | null };
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error("React ErrorBoundary caught:", error, info.componentStack);
+  }
+  render() {
+    if (this.state.error) {
+      const showDetails = import.meta.env.DEV;
+      return (
+        <div style={{ padding: 32, fontFamily: "monospace" }}>
+          <h2 style={{ color: "red" }}>Something went wrong</h2>
+          {showDetails ? (
+            <>
+              <pre style={{ whiteSpace: "pre-wrap", fontSize: 14 }}>
+                {this.state.error.message}
+              </pre>
+              <pre style={{ whiteSpace: "pre-wrap", fontSize: 12, color: "#666" }}>
+                {this.state.error.stack}
+              </pre>
+            </>
+          ) : (
+            <p>An unexpected error occurred. Please try reloading the page.</p>
+          )}
+          <button
+            onClick={() => {
+              localStorage.removeItem("demo-mode-state");
+              window.location.reload();
+            }}
+            style={{ marginTop: 16, padding: "8px 16px" }}
+          >
+            Clear demo state & reload
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
 // Lazy load route components
 const ApiKeys = lazy(() =>
   import("./components/features/api-keys").then((m) => ({
@@ -428,15 +474,17 @@ function AppRoutes() {
 
 function App() {
   return (
-    <QueryClientProvider client={queryClient}>
-      <SettingsProvider>
-        <AuthProvider>
-          <AppRoutes />
-        </AuthProvider>
-      </SettingsProvider>
-      {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
-      <Toaster />
-    </QueryClientProvider>
+    <ErrorBoundary>
+      <QueryClientProvider client={queryClient}>
+        <SettingsProvider>
+          <AuthProvider>
+            <AppRoutes />
+          </AuthProvider>
+        </SettingsProvider>
+        {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
+        <Toaster />
+      </QueryClientProvider>
+    </ErrorBoundary>
   );
 }
 

dashboard/src/api/control-layer/mocks/api-keys.json

@@ -1,16 +1,37 @@
 [
   {
     "id": "key-1",
-    "name": "Development Key",
-    "description": "For local development",
-    "created_at": "2024-01-01T10:00:00Z",
-    "last_used": "2024-01-20T15:30:00Z"
+    "name": "CI/CD Pipeline",
+    "description": "Automated testing and evaluation pipeline",
+    "created_at": "2025-04-01T10:00:00Z",
+    "last_used": "2026-02-18T06:15:00Z"
   },
   {
     "id": "key-2",
-    "name": "Production Key",
-    "description": "For production use",
-    "created_at": "2024-01-02T09:15:00Z",
-    "last_used": "2024-01-21T11:45:00Z"
+    "name": "Batch Processing - Production",
+    "description": "Production batch job submissions",
+    "created_at": "2025-05-15T09:15:00Z",
+    "last_used": "2026-02-17T22:30:00Z"
+  },
+  {
+    "id": "key-3",
+    "name": "Partner Integration - ClientCorp",
+    "description": "API access for ClientCorp partner integration",
+    "created_at": "2025-06-01T14:00:00Z",
+    "last_used": "2026-02-16T18:45:00Z"
+  },
+  {
+    "id": "key-4",
+    "name": "Development - Local",
+    "description": "Local development and testing",
+    "created_at": "2025-03-10T11:30:00Z",
+    "last_used": "2026-02-14T10:20:00Z"
+  },
+  {
+    "id": "key-5",
+    "name": "Monitoring & Health Checks",
+    "description": "Automated endpoint health monitoring",
+    "created_at": "2025-08-20T08:00:00Z",
+    "last_used": "2026-02-18T07:00:00Z"
   }
 ]