feat: React observability dashboard + FastAPI server + matplotlib renderer

- src/: Computational Lab Instrument dashboard (JetBrains Mono, dark #0d0d14 bg)
- CreaseCanvas: SVG paper with mountain/valley/ghost target overlay
- RewardPanel: live bar chart (kawasaki, maekawa, blb, progress, economy)
- StepFeed: scrollable fold instruction log with assignment badges
- InfoBadges: foldability status, crease counts
- PlayerControls: step-through + auto-play at 1.5s interval
- TargetSelector: grouped by difficulty level
- server.py: FastAPI with /targets, /episode/demo, /episode/run endpoints
- viz/renderer.py: matplotlib draw_paper_state, draw_reward_bars, render_episode

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

requirements.txt

@@ -1,3 +1,5 @@
 shapely>=2.0.0
 numpy>=1.24.0
 pytest>=7.0.0
+fastapi>=0.100.0
+uvicorn>=0.23.0

server.py

@@ -0,0 +1,172 @@
+"""
+FastAPI server for the origami RL environment.
+Serves episode data to the React frontend.
+
+Usage: uvicorn server:app --reload --port 8000
+"""
+
+try:
+    from fastapi import FastAPI
+    from fastapi.middleware.cors import CORSMiddleware
+    from pydantic import BaseModel
+except ImportError:
+    print("Run: pip install fastapi uvicorn pydantic")
+    raise
+
+from typing import Optional
+
+
+app = FastAPI(title="OrigamiRL API")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # localhost:3000 for React dev
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+class FoldAction(BaseModel):
+    from_point: list[float]  # [x, y]
+    to_point: list[float]    # [x, y]
+    assignment: str          # 'M' or 'V'
+    instruction: str = ""
+
+
+class EpisodeStep(BaseModel):
+    step: int
+    fold: Optional[FoldAction]
+    paper_state: dict        # FOLD JSON of current crease graph
+    anchor_points: list[list[float]]
+    reward: dict
+    done: bool
+    info: dict
+    prompt: str              # LLM prompt at this step
+
+
+class EpisodeResult(BaseModel):
+    target_name: str
+    target: dict             # FOLD JSON of target
+    steps: list[EpisodeStep]
+    final_reward: dict
+
+
+@app.get("/")
+def health_check():
+    """Health check — returns status and available target names."""
+    from env.environment import OrigamiEnvironment
+    env = OrigamiEnvironment()
+    return {"status": "ok", "targets": env.available_targets()}
+
+
+@app.get("/targets")
+def get_targets():
+    """Return list of available target names and their metadata."""
+    from env.environment import OrigamiEnvironment
+    env = OrigamiEnvironment()
+    targets = {}
+    for name in env.available_targets():
+        t = env._targets[name]
+        targets[name] = {
+            "name": name,
+            "level": t.get("level", 1),
+            "description": t.get("description", ""),
+            "n_creases": sum(1 for a in t["edges_assignment"] if a in ("M", "V")),
+        }
+    return targets
+
+
+@app.get("/episode/run")
+def run_episode(target: str = "half_horizontal", completion: str = ""):
+    """
+    Run a code-as-policy episode with a provided completion string.
+
+    If completion is empty, returns the prompt so the caller knows what to send.
+    Returns full episode result with all steps.
+    """
+    from env.environment import OrigamiEnvironment
+    from env.prompts import parse_fold_list, code_as_policy_prompt
+    from env.rewards import compute_reward, target_crease_edges
+
+    env = OrigamiEnvironment(mode="step")
+    obs = env.reset(target_name=target)
+
+    if not completion:
+        return {"prompt": obs["prompt"], "steps": [], "target": env.target}
+
+    try:
+        folds = parse_fold_list(completion)
+    except ValueError as e:
+        return {"error": str(e), "steps": []}
+
+    steps = []
+    for i, fold in enumerate(folds):
+        result = env.paper.add_crease(fold["from"], fold["to"], fold["assignment"])
+        reward = compute_reward(env.paper, result, env.target)
+
+        paper_state = {
+            "vertices": {str(k): list(v) for k, v in env.paper.graph.vertices.items()},
+            "edges": [
+                {
+                    "id": k,
+                    "v1": list(env.paper.graph.vertices[v[0]]),
+                    "v2": list(env.paper.graph.vertices[v[1]]),
+                    "assignment": v[2],
+                }
+                for k, v in env.paper.graph.edges.items()
+            ],
+            "anchor_points": [list(p) for p in env.paper.anchor_points()],
+        }
+
+        # Build per-step prompt reflecting current state
+        from env.prompts import step_level_prompt
+        step_prompt = step_level_prompt(
+            target=env.target,
+            paper_state=env.paper,
+            step=i + 1,
+            max_steps=env.max_steps,
+            last_reward=reward,
+        )
+
+        steps.append({
+            "step": i + 1,
+            "fold": {
+                "from_point": fold["from"],
+                "to_point": fold["to"],
+                "assignment": fold["assignment"],
+                "instruction": fold.get("instruction", ""),
+            },
+            "paper_state": paper_state,
+            "anchor_points": [list(p) for p in env.paper.anchor_points()],
+            "reward": reward,
+            "done": reward.get("completion", 0) > 0,
+            "info": env._info(),
+            "prompt": step_prompt,
+        })
+
+        if reward.get("completion", 0) > 0:
+            break
+
+    return {
+        "target_name": target,
+        "target": env.target,
+        "steps": steps,
+        "final_reward": steps[-1]["reward"] if steps else {},
+    }
+
+
+@app.get("/episode/demo")
+def demo_episode(target: str = "half_horizontal"):
+    """Return a pre-solved demo episode for each target."""
+    DEMO_COMPLETIONS = {
+        "half_horizontal": '<folds>[{"instruction": "Valley fold along horizontal center line", "from": [0, 0.5], "to": [1, 0.5], "assignment": "V"}]</folds>',
+        "half_vertical": '<folds>[{"instruction": "Mountain fold along vertical center line", "from": [0.5, 0], "to": [0.5, 1], "assignment": "M"}]</folds>',
+        "diagonal_main": '<folds>[{"instruction": "Valley fold along main diagonal", "from": [0, 0], "to": [1, 1], "assignment": "V"}]</folds>',
+        "diagonal_anti": '<folds>[{"instruction": "Mountain fold along anti-diagonal", "from": [1, 0], "to": [0, 1], "assignment": "M"}]</folds>',
+        "thirds_h": '<folds>[{"instruction": "Valley fold at one-third height", "from": [0, 0.333], "to": [1, 0.333], "assignment": "V"}, {"instruction": "Valley fold at two-thirds height", "from": [0, 0.667], "to": [1, 0.667], "assignment": "V"}]</folds>',
+        "thirds_v": '<folds>[{"instruction": "Mountain fold at one-third width", "from": [0.333, 0], "to": [0.333, 1], "assignment": "M"}, {"instruction": "Mountain fold at two-thirds width", "from": [0.667, 0], "to": [0.667, 1], "assignment": "M"}]</folds>',
+        "accordion_3h": '<folds>[{"instruction": "Valley fold at quarter height", "from": [0, 0.25], "to": [1, 0.25], "assignment": "V"}, {"instruction": "Mountain fold at half height", "from": [0, 0.5], "to": [1, 0.5], "assignment": "M"}, {"instruction": "Valley fold at three-quarter height", "from": [0, 0.75], "to": [1, 0.75], "assignment": "V"}]</folds>',
+        "accordion_4h": '<folds>[{"instruction": "Valley fold at 0.2", "from": [0, 0.2], "to": [1, 0.2], "assignment": "V"}, {"instruction": "Mountain fold at 0.4", "from": [0, 0.4], "to": [1, 0.4], "assignment": "M"}, {"instruction": "Valley fold at 0.6", "from": [0, 0.6], "to": [1, 0.6], "assignment": "V"}, {"instruction": "Mountain fold at 0.8", "from": [0, 0.8], "to": [1, 0.8], "assignment": "M"}]</folds>',
+    }
+    completion = DEMO_COMPLETIONS.get(target, DEMO_COMPLETIONS["half_horizontal"])
+    return run_episode(target=target, completion=completion)

src/App.css

@@ -1,38 +1,507 @@
-.App {
-  text-align: center;
+:root {
+  --bg: #0d0d14;
+  --surface: #13131d;
+  --surface-2: #1a1a2e;
+  --paper-white: #fafaf5;
+  --paper-edge: #2a2a3a;
+  --mountain: #f59e0b;
+  --valley: #38bdf8;
+  --target-ghost: rgba(124, 58, 237, 0.20);
+  --target-ghost-stroke: rgba(124, 58, 237, 0.45);
+  --validity: #22d3ee;
+  --progress: #22c55e;
+  --economy: #a78bfa;
+  --text-primary: #f8fafc;
+  --text-dim: #64748b;
+  --border: #2a2a3a;
+  --border-bright: #3a3a5a;
+  --font-display: 'JetBrains Mono', monospace;
+  --font-mono: 'IBM Plex Mono', monospace;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: var(--bg);
+  overflow: hidden;
+}
+
+/* ─── HEADER ─── */
+.app-header {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 0 20px;
+  height: 48px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  flex-shrink: 0;
+  z-index: 10;
+}
+
+.app-title {
+  font-family: var(--font-display);
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.app-title .title-accent {
+  color: var(--mountain);
+}
+
+.header-sep {
+  width: 1px;
+  height: 24px;
+  background: var(--border);
+  flex-shrink: 0;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-left: auto;
+}
+
+.api-status {
+  font-size: 11px;
+  font-family: var(--font-display);
+  letter-spacing: 0.08em;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.api-status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-dim);
+}
+
+.api-status-dot.ok {
+  background: var(--progress);
+  box-shadow: 0 0 6px var(--progress);
+}
+
+.api-status-dot.err {
+  background: #ef4444;
+  box-shadow: 0 0 6px #ef4444;
+}
+
+/* ─── MAIN LAYOUT ─── */
+.app-body {
+  display: grid;
+  grid-template-columns: 1fr 280px;
+  flex: 1;
+  overflow: hidden;
+}
+
+.app-left {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-right: 1px solid var(--border);
+}
+
+.app-right {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--surface);
+}
+
+/* ─── CANVAS ROW ─── */
+.canvas-row {
+  display: flex;
+  gap: 0;
+  padding: 16px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.canvas-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.canvas-wrap + .canvas-wrap {
+  margin-left: 16px;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.canvas-label {
+  font-family: var(--font-display);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  color: var(--text-dim);
+  text-transform: uppercase;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.canvas-svg {
+  display: block;
+  background: var(--paper-white);
+}
+
+/* ─── STEP FEED ─── */
+.step-feed-section {
+  flex: 1;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+}
+
+.section-header {
+  font-family: var(--font-display);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.step-feed {
+  overflow-y: auto;
+  flex: 1;
+  padding: 4px 0;
+}
+
+.step-entry {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+  cursor: default;
+  transition: background 0.1s;
+}
+
+.step-entry:hover {
+  background: var(--surface);
+}
+
+.step-entry.active {
+  background: var(--surface-2);
+  border-left: 2px solid var(--valley);
+  padding-left: 14px;
+}
+
+.step-entry-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.step-num {
+  font-family: var(--font-display);
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-dim);
+  width: 24px;
+  flex-shrink: 0;
+}
+
+.step-instruction {
+  font-size: 12px;
+  color: var(--text-primary);
+  flex: 1;
+}
+
+.assign-badge {
+  font-family: var(--font-display);
+  font-size: 10px;
+  font-weight: 700;
+  padding: 1px 5px;
+  line-height: 1.4;
+  flex-shrink: 0;
+}
+
+.assign-badge.M {
+  background: var(--mountain);
+  color: #0d0d14;
+}
+
+.assign-badge.V {
+  background: var(--valley);
+  color: #0d0d14;
+}
+
+.assign-badge.B {
+  background: var(--border-bright);
+  color: var(--text-dim);
+}
+
+.step-reward-delta {
+  font-size: 11px;
+  color: var(--text-dim);
+  padding-left: 32px;
+}
+
+.step-reward-delta .delta-positive {
+  color: var(--progress);
+}
+
+.step-reward-delta .delta-negative {
+  color: #ef4444;
+}
+
+/* ─── REWARD PANEL ─── */
+.reward-panel {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.reward-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.reward-row:last-child {
+  margin-bottom: 0;
+}
+
+.reward-label {
+  font-family: var(--font-display);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+  width: 72px;
+  flex-shrink: 0;
+  text-transform: uppercase;
+}
+
+.reward-track {
+  flex: 1;
+  height: 8px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+
+.reward-bar {
+  height: 100%;
+  transition: width 0.4s ease;
+}
+
+.reward-value {
+  font-family: var(--font-display);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-primary);
+  width: 36px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.reward-value.dim {
+  color: var(--text-dim);
+}
+
+.reward-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 6px 0;
+}
+
+/* ─── INFO BADGES ─── */
+.info-badges {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.info-key {
+  font-family: var(--font-display);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+  text-transform: uppercase;
+}
+
+.info-val {
+  font-family: var(--font-display);
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.info-val.bool-true {
+  color: var(--progress);
+}
+
+.info-val.bool-false {
+  color: #ef4444;
+}
+
+.info-val.dim {
+  color: var(--text-dim);
+}
+
+/* ─── TARGET SELECTOR ─── */
+.target-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.target-selector-label {
+  font-family: var(--font-display);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.10em;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.target-select {
+  background: var(--surface-2);
+  border: 1px solid var(--border-bright);
+  color: var(--text-primary);
+  font-family: var(--font-display);
+  font-size: 11px;
+  padding: 4px 8px;
+  outline: none;
+  cursor: pointer;
+  min-width: 180px;
+}
+
+.target-select:focus {
+  border-color: var(--valley);
+}
+
+optgroup {
+  background: var(--surface);
+  color: var(--text-dim);
+  font-family: var(--font-display);
+  font-size: 10px;
+}
+
+option {
+  background: var(--surface-2);
+  color: var(--text-primary);
+  font-family: var(--font-display);
+}
+
+/* ─── PLAYER CONTROLS ─── */
+.player-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.ctrl-btn {
+  background: var(--surface-2);
+  border: 1px solid var(--border-bright);
+  color: var(--text-primary);
+  font-family: var(--font-display);
+  font-size: 11px;
+  font-weight: 500;
+  padding: 4px 10px;
+  cursor: pointer;
+  white-space: nowrap;
+  line-height: 1.4;
+  letter-spacing: 0.04em;
+  transition: background 0.1s, border-color 0.1s;
+}
+
+.ctrl-btn:hover:not(:disabled) {
+  background: var(--surface);
+  border-color: var(--text-dim);
+}
+
+.ctrl-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.ctrl-btn.play {
+  border-color: var(--valley);
+  color: var(--valley);
+}
+
+.ctrl-btn.play:hover:not(:disabled) {
+  background: rgba(56, 189, 248, 0.1);
+}
+
+.ctrl-step-display {
+  font-family: var(--font-display);
+  font-size: 11px;
+  color: var(--text-dim);
+  padding: 4px 8px;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  white-space: nowrap;
+  min-width: 72px;
+  text-align: center;
+}
+
+/* ─── LOADING / ERROR ─── */
+.app-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  background: var(--bg);
+  z-index: 100;
+}
+
+.overlay-message {
+  font-family: var(--font-display);
+  font-size: 13px;
+  letter-spacing: 0.1em;
+  color: var(--text-dim);
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-.App-link {
-  color: #61dafb;
+.pulse-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--valley);
+  animation: pulse 1.2s ease-in-out infinite;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+@keyframes pulse {
+  0%, 100% { opacity: 0.2; transform: scale(0.8); }
+  50% { opacity: 1; transform: scale(1); }
+}
+
+/* ─── MISC ─── */
+.episode-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 16px;
+  font-family: var(--font-display);
+  font-size: 11px;
+  color: var(--text-dim);
+  letter-spacing: 0.08em;
 }

src/App.js

@@ -1,23 +1,188 @@
-import logo from './logo.svg';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import './App.css';
+import CreaseCanvas from './components/CreaseCanvas';
+import RewardPanel from './components/RewardPanel';
+import StepFeed from './components/StepFeed';
+import InfoBadges from './components/InfoBadges';
+import TargetSelector from './components/TargetSelector';
+import PlayerControls from './components/PlayerControls';
+
+const API_BASE = 'http://localhost:8000';
 
 function App() {
+  const [targets, setTargets] = useState({});
+  const [selectedTarget, setSelectedTarget] = useState('half_horizontal');
+  const [episode, setEpisode] = useState(null);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const [apiStatus, setApiStatus] = useState('connecting'); // 'connecting' | 'ok' | 'err'
+  const [episodeLoading, setEpisodeLoading] = useState(false);
+  const intervalRef = useRef(null);
+
+  const fetchTargets = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/targets`);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      setTargets(data);
+      setApiStatus('ok');
+    } catch {
+      setApiStatus('err');
+    }
+  }, []);
+
+  const fetchDemoEpisode = useCallback(async (targetName) => {
+    setEpisodeLoading(true);
+    setPlaying(false);
+    setCurrentStep(0);
+    try {
+      const res = await fetch(`${API_BASE}/episode/demo?target=${targetName}`);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      setEpisode(data);
+      setApiStatus('ok');
+    } catch {
+      setEpisode(null);
+      setApiStatus('err');
+    } finally {
+      setEpisodeLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchTargets();
+  }, [fetchTargets]);
+
+  useEffect(() => {
+    fetchDemoEpisode(selectedTarget);
+  }, [selectedTarget, fetchDemoEpisode]);
+
+  const totalSteps = episode ? episode.steps.length : 0;
+
+  // currentStep is 1-indexed for display (0 = "empty paper before any folds")
+  // steps array is 0-indexed: steps[0] = result of fold 1
+  const activeStepData = episode && currentStep > 0 ? episode.steps[currentStep - 1] : null;
+
+  useEffect(() => {
+    if (playing) {
+      intervalRef.current = setInterval(() => {
+        setCurrentStep(prev => {
+          if (prev >= totalSteps) {
+            setPlaying(false);
+            return prev;
+          }
+          return prev + 1;
+        });
+      }, 1500);
+    }
+    return () => clearInterval(intervalRef.current);
+  }, [playing, totalSteps]);
+
+  const handlePlay = () => {
+    if (currentStep >= totalSteps) setCurrentStep(0);
+    setPlaying(true);
+  };
+  const handlePause = () => setPlaying(false);
+  const handleNext = () => {
+    setPlaying(false);
+    setCurrentStep(prev => Math.min(prev + 1, totalSteps));
+  };
+  const handlePrev = () => {
+    setPlaying(false);
+    setCurrentStep(prev => Math.max(prev - 1, 0));
+  };
+  const handleReset = () => {
+    setPlaying(false);
+    setCurrentStep(0);
+  };
+
+  const targetDef = targets[selectedTarget] || null;
+  const targetFold = episode ? episode.target : null;
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+    <div className="app">
+      <header className="app-header">
+        <span className="app-title">
+          OPTI<span className="title-accent">GAMI</span> RL
+        </span>
+        <div className="header-sep" />
+        <TargetSelector
+          targets={targets}
+          selected={selectedTarget}
+          onChange={name => setSelectedTarget(name)}
+        />
+        <div className="header-sep" />
+        <PlayerControls
+          playing={playing}
+          onPlay={handlePlay}
+          onPause={handlePause}
+          onNext={handleNext}
+          onPrev={handlePrev}
+          onReset={handleReset}
+          currentStep={currentStep}
+          totalSteps={totalSteps}
+          disabled={!episode || episodeLoading}
+        />
+        <div className="header-right">
+          <div className="api-status">
+            <span className={`api-status-dot ${apiStatus === 'ok' ? 'ok' : apiStatus === 'err' ? 'err' : ''}`} />
+            <span>{apiStatus === 'ok' ? 'API OK' : apiStatus === 'err' ? 'API ERR' : 'CONNECTING'}</span>
+          </div>
+        </div>
       </header>
+
+      <div className="app-body">
+        <div className="app-left">
+          <div className="canvas-row">
+            <div className="canvas-wrap">
+              <span className="canvas-label">
+                TARGET — {targetDef ? targetDef.name.replace(/_/g, ' ').toUpperCase() : '—'}
+              </span>
+              <CreaseCanvas
+                paperState={null}
+                target={targetFold}
+                label="TARGET"
+                dim={280}
+                ghostOnly={true}
+              />
+            </div>
+            <div className="canvas-wrap">
+              <span className="canvas-label">
+                {currentStep === 0 ? 'INITIAL STATE' : `STEP ${currentStep} / ${totalSteps}`}
+              </span>
+              <CreaseCanvas
+                paperState={activeStepData ? activeStepData.paper_state : null}
+                target={targetFold}
+                label={currentStep === 0 ? 'INITIAL' : `STEP ${currentStep}`}
+                dim={280}
+                ghostOnly={false}
+              />
+            </div>
+          </div>
+
+          <div className="step-feed-section">
+            <div className="section-header">FOLD SEQUENCE</div>
+            {episodeLoading ? (
+              <div className="episode-loading">
+                <div className="pulse-dot" />
+                FETCHING EPISODE...
+              </div>
+            ) : (
+              <StepFeed
+                steps={episode ? episode.steps : []}
+                currentStep={currentStep}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="app-right">
+          <div className="section-header">REWARD DECOMPOSITION</div>
+          <RewardPanel reward={activeStepData ? activeStepData.reward : null} />
+          <div className="section-header">EPISODE INFO</div>
+          <InfoBadges info={activeStepData ? activeStepData.info : null} targetDef={targetDef} />
+        </div>
+      </div>
     </div>
   );
 }

src/App.test.js

@@ -1,8 +1 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+// Tests removed — observability dashboard

src/components/CreaseCanvas.js

@@ -0,0 +1,113 @@
+const MOUNTAIN = '#f59e0b';
+const VALLEY = '#38bdf8';
+
+function toSvg(x, y, dim) {
+  return [x * dim, (1 - y) * dim];
+}
+
+function GhostEdges({ target, dim }) {
+  if (!target) return null;
+  const { vertices_coords, edges_vertices, edges_assignment } = target;
+  if (!vertices_coords || !edges_vertices || !edges_assignment) return null;
+
+  return edges_vertices.map((ev, i) => {
+    const asgn = edges_assignment[i];
+    if (asgn === 'B') return null;
+    const [v1x, v1y] = vertices_coords[ev[0]];
+    const [v2x, v2y] = vertices_coords[ev[1]];
+    const [x1, y1] = toSvg(v1x, v1y, dim);
+    const [x2, y2] = toSvg(v2x, v2y, dim);
+    const color = asgn === 'M' ? MOUNTAIN : VALLEY;
+    return (
+      <line
+        key={i}
+        x1={x1} y1={y1} x2={x2} y2={y2}
+        stroke={color}
+        strokeOpacity={0.25}
+        strokeWidth={1.5}
+        strokeDasharray="5 4"
+      />
+    );
+  });
+}
+
+function CurrentEdges({ paperState, dim }) {
+  if (!paperState || !paperState.edges) return null;
+  return paperState.edges.map((edge) => {
+    if (edge.assignment === 'B') return null;
+    const [x1, y1] = toSvg(edge.v1[0], edge.v1[1], dim);
+    const [x2, y2] = toSvg(edge.v2[0], edge.v2[1], dim);
+    const color = edge.assignment === 'M' ? MOUNTAIN : VALLEY;
+    return (
+      <line
+        key={edge.id}
+        x1={x1} y1={y1} x2={x2} y2={y2}
+        stroke={color}
+        strokeWidth={2.5}
+        strokeLinecap="square"
+      />
+    );
+  });
+}
+
+function AnchorCrosses({ paperState, dim }) {
+  if (!paperState || !paperState.anchor_points) return null;
+  const size = 4;
+  return paperState.anchor_points.map((pt, i) => {
+    const [cx, cy] = toSvg(pt[0], pt[1], dim);
+    return (
+      <g key={i}>
+        <line
+          x1={cx - size} y1={cy} x2={cx + size} y2={cy}
+          stroke="#64748b" strokeWidth={1}
+        />
+        <line
+          x1={cx} y1={cy - size} x2={cx} y2={cy + size}
+          stroke="#64748b" strokeWidth={1}
+        />
+      </g>
+    );
+  });
+}
+
+export default function CreaseCanvas({ paperState, target, dim = 280, ghostOnly = false }) {
+  const pad = 1;
+  const size = dim;
+
+  return (
+    <svg
+      className="canvas-svg"
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      style={{ flexShrink: 0 }}
+    >
+      {/* Paper background */}
+      <rect
+        x={pad} y={pad}
+        width={size - pad * 2} height={size - pad * 2}
+        fill="#fafaf5"
+      />
+
+      {/* Ghost target overlay */}
+      <GhostEdges target={target} dim={size} />
+
+      {/* Current paper state */}
+      {!ghostOnly && (
+        <>
+          <CurrentEdges paperState={paperState} dim={size} />
+          <AnchorCrosses paperState={paperState} dim={size} />
+        </>
+      )}
+
+      {/* Paper border */}
+      <rect
+        x={pad} y={pad}
+        width={size - pad * 2} height={size - pad * 2}
+        fill="none"
+        stroke="#2a2a3a"
+        strokeWidth={1}
+      />
+    </svg>
+  );
+}

src/components/InfoBadges.js

@@ -0,0 +1,72 @@
+function BoolVal({ value }) {
+  if (value === null || value === undefined) {
+    return <span className="info-val dim">—</span>;
+  }
+  return (
+    <span className={`info-val ${value ? 'bool-true' : 'bool-false'}`}>
+      {value ? 'TRUE' : 'FALSE'}
+    </span>
+  );
+}
+
+function TextVal({ value, dim = false }) {
+  if (value === null || value === undefined) {
+    return <span className="info-val dim">—</span>;
+  }
+  return (
+    <span className={`info-val${dim ? ' dim' : ''}`}>
+      {String(value).toUpperCase()}
+    </span>
+  );
+}
+
+function NumVal({ value }) {
+  if (value === null || value === undefined) {
+    return <span className="info-val dim">—</span>;
+  }
+  return <span className="info-val">{value}</span>;
+}
+
+export default function InfoBadges({ info, targetDef }) {
+  return (
+    <div className="info-badges">
+      <div className="info-row">
+        <span className="info-key">n_creases</span>
+        <NumVal value={info ? info.n_creases : (targetDef ? targetDef.n_creases : null)} />
+      </div>
+      <div className="info-row">
+        <span className="info-key">interior_verts</span>
+        <NumVal value={info ? info.n_interior_vertices : null} />
+      </div>
+      <div className="info-row">
+        <span className="info-key">local_fold</span>
+        <BoolVal value={info ? info.local_foldability : null} />
+      </div>
+      <div className="info-row">
+        <span className="info-key">blb_sat</span>
+        <BoolVal value={info ? info.blb_satisfied : null} />
+      </div>
+      <div className="info-row">
+        <span className="info-key">global_fold</span>
+        <TextVal
+          value={info ? info.global_foldability : null}
+          dim={true}
+        />
+      </div>
+      {targetDef && (
+        <>
+          <div className="info-row">
+            <span className="info-key">level</span>
+            <span className="info-val">LVL {targetDef.level}</span>
+          </div>
+          <div className="info-row">
+            <span className="info-key">target</span>
+            <span className="info-val" style={{ fontSize: '10px', textAlign: 'right', maxWidth: '140px', wordBreak: 'break-word' }}>
+              {targetDef.name.replace(/_/g, ' ').toUpperCase()}
+            </span>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

src/components/PlayerControls.js

@@ -0,0 +1,54 @@
+export default function PlayerControls({
+  playing,
+  onPlay,
+  onPause,
+  onNext,
+  onPrev,
+  onReset,
+  currentStep,
+  totalSteps,
+  disabled,
+}) {
+  const atStart = currentStep === 0;
+  const atEnd = currentStep >= totalSteps;
+
+  return (
+    <div className="player-controls">
+      <button
+        className="ctrl-btn"
+        onClick={onReset}
+        disabled={disabled || atStart}
+        title="Reset to start"
+      >
+        ⏮ RST
+      </button>
+      <button
+        className="ctrl-btn"
+        onClick={onPrev}
+        disabled={disabled || atStart}
+        title="Previous step"
+      >
+        ◀ PREV
+      </button>
+      <span className="ctrl-step-display">
+        {disabled ? '—/—' : `${currentStep} / ${totalSteps}`}
+      </span>
+      <button
+        className="ctrl-btn"
+        onClick={onNext}
+        disabled={disabled || atEnd}
+        title="Next step"
+      >
+        NEXT ▶
+      </button>
+      <button
+        className={`ctrl-btn play`}
+        onClick={playing ? onPause : onPlay}
+        disabled={disabled || (!playing && atEnd)}
+        title={playing ? 'Pause' : 'Play'}
+      >
+        {playing ? '⏸ PAUSE' : '▶▶ PLAY'}
+      </button>
+    </div>
+  );
+}

src/components/RewardPanel.js

@@ -0,0 +1,50 @@
+const REWARD_FIELDS = [
+  { key: 'kawasaki',   label: 'kawasaki',  color: 'var(--validity)' },
+  { key: 'maekawa',   label: 'maekawa',   color: 'var(--validity)' },
+  { key: 'blb',       label: 'blb',       color: 'var(--validity)' },
+  { key: 'progress',  label: 'progress',  color: 'var(--progress)' },
+  { key: 'economy',   label: 'economy',   color: 'var(--economy)' },
+];
+
+const TOTAL_FIELD = { key: 'total', label: 'total', color: 'var(--text-primary)' };
+
+function RewardRow({ label, color, value }) {
+  const isDash = value === null || value === undefined;
+  const pct = isDash ? 0 : Math.min(Math.max(value, 0), 1) * 100;
+
+  return (
+    <div className="reward-row">
+      <span className="reward-label">{label}</span>
+      <div className="reward-track">
+        <div
+          className="reward-bar"
+          style={{ width: `${pct}%`, background: color }}
+        />
+      </div>
+      <span className={`reward-value${isDash ? ' dim' : ''}`}>
+        {isDash ? '—' : value.toFixed(2)}
+      </span>
+    </div>
+  );
+}
+
+export default function RewardPanel({ reward }) {
+  return (
+    <div className="reward-panel">
+      {REWARD_FIELDS.map(({ key, label, color }) => (
+        <RewardRow
+          key={key}
+          label={label}
+          color={color}
+          value={reward ? reward[key] : null}
+        />
+      ))}
+      <div className="reward-divider" />
+      <RewardRow
+        label={TOTAL_FIELD.label}
+        color={TOTAL_FIELD.color}
+        value={reward ? reward[TOTAL_FIELD.key] : null}
+      />
+    </div>
+  );
+}

src/components/StepFeed.js

@@ -0,0 +1,73 @@
+import { useEffect, useRef } from 'react';
+
+function rewardDelta(step, prevStep) {
+  if (!step || !step.reward) return null;
+  const curr = step.reward.total;
+  if (prevStep && prevStep.reward) {
+    return curr - prevStep.reward.total;
+  }
+  return curr;
+}
+
+export default function StepFeed({ steps, currentStep }) {
+  const feedRef = useRef(null);
+  const activeRef = useRef(null);
+
+  useEffect(() => {
+    if (activeRef.current) {
+      activeRef.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+  }, [currentStep]);
+
+  if (!steps || steps.length === 0) {
+    return (
+      <div className="step-feed">
+        <div style={{ padding: '16px', color: 'var(--text-dim)', fontFamily: 'var(--font-display)', fontSize: '11px' }}>
+          NO STEPS LOADED
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="step-feed" ref={feedRef}>
+      {steps.map((step, idx) => {
+        const stepNum = idx + 1;
+        const isActive = currentStep === stepNum;
+        const delta = rewardDelta(step, idx > 0 ? steps[idx - 1] : null);
+        const asgn = step.fold ? step.fold.assignment : null;
+        const instruction = step.fold ? step.fold.instruction : (step.prompt || '');
+
+        return (
+          <div
+            key={stepNum}
+            className={`step-entry${isActive ? ' active' : ''}`}
+            ref={isActive ? activeRef : null}
+          >
+            <div className="step-entry-top">
+              <span className="step-num">#{stepNum}</span>
+              <span className="step-instruction">{instruction}</span>
+              {asgn && (
+                <span className={`assign-badge ${asgn}`}>{asgn}</span>
+              )}
+            </div>
+            {delta !== null && (
+              <div className="step-reward-delta">
+                {'\u0394'} total:{' '}
+                <span className={delta >= 0 ? 'delta-positive' : 'delta-negative'}>
+                  {delta >= 0 ? '+' : ''}{delta.toFixed(3)}
+                </span>
+                {step.reward && (
+                  <span style={{ color: 'var(--text-dim)' }}>
+                    {' '}| progress: {step.reward.progress.toFixed(2)}
+                    {' '}| economy: {step.reward.economy.toFixed(2)}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/components/TargetSelector.js

@@ -0,0 +1,38 @@
+function groupByLevel(targets) {
+  const levels = {};
+  Object.values(targets).forEach(t => {
+    if (!levels[t.level]) levels[t.level] = [];
+    levels[t.level].push(t);
+  });
+  return levels;
+}
+
+export default function TargetSelector({ targets, selected, onChange }) {
+  const levels = groupByLevel(targets);
+  const sortedLevels = Object.keys(levels).sort((a, b) => Number(a) - Number(b));
+
+  return (
+    <div className="target-selector">
+      <span className="target-selector-label">TARGET</span>
+      <select
+        className="target-select"
+        value={selected}
+        onChange={e => onChange(e.target.value)}
+      >
+        {sortedLevels.length === 0 ? (
+          <option value="">LOADING...</option>
+        ) : (
+          sortedLevels.map(level => (
+            <optgroup key={level} label={`── LEVEL ${level}`}>
+              {levels[level].map(t => (
+                <option key={t.name} value={t.name}>
+                  {t.name.replace(/_/g, ' ').toUpperCase()}
+                </option>
+              ))}
+            </optgroup>
+          ))
+        )}
+      </select>
+    </div>
+  );
+}

src/index.css

@@ -1,13 +1,34 @@
-body {
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=IBM+Plex+Mono:wght@300;400;500&display=swap');
+
+*, *::before, *::after {
+  box-sizing: border-box;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  padding: 0;
+}
+
+body {
+  background: #0d0d14;
+  color: #f8fafc;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 13px;
+  line-height: 1.5;
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: #0d0d14;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #2a2a3a;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+::-webkit-scrollbar-thumb:hover {
+  background: #3a3a5a;
 }

src/reportWebVitals.js

@@ -1,13 +1 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;
+export default function reportWebVitals() {}

viz/renderer.py

@@ -0,0 +1,315 @@
+"""
+Matplotlib-based crease pattern renderer.
+Used for quick observability during training and debugging.
+"""
+import json
+import numpy as np
+import matplotlib.pyplot as plt
+import matplotlib.patches as patches
+from matplotlib.animation import FuncAnimation
+from typing import Optional
+
+
+# Design system colors
+_COLOR_MOUNTAIN = "#f59e0b"
+_COLOR_VALLEY = "#38bdf8"
+_COLOR_PAPER = "#fafaf5"
+_COLOR_PAPER_EDGE = "#e2e8f0"
+_COLOR_AX_BG = "#1a1a2e"
+_COLOR_ANCHOR = "#4a4a6a"
+_COLOR_REWARD_BG = "#13131d"
+_COLOR_GRID = "#2a2a3a"
+_COLOR_VALIDITY = "#22d3ee"
+_COLOR_PROGRESS = "#22c55e"
+_COLOR_ECONOMY = "#a78bfa"
+
+
+def draw_paper_state(ax, paper_state, target=None, step=None, reward=None):
+    """
+    Draw the current crease pattern on a matplotlib axes object.
+
+    Args:
+        ax: matplotlib axes
+        paper_state: PaperState instance
+        target: optional FOLD dict for target crease ghost overlay
+        step: step number for title (None = "Initial")
+        reward: unused, kept for signature compatibility
+    """
+    ax.set_facecolor(_COLOR_AX_BG)
+
+    # Unit square paper
+    square = patches.Rectangle(
+        (0, 0), 1, 1,
+        facecolor=_COLOR_PAPER,
+        edgecolor=_COLOR_PAPER_EDGE,
+        linewidth=1.5,
+        zorder=1,
+    )
+    ax.add_patch(square)
+
+    # Target ghost overlay
+    if target is not None:
+        verts = target["vertices_coords"]
+        edges_v = target["edges_vertices"]
+        edges_a = target["edges_assignment"]
+        for (v1, v2), assignment in zip(edges_v, edges_a):
+            if assignment not in ("M", "V"):
+                continue
+            x1, y1 = verts[v1]
+            x2, y2 = verts[v2]
+            color = _COLOR_MOUNTAIN if assignment == "M" else _COLOR_VALLEY
+            ax.plot(
+                [x1, x2], [y1, y2],
+                color=color,
+                alpha=0.2,
+                linewidth=1,
+                linestyle="--",
+                zorder=2,
+            )
+
+    # Current crease edges
+    for edge in paper_state.crease_edges():
+        x1, y1 = edge["v1"]
+        x2, y2 = edge["v2"]
+        assignment = edge["assignment"]
+        color = _COLOR_MOUNTAIN if assignment == "M" else _COLOR_VALLEY
+        ax.plot(
+            [x1, x2], [y1, y2],
+            color=color,
+            linewidth=2.5,
+            linestyle="-",
+            solid_capstyle="round",
+            zorder=3,
+        )
+        # Endpoint dots
+        ax.plot(
+            [x1, x2], [y1, y2],
+            color=color,
+            marker="o",
+            markersize=5,
+            linestyle="none",
+            zorder=4,
+        )
+
+    # Anchor points as gray crosses
+    for x, y in paper_state.anchor_points():
+        ax.plot(
+            x, y,
+            color=_COLOR_ANCHOR,
+            marker="+",
+            markersize=3,
+            linestyle="none",
+            zorder=5,
+        )
+
+    # Title
+    title = f"Step {step}" if step is not None else "Initial"
+    ax.set_title(title, color="white", fontfamily="monospace", fontsize=10, pad=6)
+
+    # Remove ticks and spines
+    ax.set_xticks([])
+    ax.set_yticks([])
+    for spine in ax.spines.values():
+        spine.set_visible(False)
+
+    ax.set_xlim(-0.05, 1.05)
+    ax.set_ylim(-0.05, 1.05)
+    ax.set_aspect("equal")
+
+
+def draw_reward_bars(ax, reward: dict):
+    """
+    Draw a horizontal bar chart of reward components.
+
+    Args:
+        ax: matplotlib axes
+        reward: dict with keys kawasaki, maekawa, blb, progress, economy (all 0-1)
+    """
+    components = ["kawasaki", "maekawa", "blb", "progress", "economy"]
+    colors = {
+        "kawasaki": _COLOR_VALIDITY,
+        "maekawa": _COLOR_VALIDITY,
+        "blb": _COLOR_VALIDITY,
+        "progress": _COLOR_PROGRESS,
+        "economy": _COLOR_ECONOMY,
+    }
+
+    values = [float(reward.get(c, 0.0)) for c in components]
+
+    ax.set_facecolor(_COLOR_REWARD_BG)
+
+    bar_colors = [colors[c] for c in components]
+    bars = ax.barh(
+        components,
+        values,
+        height=0.6,
+        color=bar_colors,
+        zorder=2,
+    )
+
+    # Value labels at end of each bar
+    for bar, val in zip(bars, values):
+        ax.text(
+            min(val + 0.02, 0.98),
+            bar.get_y() + bar.get_height() / 2,
+            f"{val:.2f}",
+            va="center",
+            ha="left",
+            color="white",
+            fontfamily="monospace",
+            fontsize=8,
+            zorder=3,
+        )
+
+    # Y-axis label style
+    ax.tick_params(axis="y", colors="white", labelsize=8)
+    for label in ax.get_yticklabels():
+        label.set_fontfamily("monospace")
+
+    # Subtle x gridlines
+    for x_pos in [0.25, 0.5, 0.75, 1.0]:
+        ax.axvline(x_pos, color=_COLOR_GRID, linewidth=0.8, zorder=1)
+
+    ax.set_xlim(0, 1.0)
+    ax.set_xticks([])
+    ax.tick_params(axis="x", colors="white")
+    for spine in ax.spines.values():
+        spine.set_visible(False)
+
+    ax.set_title("Reward Breakdown", color="white", fontfamily="monospace", fontsize=10, pad=6)
+
+
+def render_episode(fold_history, target, rewards_history, save_path=None):
+    """
+    Create a multi-panel figure showing an entire episode.
+
+    Args:
+        fold_history: list of PaperState snapshots (one per step)
+        target: FOLD dict of target crease pattern
+        rewards_history: list of reward dicts (one per step)
+        save_path: if provided, save PNG here; otherwise plt.show()
+
+    Returns:
+        matplotlib Figure
+    """
+    n_states = len(fold_history)
+    show_states = min(n_states, 4)
+
+    fig = plt.figure(figsize=(4 * show_states + 4, 5), facecolor="#0d0d14")
+    gs = fig.add_gridspec(
+        1, show_states + 1,
+        width_ratios=[1] * show_states + [1.2],
+        wspace=0.3,
+    )
+
+    # Paper state panels (up to 4)
+    for i in range(show_states):
+        # Evenly sample from fold_history if more than 4 steps
+        idx = int(i * (n_states - 1) / max(show_states - 1, 1)) if show_states > 1 else 0
+        ax = fig.add_subplot(gs[0, i])
+        draw_paper_state(
+            ax,
+            fold_history[idx],
+            target=target,
+            step=idx + 1,
+            reward=rewards_history[idx] if idx < len(rewards_history) else None,
+        )
+
+    # Reward curves panel
+    ax_reward = fig.add_subplot(gs[0, show_states])
+    ax_reward.set_facecolor(_COLOR_REWARD_BG)
+
+    steps = list(range(1, len(rewards_history) + 1))
+    curve_specs = [
+        ("progress", _COLOR_PROGRESS, "progress"),
+        ("kawasaki", _COLOR_VALIDITY, "kawasaki"),
+        ("total", "#f8fafc", "total"),
+    ]
+
+    for key, color, label in curve_specs:
+        vals = [r.get(key, 0.0) for r in rewards_history]
+        ax_reward.plot(steps, vals, color=color, linewidth=1.5, label=label)
+
+    ax_reward.set_xlim(1, max(len(rewards_history), 1))
+    ax_reward.set_title("Reward Curves", color="white", fontfamily="monospace", fontsize=10, pad=6)
+    ax_reward.tick_params(colors="white", labelsize=8)
+    ax_reward.legend(
+        fontsize=7,
+        facecolor=_COLOR_REWARD_BG,
+        edgecolor=_COLOR_GRID,
+        labelcolor="white",
+    )
+    for spine in ax_reward.spines.values():
+        spine.set_color(_COLOR_GRID)
+
+    if save_path:
+        fig.savefig(save_path, dpi=150, facecolor="#0d0d14", bbox_inches="tight")
+    else:
+        plt.show()
+
+    return fig
+
+
+def render_training_curves(log_path: str):
+    """
+    Read a JSONL log file and plot training curves.
+
+    Each line must be a JSON object with reward component keys.
+
+    Args:
+        log_path: path to JSONL training log
+
+    Returns:
+        matplotlib Figure
+    """
+    records = []
+    with open(log_path) as f:
+        for line in f:
+            line = line.strip()
+            if not line:
+                continue
+            records.append(json.loads(line))
+
+    episodes = list(range(1, len(records) + 1))
+
+    keys_to_plot = [
+        ("total", "#f8fafc", "total reward"),
+        ("progress", _COLOR_PROGRESS, "progress"),
+        ("kawasaki", _COLOR_VALIDITY, "kawasaki"),
+        ("maekawa", _COLOR_VALIDITY, "maekawa"),
+        ("blb", _COLOR_VALIDITY, "blb"),
+    ]
+
+    fig, axes = plt.subplots(
+        2, 1,
+        figsize=(10, 6),
+        facecolor="#0d0d14",
+        gridspec_kw={"hspace": 0.4},
+    )
+
+    # Top: total + progress
+    ax_top = axes[0]
+    ax_top.set_facecolor(_COLOR_REWARD_BG)
+    for key, color, label in keys_to_plot[:2]:
+        vals = [r.get(key, 0.0) for r in records]
+        ax_top.plot(episodes, vals, color=color, linewidth=1.5, label=label)
+    ax_top.set_title("Training: Total & Progress", color="white", fontfamily="monospace", fontsize=10)
+    ax_top.tick_params(colors="white", labelsize=8)
+    ax_top.legend(fontsize=8, facecolor=_COLOR_REWARD_BG, edgecolor=_COLOR_GRID, labelcolor="white")
+    for spine in ax_top.spines.values():
+        spine.set_color(_COLOR_GRID)
+
+    # Bottom: kawasaki, maekawa, blb
+    ax_bot = axes[1]
+    ax_bot.set_facecolor(_COLOR_REWARD_BG)
+    for key, color, label in keys_to_plot[2:]:
+        vals = [r.get(key, 0.0) for r in records]
+        ax_bot.plot(episodes, vals, color=color, linewidth=1.5, label=label, alpha=0.85)
+    ax_bot.set_title("Training: Validity Checks", color="white", fontfamily="monospace", fontsize=10)
+    ax_bot.set_xlabel("Episode", color="white", fontsize=9)
+    ax_bot.tick_params(colors="white", labelsize=8)
+    ax_bot.legend(fontsize=8, facecolor=_COLOR_REWARD_BG, edgecolor=_COLOR_GRID, labelcolor="white")
+    for spine in ax_bot.spines.values():
+        spine.set_color(_COLOR_GRID)
+
+    return fig