Redesign frontend as training dashboard + add live activity feed

- Replace manual origami editor with training-focused UI
- TrainingDashboard polls /training/feed for live step data
- 3D canvas shows selected training entry's fold attempt
- Backend: add /training/feed and /training/log endpoints
- Notebook: log each env.step() to dashboard via /training/log
- Add API proxy rewrite and turbopack config

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

app/page.tsx

@@ -1,118 +1,96 @@
 'use client';
 
-import { useState, useRef } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { Canvas } from '@react-three/fiber';
-import { OrbitControls, Environment, Grid } from '@react-three/drei';
+import { OrbitControls, Grid } from '@react-three/drei';
 import { patterns, Pattern } from '@/lib/patterns';
 import { OrigamiMesh } from '@/components/OrigamiMesh';
-import { Github, RefreshCw, Upload } from 'lucide-react';
+import { TrainingDashboard, TrainingEntry } from '@/components/TrainingDashboard';
 import { parseFoldFile } from '@/lib/foldParser';
-import { LLMPrompt } from '@/components/LLMPrompt';
 
 export default function Optigami() {
-  const [customPatterns, setCustomPatterns] = useState<Pattern[]>([]);
-  const [selectedPatternId, setSelectedPatternId] = useState(patterns[0].id);
-  const [foldPercent, setFoldPercent] = useState(0);
-  const [key, setKey] = useState(0); // Used to force reset the simulation
-  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [selectedEntry, setSelectedEntry] = useState<TrainingEntry | null>(null);
+  const [foldPercent, setFoldPercent] = useState(1);
+  const [key, setKey] = useState(0);
 
-  const allPatterns = [...patterns, ...customPatterns];
-  const pattern = allPatterns.find(p => p.id === selectedPatternId) || allPatterns[0];
-
-  const handleReset = () => {
-    setFoldPercent(0);
-    setKey(k => k + 1);
-  };
-
-  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = (event) => {
-      const content = event.target?.result as string;
-      const parsedPattern = parseFoldFile(content, file.name);
-      if (parsedPattern) {
-        setCustomPatterns(prev => [...prev, parsedPattern]);
-        setSelectedPatternId(parsedPattern.id);
-        setFoldPercent(0);
-        setKey(k => k + 1);
-      } else {
-        alert("Failed to parse .fold file. Please ensure it's a valid FOLD format with vertices_coords and faces_vertices.");
-      }
-    };
-    reader.readAsText(file);
-    
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
+  // Convert training entry's fold_data into a Pattern for the 3D viewer
+  const activePattern: Pattern | null = useMemo(() => {
+    if (!selectedEntry?.fold_data) return null;
+    try {
+      const parsed = parseFoldFile(JSON.stringify(selectedEntry.fold_data), selectedEntry.task_name);
+      return parsed;
+    } catch {
+      return null;
     }
-  };
+  }, [selectedEntry]);
+
+  // Fallback to a default pattern when no training entry is selected
+  const displayPattern = activePattern || patterns[0];
 
