fix: align rl-state API shape with frontend, add error boundary

backend/api/demo.py

@@ -438,17 +438,40 @@ async def run_benchmark(req: BenchmarkRequest):
 
 @router.get("/rl-state")
 async def get_rl_state():
+    from rl.experience import get_metrics
     state = get_bandit_state()
+    metrics = get_metrics()
+
     action_names = [REPAIR_ACTION_NAMES[RepairAction(i)] for i in range(8)]
-    action_distribution = {
-        name: state["action_counts"][i]
+
+    # Build actionDistribution as array [{action, count}] expected by frontend
+    action_distribution = [
+        {"action": name, "count": state["action_counts"][i]}
         for i, name in enumerate(action_names)
-    }
+    ]
+
+    # Build episodes array [{episode, totalReward, successRate}] from reward_history
+    reward_history: list[float] = metrics.reward_history or []
+    total_eps = max(metrics.total_episodes, len(reward_history))
+    episodes = [
+        {
+            "episode": i + 1,
+            "totalReward": round(r, 3),
+            "successRate": round(metrics.success_rate, 3),
+        }
+        for i, r in enumerate(reward_history)
+    ]
+
+    from gepa.optimizer import get_gepa
+    gepa = get_gepa()
+
     return {
-        "action_counts": state["action_counts"],
-        "alpha": state["alpha"],
-        "total_updates": state["total_updates"],
-        "action_distribution": action_distribution,
+        "totalEpisodes": total_eps,
+        "successRate": round(metrics.success_rate, 3),
+        "currentAlpha": round(state["alpha"], 4),
+        "episodes": episodes,
+        "actionDistribution": action_distribution,
+        "currentGeneration": gepa.current_generation,
     }
 
 

frontend/src/components/PerformanceGraph.tsx

@@ -66,7 +66,11 @@ export function PerformanceGraph() {
     )
   }
 
-  const { totalEpisodes, successRate, currentAlpha, episodes, actionDistribution } = rlState
+  const totalEpisodes: number = rlState.totalEpisodes ?? 0
+  const successRate: number = rlState.successRate ?? 0
+  const currentAlpha: number = rlState.currentAlpha ?? 0
+  const episodes: { episode: number; totalReward: number; successRate: number }[] = Array.isArray(rlState.episodes) ? rlState.episodes : []
+  const actionDistribution: { action: string; count: number }[] = Array.isArray(rlState.actionDistribution) ? rlState.actionDistribution : []
 
   return (
     <div className="flex flex-col gap-3">

frontend/src/main.tsx

@@ -12,8 +12,45 @@ try {
   document.documentElement.setAttribute('data-theme', 'dark')
 }
 
+class ErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  { error: Error | null }
+> {
+  constructor(props: { children: React.ReactNode }) {
+    super(props)
+    this.state = { error: null }
+  }
+  static getDerivedStateFromError(error: Error) {
+    return { error }
+  }
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{
+          height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
+          background: '#08080d', color: '#fff', flexDirection: 'column', gap: 16, padding: 32,
+          fontFamily: 'monospace'
+        }}>
+          <div style={{ fontSize: 14, color: '#ef4444', marginBottom: 8 }}>Runtime error</div>
+          <pre style={{ fontSize: 11, color: '#9ca3af', maxWidth: 600, overflow: 'auto' }}>
+            {this.state.error.message}
+          </pre>
+          <button
+            onClick={() => window.location.reload()}
+            style={{ marginTop: 8, padding: '8px 16px', background: '#8b5cf6', border: 'none',
+              color: '#fff', borderRadius: 8, cursor: 'pointer', fontSize: 12 }}
+          >
+            Reload
+          </button>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
+  <ErrorBoundary>
     <App />
-  </React.StrictMode>
+  </ErrorBoundary>
 )