new-environment (#5)

- docs/handoff (e4d16d926a54cdfbad613d801124bef6cd53f17e)
- plans/ (39c6d2318faab2691566c378dca0bd9749304b79)
- feat: implement origami RL environment (Phase 1) (c44bdad79837ff4636d2e8902eea99065fd60681)
- feat: React observability dashboard + FastAPI server + matplotlib renderer (25db0fc5dc0c74bd090c28bd0153c91148342daa)
- feat: Python 3D origami mass-spring simulator (Ghassaei 2018) (dc79e2a71ff693ac301e0bb5553606450cfe3cae)
- Add 3D fold preview modes (3744ef301f1559b3b51ddf7aac6dc32ad689fdff)
- research (608285dd42d04ff717578322c88f527fed3fd317)
- Merge branch 'main' of https://huggingface.co/spaces/openenv-community/optigami (d2552c731aa2683cc7db6ffb6d82c2539b6d2398)
- chore: resolve merge conflicts — keep HF deployment fixes (f8d2bab36c7f83aaf21d2665fa5d5e6e24ada2bc)
- feat: update engine modules, remove research 2 docs (ca61c8d786e330b35c89a1b9bc3d5d518843cdfb)
- fix: rename server.py to server_legacy.py, add server/ package (0bcd0b11a6083cba1e78a82522594f478f937559)
- refactor(server): migrate demo routes to server/ task+env API (c46fef811c5bc6628ceebf2566b0863f32234c92)
- fix(canvas): adapt CreaseCanvas to engine FOLD-format paper_state (8da8915849405917b4292e55f2272200c485b612)
- feat(3d): render engine paper_state directly with strain heatmap (f6709d8692a6b631528abbaf7ecda38d5aac5123)
- refactor(metrics): replace reward decomposition with engine metrics (d091b7773f66c2a8211c165d1dbb49f852f3976f)
- refactor(app): update App and StepFeed for new fold/metrics schema (8cc1585c4c26acac14d77c79e30a662605867e38)
- Merge branch 'main' of https://huggingface.co/spaces/openenv-community/optigami (5eca717229bb839f3a4caa2f6ad8a23c93d28c4d)
- feat(server): add training broadcast server and Colab training FastAPI app (6cf63a9c454cabc3b4a3076aeed29015a21fd225)
- feat(training): add parallel episode runner and demo scripts (a884e864be73e6073366a57de1d585458a1f7688)
- feat(viewer): add training grid viewer HTML (c4160923af5fb634f948070712309b407444df6c)
- feat(frontend): replay mode, camera angle fix, endpoint alignment (9221fb1f5f545fdeead600d2df6260d049c1e291)


Co-authored-by: Iana Lin <ianalin123@users.noreply.huggingface.co>

engine/fold_engine.py

@@ -151,6 +151,8 @@ def apply_fold(
             elif face_sides[i] == "fixed" and face_sides[j] == "rotated":
                 new_paper.face_orders.append((j, i, 1))
 
+    new_paper.fold_count += 1
+
     return new_paper, None
 
 
@@ -205,3 +207,43 @@ def execute_fold_strategy(
         applied.append(fold)
 
     return current, applied, None
+
+
+def apply_pleat(
+    paper: Paper,
+    line1: dict,
+    line2: dict,
+    angle: float = 180.0,
+) -> tuple[Paper, str | None]:
+    """Pleat fold: valley at line1, mountain at line2 (two parallel folds).
+
+    Both line dicts have the form: {"start": [x, y], "end": [x, y]}
+    Returns (new_paper, error_or_None).
+    """
+    paper, err = apply_fold(paper, {"type": "valley", "line": line1, "angle": angle})
+    if err:
+        return paper, f"Pleat valley fold failed: {err}"
+    paper, err = apply_fold(paper, {"type": "mountain", "line": line2, "angle": angle})
+    if err:
+        return paper, f"Pleat mountain fold failed: {err}"
+    return paper, None
+
+
+def apply_crimp(
+    paper: Paper,
+    line1: dict,
+    line2: dict,
+    angle: float = 180.0,
+) -> tuple[Paper, str | None]:
+    """Crimp fold: mountain at line1, valley at line2 (reverse of pleat).
+
+    Both line dicts have the form: {"start": [x, y], "end": [x, y]}
+    Returns (new_paper, error_or_None).
+    """
+    paper, err = apply_fold(paper, {"type": "mountain", "line": line1, "angle": angle})
+    if err:
+        return paper, f"Crimp mountain fold failed: {err}"
+    paper, err = apply_fold(paper, {"type": "valley", "line": line2, "angle": angle})
+    if err:
+        return paper, f"Crimp valley fold failed: {err}"
+    return paper, None

engine/metrics.py

@@ -102,3 +102,130 @@ def compute_metrics(paper: Paper, original_paper: Paper | None = None) -> dict:
         "num_faces": len(paper.faces),
         "num_layers": paper.num_layers,
     }
+
+
+def compute_all_metrics(paper, task: dict, validation: dict) -> dict:
+    """Compute every metric and return a flat dict.
+
+    Called after physics + validation. Combines validity, compactness,
+    structural, efficiency, and deployability metrics.
+
+    Parameters
+    ----------
+    paper : Paper
+        Current paper state (after simulate()).
+    task : dict
+        Task definition with keys: width, height, target_ratio, target_box, must_deploy.
+    validation : dict
+        Output of validate_state(paper).
+    """
+    import numpy as np
+
+    bb = paper.bounding_box  # (3,) array
+    original_area = paper.original_area if paper.original_area > 0 else (paper.material.thickness_mm / 1000.0)
+    t = paper.material.thickness_mm / 1000.0
+    original_bbox_vol = original_area * t
+    folded_bbox_vol = float(bb[0] * bb[1] * bb[2]) if bb[2] > 0 else float(bb[0] * bb[1] * t)
+
+    # ── Folded area (XY footprint) ────────────────────────────────
+    if len(paper.vertices) >= 3:
+        try:
+            from scipy.spatial import ConvexHull
+            hull = ConvexHull(paper.vertices[:, :2])
+            folded_area = float(hull.volume)
+        except Exception:
+            ptp = np.ptp(paper.vertices[:, :2], axis=0)
+            folded_area = float(ptp[0] * ptp[1])
+    else:
+        folded_area = original_area
+
+    deployment_ratio = folded_area / original_area if original_area > 0 else 1.0
+    compactness = 1.0 - deployment_ratio
+    volume_compaction = folded_bbox_vol / original_bbox_vol if original_bbox_vol > 0 else 1.0
+    material_volume = original_area * t
+    packing_efficiency = material_volume / folded_bbox_vol if folded_bbox_vol > 0 else 0.0
+
+    # ── Target box check ─────────────────────────────────────────
+    target_box = task.get("target_box")
+    fits_target_box = False
+    if target_box and len(target_box) == 3:
+        fits_target_box = bool(
+            bb[0] <= target_box[0] + 1e-6 and
+            bb[1] <= target_box[1] + 1e-6 and
+            bb[2] <= target_box[2] + 1e-6
+        )
+
+    # ── Strain ───────────────────────────────────────────────────
+    strain = paper.strain_per_vertex
+    max_strain = float(np.max(strain)) if len(strain) > 0 else 0.0
+    mean_strain = float(np.mean(strain)) if len(strain) > 0 else 0.0
+
+    # ── Energy ───────────────────────────────────────────────────
+    energy = paper.energy
+
+    # ── Efficiency ───────────────────────────────────────────────
+    fold_count = paper.fold_count
+
+    # Crease complexity: entropy of M/V assignment distribution
+    mv_assignments = [a for a in paper.assignments if a in ("M", "V")]
+    if mv_assignments:
+        total = len(mv_assignments)
+        m_count = mv_assignments.count("M")
+        v_count = mv_assignments.count("V")
+        p_m = m_count / total if total > 0 else 0
+        p_v = v_count / total if total > 0 else 0
+        crease_complexity = 0.0
+        if p_m > 0:
+            crease_complexity -= p_m * np.log2(p_m)
+        if p_v > 0:
+            crease_complexity -= p_v * np.log2(p_v)
+    else:
+        crease_complexity = 0.0
+
+    folding_efficiency = compactness / max(fold_count, 1)
+
+    # ── Deployability ─────────────────────────────────────────────
+    must_deploy = task.get("must_deploy", False)
+    # Simple deployability heuristic: if valid and compactness > 0, assume deployable
+    is_deployable = bool(validation.get("is_valid", False) and compactness > 0.01) if must_deploy else None
+    # Deployment force estimate from total energy gradient (rough)
+    deployment_force_estimate = float(energy.get("fold", 0.0)) / max(paper.original_area, 1e-6)
+
+    return {
+        # Validity (from validation dict)
+        "is_valid": validation.get("is_valid", False),
+        "kawasaki_violations": validation.get("kawasaki_violations", 0),
+        "kawasaki_total_error": validation.get("kawasaki_total_error", 0.0),
+        "maekawa_violations": validation.get("maekawa_violations", 0),
+        "self_intersections": validation.get("self_intersections", 0),
+        "strain_exceeded": validation.get("strain_exceeded", False),
+
+        # Compactness
+        "deployment_ratio": float(deployment_ratio),
+        "compactness": float(compactness),
+        "volume_compaction": float(volume_compaction),
+        "packing_efficiency": float(packing_efficiency),
+        "fits_target_box": fits_target_box,
+        "bounding_box": bb.tolist(),
+
+        # Structural
+        "max_strain": max_strain,
+        "mean_strain": mean_strain,
+        "total_energy": float(energy.get("total", 0.0)),
+        "energy_bar": float(energy.get("bar", 0.0)),
+        "energy_facet": float(energy.get("facet", 0.0)),
+        "energy_fold": float(energy.get("fold", 0.0)),
+
+        # Efficiency
+        "fold_count": fold_count,
+        "folding_efficiency": float(folding_efficiency),
+        "crease_complexity": float(crease_complexity),
+
+        # Deployability
+        "is_deployable": is_deployable,
+        "deployment_force_estimate": float(deployment_force_estimate),
+
+        # Shape similarity placeholders
+        "chamfer_distance": None,
+        "hausdorff_distance": None,
+    }

engine/paper.py

@@ -89,6 +89,10 @@ class Paper:
     material: Material = field(default_factory=lambda: get_material("paper"))
     rest_lengths: np.ndarray = field(default_factory=lambda: np.empty(0))
     original_area: float = 0.0
+    rest_positions: np.ndarray = field(default_factory=lambda: np.empty((0, 3)))
+    strain_per_vertex: np.ndarray = field(default_factory=lambda: np.empty(0))
+    energy: dict = field(default_factory=lambda: {"total": 0.0, "bar": 0.0, "facet": 0.0, "fold": 0.0})
+    fold_count: int = 0
 
     # ── constructors ────────────────────────────────────────────────
 
@@ -125,7 +129,7 @@ class Paper:
             dtype=np.float64,
         )
 
-        return Paper(
+        paper = Paper(
             vertices=verts,
             edges=edges,
             faces=faces,
@@ -135,6 +139,8 @@ class Paper:
             rest_lengths=rest_lengths,
             original_area=width * height,
         )
+        paper.rest_positions = verts.copy()
+        return paper
 
     # ── dict / prompt serialization (matches mock_env.PaperState.to_dict) ──
 
@@ -165,6 +171,33 @@ class Paper:
             },
         }
 
+    def to_observation_dict(self) -> dict:
+        bb = self.bounding_box
+        return {
+            "vertices_coords": self.vertices.tolist(),
+            "edges_vertices": self.edges.tolist(),
+            "faces_vertices": self.faces,
+            "edges_assignment": list(self.assignments),
+            "edges_foldAngle": self.fold_angles.tolist(),
+            "num_vertices": len(self.vertices),
+            "num_edges": len(self.edges),
+            "num_faces": len(self.faces),
+            "bounding_box": bb.tolist(),
+            "num_layers": self.num_layers,
+            "material": {
+                "name": self.material.name,
+                "thickness_mm": self.material.thickness_mm,
+                "youngs_modulus_gpa": self.material.youngs_modulus_gpa,
+                "max_strain": self.material.max_strain,
+                "poisson_ratio": self.material.poissons_ratio,
+            },
+            "strain_per_vertex": self.strain_per_vertex.tolist(),
+            "energy": dict(self.energy),
+            "fold_count": self.fold_count,
+            "width": float(self.original_area ** 0.5) if self.original_area > 0 else 1.0,
+            "height": float(self.original_area ** 0.5) if self.original_area > 0 else 1.0,
+        }
+
     # ── FOLD format serialization ───────────────────────────────────
 
     def to_fold_json(self) -> str:
@@ -485,4 +518,8 @@ class Paper:
             ),
             rest_lengths=self.rest_lengths.copy(),
             original_area=self.original_area,
+            rest_positions=self.rest_positions.copy(),
+            strain_per_vertex=self.strain_per_vertex.copy(),
+            energy=dict(self.energy),
+            fold_count=self.fold_count,
         )

engine/physics.py

@@ -255,3 +255,263 @@ def _face_normal(verts: np.ndarray, face: list[int]) -> np.ndarray | None:
     if norm < 1e-15:
         return None
     return normal / norm
