fix: serve React dashboard from FastAPI; add /training-log endpoint

Dockerfile

@@ -1,16 +1,33 @@
+# ── Stage 1: Build React frontend ────────────────────────────────────────────
+FROM node:20-slim AS frontend-builder
+
+WORKDIR /frontend
+
+COPY frontend/package.json frontend/package-lock.json ./
+RUN npm ci
+
+COPY frontend/ ./
+RUN npm run build
+
+# ── Stage 2: Python / FastAPI backend ─────────────────────────────────────────
 FROM python:3.11-slim
 
 WORKDIR /app
 
+# Python dependencies
 COPY backend/requirements.txt .
 RUN pip install uv && uv pip install --system --no-cache -r requirements.txt
 
-COPY backend/ /app/backend/
-COPY server/ /app/server/
-COPY grader/ /app/grader/
-COPY models.py /app/models.py
-COPY inference.py /app/inference.py
-COPY openenv.yaml /app/openenv.yaml
+# Application code
+COPY backend/  /app/backend/
+COPY server/   /app/server/
+COPY grader/   /app/grader/
+COPY models.py      /app/models.py
+COPY inference.py   /app/inference.py
+COPY openenv.yaml   /app/openenv.yaml
+
+# Built React SPA – served by FastAPI at /  (assets at /assets/*)
+COPY --from=frontend-builder /frontend/dist /app/frontend/dist
 
 EXPOSE 7860
 

backend/main.py