-  const handlePatternGenerated = (newPattern: Pattern) => {
-    setCustomPatterns(prev => [...prev, newPattern]);
-    setSelectedPatternId(newPattern.id);
-    setFoldPercent(0);
+  const handleEntrySelect = useCallback((entry: TrainingEntry) => {
+    setSelectedEntry(entry);
+    setFoldPercent(1);
     setKey(k => k + 1);
-  };
+  }, []);
 
   return (
     <div className="flex h-screen w-full bg-zinc-950 text-zinc-100 font-sans overflow-hidden">
-      {/* Left Sidebar */}
-      <div className="w-80 flex-shrink-0 border-r border-zinc-800 bg-zinc-900 flex flex-col">
-        <div className="p-6 border-b border-zinc-800">
-          <h1 className="text-xl font-semibold tracking-tight mb-2">Optigami</h1>
-          <p className="text-sm text-zinc-400">
-            Optigami
-          </p>
+      {/* Left panel — Training Dashboard */}
+      <div className="w-96 flex-shrink-0 border-r border-zinc-800 bg-zinc-900 flex flex-col">
+        <div className="px-5 py-4 border-b border-zinc-800 flex items-center justify-between">
+          <div>
+            <h1 className="text-lg font-semibold tracking-tight">Optigami</h1>
+            <p className="text-[11px] text-zinc-500">RL Training Environment</p>
+          </div>
+          <div className="flex items-center gap-2">
+            <a
+              href="https://huggingface.co/spaces/openenv-community/optigami_"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-[10px] text-zinc-500 hover:text-zinc-300 bg-zinc-800 px-2 py-1 rounded border border-zinc-700"
+            >
+              OpenEnv 0.2.1
+            </a>
+          </div>
         </div>
 
-        <div className="p-6 flex-1 overflow-y-auto flex flex-col gap-8">
-          {/* Controls */}
-          <div className="space-y-4">
+        <div className="flex-1 overflow-y-auto p-4">
+          <TrainingDashboard onEntrySelect={handleEntrySelect} />
+        </div>
+      </div>
+
+      {/* Right side — 3D viewer + detail */}
+      <div className="flex-1 flex flex-col">
+        {/* Top bar with context about selected entry */}
+        {selectedEntry && (
+          <div className="flex-shrink-0 border-b border-zinc-800 bg-zinc-900/50 px-6 py-3 flex items-center gap-6 text-xs">
             <div>
-              <label className="block text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">
-                Crease Pattern
-              </label>
-              <div className="flex gap-2">
-                <select
-                  className="flex-1 bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                  value={selectedPatternId}
-                  onChange={(e) => {
-                    setSelectedPatternId(e.target.value);
-                    setFoldPercent(0);
-                    setKey(k => k + 1);
-                  }}
-                >
-                  {allPatterns.map(p => (
-                    <option key={p.id} value={p.id}>{p.name}</option>
-                  ))}
-                </select>
-                <button 
-                  onClick={() => fileInputRef.current?.click()}
-                  className="bg-zinc-800 hover:bg-zinc-700 p-2 rounded-lg border border-zinc-700 transition-colors flex-shrink-0 text-zinc-300"
-                  title="Upload .fold file"
-                >
-                  <Upload size={18} />
-                </button>
-                <input 
-                  type="file" 
-                  accept=".fold" 
-                  className="hidden" 
-                  ref={fileInputRef}
-                  onChange={handleFileUpload}
-                />
-              </div>
+              <span className="text-zinc-500">Step</span>{' '}
+              <span className="font-mono text-zinc-200">#{selectedEntry.step}</span>
             </div>
-
             <div>
-              <div className="flex justify-between items-center mb-2">
-                <label className="block text-xs font-medium text-zinc-400 uppercase tracking-wider">
-                  Fold Angle
-                </label>
-                <span className="text-xs text-zinc-500 font-mono">
-                  {Math.round(foldPercent * 100)}%
-                </span>
-              </div>
+              <span className="text-zinc-500">Task</span>{' '}
+              <span className="text-zinc-200">{selectedEntry.task_name}</span>
+            </div>
+            <div>
+              <span className="text-zinc-500">Reward</span>{' '}
+              <span className={`font-mono font-semibold ${
+                selectedEntry.reward >= 15 ? 'text-green-400' :
+                selectedEntry.reward >= 5 ? 'text-yellow-400' :
+                selectedEntry.reward >= 0 ? 'text-orange-400' : 'text-red-400'
+              }`}>{selectedEntry.reward.toFixed(2)}</span>
+            </div>
+            <div>
+              <span className="text-zinc-500">Similarity</span>{' '}
+              <span className="font-mono text-indigo-400">
+                {(selectedEntry.shape_similarity * 100).toFixed(1)}%
+              </span>
+            </div>
+            {selectedEntry.error && (
+              <div className="text-red-400/80 truncate flex-1">{selectedEntry.error}</div>
+            )}
+            <div className="ml-auto flex items-center gap-2">
+              <span className="text-zinc-500">Fold</span>
               <input
                 type="range"
                 min="0"
@@ -120,37 +98,57 @@ export default function Optigami() {
                 step="0.01"
                 value={foldPercent}
                 onChange={(e) => setFoldPercent(parseFloat(e.target.value))}
-                className="w-full accent-indigo-500"
+                className="w-24 accent-indigo-500"
               />
+              <span className="font-mono text-zinc-400 w-8">{Math.round(foldPercent * 100)}%</span>
             </div>
-
-            <button
-              onClick={handleReset}
-              className="w-full flex items-center justify-center gap-2 bg-zinc-800 hover:bg-zinc-700 text-sm py-2 rounded-lg transition-colors border border-zinc-700"
-            >
-              <RefreshCw size={14} />
-              Reset Simulation
-            </button>
-            
-            <LLMPrompt onPatternGenerated={handlePatternGenerated} />
           </div>
+        )}
+
+        {/* 3D Canvas */}
+        <div className="flex-1 relative">
+          {!selectedEntry && (
+            <div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
+              <div className="text-center">
+                <div className="text-zinc-500 text-sm mb-1">Waiting for training data</div>
+                <div className="text-zinc-600 text-xs">
+                  Start a GRPO training run in the Colab notebook
+                </div>
+              </div>
+            </div>
+          )}
+          <Canvas camera={{ position: [0, 0, 3], fov: 45 }}>
+            <ambientLight intensity={0.5} />
+            <directionalLight position={[5, 5, 5]} intensity={1} castShadow />
+            <directionalLight position={[-5, -5, -5]} intensity={0.2} />
+
+            <group key={key}>
+              <OrigamiMesh pattern={displayPattern} foldPercent={foldPercent} />
+            </group>
 
-          {/* 2D View */}
-          <div className="mt-auto">
-            <label className="block text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">
-              2D Crease Pattern
-            </label>
-            <div className="bg-zinc-800 rounded-lg p-4 aspect-square flex items-center justify-center border border-zinc-700 relative">
+            <OrbitControls makeDefault />
+            <Grid
+              infiniteGrid
+              fadeDistance={10}
+              sectionColor="#333"
+              cellColor="#222"
+              position={[0, 0, -0.01]}
+            />
+          </Canvas>
+
+          {/* 2D crease pattern overlay */}
+          {activePattern && (
+            <div className="absolute bottom-4 left-4 w-40 h-40 bg-zinc-900/90 rounded-lg border border-zinc-700/50 p-2 backdrop-blur-sm">
+              <div className="text-[9px] uppercase text-zinc-500 tracking-wider mb-1">Crease Pattern</div>
               <svg viewBox="-1.2 -1.2 2.4 2.4" className="w-full h-full">
                 <g transform="scale(1, -1)">
-                  {/* Draw faces */}
-                  {pattern.faces.map((face, i) => {
-                    const v1 = pattern.vertices[face[0]];
-                    const v2 = pattern.vertices[face[1]];
-                    const v3 = pattern.vertices[face[2]];
+                  {activePattern.faces.map((face, i) => {
+                    const v1 = activePattern.vertices[face[0]];
+                    const v2 = activePattern.vertices[face[1]];
+                    const v3 = activePattern.vertices[face[2]];
                     return (
                       <polygon
-                        key={`face-${i}`}
+                        key={`f-${i}`}
                         points={`${v1[0]},${v1[1]} ${v2[0]},${v2[1]} ${v3[0]},${v3[1]}`}
                         fill="#3f3f46"
                         stroke="#52525b"
@@ -158,18 +156,15 @@ export default function Optigami() {
                       />
                     );
                   })}
-                  {/* Draw creases */}
-                  {pattern.creases.map((crease, i) => {
-                    const v1 = pattern.vertices[crease.edge[0]];
-                    const v2 = pattern.vertices[crease.edge[1]];
+                  {activePattern.creases.map((crease, i) => {
+                    const v1 = activePattern.vertices[crease.edge[0]];
+                    const v2 = activePattern.vertices[crease.edge[1]];
                     const color = crease.type === 'mountain' ? '#ef4444' : '#3b82f6';
                     return (
                       <line
-                        key={`crease-${i}`}
-                        x1={v1[0]}
-                        y1={v1[1]}
-                        x2={v2[0]}
-                        y2={v2[1]}
+                        key={`c-${i}`}
+                        x1={v1[0]} y1={v1[1]}
+                        x2={v2[0]} y2={v2[1]}
                         stroke={color}
                         strokeWidth="0.03"
                         strokeLinecap="round"
@@ -178,40 +173,10 @@ export default function Optigami() {
                   })}
                 </g>
               </svg>
-              <div className="absolute bottom-2 left-2 flex gap-3 text-[10px] uppercase font-mono text-zinc-500">
-                <div className="flex items-center gap-1">
-                  <div className="w-2 h-0.5 bg-red-500"></div> Mountain
-                </div>
-                <div className="flex items-center gap-1">
-                  <div className="w-2 h-0.5 bg-blue-500"></div> Valley
-                </div>
-              </div>
             </div>
-          </div>
+          )}
         </div>
       </div>
-
-      {/* 3D Canvas */}
-      <div className="flex-1 relative bg-zinc-950">
-        <Canvas camera={{ position: [0, 0, 3], fov: 45 }}>
-          <ambientLight intensity={0.5} />
-          <directionalLight position={[5, 5, 5]} intensity={1} castShadow />
-          <directionalLight position={[-5, -5, -5]} intensity={0.2} />
-          
-          <group key={key}>
-            <OrigamiMesh pattern={pattern} foldPercent={foldPercent} />
-          </group>
-
-          <OrbitControls makeDefault />
-          <Grid 
-            infiniteGrid 
-            fadeDistance={10} 
-            sectionColor="#333" 
-            cellColor="#222" 
-            position={[0, 0, -0.01]} 
-          />
-        </Canvas>
-      </div>
     </div>
   );
 }

components/TrainingDashboard.tsx

@@ -0,0 +1,298 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Activity, TrendingUp, AlertCircle, CheckCircle2, Circle } from 'lucide-react';
+
+export interface TrainingEntry {
+  step: number;
+  timestamp: number;
+  task_name: string;
+  reward: number;
+  shape_similarity: number;
+  is_valid: boolean;
+  error: string | null;
+  fold_data: any | null;
+  final_positions: number[][];
+  target_positions: number[][];
+}
+
+interface TrainingStats {
+  total_steps: number;
+  best_reward: number;
+  best_similarity: number;
+}
+
+interface FeedResponse {
+  entries: TrainingEntry[];
+  stats: TrainingStats;
+}
+
+interface TrainingDashboardProps {
+  onEntrySelect?: (entry: TrainingEntry) => void;
+}
+
+export function TrainingDashboard({ onEntrySelect }: TrainingDashboardProps) {
+  const [entries, setEntries] = useState<TrainingEntry[]>([]);
+  const [stats, setStats] = useState<TrainingStats>({ total_steps: 0, best_reward: -999, best_similarity: 0 });
+  const [connected, setConnected] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedStep, setSelectedStep] = useState<number | null>(null);
+  const lastStep = useRef(0);
+  const feedRef = useRef<HTMLDivElement>(null);
+
+  // Auto-select newest entry
+  const autoSelect = useRef(true);
+
+  useEffect(() => {
+    let active = true;
+
+    async function poll() {
+      while (active) {
+        try {
+          const res = await fetch(`/api/env/training/feed?since=${lastStep.current}`);
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          const data: FeedResponse = await res.json();
+
+          if (data.entries.length > 0) {
+            setEntries(prev => {
+              const combined = [...prev, ...data.entries];
+              return combined.slice(-50);
+            });
+            lastStep.current = data.entries[data.entries.length - 1].step;
+
+            // Auto-select latest
+            if (autoSelect.current) {
+              const latest = data.entries[data.entries.length - 1];
+              setSelectedStep(latest.step);
+              onEntrySelect?.(latest);
+            }
+          }
+          setStats(data.stats);
+          setConnected(true);
+          setError(null);
+        } catch (e: any) {
+          setConnected(false);
+          setError(e.message);
+        }
+        await new Promise(r => setTimeout(r, 2000));
+      }
+    }
+
+    poll();
+    return () => { active = false; };
+  }, [onEntrySelect]);
+
+  // Auto-scroll feed
+  useEffect(() => {
+    if (feedRef.current && autoSelect.current) {
+      feedRef.current.scrollTop = feedRef.current.scrollHeight;
+    }
+  }, [entries]);
+
+  const handleEntryClick = useCallback((entry: TrainingEntry) => {
+    autoSelect.current = false;
+    setSelectedStep(entry.step);
+    onEntrySelect?.(entry);
+  }, [onEntrySelect]);
+
+  const rewardColor = (r: number) => {
+    if (r >= 15) return 'text-green-400';
+    if (r >= 5) return 'text-yellow-400';
+    if (r >= 0) return 'text-orange-400';
+    return 'text-red-400';
+  };
+
+  const rewardBg = (r: number) => {
+    if (r >= 15) return 'bg-green-500';
+    if (r >= 5) return 'bg-yellow-500';
+    if (r >= 0) return 'bg-orange-500';
+    return 'bg-red-500';
+  };
+
+  const simBar = (sim: number) => {
+    const pct = Math.min(sim * 100, 100);
+    const color = pct > 70 ? 'bg-green-500' : pct > 40 ? 'bg-yellow-500' : 'bg-red-500';
+    return (
+      <div className="w-full h-1.5 bg-zinc-700 rounded-full overflow-hidden">
+        <div className={`h-full ${color} rounded-full transition-all`} style={{ width: `${pct}%` }} />
+      </div>
+    );
+  };
+
+  // Reward chart data
+  const recentRewards = entries.slice(-30);
+  const maxR = Math.max(...recentRewards.map(e => e.reward), 1);
+  const minR = Math.min(...recentRewards.map(e => e.reward), 0);
+  const range = maxR - minR || 1;
+
+  // Task breakdown
+  const taskCounts: Record<string, { count: number; avgReward: number; totalReward: number }> = {};
+  for (const e of entries) {
+    if (!taskCounts[e.task_name]) taskCounts[e.task_name] = { count: 0, avgReward: 0, totalReward: 0 };
+    taskCounts[e.task_name].count++;
+    taskCounts[e.task_name].totalReward += e.reward;
+    taskCounts[e.task_name].avgReward = taskCounts[e.task_name].totalReward / taskCounts[e.task_name].count;
+  }
+
+  return (
+    <div className="flex flex-col gap-3 h-full">
+      {/* Connection status */}
+      <div className="flex items-center gap-2 text-xs">
+        <div className={`w-2 h-2 rounded-full ${connected ? 'bg-green-500 animate-pulse' : 'bg-zinc-600'}`} />
+        <span className="text-zinc-400">
+          {connected ? 'Live' : 'Connecting...'}
+        </span>
+        {error && <span className="text-red-400/80 ml-auto truncate max-w-[140px]">{error}</span>}
+      </div>
+
+      {/* Stats row */}
+      <div className="grid grid-cols-3 gap-2">
+        <div className="bg-zinc-800/80 rounded-lg p-2.5 border border-zinc-700/60">
+          <div className="text-[10px] uppercase text-zinc-500 tracking-wider">Steps</div>
+          <div className="text-xl font-mono font-bold text-zinc-100">{stats.total_steps}</div>
+        </div>
+        <div className="bg-zinc-800/80 rounded-lg p-2.5 border border-zinc-700/60">
+          <div className="text-[10px] uppercase text-zinc-500 tracking-wider">Best Reward</div>
+          <div className={`text-xl font-mono font-bold ${rewardColor(stats.best_reward)}`}>
+            {stats.best_reward > -999 ? stats.best_reward.toFixed(1) : '--'}
+          </div>
+        </div>
+        <div className="bg-zinc-800/80 rounded-lg p-2.5 border border-zinc-700/60">
+          <div className="text-[10px] uppercase text-zinc-500 tracking-wider">Best Sim</div>
+          <div className="text-xl font-mono font-bold text-indigo-400">
+            {stats.best_similarity > 0 ? (stats.best_similarity * 100).toFixed(0) + '%' : '--'}
+          </div>
+        </div>
+      </div>
+
+      {/* Reward trend chart */}
+      {recentRewards.length > 1 && (
+        <div className="bg-zinc-800/80 rounded-lg p-3 border border-zinc-700/60">
+          <div className="text-[10px] uppercase text-zinc-500 tracking-wider mb-2 flex items-center gap-1">
+            <TrendingUp size={10} /> Reward History
+          </div>
+          <div className="flex items-end gap-[2px] h-20">
+            {recentRewards.map((e, i) => {
+              const h = ((e.reward - minR) / range) * 100;
+              const isSelected = e.step === selectedStep;
+              return (
+                <div
+                  key={e.step}
+                  className={`flex-1 rounded-t cursor-pointer transition-all ${isSelected ? 'ring-1 ring-white' : ''}`}
+                  style={{
+                    height: `${Math.max(h, 3)}%`,
+                    backgroundColor: e.reward >= 15 ? '#22c55e' : e.reward >= 5 ? '#eab308' : e.reward >= 0 ? '#f97316' : '#ef4444',
+                    opacity: isSelected ? 1 : 0.4 + (i / recentRewards.length) * 0.5,
+                  }}
+                  title={`#${e.step} ${e.task_name}: ${e.reward.toFixed(2)}`}
+                  onClick={() => handleEntryClick(e)}
+                />
+              );
+            })}
+          </div>
+          <div className="flex justify-between text-[9px] text-zinc-600 mt-1 font-mono">
+            <span>{minR.toFixed(1)}</span>
+            <span>{maxR.toFixed(1)}</span>
+          </div>
+        </div>
+      )}
+
+      {/* Task breakdown */}
+      {Object.keys(taskCounts).length > 1 && (
+        <div className="bg-zinc-800/80 rounded-lg p-3 border border-zinc-700/60">
+          <div className="text-[10px] uppercase text-zinc-500 tracking-wider mb-2">Tasks</div>
+          <div className="space-y-1">
+            {Object.entries(taskCounts).map(([name, data]) => (
+              <div key={name} className="flex items-center gap-2 text-[11px]">
+                <span className="text-zinc-400 w-24 truncate">{name}</span>
+                <div className="flex-1 h-1 bg-zinc-700 rounded-full overflow-hidden">
+                  <div
+                    className={`h-full rounded-full ${rewardBg(data.avgReward)}`}
+                    style={{ width: `${Math.max((data.avgReward + 5) / 25 * 100, 2)}%`, opacity: 0.7 }}
+                  />
+                </div>
+                <span className={`font-mono w-10 text-right ${rewardColor(data.avgReward)}`}>
+                  {data.avgReward.toFixed(1)}
+                </span>
+                <span className="text-zinc-600 font-mono w-6 text-right">{data.count}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Activity feed */}
+      <div className="flex-1 min-h-0 flex flex-col">
+        <div className="text-[10px] uppercase text-zinc-500 tracking-wider mb-2 flex items-center justify-between">
+          <span className="flex items-center gap-1"><Activity size={10} /> Activity</span>
+          {!autoSelect.current && entries.length > 0 && (
+            <button
+              className="text-indigo-400 hover:text-indigo-300 normal-case tracking-normal"
+              onClick={() => {
+                autoSelect.current = true;
+                const latest = entries[entries.length - 1];
+                setSelectedStep(latest.step);
+                onEntrySelect?.(latest);
+              }}
+            >
+              Follow latest
+            </button>
+          )}
+        </div>
+        <div ref={feedRef} className="overflow-y-auto flex-1 space-y-1 pr-1">
+          {entries.length === 0 ? (
+            <div className="text-xs text-zinc-600 text-center py-12">
+              <div className="text-zinc-500 mb-1">No training activity yet</div>
+              <div>Start a training run in the Colab notebook</div>
+            </div>
+          ) : (
+            entries.map(e => (
+              <div
+                key={e.step}
+                onClick={() => handleEntryClick(e)}
+                className={`rounded-lg px-2.5 py-1.5 text-xs cursor-pointer transition-all border ${
+                  e.step === selectedStep
+                    ? 'bg-zinc-700/80 border-indigo-500/50'
+                    : 'bg-zinc-800/40 border-zinc-700/30 hover:bg-zinc-800/70'
+                }`}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-1.5">
+                    <span className="font-mono text-zinc-500 text-[10px]">#{e.step}</span>
+                    <span className="text-zinc-300 text-[10px] truncate max-w-[80px]">{e.task_name}</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    {e.error ? (
+                      <Circle size={6} className="fill-red-400 text-red-400" />
+                    ) : e.is_valid ? (
+                      <Circle size={6} className="fill-green-400 text-green-400" />
+                    ) : (
+                      <Circle size={6} className="fill-yellow-400 text-yellow-400" />
+                    )}
+                    <span className={`font-mono font-semibold ${rewardColor(e.reward)}`}>
+                      {e.reward.toFixed(1)}
+                    </span>
+                  </div>
+                </div>
+                {e.step === selectedStep && (
+                  <div className="mt-1.5 space-y-1">
+                    <div className="flex items-center gap-2">
+                      <span className="text-zinc-500 text-[10px] w-8">sim</span>
+                      {simBar(e.shape_similarity)}
+                      <span className="text-zinc-400 font-mono text-[10px] w-8 text-right">
+                        {(e.shape_similarity * 100).toFixed(0)}%
+                      </span>
+                    </div>
+                    {e.error && (
+                      <div className="text-red-400/70 text-[10px] truncate">{e.error}</div>
+                    )}
+                  </div>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

next.config.ts

@@ -29,6 +29,7 @@ const nextConfig: NextConfig = {
     ];
   },
   transpilePackages: ['motion'],
+  turbopack: {},
   webpack: (config, {dev}) => {
     // HMR is disabled in AI Studio via DISABLE_HMR env var.
     // Do not modify—file watching is disabled to prevent flickering during agent edits.

origami_server/app.py

@@ -1,9 +1,12 @@
 """FastAPI entry point — OpenEnv create_app() + custom endpoints."""
 
 import os
+import time
+from collections import deque
 from pathlib import Path
 
 from fastapi import HTTPException
+from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import HTMLResponse
 
 from openenv.core.env_server.http_server import create_app
@@ -19,6 +22,59 @@ app = create_app(
     env_name="origami_env",
 )
 
+# Allow CORS for frontend polling
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# ── Training Activity Feed ───────────────────────────────────────────────────
+# Ring buffer of recent training steps — the frontend polls this to visualize
+# what's happening during GRPO training.
+
+ACTIVITY_FEED: deque = deque(maxlen=50)  # Last 50 steps
+TRAINING_STATS: dict = {"total_steps": 0, "best_reward": -999, "best_similarity": 0}
+
+
+@app.get("/training/feed")
+def get_training_feed(since: int = 0):
+    """Get recent training activity. Pass `since=<step>` to get only new entries."""
+    entries = [e for e in ACTIVITY_FEED if e["step"] > since]
+    return {"entries": entries, "stats": TRAINING_STATS}
+
+
+@app.post("/training/log")
+def log_training_step(data: dict):
+    """Log a training step from the notebook. Called after each env.step()."""
+    step = TRAINING_STATS["total_steps"] + 1
+    TRAINING_STATS["total_steps"] = step
+
+    entry = {
+        "step": step,
+        "timestamp": time.time(),
+        "task_name": data.get("task_name", ""),
+        "reward": data.get("reward", 0),
+        "shape_similarity": data.get("shape_similarity", 0),
+        "is_valid": data.get("is_valid", False),
+        "error": data.get("error", None),
+        "fold_data": data.get("fold_data", None),
+        "final_positions": data.get("final_positions", []),
+        "target_positions": data.get("target_positions", []),
+    }
+
+    ACTIVITY_FEED.append(entry)
+
+    reward = entry["reward"]
+    sim = entry["shape_similarity"]
+    if reward > TRAINING_STATS["best_reward"]:
+        TRAINING_STATS["best_reward"] = reward
+    if sim > TRAINING_STATS["best_similarity"]:
+        TRAINING_STATS["best_similarity"] = sim
+
+    return {"step": step}
+
 
 @app.get("/tasks")
 def get_tasks():

training/train_grpo.ipynb

@@ -181,108 +181,7 @@
    "execution_count": null,
    "metadata": {},
    "outputs": [],
-   "source": [
-    "PRINTER = 0\n",
-    "\n",
-    "def extract_fold_json(response):\n",
-    "    \"\"\"Extract FOLD JSON from LLM response text.\"\"\"\n",
-    "    m = re.search(r\"```(?:json)?\\s*(\\{.*?\\})\\s*```\", response, re.DOTALL)\n",
-    "    if m:\n",
-    "        try: return json.loads(m.group(1))\n",
-    "        except: pass\n",
-    "    m = re.search(r'\\{[^{}]*\"vertices_coords\"[^{}]*\\}', response, re.DOTALL)\n",
-    "    if m:\n",
-    "        try: return json.loads(m.group(0))\n",
-    "        except: pass\n",
-    "    try:\n",
-    "        d = json.loads(response.strip())\n",
-    "        if isinstance(d, dict) and \"vertices_coords\" in d: return d\n",
-    "    except: pass\n",
-    "    return None\n",
-    "\n",
-    "\n",
-    "def valid_fold_reward(completions, **kwargs):\n",
-    "    \"\"\"Reward 1 (local): +1.0 valid FOLD structure, -0.5 bad structure, -2.0 unparseable.\"\"\"\n",
-    "    REQUIRED = {\"vertices_coords\", \"edges_vertices\", \"edges_assignment\"}\n",
-    "    scores = []\n",
-    "    for c in completions:\n",
-    "        fold = extract_fold_json(c[0][\"content\"])\n",
-    "        if fold is None:\n",
-    "            scores.append(-2.0)\n",
-    "            continue\n",
-    "        # Basic structural checks\n",
-    "        if not REQUIRED.issubset(fold.keys()):\n",
-    "            scores.append(-0.5); continue\n",
-    "        verts = fold[\"vertices_coords\"]\n",
-    "        edges = fold[\"edges_vertices\"]\n",
-    "        asgn = fold[\"edges_assignment\"]\n",
-    "        if len(verts) < 3 or len(edges) < 3 or len(edges) != len(asgn):\n",
-    "            scores.append(-0.5); continue\n",
-    "        if not any(a in (\"M\",\"V\") for a in asgn):\n",
-    "            scores.append(-0.5); continue\n",
-    "        if not any(a == \"B\" for a in asgn):\n",
-    "            scores.append(-0.5); continue\n",
-    "        scores.append(1.0)\n",
-    "    return scores\n",
-    "\n",
-    "\n",
-    "def openenv_reward(completions, task_name, **kwargs):\n",
-    "    \"\"\"Reward 2 (OpenEnv API): Submit fold to environment, get simulation reward.\n",
-    "\n",
-    "    Calls POST /reset and POST /step on the HF Space OpenEnv environment.\n",
-    "    The environment runs the fold simulation and computes shape similarity.\n",
-    "    \"\"\"\n",
-    "    global PRINTER\n",
-    "    # task_name comes as a list from the dataset\n",
-    "    tn = task_name[0] if isinstance(task_name, list) else task_name\n",
-    "\n",
-    "    scores = []\n",
-    "    for c in completions:\n",
-    "        resp = c[0][\"content\"]\n",
-    "\n",
-    "        # Periodic logging\n",
-    "        if PRINTER % 10 == 0:\n",
-    "            print(f\"\\n--- [{tn}] Sample {PRINTER} ---\\n{resp[:300]}\")\n",
-    "        PRINTER += 1\n",
-    "\n",
-    "        # Parse the FOLD JSON from the LLM response\n",
-    "        fold = extract_fold_json(resp)\n",
-    "        if fold is None:\n",
-    "            scores.append(-2.0)\n",
-    "            continue\n",
-    "\n",
-    "        try:\n",
-    "            # Reset environment for this task\n",
-    "            env.reset(task_name=tn)\n",
-    "\n",
-    "            # Submit the fold to OpenEnv — environment simulates and scores it\n",
-    "            result = env.step(fold)\n",
-    "\n",
-    "            # Get reward from the environment\n",
-    "            reward = result.get(\"reward\", None)\n",
-    "            if reward is not None:\n",
-    "                scores.append(float(reward))\n",
-    "            else:\n",
-    "                # Fallback: extract from observation\n",
-    "                obs = result.get(\"observation\", {})\n",
-    "                if obs.get(\"error\"):\n",
-    "                    scores.append(-2.0)\n",
-    "                else:\n",
-    "                    sim = obs.get(\"shape_similarity\", 0.0)\n",
-    "                    scores.append(float(sim) * 20.0)\n",
-    "\n",
-    "        except requests.exceptions.RequestException as e:\n",
-    "            print(f\"OpenEnv API error: {e}\")\n",
-    "            scores.append(-1.0)\n",
-    "        except Exception as e:\n",
-    "            print(f\"Reward error: {e}\")\n",
-    "            scores.append(-1.0)\n",
-    "\n",
-    "    return scores\n",
-    "\n",
-    "\n",
-    "print(\"Reward functions ready (valid_fold=local, openenv_reward=API).\")"
-   ]
+   "source": "PRINTER = 0\n\ndef extract_fold_json(response):\n    \"\"\"Extract FOLD JSON from LLM response text.\"\"\"\n    m = re.search(r\"```(?:json)?\\s*(\\{.*?\\})\\s*```\", response, re.DOTALL)\n    if m:\n        try: return json.loads(m.group(1))\n        except: pass\n    m = re.search(r'\\{[^{}]*\"vertices_coords\"[^{}]*\\}', response, re.DOTALL)\n    if m:\n        try: return json.loads(m.group(0))\n        except: pass\n    try:\n        d = json.loads(response.strip())\n        if isinstance(d, dict) and \"vertices_coords\" in d: return d\n    except: pass\n    return None\n\n\ndef log_to_dashboard(task_name, reward, shape_similarity, is_valid, error=None, fold_data=None, final_positions=None, target_positions=None):\n    \"\"\"Send training step data to the frontend dashboard via /training/log.\"\"\"\n    try:\n        requests.post(\n            f\"{OPENENV_URL.replace('/api/env', '')}/training/log\",\n            json={\n                \"task_name\": task_name,\n                \"reward\": reward,\n                \"shape_similarity\": shape_similarity,\n                \"is_valid\": is_valid,\n                \"error\": error,\n                \"fold_data\": fold_data,\n                \"final_positions\": final_positions or [],\n                \"target_positions\": target_positions or [],\n            },\n            timeout=5,\n        )\n    except:\n        pass  # Don't let dashboard logging break training\n\n\ndef valid_fold_reward(completions, **kwargs):\n    \"\"\"Reward 1 (local): +1.0 valid FOLD structure, -0.5 bad structure, -2.0 unparseable.\"\"\"\n    REQUIRED = {\"vertices_coords\", \"edges_vertices\", \"edges_assignment\"}\n    scores = []\n    for c in completions:\n        fold = extract_fold_json(c[0][\"content\"])\n        if fold is None:\n            scores.append(-2.0)\n            continue\n        # Basic structural checks\n        if not REQUIRED.issubset(fold.keys()):\n            scores.append(-0.5); continue\n        verts = fold[\"vertices_coords\"]\n        edges = fold[\"edges_vertices\"]\n        asgn = fold[\"edges_assignment\"]\n        if len(verts) < 3 or len(edges) < 3 or len(edges) != len(asgn):\n            scores.append(-0.5); continue\n        if not any(a in (\"M\",\"V\") for a in asgn):\n            scores.append(-0.5); continue\n        if not any(a == \"B\" for a in asgn):\n            scores.append(-0.5); continue\n        scores.append(1.0)\n    return scores\n\n\ndef openenv_reward(completions, task_name, **kwargs):\n    \"\"\"Reward 2 (OpenEnv API): Submit fold to environment, get simulation reward.\n\n    Calls POST /reset and POST /step on the HF Space OpenEnv environment.\n    The environment runs the fold simulation and computes shape similarity.\n    Also logs each step to the frontend training dashboard.\n    \"\"\"\n    global PRINTER\n    # task_name comes as a list from the dataset\n    tn = task_name[0] if isinstance(task_name, list) else task_name\n\n    scores = []\n    for c in completions:\n        resp = c[0][\"content\"]\n\n        # Periodic logging\n        if PRINTER % 10 == 0:\n            print(f\"\\n--- [{tn}] Sample {PRINTER} ---\\n{resp[:300]}\")\n        PRINTER += 1\n\n        # Parse the FOLD JSON from the LLM response\n        fold = extract_fold_json(resp)\n        if fold is None:\n            scores.append(-2.0)\n            log_to_dashboard(tn, -2.0, 0.0, False, error=\"No JSON parsed\")\n            continue\n\n        try:\n            # Reset environment for this task\n            env.reset(task_name=tn)\n\n            # Submit the fold to OpenEnv — environment simulates and scores it\n            result = env.step(fold)\n\n            # Get reward from the environment\n            reward = result.get(\"reward\", None)\n            obs = result.get(\"observation\", {})\n            sim = obs.get(\"shape_similarity\", 0.0)\n            is_valid = not bool(obs.get(\"error\"))\n\n            if reward is not None:\n                scores.append(float(reward))\n            else:\n                if obs.get(\"error\"):\n                    scores.append(-2.0)\n                else:\n                    reward = float(sim) * 20.0\n                    scores.append(reward)\n\n            # Log to frontend dashboard\n            log_to_dashboard(\n                task_name=tn,\n                reward=float(reward) if reward is not None else scores[-1],\n                shape_similarity=float(sim),\n                is_valid=is_valid,\n                error=obs.get(\"error\"),\n                fold_data=fold,\n                final_positions=obs.get(\"final_positions\", []),\n                target_positions=obs.get(\"target_positions\", []),\n            )\n\n        except requests.exceptions.RequestException as e:\n            print(f\"OpenEnv API error: {e}\")\n            scores.append(-1.0)\n            log_to_dashboard(tn, -1.0, 0.0, False, error=str(e))\n        except Exception as e:\n            print(f\"Reward error: {e}\")\n            scores.append(-1.0)\n            log_to_dashboard(tn, -1.0, 0.0, False, error=str(e))\n\n    return scores\n\n\nprint(\"Reward functions ready (valid_fold=local, openenv_reward=API + dashboard logging).\")"
   },
   {
    "cell_type": "markdown",
@@ -533,9 +432,18 @@
  ],
  "metadata": {
   "accelerator": "GPU",
-  "colab": { "gpuType": "T4", "provenance": [] },
-  "kernelspec": { "display_name": "Python 3", "name": "python3" },
-  "language_info": { "name": "python", "version": "3.11.0" }
+  "colab": {
+   "gpuType": "T4",
+   "provenance": []
+  },
+  "kernelspec": {
+   "display_name": "Python 3",
+   "name": "python3"
+  },
+  "language_info": {
+   "name": "python",
+   "version": "3.11.0"
+  }
  },
  "nbformat": 4,
  "nbformat_minor": 0