+
+
+# ────────────────────────────────────────────────────────────────────
+# Topology precomputation
+# ────────────────────────────────────────────────────────────────────
+
+def build_beam_list(paper: Paper) -> list[tuple[int, int, float, float]]:
+    """Build list of (node_a, node_b, rest_len, k_axial) for every edge.
+
+    Uses normalized stiffness values (arch doc constants) scaled by material
+    Young's modulus ratio — keeps the Verlet integrator stable at unit scale.
+    """
+    # Normalized stiffness constants (arch doc values)
+    K_AXIAL_BASE = 70.0
+    # Scale by material: paper (3 GPa) = 1.0 baseline
+    mat = paper.material
+    E_ratio = mat.youngs_modulus_gpa / 3.0
+    k_axial = K_AXIAL_BASE * E_ratio
+
+    beams = []
+    for ei, (v1, v2) in enumerate(paper.edges):
+        L0 = paper.rest_lengths[ei]
+        beams.append((int(v1), int(v2), float(L0), float(k_axial)))
+    return beams
+
+
+def build_crease_list(paper: Paper) -> list[tuple[int, int, int, int, float, float, str]]:
+    """Build list of (n1, n2, n3, n4, target_angle_rad, k, type) for each crease hinge.
+
+    Each hinge is defined by 4 nodes: n1-n2 is the hinge edge, n3 and n4 are
+    the wing-tip nodes of the two adjacent faces.
+    type is 'fold' (M/V crease) or 'facet' (interior flat edge).
+    """
+    verts = paper.vertices
+
+    # Build edge → face adjacency
+    edge_faces: dict[int, list[int]] = {}
+    for fi, face in enumerate(paper.faces):
+        n = len(face)
+        for k in range(n):
+            va, vb = face[k], face[(k + 1) % n]
+            for ei, e in enumerate(paper.edges):
+                if (e[0] == va and e[1] == vb) or (e[0] == vb and e[1] == va):
+                    edge_faces.setdefault(ei, []).append(fi)
+                    break
+
+    creases = []
+    for ei, adj in edge_faces.items():
+        if len(adj) < 2:
+            continue
+        f1, f2 = adj[0], adj[1]
+        face1, face2 = paper.faces[f1], paper.faces[f2]
+        n1, n2 = int(paper.edges[ei][0]), int(paper.edges[ei][1])
+
+        # Find wing-tip nodes (in each face, the vertex NOT on the shared edge)
+        wing1 = [v for v in face1 if v != n1 and v != n2]
+        wing2 = [v for v in face2 if v != n1 and v != n2]
+        if not wing1 or not wing2:
+            continue
+        n3, n4 = int(wing1[0]), int(wing2[0])
+
+        # Normalized stiffness constants (arch doc values), scaled by material
+        E_ratio = paper.material.youngs_modulus_gpa / 3.0
+        K_FACET = 0.2 * E_ratio
+        K_FOLD = 0.7 * E_ratio
+
+        asgn = paper.assignments[ei]
+        if asgn in ("M", "V"):
+            target = float(np.radians(paper.fold_angles[ei]))
+            k = K_FOLD
+            ctype = "fold"
+        else:
+            target = float(np.pi)
+            k = K_FACET
+            ctype = "facet"
+
+        creases.append((n1, n2, n3, n4, target, k, ctype))
+    return creases
+
+
+def _torque_to_forces(
+    p1: np.ndarray, p2: np.ndarray,
+    p3: np.ndarray, p4: np.ndarray,
+    torque: float,
+) -> tuple[np.ndarray, np.ndarray, np.ndarray, np.ndarray]:
+    """Convert a dihedral torque into forces on the 4 hinge nodes.
+
+    p1-p2 is the hinge edge. p3 and p4 are wing tips.
+    Returns (f1, f2, f3, f4) as (3,) arrays.
+    """
+    e = p2 - p1
+    e_len = np.linalg.norm(e)
+    if e_len < 1e-12:
+        zero = np.zeros(3)
+        return zero, zero, zero, zero
+
+    e_hat = e / e_len
+
+    # Perpendicular components of wing vectors relative to hinge
+    d3 = p3 - p1
+    d4 = p4 - p1
+    d3_perp = d3 - np.dot(d3, e_hat) * e_hat
+    d4_perp = d4 - np.dot(d4, e_hat) * e_hat
+
+    len3 = np.linalg.norm(d3_perp)
+    len4 = np.linalg.norm(d4_perp)
+
+    if len3 < 1e-12 or len4 < 1e-12:
+        zero = np.zeros(3)
+        return zero, zero, zero, zero
+
+    # Force on wing tips proportional to torque / lever arm
+    f3 = torque / (len3 * e_len) * np.cross(e_hat, d3_perp / len3)
+    f4 = -torque / (len4 * e_len) * np.cross(e_hat, d4_perp / len4)
+
+    # Reaction forces distributed to hinge nodes
+    f1 = -(f3 + f4) * 0.5
+    f2 = -(f3 + f4) * 0.5
+
+    return f1, f2, f3, f4
+
+
+# ────────────────────────────────────────────────────────────────────
+# Verlet solver
+# ────────────────────────────────────────────────────────────────────
+
+def simulate(
+    paper: Paper,
+    fold_percent: float = 1.0,
+    n_steps: int = 500,
+    dt: float = 0.005,
+    damping: float = 0.15,
+) -> Paper:
+    """Run bar-and-hinge Verlet integration to relax the mesh.
+
+    Updates paper.vertices, paper.strain_per_vertex, and paper.energy in-place.
+    Returns the mutated paper for chaining.
+
+    Parameters
+    ----------
+    paper : Paper
+        Paper state after a fold has been applied (vertices already rotated).
+    fold_percent : float
+        How far along the fold to drive (0=flat, 1=full target angle).
+    n_steps : int
+        Maximum integration steps.
+    dt : float
+        Time step. Keep small (0.005) for stability with stiff materials.
+    damping : float
+        Velocity damping coefficient (0=undamped, 1=fully damped).
+    """
+    if len(paper.vertices) == 0:
+        return paper
+
+    beams = build_beam_list(paper)
+    creases = build_crease_list(paper)
+
+    pos = paper.vertices.copy()        # (N, 3) current positions
+    last_pos = pos.copy()              # (N, 3) previous positions (Verlet)
+
+    max_force_cap = 1e6  # prevent runaway forces
+
+    for _ in range(n_steps):
+        forces = np.zeros_like(pos)
+
+        # ── Beam (axial spring) forces ───────────────────────────────
+        for (a, b, L0, k) in beams:
+            delta = pos[b] - pos[a]
+            L = np.linalg.norm(delta)
+            if L < 1e-12:
+                continue
+            strain = (L - L0) / L0
+            F_mag = k * strain
+            F_vec = F_mag * (delta / L)
+            # Clamp to prevent instability
+            F_vec = np.clip(F_vec, -max_force_cap, max_force_cap)
+            forces[a] += F_vec
+            forces[b] -= F_vec
+
+        # ── Crease (dihedral spring) forces ─────────────────────────
+        for (n1, n2, n3, n4, target, k, ctype) in creases:
+            actual_target = target * fold_percent if ctype == "fold" else target
+            try:
+                theta = _compute_dihedral_rad(pos[n1], pos[n2], pos[n3], pos[n4])
+            except Exception:
+                continue
+            delta_theta = theta - actual_target
+            edge_len = np.linalg.norm(pos[n2] - pos[n1])
+            torque = k * edge_len * delta_theta
+            torque = float(np.clip(torque, -max_force_cap, max_force_cap))
+
+            f1, f2, f3, f4 = _torque_to_forces(
+                pos[n1], pos[n2], pos[n3], pos[n4], torque
+            )
+            forces[n1] += np.clip(f1, -max_force_cap, max_force_cap)
+            forces[n2] += np.clip(f2, -max_force_cap, max_force_cap)
+            forces[n3] += np.clip(f3, -max_force_cap, max_force_cap)
+            forces[n4] += np.clip(f4, -max_force_cap, max_force_cap)
+
+        # ── Verlet integration ───────────────────────────────────────
+        new_pos = pos + (1.0 - damping) * (pos - last_pos) + forces * (dt * dt)
+
+        # NaN guard
+        if np.any(np.isnan(new_pos)):
+            break
+
+        last_pos = pos
+        pos = new_pos
+
+        # ── Convergence check ────────────────────────────────────────
+        kinetic = np.sum((pos - last_pos) ** 2)
+        if kinetic < 1e-12:
+            break
+
+    # ── Write results back to paper ──────────────────────────────────
+    paper.vertices = pos
+    paper.strain_per_vertex = compute_strain(paper)
+    paper.energy = {
+        "total": compute_total_energy(paper),
+        "bar": compute_bar_energy(paper),
+        "facet": compute_facet_energy(paper),
+        "fold": compute_fold_energy(paper),
+    }
+
+    return paper
+
+
+def _compute_dihedral_rad(
+    p1: np.ndarray, p2: np.ndarray,
+    p3: np.ndarray, p4: np.ndarray,
+) -> float:
+    """Dihedral angle in radians between planes (p1,p2,p3) and (p1,p2,p4).
+
+    p1-p2 is the hinge edge. p3 and p4 are the wing tips.
+    Returns angle in [0, 2*pi).
+    """
+    e = p2 - p1
+    e_norm = np.linalg.norm(e)
+    if e_norm < 1e-12:
+        return float(np.pi)
+    e_hat = e / e_norm
+
+    n1 = np.cross(p3 - p1, e)
+    n2 = np.cross(e, p4 - p1)
+    len1 = np.linalg.norm(n1)
+    len2 = np.linalg.norm(n2)
+    if len1 < 1e-12 or len2 < 1e-12:
+        return float(np.pi)
+
+    n1 = n1 / len1
+    n2 = n2 / len2
+
+    cos_a = float(np.clip(np.dot(n1, n2), -1.0, 1.0))
+    angle = np.arccos(cos_a)
+
+    cross = np.cross(n1, n2)
+    if np.dot(cross, e_hat) < 0:
+        angle = 2.0 * np.pi - angle
+
+    return float(angle)

engine/validation.py

@@ -254,3 +254,25 @@ def validate_paper(paper: Paper) -> ValidationResult:
         self_intersection_count=si_count,
         is_valid=k_valid and m_valid and si_valid,
     )
+
+
+def validate_state(paper: Paper) -> dict:
+    """Run all validation checks and return a flat dict.
+
+    This is the interface used by OrigamiEnvironment. It calls the
+    existing validation functions and returns a dict with all fields
+    the environment and metrics system need.
+    """
+    result = validate_paper(paper)
+    strain_exceeded = bool(
+        len(paper.strain_per_vertex) > 0
+        and float(paper.strain_per_vertex.max()) > paper.material.max_strain
+    )
+    return {
+        "is_valid": result.is_valid and not strain_exceeded,
+        "kawasaki_violations": int(not result.kawasaki_valid),
+        "kawasaki_total_error": float(result.kawasaki_violation),
+        "maekawa_violations": int(not result.maekawa_valid),
+        "self_intersections": result.self_intersection_count,
+        "strain_exceeded": strain_exceeded,
+    }

openenv_server/app.py

@@ -19,123 +19,116 @@ app = create_app(
 
 
 # ---------------------------------------------------------------------------
-# Demo routes required by the React frontend.
-# These must be registered BEFORE the StaticFiles catch-all mount.
+# Demo fold sequences — new format: type, line {start, end}, angle
 # ---------------------------------------------------------------------------
 
-DEMO_COMPLETIONS: dict[str, str] = {
-    "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>',
+DEMO_SEQUENCES: dict[str, list[dict]] = {
+    "half_fold": [
+        {"type": "valley", "line": {"start": [0.0, 0.5], "end": [1.0, 0.5]}, "angle": 180.0},
+    ],
+    "quarter_fold": [
+        {"type": "valley", "line": {"start": [0.0, 0.5], "end": [1.0, 0.5]}, "angle": 180.0},
+        {"type": "valley", "line": {"start": [0.0, 0.5], "end": [1.0, 0.5]}, "angle": 180.0},
+    ],
+    "letter_fold": [
+        {"type": "valley", "line": {"start": [0.0, 0.333], "end": [1.0, 0.333]}, "angle": 180.0},
+        {"type": "mountain", "line": {"start": [0.0, 0.667], "end": [1.0, 0.667]}, "angle": 180.0},
+    ],
+    "map_fold": [
+        {"type": "valley", "line": {"start": [0.0, 0.5], "end": [1.0, 0.5]}, "angle": 180.0},
+        {"type": "mountain", "line": {"start": [0.5, 0.0], "end": [0.5, 1.0]}, "angle": 180.0},
+    ],
+    "solar_panel": [
+        {"type": "valley", "line": {"start": [0.0, 0.25], "end": [1.0, 0.25]}, "angle": 180.0},
+        {"type": "mountain", "line": {"start": [0.0, 0.5], "end": [1.0, 0.5]}, "angle": 180.0},
+        {"type": "valley", "line": {"start": [0.0, 0.75], "end": [1.0, 0.75]}, "angle": 180.0},
+    ],
+    "shelter_wall": [
+        {"type": "valley", "line": {"start": [0.0, 0.333], "end": [1.0, 0.333]}, "angle": 180.0},
+        {"type": "valley", "line": {"start": [0.0, 0.667], "end": [1.0, 0.667]}, "angle": 180.0},
+    ],
+    "stent": [
+        {"type": "valley", "line": {"start": [0.0, 0.25], "end": [1.0, 0.25]}, "angle": 90.0},
+        {"type": "mountain", "line": {"start": [0.0, 0.5], "end": [1.0, 0.5]}, "angle": 90.0},
+        {"type": "valley", "line": {"start": [0.0, 0.75], "end": [1.0, 0.75]}, "angle": 90.0},
+        {"type": "stop", "line": {"start": [0.0, 0.0], "end": [1.0, 1.0]}, "angle": 0.0},
+    ],
 }
 
 
+# ---------------------------------------------------------------------------
+# API routes — must be registered BEFORE the StaticFiles catch-all mount
+# ---------------------------------------------------------------------------
+
 @app.get("/targets", include_in_schema=True)
 def get_targets() -> dict:
-    """Return available target names and metadata for the frontend."""
-    from env.environment import OrigamiEnvironment
+    """Return available task names and metadata for the frontend."""
+    from server.tasks import get_task_by_name, available_task_names
 
-    env = OrigamiEnvironment()
     result: dict[str, dict] = {}
-    for name in env.available_targets():
-        t = env._targets[name]
+    for name in available_task_names():
+        t = get_task_by_name(name)
         result[name] = {
             "name": name,
-            "level": t.get("level", 1),
+            "level": t.get("difficulty", 1),
             "description": t.get("description", ""),
-            "n_creases": sum(1 for a in t["edges_assignment"] if a in ("M", "V")),
+            "n_creases": t.get("max_folds", 3),
+            "difficulty": t.get("difficulty", 1),
+            "material": t.get("material", "paper"),
         }
     return result
 
 
-@app.get("/episode/run", include_in_schema=True)
-def run_episode(target: str = "half_horizontal", completion: str = "") -> dict:
-    """Run a fold-sequence episode and return step-by-step data."""
-    from env.environment import OrigamiEnvironment
-    from env.prompts import parse_fold_list, step_level_prompt
-    from env.rewards import compute_reward
-
-    env = OrigamiEnvironment(mode="step")
-    obs = env.reset(target_name=target)
+@app.get("/episode/demo", include_in_schema=True)
+def demo_episode(target: str = "half_fold") -> dict:
+    """Return a pre-solved demo episode for the given task."""
+    from server.origami_environment import OrigamiEnvironment
+    from server.models import OrigamiAction as NewOrigamiAction
+    from server.tasks import get_task_by_name
 
-    if not completion:
-        return {"prompt": obs["prompt"], "steps": [], "target": env.target}
+    # Fall back to half_fold if target not found
+    folds = DEMO_SEQUENCES.get(target, DEMO_SEQUENCES["half_fold"])
 
-    try:
-        folds = parse_fold_list(completion)
-    except ValueError as exc:
-        return {"error": str(exc), "steps": []}
+    env = OrigamiEnvironment()
+    obs = env.reset(task_name=target)
 
     steps: list[dict] = []
-    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()],
-        }
 
-        step_prompt = step_level_prompt(
-            target=env.target,
-            paper_state=env.paper,
-            step=i + 1,
-            max_steps=env.max_steps,
-            last_reward=reward,
-        )
+    for i, fold_dict in enumerate(folds):
+        if fold_dict.get("type") == "stop":
+            break
 
-        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,
-            }
+        action = NewOrigamiAction(
+            fold_type=fold_dict["type"],
+            fold_line=fold_dict["line"],
+            fold_angle=float(fold_dict.get("angle", 180.0)),
         )
 
-        if reward.get("completion", 0) > 0:
+        obs = env.step(action)
+
+        steps.append({
+            "step": i + 1,
+            "fold": fold_dict,
+            "paper_state": obs.paper_state,
+            "metrics": obs.metrics,
+            "done": obs.done,
+        })
+
+        if obs.done:
             break
 
+    task_def = get_task_by_name(target) if target else {}
+
     return {
-        "target_name": target,
-        "target": env.target,
+        "task_name": target,
+        "task": task_def,
         "steps": steps,
-        "final_reward": steps[-1]["reward"] if steps else {},
+        "final_metrics": obs.metrics if steps else {},
     }
 
 
-@app.get("/episode/demo", include_in_schema=True)
-def demo_episode(target: str = "half_horizontal") -> dict:
-    """Return a pre-solved demo episode for the given target."""
-    completion = DEMO_COMPLETIONS.get(target, DEMO_COMPLETIONS["half_horizontal"])
-    return run_episode(target=target, completion=completion)
-
-
 # ---------------------------------------------------------------------------
-# Static file serving — must come LAST so API routes take priority.
+# Static file serving — must come LAST so API routes take priority
 # ---------------------------------------------------------------------------
 
 _BUILD_DIR = Path(__file__).resolve().parent.parent / "build"

server/app.py

