refactor(app): update App and StepFeed for new fold/metrics schema

App: default target half_horizontal→half_fold, remove foldRenderMode toggle
and state, remove targetFold/episode.target (no FOLD ghost overlay), update
props to RewardPanel (reward→metrics) and InfoBadges (info→metrics+paperState).

StepFeed: track compactness delta instead of reward.total, derive fold badge
from fold.type (valley/mountain/pleat), display fold type+angle as label,
show strain+validity inline instead of progress/economy.

src/App.js

@@ -12,11 +12,10 @@ const API_BASE = '';
 
 function App() {
   const [targets, setTargets] = useState({});
-  const [selectedTarget, setSelectedTarget] = useState('half_horizontal');
+  const [selectedTarget, setSelectedTarget] = useState('half_fold');
   const [episode, setEpisode] = useState(null);
   const [currentStep, setCurrentStep] = useState(0);
   const [playing, setPlaying] = useState(false);
-  const [foldRenderMode, setFoldRenderMode] = useState('progressive'); // 'progressive' | 'final'
   const [apiStatus, setApiStatus] = useState('connecting'); // 'connecting' | 'ok' | 'err'
   const [episodeLoading, setEpisodeLoading] = useState(false);
   const intervalRef = useRef(null);
@@ -99,7 +98,6 @@ function App() {
   };
 
   const targetDef = targets[selectedTarget] || null;
-  const targetFold = episode ? episode.target : null;
 
   return (
     <div className="app">
@@ -138,12 +136,12 @@ function App() {
           <div className="canvas-row">
             <div className="canvas-wrap">
               <span className="canvas-label">
-                TARGET — {targetDef ? targetDef.name.replace(/_/g, ' ').toUpperCase() : '—'}
+                TASK — {targetDef ? targetDef.name.replace(/_/g, ' ').toUpperCase() : '—'}
               </span>
               <CreaseCanvas
                 paperState={null}
-                target={targetFold}
-                label="TARGET"
+                target={null}
+                label="TASK"
                 dim={280}
                 ghostOnly={true}
               />
@@ -154,7 +152,7 @@ function App() {
               </span>
               <CreaseCanvas
                 paperState={activeStepData ? activeStepData.paper_state : null}
-                target={targetFold}
+                target={null}
                 label={currentStep === 0 ? 'INITIAL' : `STEP ${currentStep}`}
                 dim={280}
                 ghostOnly={false}
@@ -163,28 +161,10 @@ function App() {
             <div className="canvas-wrap">
               <div className="canvas-label-row">
                 <span className="canvas-label">3D FOLD PREVIEW</span>
-                <div className="fold-mode-toggle">
-                  <button
-                    className={`fold-mode-btn${foldRenderMode === 'progressive' ? ' active' : ''}`}
-                    onClick={() => setFoldRenderMode('progressive')}
-                    type="button"
-                  >
-                    PER CREASE
-                  </button>
-                  <button
-                    className={`fold-mode-btn${foldRenderMode === 'final' ? ' active' : ''}`}
-                    onClick={() => setFoldRenderMode('final')}
-                    type="button"
-                  >
-                    FOLD AT END
-                  </button>
-                </div>
               </div>
               <Fold3DCanvas
                 steps={episode ? episode.steps : []}
                 currentStep={currentStep}
-                totalSteps={totalSteps}
-                mode={foldRenderMode}
                 dim={280}
               />
             </div>
@@ -207,10 +187,14 @@ function App() {
         </div>
 
         <div className="app-right">
-          <div className="section-header">REWARD DECOMPOSITION</div>
-          <RewardPanel reward={activeStepData ? activeStepData.reward : null} />
+          <div className="section-header">METRICS</div>
+          <RewardPanel metrics={activeStepData ? activeStepData.metrics : null} />
           <div className="section-header">EPISODE INFO</div>
-          <InfoBadges info={activeStepData ? activeStepData.info : null} targetDef={targetDef} />
+          <InfoBadges
+            metrics={activeStepData ? activeStepData.metrics : null}
+            paperState={activeStepData ? activeStepData.paper_state : null}
+            targetDef={targetDef}
+          />
         </div>
       </div>
     </div>

src/components/StepFeed.js

@@ -1,14 +1,32 @@
 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;
+function compactnessDelta(step, prevStep) {
+  if (!step || !step.metrics) return null;
+  const curr = step.metrics.compactness;
+  if (curr == null) return null;
+  if (prevStep && prevStep.metrics && prevStep.metrics.compactness != null) {
+    return curr - prevStep.metrics.compactness;
   }
   return curr;
 }
 
+function foldAssignment(fold) {
+  if (!fold) return null;
+  const t = fold.type || '';
+  if (t === 'valley') return 'V';
+  if (t === 'mountain') return 'M';
+  if (t === 'pleat') return 'P';
+  if (t === 'crimp') return 'C';
+  return t.charAt(0).toUpperCase() || null;
+}
+
+function foldLabel(fold) {
+  if (!fold) return '';
+  const type = fold.type || 'fold';
+  const angle = fold.angle != null ? ` ${fold.angle}°` : '';
+  return `${type.toUpperCase()} FOLD${angle}`;
+}
+
 export default function StepFeed({ steps, currentStep }) {
   const feedRef = useRef(null);
   const activeRef = useRef(null);
@@ -34,9 +52,10 @@ export default function StepFeed({ steps, currentStep }) {
       {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 || '');
+        const delta = compactnessDelta(step, idx > 0 ? steps[idx - 1] : null);
+        const asgn = foldAssignment(step.fold);
+        const label = foldLabel(step.fold);
+        const m = step.metrics || {};
 
         return (
           <div
@@ -46,21 +65,23 @@ export default function StepFeed({ steps, currentStep }) {
           >
             <div className="step-entry-top">
               <span className="step-num">#{stepNum}</span>
-              <span className="step-instruction">{instruction}</span>
+              <span className="step-instruction">{label}</span>
               {asgn && (
                 <span className={`assign-badge ${asgn}`}>{asgn}</span>
               )}
             </div>
             {delta !== null && (
               <div className="step-reward-delta">
-                {'\u0394'} total:{' '}
+                {'\u0394'} compact:{' '}
                 <span className={delta >= 0 ? 'delta-positive' : 'delta-negative'}>
                   {delta >= 0 ? '+' : ''}{delta.toFixed(3)}
                 </span>
-                {step.reward && (
+                {m.max_strain != null && (
                   <span style={{ color: 'var(--text-dim)' }}>
-                    {' '}| progress: {step.reward.progress.toFixed(2)}
-                    {' '}| economy: {step.reward.economy.toFixed(2)}
+                    {' '}| strain: {m.max_strain.toFixed(4)}
+                    {m.is_valid != null && (
+                      <span> | {m.is_valid ? '✓' : '✗'}</span>
+                    )}
                   </span>
                 )}
               </div>