Upload folder using huggingface_hub

server/app.py

@@ -8,8 +8,8 @@
 
 Serves both the OpenEnv API (for training/inference) and a Gradio UI that acts
 as an interactive README: browse scenarios, explore the scoring system, try
-sending actions, and read full documentation — all from a single Hugging Face
-Space.
+sending actions with a live canvas viewer, and read full documentation — all
+from a single Hugging Face Space.
 """
 
 from __future__ import annotations
@@ -80,7 +80,7 @@ def _scenario_display_name(s: Dict[str, Any]) -> str:
 
 
 def _tier_emoji(t: str) -> str:
-    return {"easy": "🟢", "medium": "🟡", "hard": "🟠", "expert": "🔴"}.get(t, "⚪")
+    return {"easy": "\U0001f7e2", "medium": "\U0001f7e1", "hard": "\U0001f7e0", "expert": "\U0001f534"}.get(t, "⚪")
 
 
 def _tier_label(t: str) -> str:
@@ -152,13 +152,373 @@ def show_weights(difficulty: str) -> str:
     return header + "\n".join(rows)
 
 
+# ---------------------------------------------------------------------------
+# Canvas renderer (Excalidraw-style, embedded in Gradio)
+# ---------------------------------------------------------------------------
+
+_CANVAS_JS = """
+<script>
+(function() {
+const ROLE_COLORS = {
+    default:   { fill: '#45475a', stroke: '#585b70', text: '#cdd6f4' },
+    current:   { fill: '#89b4fa', stroke: '#74c7ec', text: '#1e1e2e' },
+    visited:   { fill: '#a6e3a1', stroke: '#94e2d5', text: '#1e1e2e' },
+    frontier:  { fill: '#fab387', stroke: '#f9e2af', text: '#1e1e2e' },
+    done:      { fill: '#40a02b', stroke: '#a6e3a1', text: '#fff' },
+    pivot:     { fill: '#f38ba8', stroke: '#eba0ac', text: '#1e1e2e' },
+    root:      { fill: '#cba6f7', stroke: '#b4befe', text: '#1e1e2e' },
+    error:     { fill: '#f38ba8', stroke: '#f38ba8', text: '#fff' },
+    inactive:  { fill: '#313244', stroke: '#45475a', text: '#6c7086' },
+    comparing: { fill: '#f9e2af', stroke: '#fab387', text: '#1e1e2e' },
+};
+
+const GRID = 55;
+const NODE_R = 22;
+const ARROW_LEN = 9;
+const FONT = '12px Inter, system-ui, sans-serif';
+const FONT_BOLD = 'bold 12px Inter, system-ui, sans-serif';
+const FONT_SMALL = '10px Inter, system-ui, sans-serif';
+const FONT_ANN = '10px Inter, system-ui, sans-serif';
+
+function drawRoundRect(ctx, x, y, w, h, r) {
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+    ctx.lineTo(x + r, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+    ctx.lineTo(x, y + r);
+    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.closePath();
+}
+
+function drawArrowhead(ctx, fx, fy, tx, ty, scale) {
+    const angle = Math.atan2(ty - fy, tx - fx);
+    const s = ARROW_LEN * scale;
+    ctx.beginPath();
+    ctx.moveTo(tx, ty);
+    ctx.lineTo(tx - s * Math.cos(angle - Math.PI / 7), ty - s * Math.sin(angle - Math.PI / 7));
+    ctx.lineTo(tx - s * Math.cos(angle + Math.PI / 7), ty - s * Math.sin(angle + Math.PI / 7));
+    ctx.closePath();
+    ctx.fill();
+}
+
+function autoFit(canvas, entities, layout) {
+    const pts = [];
+    for (const eid of Object.keys(entities)) {
+        const p = layout[eid];
+        if (p) pts.push({ x: Number(p.x), y: Number(p.y) });
+    }
+    if (pts.length < 2) return { ox: 40, oy: 30, scale: 1 };
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (const p of pts) { minX = Math.min(minX, p.x); maxX = Math.max(maxX, p.x); minY = Math.min(minY, p.y); maxY = Math.max(maxY, p.y); }
+    const spanX = (maxX - minX) || 1;
+    const spanY = (maxY - minY) || 1;
+    const dpr = window.devicePixelRatio || 1;
+    const cw = canvas.width / dpr;
+    const ch = canvas.height / dpr;
+    const pad = 60;
+    const sx = (cw - pad * 2) / (spanX * GRID);
+    const sy = (ch - pad * 2) / (spanY * GRID);
+    const scale = Math.min(sx, sy, 1.3);
+    const ox = pad - minX * GRID * scale + ((cw - pad * 2) - spanX * GRID * scale) / 2;
+    const oy = pad - minY * GRID * scale + ((ch - pad * 2) - spanY * GRID * scale) / 2;
+    return { ox, oy, scale };
+}
+
+function renderCanvas(canvasEl, data) {
+    if (!canvasEl || !data) return;
+    const ctx = canvasEl.getContext('2d');
+    const dpr = window.devicePixelRatio || 1;
+    const rect = canvasEl.getBoundingClientRect();
+    canvasEl.width = rect.width * dpr;
+    canvasEl.height = rect.height * dpr;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, rect.width, rect.height);
+
+    // Background
+    ctx.fillStyle = '#11111b';
+    ctx.fillRect(0, 0, rect.width, rect.height);
+
+    const entities = data.entities || {};
+    const relations = data.relations || [];
+    const layout = data.layout || {};
+    const annotations = data.annotations || [];
+    const notes = data.notes || [];
+
+    if (Object.keys(entities).length === 0) {
+        ctx.fillStyle = '#6c7086';
+        ctx.font = '14px Inter, system-ui, sans-serif';
+        ctx.textAlign = 'center';
+        ctx.fillText('Canvas is empty — Reset a scenario and send actions', rect.width / 2, rect.height / 2);
+        return;
+    }
+
+    const cam = autoFit(canvasEl, entities, layout);
+    const wx = (ex) => cam.ox + ex * GRID * cam.scale;
+    const wy = (ey) => cam.oy + ey * GRID * cam.scale;
+    const getPos = (eid) => {
+        const p = layout[eid];
+        if (!p) return null;
+        return { x: wx(Number(p.x)), y: wy(Number(p.y)) };
+    };
+
+    const highlighted = new Set();
+    for (const a of annotations) {
+        if (a && a.text === '[highlight]') highlighted.add(a.target_id);
+    }
+
+    // Regions
+    for (const [eid, ent] of Object.entries(entities)) {
+        if (!ent || ent.entity_type !== 'region') continue;
+        const b = ent.bounds;
+        if (!b) continue;
+        const x0 = wx(Number(b.x0)), y0 = wy(Number(b.y0));
+        const x1 = wx(Number(b.x1)), y1 = wy(Number(b.y1));
+        ctx.save();
+        ctx.strokeStyle = 'rgba(137,180,250,0.25)';
+        ctx.lineWidth = 1;
+        ctx.setLineDash([6, 4]);
+        drawRoundRect(ctx, x0, y0, x1 - x0, y1 - y0, 8);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.font = FONT_SMALL;
+        ctx.fillStyle = 'rgba(137,180,250,0.5)';
+        ctx.textAlign = 'left';
+        ctx.fillText(ent.title || eid, x0 + 8, y0 + 14);
+        ctx.restore();
+    }
+
+    // Edges
+    for (const rel of relations) {
+        if (!rel || !rel.src || !rel.dst) continue;
+        const sp = getPos(rel.src), dp = getPos(rel.dst);
+        if (!sp || !dp) continue;
+        const r = NODE_R * cam.scale;
+        const dx = dp.x - sp.x, dy = dp.y - sp.y;
+        const dist = Math.hypot(dx, dy) || 1;
+        const ux = dx / dist, uy = dy / dist;
+        const sx = sp.x + ux * r, sy = sp.y + uy * r;
+        const ex = dp.x - ux * r, ey = dp.y - uy * r;
+        ctx.save();
+        ctx.strokeStyle = '#585b70';
+        ctx.lineWidth = 1.5 * cam.scale;
+        ctx.beginPath();
+        ctx.moveTo(sx, sy);
+        ctx.lineTo(ex, ey);
+        ctx.stroke();
+        ctx.fillStyle = '#585b70';
+        drawArrowhead(ctx, sx, sy, ex, ey, cam.scale);
+        if (rel.label) {
+            ctx.font = FONT_SMALL;
+            ctx.fillStyle = '#bac2de';
+            ctx.textAlign = 'center';
+            ctx.fillText(rel.label, (sx + ex) / 2, (sy + ey) / 2 - 6 * cam.scale);
+        }
+        ctx.restore();
+    }
+
+    // Entities
+    for (const [eid, ent] of Object.entries(entities)) {
+        if (!ent) continue;
+        const type = ent.entity_type || 'node';
+        if (type === 'region') continue;
+        const p = getPos(eid);
+        if (!p) continue;
+        const role = ent.role || 'default';
+        const colors = ROLE_COLORS[role] || ROLE_COLORS.default;
+        const r = NODE_R * cam.scale;
+        const isHl = highlighted.has(eid);
+
+        ctx.save();
+        if (isHl) {
+            // Golden highlight ring + glow
+            ctx.shadowColor = '#f9e2af';
+            ctx.shadowBlur = 18 * cam.scale;
+            ctx.beginPath();
+            if (type === 'pointer') {
+                ctx.arc(p.x, p.y, 18 * cam.scale, 0, Math.PI * 2);
+            } else if (type === 'container') {
+                const hw = 48 * cam.scale, hh = 28 * cam.scale;
+                drawRoundRect(ctx, p.x - hw, p.y - hh, hw * 2, hh * 2, 10 * cam.scale);
+            } else {
+                ctx.arc(p.x, p.y, r + 6 * cam.scale, 0, Math.PI * 2);
+            }
+            ctx.strokeStyle = '#f9e2af';
+            ctx.lineWidth = 2.5 * cam.scale;
+            ctx.stroke();
+            // Outer faint ring
+            ctx.beginPath();
+            if (type === 'container') {
+                const hw2 = 52 * cam.scale, hh2 = 32 * cam.scale;
+                drawRoundRect(ctx, p.x - hw2, p.y - hh2, hw2 * 2, hh2 * 2, 12 * cam.scale);
+            } else {
+                const outerR = type === 'pointer' ? 22 * cam.scale : r + 10 * cam.scale;
+                ctx.arc(p.x, p.y, outerR, 0, Math.PI * 2);
+            }
+            ctx.strokeStyle = 'rgba(249,226,175,0.3)';
+            ctx.lineWidth = 1.5 * cam.scale;
+            ctx.stroke();
+            ctx.shadowBlur = 0;
+        }
+
+        if (type === 'pointer') {
+            ctx.beginPath();
+            ctx.moveTo(p.x - 8 * cam.scale, p.y - 10 * cam.scale);
+            ctx.lineTo(p.x + 12 * cam.scale, p.y);
+            ctx.lineTo(p.x - 8 * cam.scale, p.y + 10 * cam.scale);
+            ctx.closePath();
+            ctx.fillStyle = colors.fill;
+            ctx.fill();
+            ctx.strokeStyle = colors.stroke;
+            ctx.lineWidth = 1.5 * cam.scale;
+            ctx.stroke();
+            ctx.shadowBlur = 0;
+            ctx.font = FONT_SMALL;
+            ctx.fillStyle = '#cdd6f4';
+            ctx.textAlign = 'left';
+            const val = ent.value != null ? ' \\u2192 ' + ent.value : '';
+            ctx.fillText(eid + val, p.x + 16 * cam.scale, p.y + 4 * cam.scale);
+        } else if (type === 'container') {
+            const w = 80 * cam.scale, h = 40 * cam.scale;
+            drawRoundRect(ctx, p.x - w / 2, p.y - h / 2, w, h, 6 * cam.scale);
+            ctx.fillStyle = 'rgba(69,90,100,0.25)';
+            ctx.fill();
+            ctx.strokeStyle = colors.stroke;
+            ctx.lineWidth = 1.5 * cam.scale;
+            ctx.setLineDash([4, 3]);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.shadowBlur = 0;
+            ctx.font = FONT_SMALL;
+            ctx.fillStyle = '#89b4fa';
+            ctx.textAlign = 'center';
+            ctx.fillText(ent.title || eid, p.x, p.y - h / 2 - 5 * cam.scale);
+            const contents = (ent.contents || []).join(', ');
+            if (contents) {
+                ctx.fillStyle = '#cdd6f4';
+                ctx.fillText(contents, p.x, p.y + 3 * cam.scale);
+            }
+        } else {
+            ctx.beginPath();
+            ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
+            ctx.fillStyle = colors.fill;
+            ctx.fill();
+            ctx.strokeStyle = colors.stroke;
+            ctx.lineWidth = 2 * cam.scale;
+            ctx.stroke();
+            if (role === 'error') {
+                ctx.beginPath();
+                ctx.moveTo(p.x - r * .6, p.y - r * .6);
+                ctx.lineTo(p.x + r * .6, p.y + r * .6);
+                ctx.strokeStyle = '#fff';
+                ctx.lineWidth = 2 * cam.scale;
+                ctx.stroke();
+            }
+            ctx.shadowBlur = 0;
+            const valText = ent.value != null ? String(ent.value) : eid;
+            ctx.font = FONT_BOLD;
+            ctx.fillStyle = colors.text;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(valText.length > 6 ? valText.slice(0, 6) : valText, p.x, p.y);
+            ctx.textBaseline = 'alphabetic';
+            if (role !== 'default') {
+                ctx.font = FONT_SMALL;
+                ctx.fillStyle = colors.stroke;
+                ctx.fillText(role, p.x, p.y + r + 12 * cam.scale);
+            }
+        }
+        ctx.restore();
+    }
+
+    // Annotations
+    const annMap = new Map();
+    for (const a of annotations) {
+        if (!a || a.text === '[highlight]' || a.text === '[popped]') continue;
+        annMap.set(a.target_id, a.text);
+    }
+    for (const [tid, text] of annMap) {
+        const p = getPos(tid);
+        if (!p) continue;
+        const r = NODE_R * cam.scale;
+        ctx.save();
+        ctx.font = FONT_ANN;
+        const tw = ctx.measureText(text).width;
+        const px = p.x - tw / 2 - 4, py = p.y - r - 14 * cam.scale;
+        drawRoundRect(ctx, px, py - 10, tw + 8, 16, 4);
+        ctx.fillStyle = 'rgba(250,179,135,0.15)';
+        ctx.fill();
+        ctx.strokeStyle = 'rgba(250,179,135,0.4)';
+        ctx.lineWidth = 0.5;
+        ctx.stroke();
+        ctx.fillStyle = '#fab387';
+        ctx.textAlign = 'center';
+        ctx.fillText(text, p.x, py);
+        ctx.restore();
+    }
+
+    // Notes
+    for (const note of notes) {
+        if (!note || !note.text) continue;
+        let nx = 20, ny = rect.height - 20;
+        const regionEnt = note.region && entities[note.region];
+        if (regionEnt && regionEnt.bounds) {
+            nx = wx(Number(regionEnt.bounds.x0)) + 8;
+            ny = wy(Number(regionEnt.bounds.y1)) - 8;
+        }
+        ctx.save();
+        ctx.font = FONT_SMALL;
+        ctx.fillStyle = 'rgba(108,112,134,0.7)';
+        ctx.textAlign = 'left';
+        ctx.fillText(note.text.length > 50 ? note.text.slice(0, 50) + '...' : note.text, nx, ny);
+        ctx.restore();
+    }
+}
+
+// Expose globally for Gradio callbacks
+window.__vrRenderCanvas = renderCanvas;
+})();
+</script>
+"""
+
+_CANVAS_HTML = """
+<canvas id="vr-canvas" style="width:100%;height:100%;display:block;background:#11111b;border-radius:8px;"></canvas>
+<div id="vr-empty-msg" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#6c7086;font:14px Inter,system-ui,sans-serif;pointer-events:none;">
+    Canvas empty — Reset a scenario and Send Step to see visualization
+</div>
+"""
+
+
+def _build_canvas_update_js(state_json: str) -> str:
+    return f"""
+    <canvas id="vr-canvas" style="width:100%;height:100%;display:block;background:#11111b;border-radius:8px;"></canvas>
+    <script>
+    (function() {{
+        const data = {state_json};
+        setTimeout(function() {{
+            const c = document.getElementById('vr-canvas');
+            if (c && window.__vrRenderCanvas) {{
+                const rect = c.parentElement.getBoundingClientRect();
+                c.style.width = rect.width + 'px';
+                c.style.height = Math.max(rect.height, 400) + 'px';
+                window.__vrRenderCanvas(c, data);
+            }}
+        }}, 100);
+    }})();
+    </script>
+    """
+
+
 # ---------------------------------------------------------------------------
 # Playground callbacks
 # ---------------------------------------------------------------------------
 
 def playground_reset(scenario_choice: str):
     if not scenario_choice:
-        return "Select a scenario first.", "{}", "{}"
+        return "Select a scenario first.", "{}", _CANVAS_HTML
 
     sid = scenario_choice.split("|")[0].strip()
     env = _get_env()
@@ -173,25 +533,28 @@ def playground_reset(scenario_choice: str):
             f"**Checklist:** {obs_dict.get('concept_checklist', [])}"
         )
         breakdown = json.dumps(obs_dict.get("score_breakdown", {}), indent=2)
-        state_snippet = json.dumps({
+        canvas_data = {
             "entities": obs_dict.get("entities", {}),
             "relations": obs_dict.get("relations", []),
             "layout": obs_dict.get("layout", {}),
-        }, indent=2, default=str)
-        return summary, breakdown, state_snippet
+            "annotations": obs_dict.get("annotations", []),
+            "notes": obs_dict.get("notes", []),
+        }
+        canvas_html = _build_canvas_update_js(json.dumps(canvas_data, default=str))
+        return summary, breakdown, canvas_html
     except Exception as exc:
         tb = traceback.format_exc()
-        return f"**Error:** {exc}\n```\n{tb}\n```", "{}", "{}"
+        return f"**Error:** {exc}\n```\n{tb}\n```", "{}", _CANVAS_HTML
 
 
 def playground_step(action_json: str):
     env = _get_env()
     if not env._scenario:
-        return "Call **Reset** first.", "{}", "{}"
+        return "Call **Reset** first.", "{}", _CANVAS_HTML
     try:
         action_dict = json.loads(action_json)
     except json.JSONDecodeError as exc:
-        return f"**JSON parse error:** {exc}", "{}", "{}"
+        return f"**JSON parse error:** {exc}", "{}", _CANVAS_HTML
 
     try:
         action = VisualReasoningAction(**action_dict)
@@ -210,16 +573,18 @@ def playground_step(action_json: str):
         summary += f"**Covered concepts:** {obs_dict.get('concept_coverage', [])}"
 
         breakdown = json.dumps(obs_dict.get("score_breakdown", {}), indent=2)
-        state_snippet = json.dumps({
+        canvas_data = {
             "entities": obs_dict.get("entities", {}),
             "relations": obs_dict.get("relations", []),
             "layout": obs_dict.get("layout", {}),
             "annotations": obs_dict.get("annotations", []),
-        }, indent=2, default=str)
-        return summary, breakdown, state_snippet
+            "notes": obs_dict.get("notes", []),
+        }
+        canvas_html = _build_canvas_update_js(json.dumps(canvas_data, default=str))
+        return summary, breakdown, canvas_html
     except Exception as exc:
         tb = traceback.format_exc()
-        return f"**Error:** {exc}\n```\n{tb}\n```", "{}", "{}"
+        return f"**Error:** {exc}\n```\n{tb}\n```", "{}", _CANVAS_HTML
 
 
 SAMPLE_ACTION = json.dumps({
@@ -291,7 +656,10 @@ def build_ui() -> gr.Blocks:
         title="Visual Reasoning Environment",
     ) as demo:
 
-        # ── Header ──────────────────────────────────────────────────
+        # Inject the canvas renderer JS globally
+        gr.HTML(_CANVAS_JS, visible=False)
+
+        # -- Header --
         gr.Markdown("""
 # Visual Reasoning Environment
 