@@ -0,0 +1,162 @@
+"""
+server/app.py — Training WebSocket server for Colab environment.
+
+Provides /ws/training for live streaming of RL training episodes to browsers.
+Mount at a publicly accessible URL in Colab (e.g., via ngrok or Colab's proxy).
+
+Usage in training:
+    from server.app import broadcast
+    broadcast.publish(episode_id, {"type": "episode_update", ...})
+"""
+from __future__ import annotations
+
+from pathlib import Path
+
+import uvicorn
+from fastapi import FastAPI, HTTPException, WebSocket
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+
+from server.training_broadcast import TrainingBroadcastServer
+
+app = FastAPI(title="Optigami Training Server", version="1.0")
+
+# Allow cross-origin connections (Colab public URL → browser)
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Global broadcast server — import and use from training code
+broadcast = TrainingBroadcastServer()
+
+
+@app.on_event("startup")
+async def _store_loop() -> None:
+    """Capture the asyncio event loop so training threads can schedule coroutines."""
+    import asyncio
+    broadcast._loop = asyncio.get_running_loop()
+
+
+@app.websocket("/ws/training")
+async def training_ws(websocket: WebSocket) -> None:
+    """Spectator WebSocket endpoint. Viewers connect here to watch training."""
+    await broadcast.connect_spectator(websocket)
+
+
+@app.get("/health")
+def health() -> dict:
+    return {
+        "status": "ok",
+        "spectators": broadcast.spectator_count,
+        "active_episodes": broadcast.active_episodes,
+    }
+
+
+# ── Demo endpoints (same as openenv_server/app.py so the React UI works) ──
+
+@app.get("/targets")
+def get_targets() -> dict:
+    from server.tasks import available_task_names, get_task_by_name
+    return {
+        name: {
+            "name": name,
+            "level": t["difficulty"],
+            "description": t.get("description", ""),
+            "n_creases": t.get("max_folds", 3),
+            "difficulty": t["difficulty"],
+            "material": t.get("material", "paper"),
+        }
+        for name in available_task_names()
+        if (t := get_task_by_name(name))
+    }
+
+
+_DEMO_SEQUENCES: dict[str, list[dict]] = {
+    "half_fold":    [{"type": "valley",   "line": {"start": [0.0, 0.5],   "end": [1.0, 0.5]},   "angle": 180.0}],
+    "quarter_fold": [{"type": "valley",   "line": {"start": [0.0, 0.5],   "end": [1.0, 0.5]},   "angle": 180.0},
+                     {"type": "valley",   "line": {"start": [0.5, 0.0],   "end": [0.5, 1.0]},   "angle": 180.0}],
+    "letter_fold":  [{"type": "valley",   "line": {"start": [0.0, 0.333], "end": [1.0, 0.333]}, "angle": 180.0},
+                     {"type": "mountain", "line": {"start": [0.0, 0.667], "end": [1.0, 0.667]}, "angle": 180.0}],
+    "map_fold":     [{"type": "valley",   "line": {"start": [0.0, 0.5],   "end": [1.0, 0.5]},   "angle": 180.0},
+                     {"type": "mountain", "line": {"start": [0.5, 0.0],   "end": [0.5, 1.0]},   "angle": 180.0}],
+    "solar_panel":  [{"type": "valley",   "line": {"start": [0.0, 0.25],  "end": [1.0, 0.25]},  "angle": 180.0},
+                     {"type": "mountain", "line": {"start": [0.0, 0.5],   "end": [1.0, 0.5]},   "angle": 180.0},
+                     {"type": "valley",   "line": {"start": [0.0, 0.75],  "end": [1.0, 0.75]},  "angle": 180.0}],
+}
+
+
+@app.get("/episode/demo")
+def demo_episode(target: str = "half_fold") -> dict:
+    from server.origami_environment import OrigamiEnvironment
+    from server.models import OrigamiAction as NewAction
+    from server.tasks import get_task_by_name
+
+    folds = _DEMO_SEQUENCES.get(target, _DEMO_SEQUENCES["half_fold"])
+    env = OrigamiEnvironment()
+    obs = env.reset(task_name=target)
+    steps: list[dict] = []
+
+    for i, fold_dict in enumerate(folds):
+        action = NewAction(
+            fold_type=fold_dict["type"],
+            fold_line=fold_dict["line"],
+            fold_angle=float(fold_dict.get("angle", 180.0)),
+        )
+        obs = env.step(action)
+        steps.append({"step": i + 1, "fold": fold_dict,
+                       "paper_state": obs.paper_state, "metrics": obs.metrics,
+                       "done": obs.done})
+        if obs.done:
+            break
+
+    return {"task_name": target, "task": get_task_by_name(target) or {},
+            "steps": steps, "final_metrics": obs.metrics if steps else {}}
+
+
+@app.get("/episode/replay/{ep_id}")
+def replay_episode(ep_id: str) -> dict:
+    """Return a stored training episode in the same format as /episode/demo."""
+    from server.tasks import get_task_by_name
+    ep = broadcast._registry.get(ep_id)
+    if not ep:
+        raise HTTPException(status_code=404, detail=f"Episode '{ep_id}' not found in registry")
+    return {
+        "task_name": ep.task_name,
+        "task": get_task_by_name(ep.task_name) or {},
+        "steps": ep.steps,
+        "final_metrics": ep.final_metrics or (ep.steps[-1]["metrics"] if ep.steps else {}),
+    }
+
+
+# ── Static files — viewer first, then React app (LAST, catch-all) ──
+
+_VIEWER_DIR = Path(__file__).resolve().parent.parent / "viewer"
+_BUILD_DIR  = Path(__file__).resolve().parent.parent / "build"
+
+if _VIEWER_DIR.exists():
+    app.mount("/viewer", StaticFiles(directory=str(_VIEWER_DIR), html=True), name="viewer")
+
+
+if _BUILD_DIR.exists():
+    app.mount("/", StaticFiles(directory=str(_BUILD_DIR), html=True), name="react")
+else:
+    @app.get("/", include_in_schema=False)
+    def _no_build() -> HTMLResponse:
+        return HTMLResponse(
+            "<p>React build not found. Run <code>npm run build</code> in the frontend directory.</p>"
+            "<p>Training viewer: <a href='/viewer/training.html'>/viewer/training.html</a></p>"
+        )
+
+
+def run(host: str = "0.0.0.0", port: int = 9001) -> None:
+    """Start the training server. Call from Colab notebook."""
+    uvicorn.run(app, host=host, port=port)
+
+
+if __name__ == "__main__":
+    run()

server/models.py

@@ -0,0 +1,59 @@
+"""
+OpenEnv Pydantic models for the origami RL environment.
+
+OrigamiAction  — one fold per step
+OrigamiObservation — everything the LLM and Three.js viewer need
+OrigamiState   — server-side episode tracking
+"""
+from __future__ import annotations
+
+from typing import Any, Optional
+
+from pydantic import Field
+
+from openenv.core.env_server.types import Action, Observation, State
+
+
+class OrigamiAction(Action):
+    """One fold operation sent by the client each step."""
+
+    fold_type: str = Field(
+        default="valley",
+        description="'valley' | 'mountain' | 'pleat' | 'crimp' | 'stop'",
+    )
+    fold_line: dict[str, list[float]] = Field(
+        default_factory=lambda: {"start": [0.0, 0.5], "end": [1.0, 0.5]},
+        description="{'start': [x, y], 'end': [x, y]} normalized 0-1",
+    )
+    fold_angle: float = Field(
+        default=180.0,
+        description="Fold angle in degrees, 0-180",
+    )
+    layer_select: str = Field(
+        default="all",
+        description="'all' | 'top' | 'bottom'",
+    )
+
+
+class OrigamiObservation(Observation):
+    """Everything the LLM and Three.js viewer need.
+
+    paper_state contains FOLD-compatible geometry + physics data.
+    metrics contains all computed quality metrics.
+    No render_urls — the browser renders from paper_state directly.
+    """
+
+    task: dict[str, Any] = Field(default_factory=dict)
+    paper_state: dict[str, Any] = Field(default_factory=dict)
+    metrics: dict[str, Any] = Field(default_factory=dict)
+    fold_history: list[dict[str, Any]] = Field(default_factory=list)
+    error: Optional[str] = Field(default=None)
+
+
+class OrigamiState(State):
+    """Server-side episode tracking."""
+
+    task_name: str = Field(default="")
+    num_folds_applied: int = Field(default=0)
+    is_valid: bool = Field(default=True)
+    total_reward: float = Field(default=0.0)

server/origami_environment.py

@@ -0,0 +1,211 @@
+"""
+OrigamiEnvironment — OpenEnv environment wrapping the origami physics engine.
+
+Implements reset() / step() / state following the OpenEnv interface.
+Engine (physics, fold, validation, metrics) lives in engine/.
+No server-side image rendering — paper_state contains all geometry data.
+"""
+from __future__ import annotations
+
+import json
+import os
+import uuid
+from typing import Any, Optional
+
+from openenv.core.env_server.interfaces import Environment
+
+from engine.paper import Paper
+from engine.fold_engine import apply_fold
+from engine.physics import simulate
+from engine.validation import validate_state
+from engine.metrics import compute_all_metrics
+from server.models import OrigamiAction, OrigamiObservation, OrigamiState
+from server.tasks import get_task_by_name, sample_task
+
+
+def _get_material(name: str):
+    """Get material by name, falling back to paper."""
+    try:
+        from engine.materials import get_material
+        return get_material(name)
+    except Exception:
+        from engine.materials import get_material
+        return get_material("paper")
+
+
+class OrigamiEnvironment(Environment[OrigamiAction, OrigamiObservation, OrigamiState]):
+    """Origami folding RL environment.
+
+    Each episode: agent receives paper_state + task, applies folds one at a
+    time via step(), receives metrics + reward, ends with 'stop' action or
+    when max_folds is reached.
+    """
+
+    SUPPORTS_CONCURRENT_SESSIONS = False
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self._paper: Optional[Paper] = None
+        self._task: Optional[dict] = None
+        self._fold_history: list[dict] = []
+        self._metrics: dict = {}
+        self._validation: dict = {}
+        self._error: Optional[str] = None
+        self._episode_id: Optional[str] = None
+        self._step_count: int = 0
+        self._total_reward: float = 0.0
+
+    # ── reset ─────────────────────────────────────────────────────────
+
+    def reset(
+        self,
+        seed: Optional[int] = None,
+        episode_id: Optional[str] = None,
+        **kwargs: Any,
+    ) -> OrigamiObservation:
+        self._episode_id = episode_id or str(uuid.uuid4())
+        self._step_count = 0
+        self._fold_history = []
+        self._error = None
+        self._total_reward = 0.0
+
+        # Select task
+        task_name = kwargs.get("task_name")
+        if task_name:
+            self._task = get_task_by_name(task_name)
+        if not self._task:
+            self._task = sample_task(seed=seed)
+
+        # Create flat sheet
+        mat = _get_material(self._task["material"])
+        self._paper = Paper.create_flat_sheet(
+            width=self._task["width"],
+            height=self._task["height"],
+            material=mat,
+        )
+
+        # Initial validation + metrics (no physics needed for flat sheet)
+        self._validation = validate_state(self._paper)
+        self._metrics = compute_all_metrics(self._paper, self._task, self._validation)
+
+        return self._make_observation(done=False, reward=None)
+
+    # ── step ──────────────────────────────────────────────────────────
+
+    def step(
+        self,
+        action: OrigamiAction,
+        timeout_s: Optional[float] = None,
+        **kwargs: Any,
+    ) -> OrigamiObservation:
+        if self._paper is None or self._task is None:
+            return self._make_observation(done=True, reward=-5.0)
+
+        self._step_count += 1
+        self._error = None
+
+        # ── Stop action ───────────────────────────────────────────────
+        if action.fold_type == "stop":
+            return self._finalize_episode()
+
+        # ── Build fold dict ───────────────────────────────────────────
+        fold_dict = {
+            "type": action.fold_type,
+            "line": action.fold_line,
+            "angle": action.fold_angle,
+        }
+
+        # ── Apply fold ────────────────────────────────────────────────
+        new_paper, err = apply_fold(self._paper, fold_dict)
+        if err:
+            self._error = err
+            return self._make_observation(done=True, reward=-5.0)
+
+        self._paper = new_paper
+        self._fold_history.append({**fold_dict, "step": self._step_count})
+
+        # ── Physics relaxation ────────────────────────────────────────
+        try:
+            self._paper = simulate(self._paper, fold_percent=1.0)
+        except Exception as exc:
+            self._error = f"Physics failed: {exc}"
+            # Continue — don't abort episode on physics failure
+
+        # ── Validate ──────────────────────────────────────────────────
+        self._validation = validate_state(self._paper)
+
+        # ── Metrics ───────────────────────────────────────────────────
+        self._metrics = compute_all_metrics(self._paper, self._task, self._validation)
+
+        # ── Check termination ─────────────────────────────────────────
+        max_folds = self._task.get("max_folds", 50)
+        if self._step_count >= max_folds:
+            return self._finalize_episode()
+
+        if self._validation.get("self_intersections", 0) > 0:
+            self._error = "Self-intersection detected"
+            return self._finalize_episode()
+
+        return self._make_observation(done=False, reward=None)
+
+    # ── state ─────────────────────────────────────────────────────────
+
+    @property
+    def state(self) -> OrigamiState:
+        return OrigamiState(
+            episode_id=self._episode_id,
+            step_count=self._step_count,
+            task_name=self._task.get("name", "") if self._task else "",
+            num_folds_applied=len(self._fold_history),
+            is_valid=self._metrics.get("is_valid", True),
+            total_reward=self._total_reward,
+        )
+
+    # ── internals ─────────────────────────────────────────────────────
+
+    def _finalize_episode(self) -> OrigamiObservation:
+        reward = self._compute_reward()
+        self._total_reward = reward
+        return self._make_observation(done=True, reward=reward)
+
+    def _make_observation(self, done: bool, reward: Optional[float]) -> OrigamiObservation:
+        return OrigamiObservation(
+            done=done,
+            reward=reward,
+            task=self._task or {},
+            paper_state=self._paper.to_observation_dict() if self._paper else {},
+            metrics=self._metrics,
+            fold_history=self._fold_history,
+            error=self._error,
+        )
+
+    def _compute_reward(self) -> float:
+        m = self._metrics
+        reward = 0.0
+
+        # Compactness is the main signal
+        reward += m.get("compactness", 0.0) * 20.0
+
+        # Bonus for fitting in target box
+        if m.get("fits_target_box", False):
+            reward += 10.0
+
+        # Bonus for deployability (if task requires it)
+        if m.get("is_deployable", False):
+            reward += 5.0
+
+        # Penalties for violations
+        reward -= m.get("kawasaki_violations", 0) * 2.0
+        reward -= m.get("maekawa_violations", 0) * 2.0
+        reward -= m.get("self_intersections", 0) * 5.0
+
+        # Penalty for too many folds (encourage efficiency)
+        reward -= m.get("fold_count", 0) * 0.5
+
+        # Penalty for exceeding material strain limit
+        max_strain = m.get("max_strain", 0.0)
+        strain_limit = self._paper.material.max_strain if self._paper else 0.05
+        if max_strain > strain_limit:
+            reward -= 3.0 * (max_strain / strain_limit)
+
+        return float(reward)

server/tasks.py

