feat(frontend): replay mode, camera angle fix, endpoint alignment

- App.js: add REPLAY_EP_ID from ?ep= URL param, fetchReplayEpisode(),
replay-mode header with REPLAY badge and ← GRID button
- App.css: .replay-badge and .back-to-grid-btn styles
- Fold3DCanvas: fix camera pitch/yaw (0.62/-0.52) so flat paper
renders as square not diamond; render from server paper_state FOLD data

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

src/App.css

@@ -67,6 +67,30 @@
   margin-left: auto;
 }
 
+.replay-badge {
+  font-size: 10px;
+  font-family: var(--font-display);
+  letter-spacing: 0.1em;
+  color: #38bdf8;
+  background: rgba(56, 189, 248, 0.1);
+  border: 1px solid rgba(56, 189, 248, 0.3);
+  padding: 3px 8px;
+  border-radius: 3px;
+}
+
+.back-to-grid-btn {
+  font-size: 10px;
+  font-family: var(--font-display);
+  letter-spacing: 0.08em;
+  color: #64748b;
+  background: transparent;
+  border: 1px solid #1e2a3a;
+  padding: 3px 10px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+.back-to-grid-btn:hover { color: #e2e8f0; border-color: #64748b; }
+
 .api-status {
   font-size: 11px;
   font-family: var(--font-display);

src/App.js

@@ -10,16 +10,22 @@ import Fold3DCanvas from './components/Fold3DCanvas';
 
 const API_BASE = '';
 
+// Read ?ep=<episode_id> from URL — set when navigating from training grid
+const _urlParams = new URLSearchParams(window.location.search);
+const REPLAY_EP_ID = _urlParams.get('ep') || null;
+
 function App() {
   const [targets, setTargets] = useState({});
   const [selectedTarget, setSelectedTarget] = useState('half_fold');
   const [episode, setEpisode] = useState(null);
   const [currentStep, setCurrentStep] = useState(0);
   const [playing, setPlaying] = useState(false);
-  const [apiStatus, setApiStatus] = useState('connecting'); // 'connecting' | 'ok' | 'err'
+  const [apiStatus, setApiStatus] = useState('connecting');
   const [episodeLoading, setEpisodeLoading] = useState(false);
   const intervalRef = useRef(null);
 
+  const isReplayMode = REPLAY_EP_ID !== null;
+
   const fetchTargets = useCallback(async () => {
     try {
       const res = await fetch(`${API_BASE}/targets`);
@@ -50,13 +56,35 @@ function App() {
     }
   }, []);
 
+  const fetchReplayEpisode = useCallback(async (epId) => {
+    setEpisodeLoading(true);
+    setPlaying(false);
+    setCurrentStep(0);
+    try {
+      const res = await fetch(`${API_BASE}/episode/replay/${epId}`);
+      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]);
+    if (isReplayMode) {
+      fetchReplayEpisode(REPLAY_EP_ID);
+    } else {
+      fetchDemoEpisode(selectedTarget);
+    }
+  }, [isReplayMode, selectedTarget, fetchDemoEpisode, fetchReplayEpisode]);
 
   const totalSteps = episode ? episode.steps.length : 0;
 
@@ -106,11 +134,20 @@ function App() {
           OPTI<span className="title-accent">GAMI</span> RL
         </span>
         <div className="header-sep" />
-        <TargetSelector
-          targets={targets}
-          selected={selectedTarget}
-          onChange={name => setSelectedTarget(name)}
-        />
+        {isReplayMode ? (
+          <>
+            <span className="replay-badge">REPLAY — {REPLAY_EP_ID}</span>
+            <button className="back-to-grid-btn" onClick={() => window.history.back()}>
+              ← GRID
+            </button>
+          </>
+        ) : (
+          <TargetSelector
+            targets={targets}
+            selected={selectedTarget}
+            onChange={name => setSelectedTarget(name)}
+          />
+        )}
         <div className="header-sep" />
         <PlayerControls
           playing={playing}

src/components/Fold3DCanvas.js

@@ -54,8 +54,8 @@ function projectVertex(vertex, dim) {
   let y = vertex[1] - 0.5;
   let z = vertex[2] || 0;
 
-  const pitch = 1.04;
-  const yaw = -0.78;
+  const pitch = 0.62;
+  const yaw = -0.52;
 
   const cp = Math.cos(pitch);
   const sp = Math.sin(pitch);