@@ -302,12 +670,9 @@ step-by-step, and narrates the reasoning. A 14-dimensional scoring system provid
 verifiable rewards for GRPO / RLVR training.
         """)
 
-        # ── Tab layout ──────────────────────────────────────────────
         with gr.Tabs():
 
-            # ══════════════════════════════════════════════════════════
-            # TAB 1: Overview
-            # ══════════════════════════════════════════════════════════
+            # == TAB 1: Overview ==
             with gr.Tab("Overview"):
                 gr.Markdown("""
 ## How It Works
@@ -349,7 +714,7 @@ and must teach it visually in three phases:
 `default` · `current` · `visited` · `frontier` · `done` · `pivot` · `root` · `error` · `inactive` · `comparing`
 
 ### Named Positioning System
-Regions support a 3x3 grid position system — the LLM says WHERE on the whiteboard to draw:
+Regions support a 3×3 grid position system — the LLM says WHERE on the whiteboard to draw:
 
 ```
  top-left     │  top-center    │  top-right
@@ -368,9 +733,7 @@ Per-step reward = **delta(overall_score)** + flat penalties + concept bonuses.
 Clipped to `[-0.2, 1.0]` for stable GRPO training.
                 """)
 
-            # ══════════════════════════════════════════════════════════
-            # TAB 2: Scenarios
-            # ══════════════════════════════════════════════════════════
+            # == TAB 2: Scenarios ==
             with gr.Tab("Scenarios"):
                 gr.Markdown("## Algorithm Scenarios\nBrowse all 9 algorithm templates across 4 difficulty tiers. Select a scenario to see its full specification.")
 
@@ -408,14 +771,12 @@ Clipped to `[-0.2, 1.0]` for stable GRPO training.
                             desc = ALGO_DESCRIPTIONS.get(algo, "")
                             gr.Markdown(f"**`{algo}`** — {desc}")
 
-            # ══════════════════════════════════════════════════════════
-            # TAB 3: Scoring System
-            # ══════════════════════════════════════════════════════════
+            # == TAB 3: Scoring ==
             with gr.Tab("Scoring"):
                 gr.Markdown("""
 ## Scoring System
 
-The overall score is a **weighted sum of 14 sub-scores** (each 0-1) **minus 5 penalties**.
+The overall score is a **weighted sum of 14 sub-scores** (each 0–1) **minus 5 penalties**.
 Weights are tuned per difficulty level — harder tiers emphasize algorithm correctness (`invariant`)
 while easier tiers give more weight to narration quality and concept coverage.
 
@@ -479,15 +840,13 @@ A claimed concept counts **only if both** conditions hold:
 - Up to **+0.10** efficiency bonus for finishing early with high coverage
                 """)
 
-            # ══════════════════════════════════════════════════════════
-            # TAB 4: Playground
-            # ══════════════════════════════════════════════════════════
+            # == TAB 4: Playground ==
             with gr.Tab("Playground"):
                 gr.Markdown("""
 ## Interactive Playground
 
-Try sending actions to the environment. Select a scenario, reset the environment,
-then send JSON actions to see how the scoring system responds.
+Try sending actions to the environment and see the canvas update live.
+Select a scenario, reset, then send JSON actions step by step.
                 """)
 
                 with gr.Row():
@@ -500,35 +859,36 @@ then send JSON actions to see how the scoring system responds.
 
                 pg_summary = gr.Markdown("_Press Reset to start an episode._")
 
-                with gr.Row():
-                    with gr.Column(scale=2):
+                with gr.Row(equal_height=True):
+                    with gr.Column(scale=1):
                         pg_action_input = gr.Code(
                             value=SAMPLE_ACTION,
                             language="json",
                             label="Action JSON",
-                            lines=18,
+                            lines=16,
                         )
                         pg_step_btn = gr.Button("Send Step", variant="secondary")
-                    with gr.Column(scale=1):
-                        pg_scores = gr.Code(value="{}", language="json", label="Score Breakdown", lines=18)
-
-                with gr.Accordion("Canvas State (entities, relations, layout)", open=False):
-                    pg_state = gr.Code(value="{}", language="json", label="Canvas State", lines=20)
+                        with gr.Accordion("Score Breakdown", open=False):
+                            pg_scores = gr.Code(value="{}", language="json", label="Scores", lines=14)
+                    with gr.Column(scale=2):
+                        pg_canvas = gr.HTML(
+                            value=_CANVAS_HTML,
+                            label="Canvas",
+                            min_height=450,
+                        )
 
                 pg_reset_btn.click(
                     fn=playground_reset,
                     inputs=[pg_scenario],
-                    outputs=[pg_summary, pg_scores, pg_state],
+                    outputs=[pg_summary, pg_scores, pg_canvas],
                 )
                 pg_step_btn.click(
                     fn=playground_step,
                     inputs=[pg_action_input],
-                    outputs=[pg_summary, pg_scores, pg_state],
+                    outputs=[pg_summary, pg_scores, pg_canvas],
                 )
 
-            # ══════════════════════════════════════════════════════════
-            # TAB 5: Architecture
-            # ══════════════════════════════════════════════════════════
+            # == TAB 5: Architecture ==
             with gr.Tab("Architecture"):
                 gr.Markdown("""
 ## Architecture
@@ -545,10 +905,11 @@ server/
   pedagogical_scoring.py              Attention coherence, pacing, scaffolding
   scenario_loader.py                  Static + procedurally-generated scenarios
   scenario_generator.py               Procedural generation per difficulty tier
-  regions.py                          Layout engine (queue/stack/tree/graph + 3x3 grid)
+  regions.py                          Layout engine (queue/stack/tree/graph + 3×3 grid)
   constants.py                        Ops, roles, limits, canvas dimensions
 models.py                             Pydantic Action & Observation schemas
 viewer/tldraw_viewer.html             tldraw browser whiteboard
+viewer/excalidraw_viewer.html         Excalidraw-style Canvas2D viewer
 viewer/audio_viewer.html              Audio narration + visualization viewer
 ```
 