@@ -0,0 +1,123 @@
+"""
+Task pool and curriculum for the origami RL environment.
+
+7 tasks across 4 difficulty levels.
+"""
+from __future__ import annotations
+
+import random
+from typing import Optional
+
+
+TASKS: dict[str, dict] = {
+    "half_fold": {
+        "name": "half_fold",
+        "description": "Fold a 1x1 paper sheet in half along the horizontal midline.",
+        "width": 1.0,
+        "height": 1.0,
+        "material": "paper",
+        "target_ratio": 0.50,
+        "max_folds": 3,
+        "target_box": [1.0, 0.5, 0.02],
+        "must_deploy": False,
+        "difficulty": 1,
+    },
+    "quarter_fold": {
+        "name": "quarter_fold",
+        "description": "Fold a 1x1 paper sheet into quarters using two perpendicular folds.",
+        "width": 1.0,
+        "height": 1.0,
+        "material": "paper",
+        "target_ratio": 0.25,
+        "max_folds": 5,
+        "target_box": [0.5, 0.5, 0.04],
+        "must_deploy": False,
+        "difficulty": 1,
+    },
+    "letter_fold": {
+        "name": "letter_fold",
+        "description": "Fold a 1x1 paper into thirds (letter fold) using two parallel folds.",
+        "width": 1.0,
+        "height": 1.0,
+        "material": "paper",
+        "target_ratio": 0.33,
+        "max_folds": 5,
+        "target_box": [1.0, 0.34, 0.03],
+        "must_deploy": False,
+        "difficulty": 2,
+    },
+    "map_fold": {
+        "name": "map_fold",
+        "description": "Fold a 1x1 paper into eighths using a grid fold pattern. Must be re-deployable.",
+        "width": 1.0,
+        "height": 1.0,
+        "material": "paper",
+        "target_ratio": 0.125,
+        "max_folds": 8,
+        "target_box": [0.5, 0.25, 0.08],
+        "must_deploy": True,
+        "difficulty": 2,
+    },
+    "solar_panel": {
+        "name": "solar_panel",
+        "description": "Pack a 1x1 Mylar solar panel into a compact configuration using a Miura-ori style fold. Must deploy.",
+        "width": 1.0,
+        "height": 1.0,
+        "material": "mylar",
+        "target_ratio": 0.05,
+        "max_folds": 20,
+        "target_box": [0.25, 0.25, 0.05],
+        "must_deploy": True,
+        "difficulty": 3,
+    },
+    "shelter_wall": {
+        "name": "shelter_wall",
+        "description": "Fold a 1x1 aluminum sheet into a compact structural panel within strain limits.",
+        "width": 1.0,
+        "height": 1.0,
+        "material": "aluminum",
+        "target_ratio": 0.10,
+        "max_folds": 15,
+        "target_box": [0.5, 0.25, 0.1],
+        "must_deploy": False,
+        "difficulty": 3,
+    },
+    "stent": {
+        "name": "stent",
+        "description": "Fold a 0.5x1.5 nitinol sheet into a compact tube configuration for a medical stent. Superelastic material.",
+        "width": 0.5,
+        "height": 1.5,
+        "material": "nitinol",
+        "target_ratio": 0.09,
+        "max_folds": 25,
+        "target_box": [0.1, 0.1, 0.15],
+        "must_deploy": True,
+        "difficulty": 4,
+    },
+}
+
+
+def get_task_by_name(name: str) -> Optional[dict]:
+    """Return task dict by name, or None if not found."""
+    return TASKS.get(name)
+
+
+def sample_task(seed: Optional[int] = None, difficulty: Optional[int] = None) -> dict:
+    """Sample a random task, optionally filtered by difficulty level."""
+    rng = random.Random(seed)
+    pool = list(TASKS.values())
+    if difficulty is not None:
+        pool = [t for t in pool if t["difficulty"] == difficulty]
+    if not pool:
+        pool = list(TASKS.values())
+    return dict(rng.choice(pool))
+
+
+def get_tasks_by_difficulty(level: int) -> list[dict]:
+    """Return all tasks at a given difficulty level."""
+    return [dict(t) for t in TASKS.values() if t["difficulty"] == level]
+
+
+def available_task_names() -> list[str]:
+    """Return sorted list of all task names."""
+    return sorted(TASKS.keys())

server/training_broadcast.py