@@ -11,6 +11,7 @@ Endpoints (matching openenv.yaml contract):
 
 No openenv-core dependency — works on Python 3.9+.
 """
+import json
 import os
 import sys
 import uuid
@@ -18,6 +19,8 @@ from typing import Dict, Any, Optional, List
 
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel, Field
 
 sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
@@ -240,6 +243,43 @@ def build_app() -> FastAPI:
     @app.get("/grade/expert", tags=["Grader"])
     async def grade_expert(): return _run_grader_episode("expert")
 
+    # ------------------------------------------------------------------
+    # Training log — serves reward_curve.json if it exists
+    # ------------------------------------------------------------------
+    _ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+    _REWARD_CURVE = os.path.join(_ROOT, "reward_curve.json")
+
+    @app.get("/training-log", tags=["Training"])
+    async def training_log():
+        if os.path.exists(_REWARD_CURVE):
+            with open(_REWARD_CURVE) as f:
+                return json.load(f)
+        return []
+
+    # ------------------------------------------------------------------
+    # React SPA — serve built frontend at / and /assets/*
+    # Only active when frontend/dist is present (i.e. inside Docker)
+    # ------------------------------------------------------------------
+    _DIST = os.path.join(_ROOT, "frontend", "dist")
+    _ASSETS = os.path.join(_DIST, "assets")
+
+    if os.path.isdir(_ASSETS):
+        app.mount("/assets", StaticFiles(directory=_ASSETS), name="assets")
+
+    if os.path.isdir(_DIST):
+        @app.get("/", include_in_schema=False)
+        async def serve_spa():
+            return FileResponse(os.path.join(_DIST, "index.html"))
+    else:
+        @app.get("/", tags=["System"])
+        async def api_root():
+            return {
+                "status": "ok",
+                "service": "Cognitive Load Manager — OpenEnv API",
+                "docs": "/docs",
+                "health": "/health",
+            }
+
     return app
 
 

backend/requirements.txt

@@ -1,7 +1,8 @@
 fastapi
-uvicorn
+uvicorn[standard]
 pydantic
 openai
 requests
 python-dotenv
 openenv-core>=0.2.0
+aiofiles

frontend/dist/assets/index-CV2RR57m.css

@@ -1 +0,0 @@
-*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.collapse{visibility:collapse}.sticky{position:sticky}.top-0{top:0}.top-6{top:1.5rem}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-3{margin-top:.75rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-2{height:.5rem}.h-3{height:.75rem}.h-\[calc\(100vh-6rem\)\]{height:calc(100vh - 6rem)}.min-h-screen{min-height:100vh}.w-full{width:100%}.max-w-7xl{max-width:80rem}.flex-1{flex:1 1 0%}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-emerald-500\/20{border-color:#10b98133}.border-emerald-500\/30{border-color:#10b9814d}.border-indigo-500\/30{border-color:#6366f14d}.border-indigo-500\/50{border-color:#6366f180}.border-red-500\/20{border-color:#ef444433}.border-slate-700{--tw-border-opacity: 1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1))}.border-slate-700\/50{border-color:#33415580}.border-slate-800{--tw-border-opacity: 1;border-color:rgb(30 41 59 / var(--tw-border-opacity, 1))}.bg-amber-500{--tw-bg-opacity: 1;background-color:rgb(245 158 11 / var(--tw-bg-opacity, 1))}.bg-amber-500\/20{background-color:#f59e0b33}.bg-emerald-500{--tw-bg-opacity: 1;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))}.bg-emerald-500\/10{background-color:#10b9811a}.bg-emerald-500\/20{background-color:#10b98133}.bg-indigo-500{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity, 1))}.bg-indigo-500\/10{background-color:#6366f11a}.bg-indigo-600{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-indigo-900\/40{background-color:#312e8166}.bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-red-500\/10{background-color:#ef44441a}.bg-red-500\/20{background-color:#ef444433}.bg-slate-700{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.bg-slate-800{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.bg-slate-800\/50{background-color:#1e293b80}.bg-slate-800\/80{background-color:#1e293bcc}.bg-slate-900{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-slate-900\/50{background-color:#0f172a80}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-indigo-400{--tw-gradient-from: #818cf8 var(--tw-gradient-from-position);--tw-gradient-to: rgb(129 140 248 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-cyan-400{--tw-gradient-to: #22d3ee var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-2\.5{padding:.625rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.text-amber-400{--tw-text-opacity: 1;color:rgb(251 191 36 / var(--tw-text-opacity, 1))}.text-emerald-400{--tw-text-opacity: 1;color:rgb(52 211 153 / var(--tw-text-opacity, 1))}.text-indigo-400{--tw-text-opacity: 1;color:rgb(129 140 248 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-slate-100{--tw-text-opacity: 1;color:rgb(241 245 249 / var(--tw-text-opacity, 1))}.text-slate-200{--tw-text-opacity: 1;color:rgb(226 232 240 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.shadow-\[0_0_15px_rgba\(99\,102\,241\,0\.15\)\]{--tw-shadow: 0 0 15px rgba(99,102,241,.15);--tw-shadow-colored: 0 0 15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05);--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.selection\:bg-indigo-500\/30 *::-moz-selection{background-color:#6366f14d}.selection\:bg-indigo-500\/30 *::selection{background-color:#6366f14d}.selection\:bg-indigo-500\/30::-moz-selection{background-color:#6366f14d}.selection\:bg-indigo-500\/30::selection{background-color:#6366f14d}.hover\:scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-slate-500:hover{--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity, 1))}.hover\:border-slate-600:hover{--tw-border-opacity: 1;border-color:rgb(71 85 105 / var(--tw-border-opacity, 1))}.hover\:bg-emerald-500\/20:hover{background-color:#10b98133}.hover\:bg-indigo-500:hover{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity, 1))}.hover\:bg-indigo-500\/20:hover{background-color:#6366f133}.hover\:bg-slate-600:hover{--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity, 1))}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-indigo-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1))}.active\:scale-95:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:hover\:bg-indigo-600:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.disabled\:hover\:bg-slate-700:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}@media (min-width: 1024px){.lg\:col-span-2{grid-column:span 2 / span 2}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

frontend/dist/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CLM Dashboard</title>
-    <script type="module" crossorigin src="/assets/index-C3o0olYq.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CV2RR57m.css">
+    <script type="module" crossorigin src="/assets/index-txBpMzf1.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BvMzkwTv.css">
   </head>
   <body class="bg-slate-900 text-slate-100 font-sans">
     <div id="root"></div>

frontend/src/components/Dashboard.jsx

@@ -1,12 +1,167 @@
 import React, { useState, useEffect, useRef } from 'react';
 
-const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:7860';
+// Empty string = relative URLs → works on HuggingFace Spaces and local dev behind a proxy.
+// Set VITE_API_URL in .env.local only when the frontend is served separately from the backend.
+const API_BASE = import.meta.env.VITE_API_URL || '';
+
+// ─── tiny helpers ─────────────────────────────────────────────────────────────
+
+function StatCard({ label, value, color }) {
+  return (
+    <div style={{
+      background: '#fff', border: '1px solid #e2e8f0', borderRadius: 12,
+      padding: '14px 16px', textAlign: 'center',
+    }}>
+      <div style={{ fontSize: 10, color: '#94a3b8', textTransform: 'uppercase',
+        letterSpacing: '0.08em', marginBottom: 6 }}>{label}</div>
+      <div style={{ fontSize: 22, fontWeight: 700, color }}>{value}</div>
+    </div>
+  );
+}
+
+function SectionHeader({ children }) {
+  return (
+    <div style={{ fontSize: 11, fontWeight: 700, color: '#94a3b8',
+      textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12 }}>
+      {children}
+    </div>
+  );
+}
+
+function RewardChart({ data, width = 300 }) {
+  if (!data.length) return null;
+  const H = 160;
+  const W = Math.max(data.length * 24, width);
+  const vals = data.map(d => d.mean ?? d.reward ?? 0);
+  const lo = Math.min(...vals);
+  const hi = Math.max(...vals);
+  const span = hi === lo ? 1 : hi - lo;
+  const toY = v => H - 16 - ((v - lo) / span) * (H - 32);
+
+  return (
+    <svg width="100%" height={H} viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none"
+      style={{ display: 'block' }}>
+      <line x1="0" y1={H / 2} x2={W} y2={H / 2} stroke="#f1f5f9" strokeWidth="1" />
+      {vals.map((v, i) => {
+        const x = i * 24 + 12;
+        const y = toY(v);
+        const prev = i > 0 ? toY(vals[i - 1]) : null;
+        return (
+          <g key={i}>
+            {prev !== null && (
+              <line x1={(i - 1) * 24 + 12} y1={prev} x2={x} y2={y}
+                stroke={v >= 0 ? '#6366f1' : '#ef4444'} strokeWidth="2" />
+            )}
+            <circle cx={x} cy={y} r="3" fill={v >= 0 ? '#6366f1' : '#ef4444'} />
+          </g>
+        );
+      })}
+    </svg>
+  );
+}
+
+// ─── Training Log panel ───────────────────────────────────────────────────────
+
+function TrainingLog() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    fetch(`${API_BASE}/training-log`)
+      .then(r => r.ok ? r.json() : [])
+      .then(setData)
+      .catch(() => setData([]));
+  }, []);
+
+  const cardStyle = {
+    background: '#fff', border: '1px solid #e2e8f0', borderRadius: 12, padding: 16,
+    marginBottom: 16,
+  };
+
+  if (data === null) {
+    return (
+      <div style={cardStyle}>
+        <SectionHeader>Training Log — Last Run</SectionHeader>
+        <div style={{ color: '#94a3b8', fontSize: 13, textAlign: 'center', padding: 24 }}>
+          Loading…
+        </div>
+      </div>
+    );
+  }
+
+  if (!data.length) {
+    return (
+      <div style={cardStyle}>
+        <SectionHeader>Training Log — Last Run</SectionHeader>
+        <div style={{ color: '#94a3b8', fontSize: 13, textAlign: 'center', padding: 24 }}>
+          No training data yet. Run&nbsp;
+          <code style={{ background: '#f1f5f9', padding: '1px 6px', borderRadius: 4, fontSize: 12 }}>
+            python training_loop.py --train
+          </code>
+          &nbsp;to generate reward curves.
+        </div>
+      </div>
+    );
+  }
+
+  const means = data.map(d => d.mean);
+  const total = data.length;
+  const finalMean = means[means.length - 1];
+  const peakMean = Math.max(...means);
+  const loMean = Math.min(...means);
+
+  return (
+    <div style={cardStyle}>
+      <SectionHeader>Training Log — Last Run ({total} steps)</SectionHeader>
+
+      {/* Summary stats */}
+      <div style={{ display: 'flex', gap: 24, marginBottom: 12 }}>
+        {[
+          { label: 'Final Mean', val: finalMean.toFixed(4), color: '#6366f1' },
+          { label: 'Peak Mean',  val: peakMean.toFixed(4),  color: '#22c55e' },
+          { label: 'Min Mean',   val: loMean.toFixed(4),    color: '#ef4444' },
+          { label: 'Steps',      val: total,                color: '#0ea5e9' },
+        ].map(s => (
+          <div key={s.label} style={{ textAlign: 'center', minWidth: 64 }}>
+            <div style={{ fontSize: 10, color: '#94a3b8', textTransform: 'uppercase' }}>{s.label}</div>
+            <div style={{ fontSize: 16, fontWeight: 700, color: s.color }}>{s.val}</div>
+          </div>
+        ))}
+      </div>
+
+      {/* Reward curve chart */}
+      <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 8,
+        border: '1px solid #f1f5f9', background: '#fafafa' }}>
+        <RewardChart data={data} width={600} />
+      </div>
+
+      {/* Step table — last 10 rows */}
+      <div style={{ marginTop: 12, fontFamily: 'monospace', fontSize: 11, color: '#475569' }}>
+        <div style={{ display: 'flex', gap: 0, borderBottom: '1px solid #f1f5f9',
+          paddingBottom: 4, marginBottom: 4, fontWeight: 700, color: '#94a3b8' }}>
+          {['Step', 'Mean', 'Max', 'Min'].map(h => (
+            <div key={h} style={{ flex: 1 }}>{h}</div>
+          ))}
+        </div>
+        {data.slice(-10).map(d => (
+          <div key={d.step} style={{ display: 'flex', gap: 0, padding: '2px 0',
+            color: d.mean >= 0 ? '#16a34a' : '#dc2626' }}>
+            <div style={{ flex: 1 }}>{d.step}</div>
+            <div style={{ flex: 1 }}>{d.mean.toFixed(4)}</div>
+            <div style={{ flex: 1 }}>{d.max?.toFixed(4) ?? '—'}</div>
+            <div style={{ flex: 1 }}>{d.min?.toFixed(4) ?? '—'}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── Main Dashboard ───────────────────────────────────────────────────────────
 
 export default function Dashboard() {
   const [level, setLevel] = useState('medium');
   const [sessionId, setSessionId] = useState(null);
   const [obs, setObs] = useState(null);
-  const [stateData, setStateData] = useState(null);
   const [logs, setLogs] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
@@ -16,8 +171,8 @@ export default function Dashboard() {
   const fetchState = async (sid) => {
     try {
       const res = await fetch(`${API_BASE}/state?session_id=${sid}`);
-      if (res.ok) setStateData(await res.json());
-    } catch(e) { console.error(e); }
+      if (res.ok) await res.json();
+    } catch (e) { console.error(e); }
   };
 
   const handleReset = async () => {
@@ -28,15 +183,16 @@ export default function Dashboard() {
       const res = await fetch(`${API_BASE}/reset`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ task_id: level })
+        body: JSON.stringify({ task_id: level }),
       });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const data = await res.json();
       setSessionId(data.session_id);
       setObs(data.observation);
       setLogs([{ type: 'system', msg: `Episode started: ${level}` }]);
       await fetchState(data.session_id);
     } catch (err) {
-      setError('Cannot reach backend at ' + API_BASE);
+      setError(`Cannot reach backend at "${API_BASE || window.location.origin}" — ${err.message}`);
     } finally { setLoading(false); }
   };
 
@@ -49,28 +205,26 @@ export default function Dashboard() {
       const res = await fetch(`${API_BASE}/step`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ session_id: sessionId, action })
+        body: JSON.stringify({ session_id: sessionId, action }),
       });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const data = await res.json();
       setObs(data.observation);
-      setRewardHistory(prev => [...prev, {
-        step: prev.length + 1,
-        reward: data.reward
-      }]);
+      setRewardHistory(prev => [...prev, { step: prev.length + 1, reward: data.reward }]);
       setLogs(prev => [...prev, {
         type: data.reward >= 0 ? 'positive' : 'negative',
-        msg: `${actionType}${taskId ? ' '+taskId : ''} → reward: ${data.reward?.toFixed(3)}`,
-        reward: data.reward
+        msg: `${actionType}${taskId ? ' ' + taskId : ''} → reward: ${data.reward?.toFixed(3)}`,
       }]);
       if (data.done) {
         setLogs(prev => [...prev, {
           type: 'system',
-          msg: `DONE. Final score: ${data.info?.final_score?.toFixed(3) || 'N/A'}`
+          msg: `DONE. Final score: ${data.info?.final_score?.toFixed(3) ?? 'N/A'}`,
         }]);
+        setSessionId(null);
       }
       await fetchState(sessionId);
       setTimeout(() => {
-        if(scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+        if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
       }, 50);
     } catch (err) {
       setError(err.message);
@@ -78,14 +232,16 @@ export default function Dashboard() {
   };
 
   const workers = obs?.visible_state?.workers || [];
-  const tasks = obs?.tasks || [];
-  const firstWorker = workers[0] || {};
+  const tasks   = obs?.tasks || [];
+  const firstW  = workers[0] || {};
 
   return (
-    <div style={{ minHeight: '100vh', background: '#f8fafc', fontFamily: 'system-ui, sans-serif', padding: 24 }}>
-      
-      {/* HEADER */}
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
+    <div style={{ minHeight: '100vh', background: '#f8fafc',
+      fontFamily: 'system-ui, sans-serif', padding: 24 }}>
+
+      {/* ── Header ── */}
+      <div style={{ display: 'flex', justifyContent: 'space-between',
+        alignItems: 'center', marginBottom: 20 }}>
         <div>
           <h1 style={{ fontSize: 22, fontWeight: 700, color: '#0f172a', margin: 0 }}>
             🧠 StressTest — Cognitive Load Manager
@@ -96,20 +252,23 @@ export default function Dashboard() {
         </div>
         <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
           <select value={level} onChange={e => setLevel(e.target.value)}
-            style={{ border: '1px solid #e2e8f0', borderRadius: 8, padding: '6px 10px', fontSize: 13 }}>
+            style={{ border: '1px solid #e2e8f0', borderRadius: 8,
+              padding: '6px 10px', fontSize: 13 }}>
             <option value="easy">Easy</option>
             <option value="medium">Medium</option>
             <option value="hard">Hard</option>
             <option value="expert">Expert</option>
           </select>
           <button onClick={handleReset} disabled={loading}
-            style={{ background: '#6366f1', color: '#fff', border: 'none', borderRadius: 8,
-              padding: '8px 18px', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>
-            {loading ? 'Loading...' : sessionId ? '↺ Reset' : '▶ Start'}
+            style={{ background: '#6366f1', color: '#fff', border: 'none',
+              borderRadius: 8, padding: '8px 18px', fontSize: 13, fontWeight: 600,
+              cursor: loading ? 'not-allowed' : 'pointer', opacity: loading ? 0.7 : 1 }}>
+            {loading ? 'Loading…' : sessionId ? '↺ Reset' : '▶ Start'}
           </button>
         </div>
       </div>
 
+      {/* ── Error banner ── */}
       {error && (
         <div style={{ background: '#fef2f2', border: '1px solid #fca5a5', borderRadius: 8,
           padding: '10px 14px', marginBottom: 16, fontSize: 13, color: '#dc2626' }}>
@@ -117,33 +276,30 @@ export default function Dashboard() {
         </div>
       )}
 
-      {/* WORKER METRICS */}
+      {/* ── Worker metric cards ── */}
       {workers.length > 0 && (
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 16 }}>
-          {[
-            { label: 'Fatigue', value: firstWorker.fatigue_level || '—',
-              color: firstWorker.fatigue_level === 'high' ? '#ef4444' : firstWorker.fatigue_level === 'medium' ? '#f59e0b' : '#22c55e' },
-            { label: 'Stress', value: firstWorker.stress_level || '—',
-              color: firstWorker.stress_level === 'critical' ? '#ef4444' : firstWorker.stress_level === 'elevated' ? '#f59e0b' : '#22c55e' },
-            { label: 'Step', value: obs?.time_step ?? '—', color: '#6366f1' },
-            { label: 'Tasks Done', value: tasks.filter(t => t.progress >= 1.0).length + '/' + tasks.length, color: '#0ea5e9' },
-          ].map(m => (
-            <div key={m.label} style={{ background: '#fff', border: '1px solid #e2e8f0',
-              borderRadius: 12, padding: '14px 16px', textAlign: 'center' }}>
-              <div style={{ fontSize: 10, color: '#94a3b8', textTransform: 'uppercase',
-                letterSpacing: '0.08em', marginBottom: 6 }}>{m.label}</div>
-              <div style={{ fontSize: 22, fontWeight: 700, color: m.color }}>{m.value}</div>
-            </div>
-          ))}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
+          gap: 12, marginBottom: 16 }}>
+          <StatCard label="Fatigue" value={firstW.fatigue_level || '—'}
+            color={firstW.fatigue_level === 'high' ? '#ef4444'
+              : firstW.fatigue_level === 'medium' ? '#f59e0b' : '#22c55e'} />
+          <StatCard label="Stress" value={firstW.stress_level || '—'}
+            color={firstW.stress_level === 'critical' ? '#ef4444'
+              : firstW.stress_level === 'elevated' ? '#f59e0b' : '#22c55e'} />
+          <StatCard label="Step"       value={obs?.time_step ?? '—'} color="#6366f1" />
+          <StatCard label="Tasks Done"
+            value={`${tasks.filter(t => t.progress >= 1.0).length}/${tasks.length}`}
+            color="#0ea5e9" />
         </div>
       )}
 
+      {/* ── Task list + Step reward chart ── */}
       <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
-        
-        {/* TASK LIST */}
-        <div style={{ background: '#fff', border: '1px solid #e2e8f0', borderRadius: 12, padding: 16 }}>
-          <div style={{ fontSize: 11, fontWeight: 700, color: '#94a3b8', textTransform: 'uppercase',
-            letterSpacing: '0.08em', marginBottom: 12 }}>Task Queue</div>
+
+        {/* Task queue */}
+        <div style={{ background: '#fff', border: '1px solid #e2e8f0',
+          borderRadius: 12, padding: 16 }}>
+          <SectionHeader>Task Queue</SectionHeader>
           {tasks.length === 0 && (
             <div style={{ color: '#cbd5e1', fontSize: 13, textAlign: 'center', padding: 20 }}>
               Press Start to begin episode
@@ -154,87 +310,75 @@ export default function Dashboard() {
               padding: '8px 0', borderBottom: '1px solid #f1f5f9' }}>
               <div style={{ flex: 1 }}>
                 <div style={{ fontSize: 13, fontWeight: 500, color: '#0f172a' }}>
-                  {task.task_type} <span style={{ fontSize: 10, color: '#94a3b8' }}>#{task.id}</span>
+                  {task.task_type}&nbsp;
+                  <span style={{ fontSize: 10, color: '#94a3b8' }}>#{task.id}</span>
                 </div>
                 <div style={{ fontSize: 11, color: '#94a3b8' }}>
-                  deadline: {task.deadline ?? '—'} · {task.depends_on ? `depends: ${task.depends_on}` : 'no dep'}
+                  deadline: {task.deadline ?? '—'} · {task.depends_on
+                    ? `depends: ${task.depends_on}` : 'no dep'}
                 </div>
-                <div style={{ height: 3, background: '#f1f5f9', borderRadius: 99, marginTop: 4, overflow: 'hidden' }}>
+                <div style={{ height: 3, background: '#f1f5f9', borderRadius: 99,
+                  marginTop: 4, overflow: 'hidden' }}>
                   <div style={{ width: `${task.progress * 100}%`, height: '100%',
-                    background: task.progress >= 1 ? '#22c55e' : '#6366f1', borderRadius: 99 }} />
+                    background: task.progress >= 1 ? '#22c55e' : '#6366f1',
+                    borderRadius: 99 }} />
                 </div>
               </div>
-              <span style={{ fontSize: 10, padding: '2px 7px', borderRadius: 99, fontWeight: 600,
-                background: task.priority === 'critical' ? '#fef2f2' : task.priority === 'high' ? '#fffbeb' : '#f0fdf4',
-                color: task.priority === 'critical' ? '#dc2626' : task.priority === 'high' ? '#d97706' : '#16a34a' }}>
+              <span style={{ fontSize: 10, padding: '2px 7px', borderRadius: 99,
+                fontWeight: 600,
+                background: task.priority === 'critical' ? '#fef2f2'
+                  : task.priority === 'high' ? '#fffbeb' : '#f0fdf4',
+                color: task.priority === 'critical' ? '#dc2626'
+                  : task.priority === 'high' ? '#d97706' : '#16a34a' }}>
                 {task.priority}
               </span>
-              <div style={{ display: 'flex', gap: 4 }}>
-                {sessionId && task.progress < 1.0 && (
-                  <>
-                    <button onClick={() => handleAction('work', task.id)}
-                      style={{ fontSize: 10, padding: '3px 8px', borderRadius: 6, border: '1px solid #e2e8f0',
-                        background: '#f8fafc', cursor: 'pointer' }}>work</button>
-                    <button onClick={() => handleAction('focus', task.id)}
-                      style={{ fontSize: 10, padding: '3px 8px', borderRadius: 6, border: '1px solid #6366f1',
-                        background: '#eef2ff', color: '#6366f1', cursor: 'pointer' }}>focus</button>
-                  </>
-                )}
-              </div>
+              {sessionId && task.progress < 1.0 && (
+                <div style={{ display: 'flex', gap: 4 }}>
+                  <button onClick={() => handleAction('work', task.id)}
+                    style={{ fontSize: 10, padding: '3px 8px', borderRadius: 6,
+                      border: '1px solid #e2e8f0', background: '#f8fafc',
+                      cursor: 'pointer' }}>work</button>
+                  <button onClick={() => handleAction('focus', task.id)}
+                    style={{ fontSize: 10, padding: '3px 8px', borderRadius: 6,
+                      border: '1px solid #6366f1', background: '#eef2ff',
+                      color: '#6366f1', cursor: 'pointer' }}>focus</button>
+                </div>
+              )}
             </div>
           ))}
           {sessionId && (
             <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
               <button onClick={() => handleAction('break')}
-                style={{ flex: 1, padding: '8px', borderRadius: 8, border: '1px solid #e2e8f0',
-                  background: '#f0fdf4', color: '#16a34a', fontWeight: 600, cursor: 'pointer', fontSize: 13 }}>
-                ☕ Break
-              </button>
+                style={{ flex: 1, padding: 8, borderRadius: 8, border: '1px solid #e2e8f0',
+                  background: '#f0fdf4', color: '#16a34a', fontWeight: 600,
+                  cursor: 'pointer', fontSize: 13 }}>☕ Break</button>
               <button onClick={() => handleAction('delay')}
-                style={{ flex: 1, padding: '8px', borderRadius: 8, border: '1px solid #e2e8f0',
-                  background: '#f8fafc', color: '#64748b', fontWeight: 600, cursor: 'pointer', fontSize: 13 }}>
-                ⏸ Delay
-              </button>
+                style={{ flex: 1, padding: 8, borderRadius: 8, border: '1px solid #e2e8f0',
+                  background: '#f8fafc', color: '#64748b', fontWeight: 600,
+                  cursor: 'pointer', fontSize: 13 }}>⏸ Delay</button>
             </div>
           )}
         </div>
 
-        {/* REWARD CURVE */}
-        <div style={{ background: '#fff', border: '1px solid #e2e8f0', borderRadius: 12, padding: 16 }}>
-          <div style={{ fontSize: 11, fontWeight: 700, color: '#94a3b8', textTransform: 'uppercase',
-            letterSpacing: '0.08em', marginBottom: 12 }}>Reward Per Step</div>
+        {/* Step reward chart */}
+        <div style={{ background: '#fff', border: '1px solid #e2e8f0',
+          borderRadius: 12, padding: 16 }}>
+          <SectionHeader>Reward Per Step</SectionHeader>
           {rewardHistory.length === 0 ? (
             <div style={{ color: '#cbd5e1', fontSize: 13, textAlign: 'center', padding: 40 }}>
               Rewards will appear here as the agent acts
             </div>
           ) : (
-            <div style={{ position: 'relative', height: 180 }}>
-              <svg width="100%" height="180" viewBox={`0 0 ${Math.max(rewardHistory.length * 20, 300)} 180`}
-                preserveAspectRatio="none">
-                <line x1="0" y1="90" x2="10000" y2="90" stroke="#f1f5f9" strokeWidth="1" />
-                {rewardHistory.map((d, i) => {
-                  const x = i * 20 + 10;
-                  const y = 90 - (d.reward * 70);
-                  const prev = rewardHistory[i - 1];
-                  return (
-                    <g key={i}>
-                      {prev && (
-                        <line x1={(i-1)*20+10} y1={90-(prev.reward*70)} x2={x} y2={y}
-                          stroke={d.reward >= 0 ? '#6366f1' : '#ef4444'} strokeWidth="2" />
-                      )}
-                      <circle cx={x} cy={y} r="3"
-                        fill={d.reward >= 0 ? '#6366f1' : '#ef4444'} />
-                    </g>
-                  );
-                })}
-              </svg>
+            <div style={{ overflow: 'hidden', borderRadius: 8,
+              border: '1px solid #f1f5f9', background: '#fafafa' }}>
+              <RewardChart data={rewardHistory} width={300} />
             </div>
           )}
           {rewardHistory.length > 0 && (
             <div style={{ display: 'flex', gap: 16, marginTop: 8 }}>
               {[
-                { label: 'Total', val: rewardHistory.reduce((s,d) => s+d.reward, 0).toFixed(3) },
-                { label: 'Mean', val: (rewardHistory.reduce((s,d) => s+d.reward, 0)/rewardHistory.length).toFixed(3) },
+                { label: 'Total', val: rewardHistory.reduce((s, d) => s + d.reward, 0).toFixed(3) },
+                { label: 'Mean',  val: (rewardHistory.reduce((s, d) => s + d.reward, 0) / rewardHistory.length).toFixed(3) },
                 { label: 'Steps', val: rewardHistory.length },
               ].map(s => (
                 <div key={s.label} style={{ textAlign: 'center' }}>
@@ -247,23 +391,28 @@ export default function Dashboard() {
         </div>
       </div>
 
-      {/* ACTION LOG */}
-      <div style={{ background: '#fff', border: '1px solid #e2e8f0', borderRadius: 12, padding: 16 }}>
-        <div style={{ fontSize: 11, fontWeight: 700, color: '#94a3b8', textTransform: 'uppercase',
-          letterSpacing: '0.08em', marginBottom: 10 }}>Action Log</div>
-        <div ref={scrollRef} style={{ height: 120, overflowY: 'auto', fontFamily: 'monospace', fontSize: 12 }}>
+      {/* ── Action log ── */}
+      <div style={{ background: '#fff', border: '1px solid #e2e8f0',
+        borderRadius: 12, padding: 16, marginBottom: 16 }}>
+        <SectionHeader>Action Log</SectionHeader>
+        <div ref={scrollRef} style={{ height: 120, overflowY: 'auto',
+          fontFamily: 'monospace', fontSize: 12 }}>
           {logs.length === 0 && (
-            <span style={{ color: '#cbd5e1' }}>No actions yet...</span>
+            <span style={{ color: '#cbd5e1' }}>No actions yet…</span>
           )}
           {logs.map((log, i) => (
             <div key={i} style={{ padding: '2px 0',
-              color: log.type === 'positive' ? '#16a34a' : log.type === 'negative' ? '#dc2626' : '#64748b' }}>
+              color: log.type === 'positive' ? '#16a34a'
+                : log.type === 'negative' ? '#dc2626' : '#64748b' }}>
               [{i}] {log.msg}
             </div>
           ))}
         </div>
       </div>
 
+      {/* ── Training log (reward_curve.json from last GRPO run) ── */}
+      <TrainingLog />
+
     </div>
   );
 }