@@ -575,7 +936,7 @@ All scoring is deterministic (no randomness, no floating-point order sensitivity
 The regression test `test_easy_1_reproducible` enforces bit-identical scores across runs,
 which is critical for GRPO/RLVR training reproducibility.
 
-### Named Positioning (3x3 Grid)
+### Named Positioning (3×3 Grid)
 Instead of numeric x,y coordinates, the LLM uses 9 semantic tokens (`top-left`, `center`, etc.)
 plus 4 relative prefixes (`below:`, `above:`, `left-of:`, `right-of:`).
 This reduces the positioning search space from ~331K (numeric grid) to ~6.5K (for 4 regions),
@@ -634,24 +995,22 @@ PYTHONPATH=. python -m pytest tests/ -v
 BSD-style (see `LICENSE`).
                 """)
 
-            # ══════════════════════════════════════════════════════════
-            # TAB 6: API Reference
-            # ══════════════════════════════════════════════════════════
+            # == TAB 6: API ==
             with gr.Tab("API"):
                 gr.Markdown(f"""
 ## API Reference
 
-This Space exposes the standard **OpenEnv** HTTP + WebSocket API at the root path.
-The Gradio UI is mounted at `/ui`.
+This Space exposes the standard **OpenEnv** HTTP + WebSocket API under `/api`.
+The Gradio UI is mounted at `/` (root).
 
 ### Endpoints
 
 | Method | Path | Description |
 |--------|------|-------------|
-| `POST` | `/reset` | Reset environment, get initial observation |
-| `POST` | `/step` | Send an action, get observation + reward |
-| `GET` | `/health` | Health check |
-| `WebSocket` | `/ws` | Streaming WebSocket interface |
+| `POST` | `/api/reset` | Reset environment, get initial observation |
+| `POST` | `/api/step` | Send an action, get observation + reward |
+| `GET` | `/api/health` | Health check |
+| `WebSocket` | `/api/ws` | Streaming WebSocket interface |
 
 ### Action Schema (`VisualReasoningAction`)
 
@@ -720,18 +1079,11 @@ The Gradio UI is mounted at `/ui`.
 gradio_app = build_ui()
 
 _CSS = """
-.tier-badge { display: inline-block; padding: 2px 10px; border-radius: 12px;
-              font-weight: 600; font-size: 0.85em; margin-right: 6px; }
-.tier-easy { background: #d4edda; color: #155724; }
-.tier-medium { background: #fff3cd; color: #856404; }
-.tier-hard { background: #ffe0cc; color: #8a4500; }
-.tier-expert { background: #f8d7da; color: #721c24; }
 .score-bar { font-family: monospace; }
-.header-subtitle { color: #6b7280; font-size: 1.05em; margin-top: -8px; }
 """
 
 app = gr.mount_gradio_app(
-    openenv_app, gradio_app, path="/ui",
+    openenv_app, gradio_app, path="/",
     theme=gr.themes.Soft(), css=_CSS,
 )
 
@@ -747,8 +1099,8 @@ def main():
     args = parser.parse_args()
 
     print(f"Starting Visual Reasoning Environment on {args.host}:{args.port}")
-    print(f"  OpenEnv API:  http://{args.host}:{args.port}/")
-    print(f"  Gradio UI:    http://{args.host}:{args.port}/ui")
+    print(f"  Gradio UI:    http://{args.host}:{args.port}/")
+    print(f"  OpenEnv API:  http://{args.host}:{args.port}/reset, /step, /health")
 
     uvicorn.run(app, host=args.host, port=args.port)
 

viewer/excalidraw_viewer.html

@@ -163,6 +163,7 @@ let S = {
 let cam = { ox: 40, oy: 30, scale: 1 };
 let canvas, ctx;
 let voiceTimer, toastTimer;
+let _hlPhase = 0;  // 0..1 oscillating for highlight pulse
 
 const $ = id => document.getElementById(id);
 
@@ -306,8 +307,40 @@ function render() {
         ctx.save();
 
         if (isHl) {
-            ctx.shadowColor = '#f9e2af';
-            ctx.shadowBlur = 18 * cam.scale;
+            // Animated golden ring + glow
+            const pulseAlpha = 0.4 + 0.6 * _hlPhase;
+            const pulseBlur = 12 + 10 * _hlPhase;
+            ctx.shadowColor = `rgba(249,226,175,${pulseAlpha})`;
+            ctx.shadowBlur = pulseBlur * cam.scale;
+
+            // Inner golden ring
+            ctx.beginPath();
+            if (type === 'pointer') {
+                ctx.arc(p.x, p.y, 18 * cam.scale, 0, Math.PI * 2);
+            } else if (type === 'container') {
+                const hw = 52 * cam.scale, hh = 28 * cam.scale;
+                drawRoundRect(p.x - hw, p.y - hh, hw * 2, hh * 2, 10 * cam.scale);
+            } else {
+                ctx.arc(p.x, p.y, r + 6 * cam.scale, 0, Math.PI * 2);
+            }
+            ctx.strokeStyle = `rgba(249,226,175,${pulseAlpha})`;
+            ctx.lineWidth = 2.5 * cam.scale;
+            ctx.stroke();
+
+            // Outer faint ring
+            ctx.shadowBlur = 0;
+            ctx.beginPath();
+            if (type === 'container') {
+                const hw2 = 56 * cam.scale, hh2 = 32 * cam.scale;
+                drawRoundRect(p.x - hw2, p.y - hh2, hw2 * 2, hh2 * 2, 12 * cam.scale);
+            } else {
+                const outerR = type === 'pointer' ? 22 * cam.scale : r + 10 * cam.scale;
+                ctx.arc(p.x, p.y, outerR, 0, Math.PI * 2);
+            }
+            ctx.strokeStyle = `rgba(249,226,175,${pulseAlpha * 0.4})`;
+            ctx.lineWidth = 1.5 * cam.scale;
+            ctx.stroke();
+            ctx.shadowBlur = 0;
         }
 
         if (type === 'pointer') {
@@ -606,6 +639,22 @@ function connect() {
     };
 }
 
+/* ---- highlight pulse animation ---- */
+let _hlAnimFrame = null;
+function animateHighlights(ts) {
+    _hlPhase = 0.5 + 0.5 * Math.sin(ts / 600);
+    render();
+    _hlAnimFrame = requestAnimationFrame(animateHighlights);
+}
+
+function startHighlightAnim() {
+    if (!_hlAnimFrame) _hlAnimFrame = requestAnimationFrame(animateHighlights);
+}
+
+function stopHighlightAnim() {
+    if (_hlAnimFrame) { cancelAnimationFrame(_hlAnimFrame); _hlAnimFrame = null; }
+}
+
 /* ---- init ---- */
 function init() {
     canvas = $('canvas');
@@ -614,6 +663,7 @@ function init() {
     autoFit();
     render();
     connect();
+    startHighlightAnim();
 }
 init();
 </script>