@@ -0,0 +1,216 @@
+"""
+TrainingBroadcastServer — fire-and-forget broadcast hub for live training viewer.
+
+The RL training process calls publish() after each env.step().
+Spectator browsers connect via /ws/training WebSocket.
+Broadcast is async and non-blocking: if no viewers are connected, observations are dropped.
+"""
+from __future__ import annotations
+
+import asyncio
+import json
+import logging
+from dataclasses import dataclass, field
+from typing import Any, Optional
+
+from fastapi import WebSocket, WebSocketDisconnect
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass
+class EpisodeInfo:
+    episode_id: str
+    task_name: str
+    status: str = "running"       # "running" | "done" | "timeout" | "error"
+    step: int = 0
+    observation: dict = field(default_factory=dict)
+    metrics: dict = field(default_factory=dict)
+    fold_history: list = field(default_factory=list)
+    steps: list = field(default_factory=list)   # full step history for replay
+    score: Optional[float] = None
+    final_metrics: Optional[dict] = None
+
+
+class TrainingBroadcastServer:
+    """Central hub for broadcasting RL training observations to spectator WebSockets.
+
+    Thread-safe: publish() can be called from training threads (ThreadPoolExecutor).
+    WebSocket handlers run in the asyncio event loop.
+    """
+
+    def __init__(self) -> None:
+        self._spectators: list[WebSocket] = []
+        self._registry: dict[str, EpisodeInfo] = {}
+        self._batch_id: int = 0
+        self._loop: Optional[asyncio.AbstractEventLoop] = None
+        self._lock = asyncio.Lock()
+
+    # ── Episode publishing (called from training thread / async context) ──
+
+    def publish(self, episode_id: str, data: dict) -> None:
+        """Fire-and-forget: push an update from the training process.
+
+        Safe to call from any thread. Schedules onto the stored event loop
+        (set by the FastAPI startup handler). No-op if no loop is available.
+        """
+        loop = self._loop
+        if loop is None or loop.is_closed():
+            return
+        asyncio.run_coroutine_threadsafe(self._async_publish(episode_id, data), loop)
+
+    async def _async_publish(self, episode_id: str, data: dict) -> None:
+        msg_type = data.get("type", "episode_update")
+
+        async with self._lock:
+            if msg_type == "batch_start":
+                self._batch_id = data.get("batch_id", self._batch_id + 1)
+                self._registry.clear()
+                await self._broadcast(data)
+                return
+
+            if msg_type == "batch_done":
+                await self._broadcast(data)
+                return
+
+            if msg_type == "training_done":
+                await self._broadcast(data)
+                return
+
+            # episode_update or episode_done
+            ep = self._registry.setdefault(
+                episode_id,
+                EpisodeInfo(episode_id=episode_id, task_name=data.get("task_name", "")),
+            )
+
+            if msg_type == "episode_done":
+                ep.status = data.get("status", "done")
+                ep.score = data.get("score")
+                ep.final_metrics = data.get("final_metrics")
+            else:
+                step_num = data.get("step", ep.step)
+                ep.step = step_num
+                ep.status = "running"
+                obs = data.get("observation", {})
+                ep.observation = obs
+                ep.metrics = obs.get("metrics", {})
+                ep.fold_history = obs.get("fold_history", ep.fold_history)
+                # Accumulate full step history for /episode/replay
+                if step_num > 0:
+                    fold_hist = obs.get("fold_history", [])
+                    latest_fold = fold_hist[-1] if fold_hist else {}
+                    ep.steps.append({
+                        "step": step_num,
+                        "fold": latest_fold,
+                        "paper_state": obs.get("paper_state", {}),
+                        "metrics": obs.get("metrics", {}),
+                        "done": obs.get("done", False),
+                    })
+
+        await self._broadcast({"episode_id": episode_id, **data})
+
+    # ── Spectator management ──
+
+    async def connect_spectator(self, websocket: WebSocket) -> None:
+        """Accept a new viewer WebSocket and serve it until disconnect."""
+        await websocket.accept()
+
+        async with self._lock:
+            self._spectators.append(websocket)
+
+        # Send current registry snapshot immediately
+        await self._send_registry(websocket)
+
+        try:
+            while True:
+                # Viewers are read-only; drain any incoming messages (pings etc)
+                await asyncio.wait_for(websocket.receive_text(), timeout=30.0)
+        except (WebSocketDisconnect, asyncio.TimeoutError, Exception):
+            pass
+        finally:
+            await self.disconnect_spectator(websocket)
+
+    async def disconnect_spectator(self, websocket: WebSocket) -> None:
+        async with self._lock:
+            self._spectators = [s for s in self._spectators if s is not websocket]
+
+    # ── Batch control ──
+
+    async def start_batch(self, batch_id: int, num_episodes: int, prompt_index: int = 0) -> None:
+        """Call before starting a new training batch."""
+        data = {
+            "type": "batch_start",
+            "batch_id": batch_id,
+            "num_episodes": num_episodes,
+            "prompt_index": prompt_index,
+        }
+        await self._async_publish("__batch__", data)
+
+    async def finish_batch(
+        self,
+        batch_id: int,
+        scores: list[float],
+        best_episode_id: str = "",
+    ) -> None:
+        """Call after all episodes in a batch complete."""
+        data = {
+            "type": "batch_done",
+            "batch_id": batch_id,
+            "scores": scores,
+            "best_episode_id": best_episode_id,
+            "avg_score": sum(scores) / len(scores) if scores else 0.0,
+        }
+        await self._async_publish("__batch__", data)
+
+    async def clear_batch(self) -> None:
+        """Reset episode registry for next batch."""
+        async with self._lock:
+            self._registry.clear()
+
+    # ── Internals ──
+
+    async def _broadcast(self, message: dict) -> None:
+        """Send message to all spectators, removing dead connections."""
+        if not self._spectators:
+            return
+        payload = json.dumps(message, default=str)
+        dead: list[WebSocket] = []
+        for ws in list(self._spectators):
+            try:
+                await ws.send_text(payload)
+            except Exception:
+                dead.append(ws)
+        for ws in dead:
+            self._spectators = [s for s in self._spectators if s is not ws]
+
+    async def _send_registry(self, websocket: WebSocket) -> None:
+        """Send the full episode registry to a newly connected viewer."""
+        async with self._lock:
+            episodes = {
+                ep_id: {
+                    "status": ep.status,
+                    "task": ep.task_name,
+                    "step": ep.step,
+                    "observation": ep.observation,
+                    "metrics": ep.metrics,
+                    "score": ep.score,
+                }
+                for ep_id, ep in self._registry.items()
+            }
+            payload = {
+                "type": "registry",
+                "batch_id": self._batch_id,
+                "episodes": episodes,
+            }
+        try:
+            await websocket.send_text(json.dumps(payload, default=str))
+        except Exception:
+            pass
+
+    @property
+    def spectator_count(self) -> int:
+        return len(self._spectators)
+
+    @property
+    def active_episodes(self) -> int:
+        return sum(1 for ep in self._registry.values() if ep.status == "running")

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,17 +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_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 [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`);
@@ -51,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;
 
@@ -99,7 +126,6 @@ function App() {
   };
 
   const targetDef = targets[selectedTarget] || null;
-  const targetFold = episode ? episode.target : null;
 
   return (
     <div className="app">
@@ -108,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}
@@ -138,12 +173,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 +189,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 +198,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 +224,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/CreaseCanvas.js

@@ -13,10 +13,11 @@ function GhostEdges({ target, dim }) {
   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 v1 = vertices_coords[ev[0]];
+    const v2 = vertices_coords[ev[1]];
+    if (!v1 || !v2) return null;
+    const [x1, y1] = toSvg(v1[0], v1[1], dim);
+    const [x2, y2] = toSvg(v2[0], v2[1], dim);
     const color = asgn === 'M' ? MOUNTAIN : VALLEY;
     return (
       <line
@@ -32,15 +33,23 @@ function GhostEdges({ target, dim }) {
 }
 
 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;
+  if (!paperState) return null;
+  const { vertices_coords, edges_vertices, edges_assignment } = paperState;
+  if (!vertices_coords || !edges_vertices || !edges_assignment) return null;
+
+  return edges_vertices.map((ev, i) => {
+    const asgn = edges_assignment[i];
+    if (asgn === 'B' || asgn === 'F') return null;
+    const v1 = vertices_coords[ev[0]];
+    const v2 = vertices_coords[ev[1]];
+    if (!v1 || !v2) return null;
+    // vertices_coords are 3D [x, y, z] — use only x and y
+    const [x1, y1] = toSvg(v1[0], v1[1], dim);
+    const [x2, y2] = toSvg(v2[0], v2[1], dim);
+    const color = asgn === 'M' ? MOUNTAIN : VALLEY;
     return (
       <line
-        key={edge.id}
+        key={i}
         x1={x1} y1={y1} x2={x2} y2={y2}
         stroke={color}
         strokeWidth={2.5}
@@ -50,26 +59,6 @@ function CurrentEdges({ paperState, dim }) {
   });
 }
 
-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;
@@ -94,10 +83,7 @@ export default function CreaseCanvas({ paperState, target, dim = 280, ghostOnly
 
       {/* Current paper state */}
       {!ghostOnly && (
-        <>
-          <CurrentEdges paperState={paperState} dim={size} />
-          <AnchorCrosses paperState={paperState} dim={size} />
-        </>
+        <CurrentEdges paperState={paperState} dim={size} />
       )}
 
       {/* Paper border */}

src/components/Fold3DCanvas.js

@@ -1,11 +1,9 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 const PAPER_RGB = [250, 250, 245];
 const LIGHT_DIR = normalize3([0.4, -0.45, 1.0]);
-const MAX_FOLD_RAD = Math.PI * 0.92;
-const SIDE_EPS = 1e-7;
-const MOUNTAIN_COLOR = 'rgba(245, 158, 11, 0.95)';
-const VALLEY_COLOR = 'rgba(56, 189, 248, 0.95)';
+const MOUNTAIN_COLOR = 'rgba(245, 158, 11, 0.9)';
+const VALLEY_COLOR = 'rgba(56, 189, 248, 0.9)';
 
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
@@ -41,102 +39,23 @@ function shadePaper(intensity) {
   return `rgb(${r}, ${g}, ${b})`;
 }
 
-function buildGridMesh(resolution = 18) {
-  const vertices = [];
-  for (let y = 0; y <= resolution; y += 1) {
-    for (let x = 0; x <= resolution; x += 1) {
-      vertices.push([x / resolution, y / resolution, 0]);
-    }
-  }
-
-  const triangles = [];
-  const stride = resolution + 1;
-  for (let y = 0; y < resolution; y += 1) {
-    for (let x = 0; x < resolution; x += 1) {
-      const a = y * stride + x;
-      const b = a + 1;
-      const c = a + stride;
-      const d = c + 1;
-      triangles.push([a, b, d]);
-      triangles.push([a, d, c]);
-    }
-  }
-
-  return { vertices, triangles, resolution };
-}
-
-function rotateAroundAxis(point, axisPoint, axisDir, angleRad) {
-  const px = point[0] - axisPoint[0];
-  const py = point[1] - axisPoint[1];
-  const pz = point[2] - axisPoint[2];
-
-  const kx = axisDir[0];
-  const ky = axisDir[1];
-  const kz = axisDir[2];
-
-  const cosA = Math.cos(angleRad);
-  const sinA = Math.sin(angleRad);
-
-  const crossX = ky * pz - kz * py;
-  const crossY = kz * px - kx * pz;
-  const crossZ = kx * py - ky * px;
-
-  const dot = px * kx + py * ky + pz * kz;
-  const oneMinus = 1.0 - cosA;
-
-  return [
-    axisPoint[0] + px * cosA + crossX * sinA + kx * dot * oneMinus,
-    axisPoint[1] + py * cosA + crossY * sinA + ky * dot * oneMinus,
-    axisPoint[2] + pz * cosA + crossZ * sinA + kz * dot * oneMinus,
-  ];
-}
-
-function applyFoldToVertices(vertices, fold, progress) {
-  if (!fold || progress <= 0) return;
-  const [x1, y1] = fold.from;
-  const [x2, y2] = fold.to;
-  const dx = x2 - x1;
-  const dy = y2 - y1;
-  const len = Math.hypot(dx, dy);
-  if (len < 1e-8) return;
-
-  const sideValues = [];
-  let posCount = 0;
-  let negCount = 0;
-
-  for (let i = 0; i < vertices.length; i += 1) {
-    const v = vertices[i];
-    const side = dx * (v[1] - y1) - dy * (v[0] - x1);
-    sideValues.push(side);
-    if (side > SIDE_EPS) posCount += 1;
-    else if (side < -SIDE_EPS) negCount += 1;
-  }
-
-  let rotatePositive = posCount <= negCount;
-  if (posCount === 0 && negCount > 0) rotatePositive = false;
-  if (negCount === 0 && posCount > 0) rotatePositive = true;
-  if (posCount === 0 && negCount === 0) return;
-
-  const sign = fold.assignment === 'V' ? 1 : -1;
-  const angle = sign * MAX_FOLD_RAD * progress;
-  const axisPoint = [x1, y1, 0];
-  const axisDir = [dx / len, dy / len, 0];
-
-  for (let i = 0; i < vertices.length; i += 1) {
-    const side = sideValues[i];
-    const shouldRotate = rotatePositive ? side > SIDE_EPS : side < -SIDE_EPS;
-    if (!shouldRotate) continue;
-    vertices[i] = rotateAroundAxis(vertices[i], axisPoint, axisDir, angle);
-  }
+function strainColor(strain, intensity) {
+  const t = clamp(strain / 0.15, 0, 1);
+  const lit = clamp(0.3 + 0.7 * Math.abs(intensity), 0, 1);
+  // Blend from paper ivory to red-orange with lighting
+  const r = Math.round((250 + t * 5) * lit);
+  const g = Math.round((250 - t * 200) * lit);
+  const bv = Math.round((245 - t * 245) * lit);
+  return `rgb(${clamp(r,0,255)}, ${clamp(g,0,255)}, ${clamp(bv,0,255)})`;
 }
 
 function projectVertex(vertex, dim) {
   let x = vertex[0] - 0.5;
   let y = vertex[1] - 0.5;
-  let z = vertex[2];
+  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);
@@ -158,162 +77,119 @@ function projectVertex(vertex, dim) {
   };
 }
 
-function foldProgresses(stepValue, foldCount, mode, totalSteps) {
-  const values = new Array(foldCount).fill(0);
-  if (foldCount === 0) return values;
-
-  if (mode === 'final') {
-    const startCollapse = Math.max(totalSteps - 1, 0);
-    const collapse = clamp(stepValue - startCollapse, 0, 1);
-    for (let i = 0; i < foldCount; i += 1) values[i] = collapse;
-    return values;
+function drawPaperState(ctx, paperState, dim) {
+  ctx.clearRect(0, 0, dim, dim);
+  ctx.fillStyle = '#121220';
+  ctx.fillRect(0, 0, dim, dim);
+
+  if (!paperState) {
+    // Draw flat sheet for initial state
+    const flatVerts = [[0,0,0],[1,0,0],[1,1,0],[0,1,0]];
+    const flatFaces = [[0,1,2],[0,2,3]];
+    renderMesh(ctx, flatVerts, flatFaces, null, dim);
+    return;
   }
 
-  for (let i = 0; i < foldCount; i += 1) {
-    if (stepValue >= i + 1) values[i] = 1;
-    else if (stepValue > i) values[i] = clamp(stepValue - i, 0, 1);
-  }
-  return values;
-}
-
-function stepEasing(t) {
-  return t < 0.5 ? 4 * t * t * t : 1 - ((-2 * t + 2) ** 3) / 2;
-}
-
-export default function Fold3DCanvas({
-  steps,
-  currentStep,
-  totalSteps,
-  mode = 'progressive',
-  dim = 280,
-}) {
-  const canvasRef = useRef(null);
-  const rafRef = useRef(null);
-  const animatedStepRef = useRef(currentStep);
-
-  const folds = useMemo(
-    () => (steps || [])
-      .map((s) => s.fold)
-      .filter(Boolean)
-      .map((fold) => ({
-        from: [Number(fold.from_point[0]), Number(fold.from_point[1])],
-        to: [Number(fold.to_point[0]), Number(fold.to_point[1])],
-        assignment: fold.assignment === 'M' ? 'M' : 'V',
-      })),
-    [steps],
-  );
-
-  const mesh = useMemo(() => buildGridMesh(18), []);
-
-  const draw = useCallback((stepValue) => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
+  const { vertices_coords, faces_vertices, strain_per_vertex, edges_vertices, edges_assignment } = paperState;
 
-    ctx.clearRect(0, 0, dim, dim);
+  if (!vertices_coords || !faces_vertices) {
     ctx.fillStyle = '#121220';
     ctx.fillRect(0, 0, dim, dim);
+    return;
+  }
 
-    const vertices = mesh.vertices.map((v) => [v[0], v[1], v[2]]);
-    const progress = foldProgresses(stepValue, folds.length, mode, totalSteps);
-
-    for (let i = 0; i < folds.length; i += 1) {
-      if (progress[i] <= 0) continue;
-      applyFoldToVertices(vertices, folds[i], progress[i]);
+  renderMesh(ctx, vertices_coords, faces_vertices, strain_per_vertex, dim);
+
+  // Draw fold creases on top
+  if (edges_vertices && edges_assignment) {
+    const projected = vertices_coords.map(v => projectVertex(v, dim));
+    for (let i = 0; i < edges_vertices.length; i++) {
+      const asgn = edges_assignment[i];
+      if (asgn !== 'M' && asgn !== 'V') continue;
+      const [ai, bi] = edges_vertices[i];
+      const pa = projected[ai];
+      const pb = projected[bi];
+      if (!pa || !pb) continue;
+      ctx.beginPath();
+      ctx.moveTo(pa.x, pa.y);
+      ctx.lineTo(pb.x, pb.y);
+      ctx.strokeStyle = asgn === 'M' ? MOUNTAIN_COLOR : VALLEY_COLOR;
+      ctx.lineWidth = 2.0;
+      ctx.globalAlpha = 0.85;
+      ctx.stroke();
+      ctx.globalAlpha = 1;
     }
+  }
+}
 
-    const projected = vertices.map((v) => projectVertex(v, dim));
+function renderMesh(ctx, verts, faces, strain, dim) {
+  const projected = verts.map(v => projectVertex(v, dim));
 
-    const tris = mesh.triangles.map((tri) => {
-      const p0 = projected[tri[0]];
-      const p1 = projected[tri[1]];
-      const p2 = projected[tri[2]];
+  const tris = [];
+  for (const face of faces) {
+    // Triangulate face (fan from first vertex)
+    for (let k = 1; k < face.length - 1; k++) {
+      const a = face[0], b = face[k], c = face[k + 1];
+      const p0 = projected[a];
+      const p1 = projected[b];
+      const p2 = projected[c];
+      if (!p0 || !p1 || !p2) continue;
       const avgZ = (p0.z + p1.z + p2.z) / 3;
-
-      const v0 = vertices[tri[0]];
-      const v1 = vertices[tri[1]];
-      const v2 = vertices[tri[2]];
+      const v0 = verts[a], v1 = verts[b], v2 = verts[c];
       const normal = normalize3(cross3(sub3(v1, v0), sub3(v2, v0)));
       const intensity = dot3(normal, LIGHT_DIR);
+      const avgStrain = strain
+        ? ((strain[a] || 0) + (strain[b] || 0) + (strain[c] || 0)) / 3
+        : 0;
+      tris.push({ a, b, c, avgZ, intensity, avgStrain });
+    }
+  }
 
-      return {
-        tri,
-        avgZ,
-        shade: shadePaper(intensity),
-      };
-    });
+  tris.sort((x, y) => x.avgZ - y.avgZ);
 
-    tris.sort((a, b) => a.avgZ - b.avgZ);
+  for (const tri of tris) {
+    const p0 = projected[tri.a];
+    const p1 = projected[tri.b];
+    const p2 = projected[tri.c];
 
-    for (const triInfo of tris) {
-      const [a, b, c] = triInfo.tri;
-      const p0 = projected[a];
-      const p1 = projected[b];
-      const p2 = projected[c];
-
-      ctx.beginPath();
-      ctx.moveTo(p0.x, p0.y);
-      ctx.lineTo(p1.x, p1.y);
-      ctx.lineTo(p2.x, p2.y);
-      ctx.closePath();
-      ctx.fillStyle = triInfo.shade;
-      ctx.fill();
-      ctx.strokeStyle = 'rgba(42, 42, 58, 0.22)';
-      ctx.lineWidth = 0.55;
-      ctx.stroke();
-    }
+    ctx.beginPath();
+    ctx.moveTo(p0.x, p0.y);
+    ctx.lineTo(p1.x, p1.y);
+    ctx.lineTo(p2.x, p2.y);
+    ctx.closePath();
 
-    const res = mesh.resolution;
-    const stride = res + 1;
-    const pointToIndex = (pt) => {
-      const ix = clamp(Math.round(pt[0] * res), 0, res);
-      const iy = clamp(Math.round(pt[1] * res), 0, res);
-      return iy * stride + ix;
-    };
+    const fillColor = tri.avgStrain > 0.005
+      ? strainColor(tri.avgStrain, tri.intensity)
+      : shadePaper(tri.intensity);
 
-    for (let i = 0; i < folds.length; i += 1) {
-      if (progress[i] <= 0.02) continue;
-      const fold = folds[i];
-      const aIdx = pointToIndex(fold.from);
-      const bIdx = pointToIndex(fold.to);
-      const pa = projected[aIdx];
-      const pb = projected[bIdx];
+    ctx.fillStyle = fillColor;
+    ctx.fill();
+    ctx.strokeStyle = 'rgba(42, 42, 58, 0.22)';
+    ctx.lineWidth = 0.55;
+    ctx.stroke();
+  }
+}
 
-      ctx.beginPath();
-      ctx.moveTo(pa.x, pa.y);
-      ctx.lineTo(pb.x, pb.y);
-      ctx.strokeStyle = fold.assignment === 'M' ? MOUNTAIN_COLOR : VALLEY_COLOR;
-      ctx.globalAlpha = clamp(0.35 + 0.65 * progress[i], 0, 1);
-      ctx.lineWidth = 2.15;
-      ctx.stroke();
-      ctx.globalAlpha = 1;
-    }
-  }, [dim, folds, mesh, mode, totalSteps]);
+export default function Fold3DCanvas({
+  steps,
+  currentStep,
+  dim = 280,
+}) {
+  const canvasRef = useRef(null);
 
-  useEffect(() => {
-    draw(animatedStepRef.current);
-  }, [draw]);
+  const getPaperState = useCallback(() => {
+    if (!steps || steps.length === 0 || currentStep === 0) return null;
+    const stepData = steps[currentStep - 1];
+    return stepData ? stepData.paper_state : null;
+  }, [steps, currentStep]);
 
   useEffect(() => {
-    cancelAnimationFrame(rafRef.current);
-    const startValue = animatedStepRef.current;
-    const endValue = currentStep;
-    const durationMs = 420;
-    const startAt = performance.now();
-
-    const tick = (now) => {
-      const t = clamp((now - startAt) / durationMs, 0, 1);
-      const eased = stepEasing(t);
-      const value = startValue + (endValue - startValue) * eased;
-      animatedStepRef.current = value;
-      draw(value);
-      if (t < 1) rafRef.current = requestAnimationFrame(tick);
-    };
-
-    rafRef.current = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(rafRef.current);
-  }, [currentStep, draw]);
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    drawPaperState(ctx, getPaperState(), dim);
+  }, [getPaperState, dim]);
 
   return (
     <canvas

src/components/InfoBadges.js

@@ -27,31 +27,31 @@ function NumVal({ value }) {
   return <span className="info-val">{value}</span>;
 }
 
-export default function InfoBadges({ info, targetDef }) {
+export default function InfoBadges({ metrics, paperState, targetDef }) {
+  const numLayers = paperState?.num_layers ?? metrics?.num_layers ?? null;
+  const foldCount = metrics?.fold_count ?? paperState?.fold_count ?? null;
+
   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)} />
+        <span className="info-key">fold_count</span>
+        <NumVal value={foldCount} />
       </div>
       <div className="info-row">
-        <span className="info-key">interior_verts</span>
-        <NumVal value={info ? info.n_interior_vertices : null} />
+        <span className="info-key">num_layers</span>
+        <NumVal value={numLayers} />
       </div>
       <div className="info-row">
-        <span className="info-key">local_fold</span>
-        <BoolVal value={info ? info.local_foldability : null} />
+        <span className="info-key">is_valid</span>
+        <BoolVal value={metrics ? metrics.is_valid : null} />
       </div>
       <div className="info-row">
-        <span className="info-key">blb_sat</span>
-        <BoolVal value={info ? info.blb_satisfied : null} />
+        <span className="info-key">strain_exceeded</span>
+        <BoolVal value={metrics ? metrics.strain_exceeded : null} />
       </div>
       <div className="info-row">
-        <span className="info-key">global_fold</span>
-        <TextVal
-          value={info ? info.global_foldability : null}
-          dim={true}
-        />
+        <span className="info-key">is_deployable</span>
+        <BoolVal value={metrics ? metrics.is_deployable : null} />
       </div>
       {targetDef && (
         <>
@@ -60,9 +60,13 @@ export default function InfoBadges({ info, targetDef }) {
             <span className="info-val">LVL {targetDef.level}</span>
           </div>
           <div className="info-row">
-            <span className="info-key">target</span>
+            <span className="info-key">material</span>
+            <TextVal value={targetDef.material} dim={true} />
+          </div>
+          <div className="info-row">
+            <span className="info-key">task</span>
             <span className="info-val" style={{ fontSize: '10px', textAlign: 'right', maxWidth: '140px', wordBreak: 'break-word' }}>
-              {targetDef.name.replace(/_/g, ' ').toUpperCase()}
+              {(targetDef.name || '').replace(/_/g, ' ').toUpperCase()}
             </span>
           </div>
         </>

src/components/RewardPanel.js

@@ -1,50 +1,89 @@
-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 METRIC_FIELDS = [
+  {
+    key: 'compactness',
+    label: 'compactness',
+    color: 'var(--progress)',
+    normalize: (v) => Math.min(Math.max(v || 0, 0), 1),
+    format: (v) => (v != null ? v.toFixed(3) : '—'),
+  },
+  {
+    key: 'max_strain',
+    label: 'max strain',
+    color: 'var(--validity)',
+    // Show as inverted bar: low strain = small bar (good)
+    normalize: (v) => Math.min((v || 0) / 0.2, 1),
+    format: (v) => (v != null ? v.toFixed(4) : '—'),
+    inverted: true,
+  },
+  {
+    key: 'kawasaki_violations',
+    label: 'kawasaki',
+    color: 'var(--validity)',
+    normalize: (v) => Math.min((v || 0) / 5, 1),
+    format: (v) => (v != null ? String(v) : '—'),
+    inverted: true,
+  },
+  {
+    key: 'maekawa_violations',
+    label: 'maekawa',
+    color: 'var(--validity)',
+    normalize: (v) => Math.min((v || 0) / 5, 1),
+    format: (v) => (v != null ? String(v) : '—'),
+    inverted: true,
+  },
+  {
+    key: 'fits_target_box',
+    label: 'fits box',
+    color: 'var(--progress)',
+    normalize: (v) => (v ? 1 : 0),
+    format: (v) => (v == null ? '—' : v ? 'YES' : 'NO'),
+  },
+  {
+    key: 'is_deployable',
+    label: 'deployable',
+    color: 'var(--progress)',
+    normalize: (v) => (v ? 1 : 0),
+    format: (v) => (v == null ? '—' : v ? 'YES' : 'NO'),
+  },
 ];
 
-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;
-
+function RewardRow({ label, color, pct, formattedValue, isDash, inverted }) {
+  const barColor = inverted && pct > 0 ? 'var(--validity)' : color;
   return (
     <div className="reward-row">
       <span className="reward-label">{label}</span>
       <div className="reward-track">
         <div
           className="reward-bar"
-          style={{ width: `${pct}%`, background: color }}
+          style={{ width: `${isDash ? 0 : pct}%`, background: barColor }}
         />
       </div>
       <span className={`reward-value${isDash ? ' dim' : ''}`}>
-        {isDash ? '—' : value.toFixed(2)}
+        {formattedValue}
       </span>
     </div>
   );
 }
 
-export default function RewardPanel({ reward }) {
+export default function RewardPanel({ metrics }) {
   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}
-      />
+      {METRIC_FIELDS.map(({ key, label, color, normalize, format, inverted }) => {
+        const raw = metrics ? metrics[key] : undefined;
+        const isDash = raw === null || raw === undefined;
+        const pct = isDash ? 0 : normalize(raw) * 100;
+        return (
+          <RewardRow
+            key={key}
+            label={label}
+            color={color}
+            pct={pct}
+            formattedValue={isDash ? '—' : format(raw)}
+            isDash={isDash}
+            inverted={!!inverted}
+          />
+        );
+      })}
     </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>

training/demo.py

@@ -0,0 +1,251 @@
+"""
+training/demo.py — Run 8 zero-shot rollouts and stream them to the grid viewer.
+
+Usage:
+    cd /path/to/optigami
+    python -m training.demo
+
+Then open: http://localhost:9001/viewer/training.html
+
+Each of the 8 "strategies" is a heuristic that mimics what a pretrained LLM might
+produce for different tasks — varying from near-optimal to poor.  This exercises
+the full broadcast → grid viewer pipeline without requiring an LLM API key.
+"""
+from __future__ import annotations
+
+import asyncio
+import time
+import uuid
+from typing import Callable
+
+import uvicorn
+
+from server.app import app, broadcast
+from training.runner import run_batch
+
+
+# ── 8 zero-shot heuristic strategies ──────────────────────────────────────────
+# Each is a callable: paper_state (dict) → fold_dict
+# These represent the range of strategies a pretrained LLM might generate.
+
+def strategy_perfect_half(paper_state: dict) -> dict:
+    """Valley fold exactly at horizontal midline — optimal for half_fold."""
+    return {"type": "valley", "line": {"start": [0.0, 0.5], "end": [1.0, 0.5]}, "angle": 180.0}
+
+
+def strategy_slight_offset(paper_state: dict) -> dict:
+    """Valley fold slightly off-center — almost optimal."""
+    return {"type": "valley", "line": {"start": [0.0, 0.48], "end": [1.0, 0.48]}, "angle": 180.0}
+
+
+def strategy_thirds(paper_state: dict) -> dict:
+    """Letter fold at one-third — wrong for half_fold, generates interesting geometry."""
+    fold_count = paper_state.get("fold_count", 0)
+    positions = [0.333, 0.667]
+    if fold_count >= len(positions):
+        return {"type": "stop", "line": {"start": [0.0, 0.5], "end": [1.0, 0.5]}, "angle": 0.0}
+    return {
+        "type": "valley" if fold_count == 0 else "mountain",
+        "line": {"start": [0.0, positions[fold_count]], "end": [1.0, positions[fold_count]]},
+        "angle": 180.0,
+    }
+
+
+def strategy_vertical(paper_state: dict) -> dict:
+    """Vertical fold — gets compactness but in wrong dimension for target_box."""
+    return {"type": "valley", "line": {"start": [0.5, 0.0], "end": [0.5, 1.0]}, "angle": 180.0}
+
+
+def strategy_mountain(paper_state: dict) -> dict:
+    """Mountain fold at midline — same geometry, different assignment."""
+    return {"type": "mountain", "line": {"start": [0.0, 0.5], "end": [1.0, 0.5]}, "angle": 180.0}
+
+
+def strategy_accordion(paper_state: dict) -> dict:
+    """Accordion 3-fold — overfolds, achieves high compactness but more folds."""
+    fold_count = paper_state.get("fold_count", 0)
+    positions = [0.25, 0.5, 0.75]
+    assignments = ["valley", "mountain", "valley"]
+    if fold_count >= len(positions):
+        return {"type": "stop", "line": {"start": [0.0, 0.5], "end": [1.0, 0.5]}, "angle": 0.0}
+    return {
+        "type": assignments[fold_count],
+        "line": {"start": [0.0, positions[fold_count]], "end": [1.0, positions[fold_count]]},
+        "angle": 180.0,
+    }
+
+
+def strategy_diagonal(paper_state: dict) -> dict:
+    """Diagonal fold — achieves compactness but irregular bounding box."""
+    return {"type": "valley", "line": {"start": [0.0, 0.0], "end": [1.0, 1.0]}, "angle": 180.0}
+
+
+def strategy_quarter(paper_state: dict) -> dict:
+    """Two perpendicular folds — 4x compactness for quarter_fold task."""
+    fold_count = paper_state.get("fold_count", 0)
+    if fold_count == 0:
+        return {"type": "valley", "line": {"start": [0.0, 0.5], "end": [1.0, 0.5]}, "angle": 180.0}
+    if fold_count == 1:
+        return {"type": "valley", "line": {"start": [0.5, 0.0], "end": [0.5, 1.0]}, "angle": 180.0}
+    return {"type": "stop", "line": {"start": [0.0, 0.5], "end": [1.0, 0.5]}, "angle": 0.0}
+
+
+STRATEGIES: list[tuple[str, Callable]] = [
+    ("perfect_half",  strategy_perfect_half),
+    ("slight_offset", strategy_slight_offset),
+    ("thirds_fold",   strategy_thirds),
+    ("vertical_fold", strategy_vertical),
+    ("mountain_fold", strategy_mountain),
+    ("accordion_3",   strategy_accordion),
+    ("diagonal",      strategy_diagonal),
+    ("quarter_fold",  strategy_quarter),
+]
+
+
+# ── Demo runner ────────────────────────────────────────────────────────────────
+
+async def run_demo(task_name: str = "half_fold", delay_s: float = 0.5) -> None:
+    """Wait for server to be ready, then fire 8 episodes."""
+    # Give uvicorn time to bind and call startup hook (sets broadcast._loop)
+    await asyncio.sleep(1.5)
+
+    batch_id = 1
+    names, fns = zip(*STRATEGIES)
+    ep_ids = [f"ep_{name}" for name in names]
+
+    print(f"\n[demo] Starting batch {batch_id} — task: {task_name}")
+    print(f"[demo] Open http://localhost:9001/viewer/training.html\n")
+
+    # Signal grid to clear and show G=8
+    await broadcast.start_batch(batch_id, len(fns))
+
+    await asyncio.sleep(delay_s)
+
+    # Run all 8 episodes in the thread pool; broadcast_fn fires into this loop
+    results = await asyncio.gather(*[
+        asyncio.to_thread(
+            _run_one,
+            fn,
+            task_name,
+            ep_id,
+            broadcast.publish,
+        )
+        for fn, ep_id in zip(fns, ep_ids)
+    ])
+
+    scores = [r["score"] for r in results]
+    best_idx = max(range(len(scores)), key=lambda i: scores[i])
+
+    await broadcast.finish_batch(batch_id, scores, best_episode_id=ep_ids[best_idx])
+
+    print("\n[demo] Results:")
+    for name, result in zip(names, results):
+        print(f"  {name:20s}  score={result['score']:+.2f}  status={result['status']}")
+    print(f"\n[demo] Best: {names[best_idx]} (score={scores[best_idx]:+.2f})")
+    print("\n[demo] Grid viewer running. Press Ctrl+C to stop.\n")
+
+
+def _run_one(
+    strategy_fn: Callable,
+    task_name: str,
+    ep_id: str,
+    broadcast_fn: Callable,
+) -> dict:
+    """Thin wrapper: adds a small sleep between steps so the viewer can animate."""
+    from server.models import OrigamiAction
+    from server.origami_environment import OrigamiEnvironment
+
+    env = OrigamiEnvironment()
+    obs = env.reset(task_name=task_name)
+
+    broadcast_fn(ep_id, {
+        "type": "episode_update",
+        "episode_id": ep_id,
+        "task_name": task_name,
+        "step": 0,
+        "observation": _obs_dict(obs),
+    })
+
+    max_steps = env._task.get("max_folds", 10) if env._task else 10
+    status = "done"
+
+    for step_idx in range(max_steps):
+        if obs.done:
+            break
+
+        time.sleep(0.3)  # pace so the viewer can animate each step
+
+        fold_dict = strategy_fn(obs.paper_state)
+
+        if fold_dict.get("type") == "stop":
+            break
+
+        action = OrigamiAction(
+            fold_type=fold_dict["type"],
+            fold_line=fold_dict["line"],
+            fold_angle=float(fold_dict.get("angle", 180.0)),
+        )
+        obs = env.step(action)
+
+        broadcast_fn(ep_id, {
+            "type": "episode_update",
+            "episode_id": ep_id,
+            "task_name": task_name,
+            "step": step_idx + 1,
+            "observation": _obs_dict(obs),
+        })
+
+        if obs.done:
+            break
+    else:
+        status = "timeout"
+
+    score = obs.reward if obs.reward is not None else env._total_reward or 0.0
+
+    broadcast_fn(ep_id, {
+        "type": "episode_done",
+        "episode_id": ep_id,
+        "status": status,
+        "score": float(score),
+        "final_metrics": obs.metrics,
+    })
+
+    return {
+        "episode_id": ep_id,
+        "score": float(score),
+        "final_metrics": obs.metrics,
+        "status": status,
+    }
+
+
+def _obs_dict(obs) -> dict:
+    try:
+        return obs.model_dump()
+    except AttributeError:
+        return {
+            "paper_state": getattr(obs, "paper_state", {}),
+            "metrics": getattr(obs, "metrics", {}),
+            "fold_history": getattr(obs, "fold_history", []),
+            "done": getattr(obs, "done", False),
+            "reward": getattr(obs, "reward", None),
+        }
+
+
+# ── Entry point ────────────────────────────────────────────────────────────────
+
+async def _main() -> None:
+    config = uvicorn.Config(app, host="0.0.0.0", port=9001, log_level="warning")
+    server = uvicorn.Server(config)
+
+    # Run demo concurrently with the uvicorn server
+    await asyncio.gather(
+        server.serve(),
+        run_demo(task_name="half_fold"),
+    )
+
+
+if __name__ == "__main__":
+    try:
+        asyncio.run(_main())
+    except KeyboardInterrupt:
+        print("\n[demo] Stopped.")

training/demo_llm.py

@@ -0,0 +1,232 @@
+"""
+training/demo_llm.py — 8 rollouts using Claude as the zero-shot fold strategist.
+
+Usage:
+    cd /path/to/optigami
+    ANTHROPIC_API_KEY=sk-... python -m training.demo_llm
+
+Each of the 8 episodes calls Claude (claude-haiku-4-5) once per fold step.
+Claude sees the current paper_state metrics and decides the next fold.
+"""
+from __future__ import annotations
+
+import asyncio
+import json
+import os
+import re
+import time
+from typing import Any
+
+import anthropic
+import uvicorn
+
+from server.app import app, broadcast
+from server.models import OrigamiAction
+from server.origami_environment import OrigamiEnvironment
+from server.tasks import get_task_by_name
+
+
+TASK_NAME = "half_fold"
+NUM_EPISODES = 8
+MODEL = "claude-haiku-4-5-20251001"
+
+
+# ── LLM strategy factory ───────────────────────────────────────────────────────
+
+def make_llm_strategy(client: anthropic.Anthropic, task: dict, episode_num: int):
+    """Return a strategy_fn for one episode. Each episode gets its own call history."""
+    history: list[dict[str, Any]] = []
+
+    def strategy(paper_state: dict) -> dict:
+        fold_count = paper_state.get("fold_count", 0)
+        compactness = paper_state.get("compactness", 0)
+        bb = paper_state.get("bounding_box", [1, 1, 0])
+        target_box = task.get("target_box", [1, 0.5, 0.02])
+        max_folds = task.get("max_folds", 3)
+
+        user_msg = f"""You are folding a {task['width']}x{task['height']} sheet of {task['material']}.
+Task: {task['description']}
+Target box to fit inside: {target_box}
+Max folds allowed: {max_folds}
+
+Current state (fold {fold_count}/{max_folds}):
+  compactness: {compactness:.3f}  (1.0 = fully packed, 0.0 = flat)
+  bounding_box: [{bb[0]:.3f}, {bb[1]:.3f}, {bb[2]:.4f}]
+  fits_target_box: {paper_state.get('fits_target_box', False)}
+
+Choose the next fold. Respond with ONLY valid JSON, no other text:
+{{
+  "type": "valley" or "mountain" or "stop",
+  "line": {{"start": [x, y], "end": [x, y]}},
+  "angle": 180
+}}
+
+Coordinates are normalized 0-1. Use "stop" if done."""
+
+        history.append({"role": "user", "content": user_msg})
+
+        response = client.messages.create(
+            model=MODEL,
+            max_tokens=120,
+            messages=history,
+        )
+        reply = response.content[0].text.strip()
+        history.append({"role": "assistant", "content": reply})
+
+        # Extract JSON — handle markdown code blocks
+        match = re.search(r'\{[^{}]+\}', reply, re.DOTALL)
+        if not match:
+            return {"type": "stop", "line": {"start": [0, 0.5], "end": [1, 0.5]}, "angle": 0.0}
+
+        fold_dict = json.loads(match.group())
+        # Normalize: ensure required keys
+        fold_dict.setdefault("type", "valley")
+        fold_dict.setdefault("line", {"start": [0.0, 0.5], "end": [1.0, 0.5]})
+        fold_dict.setdefault("angle", 180.0)
+        return fold_dict
+
+    return strategy
+
+
+# ── Episode runner ─────────────────────────────────────────────────────────────
+
+def run_episode_llm(
+    strategy_fn,
+    task_name: str,
+    ep_id: str,
+    broadcast_fn,
+) -> dict:
+    env = OrigamiEnvironment()
+    obs = env.reset(task_name=task_name)
+    task = env._task or {}
+
+    broadcast_fn(ep_id, {
+        "type": "episode_update",
+        "episode_id": ep_id,
+        "task_name": task_name,
+        "step": 0,
+        "observation": _obs_dict(obs),
+    })
+
+    max_steps = task.get("max_folds", 5)
+    status = "done"
+
+    for step_idx in range(max_steps):
+        if obs.done:
+            break
+
+        # Build a flat paper_state dict for the LLM (add metrics inline)
+        ps = dict(obs.paper_state)
+        ps.update(obs.metrics)  # compactness, fits_target_box, etc.
+        ps["fold_count"] = step_idx
+
+        try:
+            fold_dict = strategy_fn(ps)
+        except Exception as exc:
+            broadcast_fn(ep_id, {
+                "type": "episode_done", "episode_id": ep_id,
+                "status": "error", "score": 0.0,
+                "final_metrics": obs.metrics, "error": str(exc),
+            })
+            return {"episode_id": ep_id, "score": 0.0, "status": "error"}
+
+        if fold_dict.get("type") == "stop":
+            break
+
+        time.sleep(0.4)  # pace for viewer animation
+
+        action = OrigamiAction(
+            fold_type=fold_dict["type"],
+            fold_line=fold_dict["line"],
+            fold_angle=float(fold_dict.get("angle", 180.0)),
+        )
+        obs = env.step(action)
+
+        broadcast_fn(ep_id, {
+            "type": "episode_update",
+            "episode_id": ep_id,
+            "task_name": task_name,
+            "step": step_idx + 1,
+            "observation": _obs_dict(obs),
+        })
+
+        if obs.done:
+            break
+    else:
+        status = "timeout"
+
+    score = obs.reward if obs.reward is not None else (env._total_reward or 0.0)
+    broadcast_fn(ep_id, {
+        "type": "episode_done",
+        "episode_id": ep_id,
+        "status": status,
+        "score": float(score),
+        "final_metrics": obs.metrics,
+    })
+
+    return {"episode_id": ep_id, "score": float(score), "status": status}
+
+
+def _obs_dict(obs) -> dict:
+    try:
+        return obs.model_dump()
+    except AttributeError:
+        return {
+            "paper_state": getattr(obs, "paper_state", {}),
+            "metrics": getattr(obs, "metrics", {}),
+            "fold_history": getattr(obs, "fold_history", []),
+            "done": getattr(obs, "done", False),
+            "reward": getattr(obs, "reward", None),
+        }
+
+
+# ── Main ──────────────────────────────────────────────────────────────────────
+
+async def run_demo() -> None:
+    api_key = os.environ.get("ANTHROPIC_API_KEY")
+    if not api_key:
+        raise RuntimeError("Set ANTHROPIC_API_KEY environment variable")
+
+    client = anthropic.Anthropic(api_key=api_key)
+    task = get_task_by_name(TASK_NAME)
+
+    await asyncio.sleep(1.5)  # wait for server startup
+
+    print(f"\n[llm-demo] Model: {MODEL}")
+    print(f"[llm-demo] Task: {TASK_NAME} — {task['description']}")
+    print(f"[llm-demo] Open: http://localhost:9001/viewer/training.html\n")
+
+    await broadcast.start_batch(1, NUM_EPISODES)
+
+    ep_ids = [f"ep_{i:02d}" for i in range(NUM_EPISODES)]
+    strategies = [make_llm_strategy(client, task, i) for i in range(NUM_EPISODES)]
+
+    # Run all episodes concurrently (each makes its own Claude API calls)
+    results = await asyncio.gather(*[
+        asyncio.to_thread(run_episode_llm, fn, TASK_NAME, ep_id, broadcast.publish)
+        for fn, ep_id in zip(strategies, ep_ids)
+    ])
+
+    scores = [r["score"] for r in results]
+    best_idx = max(range(len(scores)), key=lambda i: scores[i])
+
+    await broadcast.finish_batch(1, scores, best_episode_id=ep_ids[best_idx])
+
+    print("\n[llm-demo] Results:")
+    for i, result in enumerate(results):
+        print(f"  ep_{i:02d}  score={result['score']:+.2f}  status={result['status']}")
+    print(f"\n[llm-demo] Best: ep_{best_idx:02d} (score={scores[best_idx]:+.2f})")
+    print("\n[llm-demo] Press Ctrl+C to stop.\n")
+
+
+async def _main() -> None:
+    config = uvicorn.Config(app, host="0.0.0.0", port=9001, log_level="warning")
+    server = uvicorn.Server(config)
+    await asyncio.gather(server.serve(), run_demo())
+
+
+if __name__ == "__main__":
+    try:
+        asyncio.run(_main())
+    except KeyboardInterrupt:
+        print("\n[llm-demo] Stopped.")

training/runner.py

@@ -0,0 +1,191 @@
+"""
+TrainingRunner — parallel episode executor for GRPO training.
+
+Each episode runs in a ThreadPoolExecutor thread.
+After every env.step(), observations are pushed to the broadcast server (fire-and-forget).
+"""
+from __future__ import annotations
+
+import uuid
+from concurrent.futures import ThreadPoolExecutor, as_completed
+from typing import Any, Callable, Optional
+
+from server.models import OrigamiAction
+from server.origami_environment import OrigamiEnvironment
+
+
+BroadcastFn = Callable[[str, dict], None]
+
+
+def run_episode(
+    strategy_fn: Callable[[dict], dict],
+    task_name: str,
+    ep_id: Optional[str] = None,
+    broadcast_fn: Optional[BroadcastFn] = None,
+    max_steps: Optional[int] = None,
+) -> dict:
+    """Run a single origami episode with a given strategy function.
+
+    Args:
+        strategy_fn: Callable that receives paper_state dict and returns a fold dict:
+                     {"type": "valley"|"mountain"|"pleat"|"crimp"|"stop",
+                      "line": {"start": [x, y], "end": [x, y]},
+                      "angle": 180.0}
+        task_name: Name of the task (from server/tasks.py)
+        ep_id: Episode identifier for broadcast; auto-generated if None
+        broadcast_fn: Optional callback(ep_id, data) for live streaming
+        max_steps: Override task's max_folds if provided
+
+    Returns:
+        dict with keys: episode_id, score, final_metrics, fold_history, status
+    """
+    ep_id = ep_id or str(uuid.uuid4())[:8]
+    env = OrigamiEnvironment()
+
+    obs = env.reset(task_name=task_name)
+
+    if broadcast_fn:
+        broadcast_fn(ep_id, {
+            "type": "episode_update",
+            "episode_id": ep_id,
+            "task_name": task_name,
+            "step": 0,
+            "observation": _obs_to_dict(obs),
+        })
+
+    step_limit = max_steps or env._task.get("max_folds", 20) if env._task else 20
+    status = "done"
+
+    for step_idx in range(step_limit):
+        if obs.done:
+            break
+
+        # Strategy generates a fold dict
+        try:
+            fold_dict = strategy_fn(obs.paper_state)
+        except Exception as exc:
+            status = "error"
+            if broadcast_fn:
+                broadcast_fn(ep_id, {
+                    "type": "episode_done",
+                    "episode_id": ep_id,
+                    "status": "error",
+                    "score": obs.reward or 0.0,
+                    "final_metrics": obs.metrics,
+                    "error": str(exc),
+                })
+            break
+
+        fold_type = fold_dict.get("type", "valley")
+        fold_line = fold_dict.get("line", {"start": [0, 0.5], "end": [1, 0.5]})
+        fold_angle = float(fold_dict.get("angle", 180.0))
+
+        action = OrigamiAction(
+            fold_type=fold_type,
+            fold_line=fold_line,
+            fold_angle=fold_angle,
+        )
+        obs = env.step(action)
+
+        if broadcast_fn:
+            broadcast_fn(ep_id, {
+                "type": "episode_update",
+                "episode_id": ep_id,
+                "task_name": task_name,
+                "step": step_idx + 1,
+                "observation": _obs_to_dict(obs),
+            })
+
+        if obs.done:
+            break
+    else:
+        status = "timeout"
+
+    score = obs.reward if obs.reward is not None else (env._total_reward or 0.0)
+
+    if broadcast_fn:
+        broadcast_fn(ep_id, {
+            "type": "episode_done",
+            "episode_id": ep_id,
+            "status": status,
+            "score": float(score),
+            "final_metrics": obs.metrics,
+        })
+
+    return {
+        "episode_id": ep_id,
+        "score": float(score),
+        "final_metrics": obs.metrics,
+        "fold_history": obs.fold_history,
+        "status": status,
+    }
+
+
+def run_batch(
+    strategy_fns: list[Callable[[dict], dict]],
+    task_name: str,
+    broadcast_fn: Optional[BroadcastFn] = None,
+    batch_id: Optional[int] = None,
+    max_workers: int = 8,
+) -> list[dict]:
+    """Run G episodes in parallel with a ThreadPoolExecutor.
+
+    Args:
+        strategy_fns: List of G strategy callables (one per completion)
+        task_name: Task to use for all episodes
+        broadcast_fn: Optional broadcast callback, called after each step
+        batch_id: Batch identifier for broadcast
+        max_workers: Max parallel threads (bounded by G)
+
+    Returns:
+        List of episode result dicts, in same order as strategy_fns
+    """
+    n = len(strategy_fns)
+    ep_ids = [f"ep_{(batch_id or 0):04d}_{i:02d}" for i in range(n)]
+    workers = min(max_workers, n)
+
+    results: list[dict] = [{}] * n
+
+    with ThreadPoolExecutor(max_workers=workers) as pool:
+        futures = {
+            pool.submit(
+                run_episode,
+                fn,
+                task_name,
+                ep_ids[i],
+                broadcast_fn,
+            ): i
+            for i, fn in enumerate(strategy_fns)
+        }
+
+        for future in as_completed(futures):
+            idx = futures[future]
+            try:
+                results[idx] = future.result()
+            except Exception as exc:
+                results[idx] = {
+                    "episode_id": ep_ids[idx],
+                    "score": 0.0,
+                    "final_metrics": {},
+                    "fold_history": [],
+                    "status": "error",
+                    "error": str(exc),
+                }
+
+    return results
+
+
+def _obs_to_dict(obs) -> dict:
+    """Convert OrigamiObservation to a JSON-serializable dict."""
+    try:
+        return obs.model_dump()
+    except AttributeError:
+        return {
+            "task": obs.task if hasattr(obs, "task") else {},
+            "paper_state": obs.paper_state if hasattr(obs, "paper_state") else {},
+            "metrics": obs.metrics if hasattr(obs, "metrics") else {},
+            "fold_history": obs.fold_history if hasattr(obs, "fold_history") else [],
+            "done": obs.done if hasattr(obs, "done") else False,
+            "reward": obs.reward if hasattr(obs, "reward") else None,
+            "error": obs.error if hasattr(obs, "error") else None,
+        }

viewer/training.html

@@ -0,0 +1,761 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>OPTIGAMI — TRAINING GRID VIEWER</title>
+<style>
+  :root {
+    --bg: #0d0d1a;
+    --panel: #13131f;
+    --border: #1e1e2e;
+    --text: #e2e8f0;
+    --dim: #4a5568;
+    --cyan: #38bdf8;
+    --amber: #f59e0b;
+    --green: #22c55e;
+    --red: #ef4444;
+    --font: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  }
+
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font);
+    font-size: 11px;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Header */
+  header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 10px 16px;
+    background: var(--panel);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+
+  .logo {
+    font-size: 14px;
+    letter-spacing: 2px;
+    font-weight: 700;
+  }
+
+  .logo .accent { color: var(--cyan); }
+
+  .header-sep { width: 1px; height: 20px; background: var(--border); }
+
+  .badge {
+    padding: 2px 8px;
+    border-radius: 3px;
+    font-size: 10px;
+    letter-spacing: 1px;
+    font-weight: 600;
+  }
+
+  .badge-training { background: rgba(56,189,248,0.15); color: var(--cyan); border: 1px solid rgba(56,189,248,0.3); }
+  .badge-idle { background: rgba(74,85,104,0.2); color: var(--dim); border: 1px solid var(--border); }
+  .badge-done { background: rgba(34,197,94,0.15); color: var(--green); border: 1px solid rgba(34,197,94,0.3); }
+
+  .stat { display: flex; align-items: center; gap: 6px; color: var(--dim); }
+  .stat span { color: var(--text); }
+
+  .spacer { flex: 1; }
+
+  .ws-dot {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: var(--dim);
+    transition: background 0.3s;
+  }
+  .ws-dot.connected { background: var(--green); box-shadow: 0 0 6px var(--green); }
+  .ws-dot.error { background: var(--red); }
+
+  /* Main grid area */
+  main {
+    flex: 1;
+    padding: 16px;
+    overflow: auto;
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+    gap: 12px;
+    color: var(--dim);
+    font-size: 12px;
+    letter-spacing: 1px;
+  }
+
+  .empty-state .pulse {
+    width: 12px; height: 12px; border-radius: 50%;
+    background: var(--cyan);
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 0.2; transform: scale(0.8); }
+    50% { opacity: 1; transform: scale(1.2); }
+  }
+
+  /* Episode Grid */
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 12px;
+  }
+
+  /* Episode Cell */
+  .ep-cell {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: border-color 0.2s, transform 0.15s, opacity 0.3s;
+    animation: fadeIn 0.4s ease;
+    position: relative;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .ep-cell:hover { border-color: var(--cyan); transform: translateY(-2px); }
+  .ep-cell.running { border-color: rgba(56,189,248,0.5); }
+  .ep-cell.done-good { border-color: rgba(34,197,94,0.5); }
+  .ep-cell.done-bad { border-color: rgba(239,68,68,0.4); }
+
+  /* Fullscreen */
+  .ep-cell.fullscreen {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    border-radius: 0;
+    cursor: default;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    animation: none;
+    transform: none;
+  }
+
+  .ep-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .ep-id { font-size: 10px; color: var(--dim); letter-spacing: 1px; }
+
+  .status-badge {
+    padding: 2px 6px;
+    border-radius: 2px;
+    font-size: 9px;
+    letter-spacing: 1px;
+    font-weight: 700;
+  }
+
+  .status-running { background: rgba(56,189,248,0.2); color: var(--cyan); }
+  .status-done { background: rgba(34,197,94,0.2); color: var(--green); }
+  .status-error { background: rgba(239,68,68,0.2); color: var(--red); }
+  .status-timeout { background: rgba(245,158,11,0.2); color: var(--amber); }
+
+  .ep-canvas-wrap {
+    background: #080810;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+    overflow: hidden;
+  }
+
+  .ep-cell.fullscreen .ep-canvas-wrap { height: 100%; }
+
+  .ep-canvas { display: block; }
+
+  .ep-footer {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 10px;
+    border-top: 1px solid var(--border);
+    color: var(--dim);
+    font-size: 10px;
+  }
+
+  .ep-metric { display: flex; flex-direction: column; align-items: center; gap: 2px; }
+  .ep-metric .m-label { font-size: 9px; color: var(--dim); }
+  .ep-metric .m-val { font-size: 11px; color: var(--text); font-weight: 600; }
+  .ep-metric .m-val.good { color: var(--green); }
+  .ep-metric .m-val.bad { color: var(--red); }
+
+  .ep-sep { width: 1px; height: 20px; background: var(--border); }
+
+  /* Fullscreen extras */
+  .ep-detail { display: none; }
+  .ep-cell.fullscreen .ep-detail {
+    display: block;
+    padding: 12px;
+    overflow: auto;
+    max-height: 200px;
+    border-top: 1px solid var(--border);
+  }
+
+  .back-btn {
+    display: none;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    padding: 4px 10px;
+    background: var(--border);
+    color: var(--text);
+    border: 1px solid var(--dim);
+    border-radius: 3px;
+    cursor: pointer;
+    font-family: var(--font);
+    font-size: 10px;
+    letter-spacing: 1px;
+  }
+
+  .ep-cell.fullscreen .back-btn { display: block; }
+  .back-btn:hover { background: var(--cyan); color: var(--bg); }
+
+  /* Fold history in fullscreen */
+  .fold-history { display: flex; flex-direction: column; gap: 4px; }
+  .fold-entry {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    color: var(--dim);
+    font-size: 10px;
+  }
+  .fold-entry .step-num { color: var(--cyan); min-width: 24px; }
+  .fold-type-badge {
+    padding: 1px 5px;
+    border-radius: 2px;
+    font-size: 9px;
+    font-weight: 700;
+  }
+  .fold-type-valley { background: rgba(56,189,248,0.2); color: var(--cyan); }
+  .fold-type-mountain { background: rgba(245,158,11,0.2); color: var(--amber); }
+</style>
+</head>
+<body>
+
+<header>
+  <div class="logo">OPTI<span class="accent">GAMI</span></div>
+  <div class="header-sep"></div>
+  <div id="trainBadge" class="badge badge-idle">IDLE</div>
+  <div class="header-sep"></div>
+  <div class="stat">BATCH <span id="batchNum">&#8212;</span></div>
+  <div class="stat">EPISODES <span id="epCount">0</span></div>
+  <div class="stat">AVG REWARD <span id="avgReward">&#8212;</span></div>
+  <div class="spacer"></div>
+  <div class="stat"><div id="wsDot" class="ws-dot"></div> WS</div>
+</header>
+
+<main id="main">
+  <div class="empty-state" id="emptyState">
+    <div class="pulse"></div>
+    WAITING FOR TRAINING...
+  </div>
+  <div class="grid" id="grid" style="display:none"></div>
+</main>
+
+<script>
+const state = {
+  batchId: null,
+  episodes: {},
+  fullscreenId: null,
+};
+
+const renderers = {};
+
+function connectWS() {
+  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const url = proto + '//' + location.host + '/ws/training';
+  const ws = new WebSocket(url);
+  const dot = document.getElementById('wsDot');
+
+  ws.onopen = function() { dot.className = 'ws-dot connected'; };
+  ws.onclose = function() {
+    dot.className = 'ws-dot error';
+    setTimeout(connectWS, 3000);
+  };
+  ws.onerror = function() { dot.className = 'ws-dot error'; };
+
+  ws.onmessage = function(e) {
+    try { handleMessage(JSON.parse(e.data)); }
+    catch (err) { console.error('WS parse error', err); }
+  };
+}
+
+function handleMessage(msg) {
+  switch (msg.type) {
+    case 'registry':
+      state.batchId = msg.batch_id;
+      state.episodes = {};
+      Object.entries(msg.episodes || {}).forEach(function(kv) {
+        state.episodes[kv[0]] = kv[1];
+      });
+      rebuildGrid();
+      updateHeader();
+      break;
+
+    case 'batch_start':
+      state.batchId = msg.batch_id;
+      state.episodes = {};
+      setTrainingBadge('TRAINING', 'badge-training');
+      rebuildGrid();
+      updateHeader();
+      break;
+
+    case 'batch_done':
+      setTrainingBadge('BATCH DONE', 'badge-done');
+      document.getElementById('avgReward').textContent =
+        msg.avg_score != null ? msg.avg_score.toFixed(2) : '\u2014';
+      break;
+
+    case 'training_done':
+      setTrainingBadge('DONE', 'badge-done');
+      break;
+
+    case 'episode_update': {
+      const id = msg.episode_id;
+      if (!state.episodes[id]) {
+        state.episodes[id] = { status: 'running', task: msg.task_name, step: 0, metrics: {}, fold_history: [] };
+        addEpisodeCell(id);
+      }
+      const ep = state.episodes[id];
+      ep.step = msg.step;
+      ep.status = 'running';
+      if (msg.observation) {
+        ep.metrics = msg.observation.metrics || {};
+        ep.fold_history = msg.observation.fold_history || [];
+        ep.paper_state = msg.observation.paper_state || {};
+      }
+      updateEpisodeCell(id);
+      if (msg.observation && msg.observation.paper_state) {
+        renderStep(id, msg.observation.paper_state);
+      }
+      break;
+    }
+
+    case 'episode_done': {
+      const id = msg.episode_id;
+      if (!state.episodes[id]) state.episodes[id] = {};
+      const ep = state.episodes[id];
+      ep.status = msg.status || 'done';
+      ep.score = msg.score;
+      ep.final_metrics = msg.final_metrics;
+      updateEpisodeCell(id);
+      break;
+    }
+  }
+
+  document.getElementById('epCount').textContent = Object.keys(state.episodes).length;
+}
+
+function rebuildGrid() {
+  const grid = document.getElementById('grid');
+  const empty = document.getElementById('emptyState');
+
+  Object.values(renderers).forEach(function(r) { if (r.raf) cancelAnimationFrame(r.raf); });
+  Object.keys(renderers).forEach(function(k) { delete renderers[k]; });
+
+  grid.textContent = '';
+
+  if (Object.keys(state.episodes).length === 0) {
+    empty.style.display = 'flex';
+    grid.style.display = 'none';
+    return;
+  }
+
+  empty.style.display = 'none';
+  grid.style.display = 'grid';
+
+  Object.keys(state.episodes).forEach(function(id) { addEpisodeCell(id); });
+}
+
+function makeEl(tag, props) {
+  const el = document.createElement(tag);
+  if (props) {
+    if (props.className) el.className = props.className;
+    if (props.id) el.id = props.id;
+    if (props.style) Object.assign(el.style, props.style);
+    if (props.textContent !== undefined) el.textContent = props.textContent;
+    if (props.dataset) Object.assign(el.dataset, props.dataset);
+  }
+  return el;
+}
+
+function addEpisodeCell(id) {
+  const grid = document.getElementById('grid');
+  const empty = document.getElementById('emptyState');
+
+  empty.style.display = 'none';
+  grid.style.display = 'grid';
+
+  if (document.getElementById('cell-' + id)) return;
+
+  const ep = state.episodes[id];
+
+  const cell = makeEl('div', { className: 'ep-cell running', id: 'cell-' + id, dataset: { epId: id } });
+
+  // Header
+  const header = makeEl('div', { className: 'ep-header' });
+  const epIdEl = makeEl('span', { className: 'ep-id', textContent: id });
+  const badgeEl = makeEl('span', { className: 'status-badge status-running', id: 'badge-' + id, textContent: 'RUNNING' });
+  const taskEl = makeEl('span', { id: 'task-' + id, textContent: (ep.task || '').toUpperCase() });
+  taskEl.style.marginLeft = 'auto';
+  taskEl.style.color = 'var(--dim)';
+  taskEl.style.fontSize = '9px';
+  header.appendChild(epIdEl);
+  header.appendChild(badgeEl);
+  header.appendChild(taskEl);
+  cell.appendChild(header);
+
+  // Canvas wrap
+  const canvasWrap = makeEl('div', { className: 'ep-canvas-wrap' });
+  const canvas = makeEl('canvas', { className: 'ep-canvas', id: 'canvas-' + id });
+  canvas.width = 240;
+  canvas.height = 180;
+  canvasWrap.appendChild(canvas);
+  cell.appendChild(canvasWrap);
+
+  // Footer
+  const footer = makeEl('div', { className: 'ep-footer' });
+
+  function makeMetric(labelText, valId) {
+    const metric = makeEl('div', { className: 'ep-metric' });
+    const label = makeEl('span', { className: 'm-label', textContent: labelText });
+    const val = makeEl('span', { className: 'm-val', id: valId, textContent: '\u2014' });
+    metric.appendChild(label);
+    metric.appendChild(val);
+    return metric;
+  }
+
+  const stepMetric = makeMetric('STEP', 'step-' + id);
+  document.getElementById('step-' + id) || stepMetric.querySelector('[id]');
+  const stepValEl = stepMetric.querySelector('.m-val');
+  if (stepValEl) stepValEl.textContent = '0';
+
+  footer.appendChild(stepMetric);
+  footer.appendChild(makeEl('div', { className: 'ep-sep' }));
+  footer.appendChild(makeMetric('COMPACT', 'compact-' + id));
+  footer.appendChild(makeEl('div', { className: 'ep-sep' }));
+  footer.appendChild(makeMetric('REWARD', 'reward-' + id));
+  footer.appendChild(makeEl('div', { className: 'ep-sep' }));
+  footer.appendChild(makeMetric('VALID', 'valid-' + id));
+  cell.appendChild(footer);
+
+  // Detail panel
+  const detail = makeEl('div', { className: 'ep-detail', id: 'detail-' + id });
+  const foldsContainer = makeEl('div', { className: 'fold-history', id: 'folds-' + id });
+  detail.appendChild(foldsContainer);
+  cell.appendChild(detail);
+
+  // Back button
+  const backBtn = makeEl('button', { className: 'back-btn', textContent: '\u2190 GRID' });
+  backBtn.addEventListener('click', function(e) { exitFullscreen(e); });
+  cell.appendChild(backBtn);
+
+  cell.addEventListener('click', function(e) {
+    if (e.target === backBtn) return;
+    enterFullscreen(id);
+  });
+
+  grid.appendChild(cell);
+
+  renderers[id] = {
+    canvas: canvas,
+    ctx: canvas.getContext('2d'),
+    lastVerts: null,
+    lastFaces: null,
+    lastStrain: null,
+    raf: null,
+  };
+
+  drawFlatSheet(id);
+  updateEpisodeCell(id);
+}
+
+function updateEpisodeCell(id) {
+  const ep = state.episodes[id];
+  if (!ep) return;
+  const cell = document.getElementById('cell-' + id);
+  if (!cell) return;
+
+  cell.className = 'ep-cell';
+  if (ep.status === 'running') {
+    cell.classList.add('running');
+  } else if (ep.status === 'done' && (ep.score || 0) > 5) {
+    cell.classList.add('done-good');
+  } else {
+    cell.classList.add('done-bad');
+  }
+  if (id === state.fullscreenId) cell.classList.add('fullscreen');
+
+  const badge = document.getElementById('badge-' + id);
+  if (badge) {
+    const cls = ep.status === 'running' ? 'status-running'
+      : ep.status === 'done' ? 'status-done'
+      : ep.status === 'error' ? 'status-error'
+      : 'status-timeout';
+    badge.className = 'status-badge ' + cls;
+    badge.textContent = ep.status.toUpperCase();
+  }
+
+  const m = ep.metrics || {};
+  const compact = m.compactness != null ? m.compactness.toFixed(2)
+    : (ep.final_metrics && ep.final_metrics.compactness != null ? ep.final_metrics.compactness.toFixed(2) : '\u2014');
+  const score = ep.score != null ? ep.score.toFixed(1) : '\u2014';
+  const valid = m.is_valid != null ? (m.is_valid ? '\u2713' : '\u2717') : '\u2014';
+
+  const stepEl = document.getElementById('step-' + id);
+  const compEl = document.getElementById('compact-' + id);
+  const rewEl = document.getElementById('reward-' + id);
+  const valEl = document.getElementById('valid-' + id);
+
+  if (stepEl) stepEl.textContent = ep.step != null ? ep.step : 0;
+  if (compEl) {
+    compEl.textContent = compact;
+    const val = parseFloat(compact);
+    compEl.className = 'm-val' + (isNaN(val) ? '' : val > 0.5 ? ' good' : val < 0.2 ? ' bad' : '');
+  }
+  if (rewEl) {
+    rewEl.textContent = score;
+    const val = parseFloat(score);
+    rewEl.className = 'm-val' + (isNaN(val) ? '' : val > 5 ? ' good' : val < 0 ? ' bad' : '');
+  }
+  if (valEl) {
+    valEl.textContent = valid;
+    valEl.className = 'm-val' + (valid === '\u2713' ? ' good' : valid === '\u2717' ? ' bad' : '');
+  }
+
+  updateFoldHistory(id);
+}
+
+function updateFoldHistory(id) {
+  const ep = state.episodes[id];
+  const container = document.getElementById('folds-' + id);
+  if (!container || !ep) return;
+  const history = ep.fold_history || [];
+
+  while (container.firstChild) container.removeChild(container.firstChild);
+
+  if (!history.length) {
+    const noFolds = makeEl('span', { textContent: 'NO FOLDS YET' });
+    noFolds.style.color = 'var(--dim)';
+    container.appendChild(noFolds);
+    return;
+  }
+
+  history.forEach(function(f, i) {
+    const type = f.type || 'valley';
+    const cls = type === 'mountain' ? 'fold-type-mountain' : 'fold-type-valley';
+    const startCoords = (f.line && f.line.start) ? f.line.start.map(function(n) { return n.toFixed(2); }).join(',') : '\u2014';
+    const endCoords = (f.line && f.line.end) ? f.line.end.map(function(n) { return n.toFixed(2); }).join(',') : '\u2014';
+
+    const entry = makeEl('div', { className: 'fold-entry' });
+
+    const stepNum = makeEl('span', { className: 'step-num', textContent: '#' + (i + 1) });
+    const typeBadge = makeEl('span', { className: 'fold-type-badge ' + cls, textContent: type.toUpperCase() });
+    const coords = makeEl('span', { textContent: '[' + startCoords + ']\u2192[' + endCoords + ']' });
+
+    entry.appendChild(stepNum);
+    entry.appendChild(typeBadge);
+    entry.appendChild(coords);
+    container.appendChild(entry);
+  });
+}
+
+function enterFullscreen(id) {
+  // Navigate to the full React UI with this episode loaded
+  window.location.href = `/?ep=${encodeURIComponent(id)}`;
+  return;
+  if (state.fullscreenId === id) return;
+  if (state.fullscreenId) exitFullscreen();
+  state.fullscreenId = id;
+  const cell = document.getElementById('cell-' + id);
+  if (cell) {
+    cell.classList.add('fullscreen');
+    const r = renderers[id];
+    if (r) {
+      r.canvas.width = Math.min(window.innerWidth * 0.7, 800);
+      r.canvas.height = Math.min(window.innerHeight * 0.6, 600);
+      if (r.lastVerts && r.lastFaces) {
+        drawMesh(id, r.lastVerts, r.lastFaces, r.lastStrain);
+      }
+    }
+    updateFoldHistory(id);
+  }
+}
+
+function exitFullscreen(e) {
+  if (e) e.stopPropagation();
+  if (!state.fullscreenId) return;
+  const cell = document.getElementById('cell-' + state.fullscreenId);
+  if (cell) {
+    cell.classList.remove('fullscreen');
+    const r = renderers[state.fullscreenId];
+    if (r) {
+      r.canvas.width = 240;
+      r.canvas.height = 180;
+      if (r.lastVerts && r.lastFaces) {
+        drawMesh(state.fullscreenId, r.lastVerts, r.lastFaces, r.lastStrain);
+      } else {
+        drawFlatSheet(state.fullscreenId);
+      }
+    }
+  }
+  state.fullscreenId = null;
+}
+
+const LIGHT = normalize3([0.4, -0.45, 1.0]);
+const PAPER_COLOR = [250, 250, 245];
+
+function normalize3(v) {
+  const m = Math.hypot(v[0], v[1], v[2]);
+  return m < 1e-12 ? [0,0,0] : [v[0]/m, v[1]/m, v[2]/m];
+}
+
+function cross3(a, b) {
+  return [a[1]*b[2]-a[2]*b[1], a[2]*b[0]-a[0]*b[2], a[0]*b[1]-a[1]*b[0]];
+}
+
+function dot3(a, b) { return a[0]*b[0]+a[1]*b[1]+a[2]*b[2]; }
+
+function sub3(a, b) { return [a[0]-b[0], a[1]-b[1], a[2]-b[2]]; }
+
+function projectVert(v, cx, cy, scale) {
+  var x = v[0] - 0.5;
+  var y = v[1] - 0.5;
+  var z = v[2] || 0;
+
+  var pitch = 0.62, yaw = -0.52;
+  var cp = Math.cos(pitch), sp = Math.sin(pitch);
+  var y1 = y*cp - z*sp;
+  var z1 = y*sp + z*cp;
+  var cy2 = Math.cos(yaw), sy = Math.sin(yaw);
+  var x2 = x*cy2 + z1*sy;
+  var z2 = -x*sy + z1*cy2;
+
+  var camDist = 2.8;
+  var persp = camDist / (camDist - z2);
+  return { x: cx + x2 * persp * scale, y: cy - y1 * persp * scale, z: z2 };
+}
+
+function strainColor(s) {
+  var t = Math.min(Math.max(s || 0, 0), 0.2) / 0.2;
+  var r = Math.round(50 + t * 200);
+  var g = Math.round(250 - t * 200);
+  var b = Math.round(245 - t * 200);
+  return 'rgb(' + r + ',' + g + ',' + b + ')';
+}
+
+function renderStep(id, paperState) {
+  if (!paperState) return;
+  var verts = paperState.vertices_coords;
+  var faces = paperState.faces_vertices;
+  var strain = paperState.strain_per_vertex;
+  if (!verts || !faces) return;
+  drawMesh(id, verts, faces, strain);
+}
+
+function drawMesh(id, verts, faces, strain) {
+  var r = renderers[id];
+  if (!r) return;
+  r.lastVerts = verts;
+  r.lastFaces = faces;
+  r.lastStrain = strain;
+
+  var canvas = r.canvas, ctx = r.ctx;
+  var w = canvas.width, h = canvas.height;
+  var scale = Math.min(w, h) * 0.8;
+  var cx = w * 0.5, cy = h * 0.52;
+
+  ctx.clearRect(0, 0, w, h);
+  ctx.fillStyle = '#080810';
+  ctx.fillRect(0, 0, w, h);
+
+  var projected = verts.map(function(v) { return projectVert(v, cx, cy, scale); });
+
+  var tris = faces.map(function(face) {
+    var idxs = face.length > 3
+      ? [face[0], face[1], face[2], face[0], face[2], face[3] || face[2]]
+      : face;
+    var a = idxs[0], b = idxs[1], c = idxs[2];
+    var p0 = projected[a], p1 = projected[b], p2 = projected[c];
+    var avgZ = (p0.z + p1.z + p2.z) / 3;
+    var v0 = verts[a] || [0,0,0], v1 = verts[b] || [0,0,0], v2 = verts[c] || [0,0,0];
+    var norm = normalize3(cross3(sub3(v1,v0), sub3(v2,v0)));
+    var intensity = Math.abs(dot3(norm, LIGHT));
+    var avgStrain = strain ? (((strain[a]||0) + (strain[b]||0) + (strain[c]||0)) / 3) : 0;
+    return { face: [a,b,c], avgZ: avgZ, intensity: intensity, avgStrain: avgStrain };
+  });
+
+  tris.sort(function(a, b) { return a.avgZ - b.avgZ; });
+
+  for (var i = 0; i < tris.length; i++) {
+    var tri = tris[i];
+    var a = tri.face[0], b = tri.face[1], c = tri.face[2];
+    var p0 = projected[a], p1 = projected[b], p2 = projected[c];
+    if (!p0 || !p1 || !p2) continue;
+
+    var lit = Math.min(Math.max(0.3 + 0.7 * tri.intensity, 0), 1);
+    var fillColor;
+    if (tri.avgStrain > 0.005) {
+      fillColor = strainColor(tri.avgStrain);
+    } else {
+      var rv = Math.round(PAPER_COLOR[0] * lit);
+      var gv = Math.round(PAPER_COLOR[1] * lit);
+      var bv = Math.round(PAPER_COLOR[2] * lit);
+      fillColor = 'rgb(' + rv + ',' + gv + ',' + bv + ')';
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(p0.x, p0.y);
+    ctx.lineTo(p1.x, p1.y);
+    ctx.lineTo(p2.x, p2.y);
+    ctx.closePath();
+    ctx.fillStyle = fillColor;
+    ctx.fill();
+    ctx.strokeStyle = 'rgba(42,42,58,0.3)';
+    ctx.lineWidth = 0.5;
+    ctx.stroke();
+  }
+}
+
+function drawFlatSheet(id) {
+  var flatVerts = [[0,0,0],[1,0,0],[1,1,0],[0,1,0]];
+  var flatFaces = [[0,1,2],[0,2,3]];
+  drawMesh(id, flatVerts, flatFaces, null);
+}
+
+function setTrainingBadge(label, cls) {
+  var b = document.getElementById('trainBadge');
+  b.textContent = label;
+  b.className = 'badge ' + cls;
+}
+
+function updateHeader() {
+  document.getElementById('batchNum').textContent = state.batchId != null ? state.batchId : '\u2014';
+  document.getElementById('epCount').textContent = Object.keys(state.episodes).length;
+}
+
+connectWS();
+</script>
+</body>
+</html>