Spaces:

arnavk
/

openenv-code-debugger

Sleeping

arnavzz Claude Sonnet 4.6 commited on 23 days ago

Commit

b450c0e

1 Parent(s): 51133cf

feat: add interactive landing page with live debug arena

Dark-themed landing page with:
- Hero section with live status, task count
- Interactive debug arena (pick task, edit code, submit, see tests animate)
- Terminal panel showing structured [START]/[STEP]/[END] logs
- How It Works 3-step flow
- Task explorer with difficulty badges
- Architecture diagram (OpenEnv RL loop)
- Performance metrics section
- Prism.js syntax highlighting, CSS animations, fade-in on scroll

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

Files changed (2) hide show

code_debug_env/server/app.py +11 -0
code_debug_env/static/index.html +748 -0

code_debug_env/server/app.py CHANGED Viewed

@@ -1,4 +1,7 @@
 from fastapi import FastAPI, HTTPException
 from ..models import (
     DebugState,
@@ -17,6 +20,14 @@ app = FastAPI(
 env = CodeDebugEnvironment()
 @app.get("/health")
 async def health():

+from pathlib import Path
 from fastapi import FastAPI, HTTPException
+from fastapi.responses import HTMLResponse
 from ..models import (
     DebugState,
 env = CodeDebugEnvironment()
+_STATIC_DIR = Path(__file__).parent.parent / "static"
+_INDEX_HTML = (_STATIC_DIR / "index.html").read_text(encoding="utf-8")
+@app.get("/", response_class=HTMLResponse)
+async def landing():
+    return _INDEX_HTML
 @app.get("/health")
 async def health():

code_debug_env/static/index.html ADDED Viewed

	@@ -0,0 +1,748 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Code Debug Arena | OpenEnv</title>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-vsc-dark-plus.min.css">
+<style>
+/* ── Reset & Base ───────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --bg:          #0d1117;
+  --bg-card:     #161b22;
+  --bg-editor:   #1e1e1e;
+  --bg-input:    #21252b;
+  --bg-hover:    #30363d;
+  --text:        #e6edf3;
+  --text-muted:  #8b949e;
+  --text-dim:    #484f58;
+  --accent:      #58a6ff;
+  --green:       #3fb950;
+  --orange:      #d29922;
+  --red:         #f85149;
+  --purple:      #bc8cff;
+  --border:      #30363d;
+  --radius:      12px;
+  --max-w:       1100px;
+}
+html { scroll-behavior: smooth; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  overflow-x: hidden;
+}
+code, pre, textarea, .mono { font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', Consolas, monospace; }
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
+/* ── Fade-in animation ──────────────────────────────────── */
+.fade-in {
+  opacity: 0;
+  transform: translateY(28px);
+  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
+}
+.fade-in.visible { opacity: 1; transform: translateY(0); }
+/* ── Status dot ─────────────────────────────────────────── */
+@keyframes pulse-ring {
+  0%   { transform: scale(.85); opacity: 1; }
+  100% { transform: scale(2.4); opacity: 0; }
+}
+.status-dot {
+  position: relative; display: inline-block;
+  width: 10px; height: 10px; border-radius: 50%;
+  background: var(--green); vertical-align: middle; margin-right: 6px;
+}
+.status-dot::before {
+  content: ''; position: absolute; inset: 0;
+  border-radius: 50%; background: var(--green);
+  animation: pulse-ring 1.6s ease-out infinite;
+}
+/* ── Blinking cursor ────────────────────────────────────── */
+@keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }
+.cursor {
+  display: inline-block; width: 8px; height: 16px;
+  background: var(--green); vertical-align: text-bottom;
+  animation: blink 1s step-end infinite;
+}
+/* ── Progress bar ───────────────────────────────────────── */
+@keyframes fillBar { from { width: 0; } }
+.progress-track {
+  height: 10px; border-radius: 5px;
+  background: var(--bg-hover); overflow: hidden; margin-top: 6px;
+}
+.progress-fill {
+  height: 100%; border-radius: 5px;
+  background: linear-gradient(90deg, var(--green), var(--accent));
+  animation: fillBar 1.2s ease-out forwards;
+  transition: width 0.6s ease-out;
+}
+/* ── Badge ──────────────────────────────────────────────── */
+.badge {
+  display: inline-block; padding: 2px 10px; border-radius: 20px;
+  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
+}
+.badge-easy   { background: rgba(63,185,80,.15); color: var(--green); }
+.badge-medium { background: rgba(210,153,34,.15); color: var(--orange); }
+.badge-hard   { background: rgba(248,81,73,.15); color: var(--red); }
+.badge-meta   { background: rgba(88,166,255,.12); color: var(--accent); border: 1px solid rgba(88,166,255,.25); }
+/* ── Buttons ────────────────────────────────────────────── */
+.btn {
+  display: inline-block; padding: 10px 24px; border-radius: 8px;
+  font-size: 14px; font-weight: 600; cursor: pointer; border: none;
+  transition: all .2s;
+}
+.btn-primary   { background: var(--accent); color: #fff; }
+.btn-primary:hover { background: #79c0ff; text-decoration: none; }
+.btn-outline   { background: transparent; color: var(--text); border: 1px solid var(--border); }
+.btn-outline:hover { background: var(--bg-hover); text-decoration: none; }
+.btn-green     { background: var(--green); color: #fff; }
+.btn-green:hover { background: #56d364; text-decoration: none; }
+.btn:disabled  { opacity: .4; cursor: not-allowed; }
+/* ── Cards ──────────────────────────────────────────────── */
+.card {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 24px;
+  transition: border-color .2s, transform .2s;
+}
+.card:hover { border-color: var(--accent); transform: translateY(-2px); }
+/* ═══════════════════════════════════════════════════════════
+   HERO
+   ═══════════════════════════════════════════════════════════ */
+.hero {
+  text-align: center; padding: 80px 0 60px;
+  background: radial-gradient(ellipse at 50% 0%, rgba(88,166,255,.08) 0%, transparent 70%);
+}
+.hero h1 {
+  font-size: clamp(32px, 5vw, 52px); font-weight: 800;
+  letter-spacing: -1px; line-height: 1.15; margin-bottom: 16px;
+}
+.hero h1 span { color: var(--accent); }
+.hero p.subtitle {
+  font-size: 18px; color: var(--text-muted); max-width: 620px; margin: 0 auto 28px;
+}
+.hero-badges { margin-bottom: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
+.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
+.hero-stats {
+  display: flex; gap: 36px; justify-content: center; margin-top: 40px; flex-wrap: wrap;
+}
+.hero-stat { text-align: center; }
+.hero-stat .num { font-size: 28px; font-weight: 700; color: var(--accent); }
+.hero-stat .label { font-size: 13px; color: var(--text-muted); }
+/* ═══════════════════════════════════════════════════════════
+   LIVE ARENA
+   ═══════════════════════════════════════════════════════════ */
+.arena { padding: 60px 0; }
+.arena h2 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
+.arena p.desc { color: var(--text-muted); margin-bottom: 24px; }
+.arena-grid {
+  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
+}
+@media (max-width: 768px) { .arena-grid { grid-template-columns: 1fr; } }
+.arena-panel {
+  background: var(--bg-editor); border: 1px solid var(--border);
+  border-radius: var(--radius); overflow: hidden;
+}
+.panel-header {
+  padding: 10px 16px; background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; justify-content: space-between;
+  font-size: 13px; font-weight: 600; color: var(--text-muted);
+}
+.panel-body { padding: 0; }
+.panel-body pre { margin: 0; padding: 16px; font-size: 13px; max-height: 320px; overflow: auto; }
+.panel-body textarea {
+  width: 100%; min-height: 280px; padding: 16px;
+  background: var(--bg-editor); color: var(--text); border: none;
+  font-size: 13px; resize: vertical; outline: none;
+}
+.arena-controls {
+  display: flex; gap: 12px; align-items: center; margin-top: 16px; flex-wrap: wrap;
+}
+.task-select {
+  padding: 8px 14px; border-radius: 8px;
+  background: var(--bg-card); color: var(--text); border: 1px solid var(--border);
+  font-size: 14px; cursor: pointer;
+}
+.task-select option { background: var(--bg-card); }
+/* ── Test results ───────────────────────────────────────── */
+.test-results { margin-top: 16px; }
+.test-row {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 14px; border-radius: 8px; margin-bottom: 6px;
+  font-size: 13px; opacity: 0; transform: translateX(-16px);
+  transition: all .4s ease-out;
+}
+.test-row.show { opacity: 1; transform: translateX(0); }
+.test-row.pass { background: rgba(63,185,80,.1); border-left: 3px solid var(--green); }
+.test-row.fail { background: rgba(248,81,73,.1); border-left: 3px solid var(--red); }
+.test-icon { font-size: 16px; }
+.test-name { flex: 1; }
+.test-detail { color: var(--text-muted); font-size: 12px; }
+/* ── Reward display ─────────────────────────────────────── */
+.reward-display {
+  margin-top: 20px; padding: 16px 20px;
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
+}
+.reward-label { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
+.reward-value { font-size: 24px; font-weight: 700; }
+/* ── Terminal ───────────────────────────────────────────── */
+.terminal {
+  margin-top: 16px; background: #0a0a0a; border: 1px solid var(--border);
+  border-radius: var(--radius); overflow: hidden;
+}
+.terminal-header {
+  padding: 8px 16px; background: #1a1a1a; border-bottom: 1px solid #333;
+  font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 8px;
+}
+.terminal-dots { display: flex; gap: 6px; }
+.terminal-dots span { width: 10px; height: 10px; border-radius: 50%; }
+.terminal-dots .dot-r { background: #f85149; }
+.terminal-dots .dot-y { background: #d29922; }
+.terminal-dots .dot-g { background: #3fb950; }
+.terminal-body {
+  padding: 14px 16px; font-size: 12px; color: var(--green);
+  max-height: 200px; overflow: auto; white-space: pre-wrap; line-height: 1.7;
+}
+/* ═══════════════════════════════════════════════════════════
+   HOW IT WORKS
+   ═══════════════════════════════════════════════════════════ */
+.how-it-works { padding: 60px 0; }
+.how-it-works h2 { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 40px; }
+.steps {
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
+}
+@media (max-width: 768px) { .steps { grid-template-columns: 1fr; } }
+.step { text-align: center; position: relative; }
+.step-num {
+  width: 48px; height: 48px; border-radius: 50%;
+  background: rgba(88,166,255,.12); color: var(--accent);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 20px; font-weight: 700; margin: 0 auto 16px;
+}
+.step h3 { font-size: 16px; margin-bottom: 8px; }
+.step p { font-size: 14px; color: var(--text-muted); }
+.step-arrow {
+  position: absolute; top: 24px; right: -18px;
+  color: var(--text-dim); font-size: 20px;
+}
+@media (max-width: 768px) { .step-arrow { display: none; } }
+/* ═══════════════════════════════════════════════════════════
+   TASK EXPLORER
+   ═══════════════════════════════════════════════════════════ */
+.task-explorer { padding: 60px 0; }
+.task-explorer h2 { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 12px; }
+.task-explorer > .container > p { text-align: center; color: var(--text-muted); margin-bottom: 32px; }
+.task-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px;
+}
+.task-card { cursor: pointer; }
+.task-card h3 { font-size: 15px; margin: 12px 0 8px; }
+.task-card p { font-size: 13px; color: var(--text-muted); }
+.task-meta { display: flex; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--text-dim); }
+/* ═══════════════════════════════════════════════════════════
+   ARCHITECTURE
+   ═══════════════════════════════════════════════════════════ */
+.architecture { padding: 60px 0; }
+.architecture h2 { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 32px; }
+.arch-flow {
+  display: flex; align-items: center; justify-content: center;
+  gap: 0; flex-wrap: wrap; padding: 32px 0;
+}
+.arch-node {
+  padding: 16px 24px; border-radius: var(--radius);
+  background: var(--bg-card); border: 1px solid var(--border);
+  text-align: center; min-width: 130px;
+}
+.arch-node .icon { font-size: 24px; margin-bottom: 6px; }
+.arch-node .name { font-size: 14px; font-weight: 600; }
+.arch-node .desc { font-size: 11px; color: var(--text-muted); }
+.arch-arrow { font-size: 20px; color: var(--text-dim); padding: 0 10px; }
+@media (max-width: 600px) {
+  .arch-flow { flex-direction: column; }
+  .arch-arrow { transform: rotate(90deg); padding: 8px 0; }
+}
+/* ═══════════════════════════════════════════════════════════
+   METRICS
+   ═══════════════════════════════════════════════════════════ */
+.metrics { padding: 60px 0; }
+.metrics h2 { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 32px; }
+.metrics-grid {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
+}
+@media (max-width: 768px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); } }
+.metric-card {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 24px; text-align: center;
+}
+.metric-card .num { font-size: 32px; font-weight: 800; margin-bottom: 4px; }
+.metric-card .label { font-size: 13px; color: var(--text-muted); }
+/* ═══════════════════════════════════════════════════════════
+   FOOTER
+   ═══════════════════════════════════════════════════════════ */
+.footer {
+  padding: 40px 0; border-top: 1px solid var(--border); margin-top: 40px;
+  text-align: center; font-size: 14px; color: var(--text-muted);
+}
+.footer-links { display: flex; gap: 20px; justify-content: center; margin-bottom: 12px; }
+</style>
+</head>
+<body>
+<!-- ═══ HERO ═══════════════════════════════════════════════ -->
+<section class="hero">
+<div class="container">
+  <div class="hero-badges">
+    <span class="badge badge-meta">Meta x PyTorch Hackathon</span>
+    <span class="badge badge-meta">OpenEnv Compatible</span>
+  </div>
+  <h1>AI-Powered <span>Code Debugging</span> Arena</h1>
+  <p class="subtitle">
+    A real-world OpenEnv environment where AI agents learn to fix broken Python code.
+    Submit buggy code, get instant fixes, and watch tests pass in real time.
+  </p>
+  <div class="hero-cta">
+    <a href="#arena" class="btn btn-primary">Try It Live</a>
+    <a href="/docs" class="btn btn-outline">API Docs</a>
+  </div>
+  <div class="hero-stats" id="hero-stats">
+    <div class="hero-stat">
+      <div class="num" id="stat-status"><span class="status-dot"></span> Live</div>
+      <div class="label">Environment Status</div>
+    </div>
+    <div class="hero-stat">
+      <div class="num" id="stat-tasks">-</div>
+      <div class="label">Debug Tasks</div>
+    </div>
+    <div class="hero-stat">
+      <div class="num">0.0 &ndash; 1.0</div>
+      <div class="label">Reward Range</div>
+    </div>
+    <div class="hero-stat">
+      <div class="num">3</div>
+      <div class="label">Difficulty Levels</div>
+    </div>
+  </div>
+</div>
+</section>
+<!-- ═══ LIVE ARENA ═════════════════════════════════════════ -->
+<section class="arena fade-in" id="arena">
+<div class="container">
+  <h2>Live Debug Arena</h2>
+  <p class="desc">Pick a task, review the buggy code, write your fix, and submit. Watch tests execute in real time.</p>
+  <div class="arena-controls">
+    <select class="task-select" id="task-select"><option value="">Loading tasks...</option></select>
+    <button class="btn btn-primary" id="btn-reset" disabled>Load Task</button>
+    <button class="btn btn-green" id="btn-submit" disabled>Submit Fix</button>
+    <span id="step-info" class="mono" style="font-size:13px;color:var(--text-muted)"></span>
+  </div>
+  <div class="arena-grid" style="margin-top:16px">
+    <!-- Left: buggy code -->
+    <div class="arena-panel">
+      <div class="panel-header"><span>Buggy Code</span><span id="task-difficulty"></span></div>
+      <div class="panel-body"><pre><code class="language-python" id="buggy-code">Select a task and click "Load Task" to begin.</code></pre></div>
+    </div>
+    <!-- Right: editor -->
+    <div class="arena-panel">
+      <div class="panel-header"><span>Your Fix</span></div>
+      <div class="panel-body">
+        <textarea id="code-editor" placeholder="Paste or write your fixed code here..." spellcheck="false"></textarea>
+      </div>
+    </div>
+  </div>
+  <!-- Test results -->
+  <div class="test-results" id="test-results"></div>
+  <!-- Reward -->
+  <div class="reward-display" id="reward-display" style="display:none">
+    <div style="display:flex;align-items:center;justify-content:space-between">
+      <div>
+        <div class="reward-label">Reward Score</div>
+        <div class="reward-value" id="reward-value">0.00</div>
+      </div>
+      <div style="flex:1;margin-left:24px">
+        <div class="reward-label">Tests Passed: <span id="tests-summary">0/0</span></div>
+        <div class="progress-track"><div class="progress-fill" id="progress-fill" style="width:0"></div></div>
+      </div>
+    </div>
+  </div>
+  <!-- Terminal -->
+  <div class="terminal" id="terminal" style="display:none">
+    <div class="terminal-header">
+      <div class="terminal-dots"><span class="dot-r"></span><span class="dot-y"></span><span class="dot-g"></span></div>
+      <span>Structured Logs</span>
+    </div>
+    <div class="terminal-body mono" id="terminal-body"></div>
+  </div>
+</div>
+</section>
+<!-- ═══ HOW IT WORKS ══════════════════════════════════════= -->
+<section class="how-it-works fade-in">
+<div class="container">
+  <h2>How It Works</h2>
+  <div class="steps">
+    <div class="step">
+      <div class="step-num">1</div>
+      <h3>Reset Environment</h3>
+      <p>The agent receives buggy Python code and descriptions of the tests it must pass.</p>
+      <span class="step-arrow">&rarr;</span>
+    </div>
+    <div class="step">
+      <div class="step-num">2</div>
+      <h3>Submit a Fix</h3>
+      <p>The agent analyzes the code, identifies the bug, and submits corrected code via <code>step()</code>.</p>
+      <span class="step-arrow">&rarr;</span>
+    </div>
+    <div class="step">
+      <div class="step-num">3</div>
+      <h3>Earn Reward</h3>
+      <p>Tests run in a sandboxed subprocess. Reward = fraction passing (0.0&ndash;1.0). Iterate until all pass.</p>
+    </div>
+  </div>
+</div>
+</section>
+<!-- ═══ TASK EXPLORER ═════════════════════════════════════= -->
+<section class="task-explorer fade-in">
+<div class="container">
+  <h2>Task Explorer</h2>
+  <p>6 real-world debugging challenges across 3 difficulty levels.</p>
+  <div class="task-grid" id="task-grid"></div>
+</div>
+</section>
+<!-- ═══ ARCHITECTURE ══════════════════════════════════════= -->
+<section class="architecture fade-in">
+<div class="container">
+  <h2>Architecture</h2>
+  <div class="arch-flow">
+    <div class="arch-node">
+      <div class="icon">&#129302;</div>
+      <div class="name">AI Agent</div>
+      <div class="desc">LLM via OpenAI Client</div>
+    </div>
+    <div class="arch-arrow">&rarr;</div>
+    <div class="arch-node" style="border-color:var(--accent)">
+      <div class="icon">&#9881;</div>
+      <div class="name">step(code)</div>
+      <div class="desc">OpenEnv API</div>
+    </div>
+    <div class="arch-arrow">&rarr;</div>
+    <div class="arch-node">
+      <div class="icon">&#128736;</div>
+      <div class="name">Executor</div>
+      <div class="desc">Subprocess + Timeout</div>
+    </div>
+    <div class="arch-arrow">&rarr;</div>
+    <div class="arch-node">
+      <div class="icon">&#9989;</div>
+      <div class="name">Tests</div>
+      <div class="desc">Pass / Fail</div>
+    </div>
+    <div class="arch-arrow">&rarr;</div>
+    <div class="arch-node" style="border-color:var(--green)">
+      <div class="icon">&#127942;</div>
+      <div class="name">Reward</div>
+      <div class="desc">0.0 &ndash; 1.0</div>
+    </div>
+  </div>
+  <div style="text-align:center;margin-top:20px">
+    <code class="mono" style="font-size:13px;color:var(--text-muted)">
+      reset() &rarr; Observation &nbsp;|&nbsp; step(action) &rarr; StepResult &nbsp;|&nbsp; state() &rarr; State
+    </code>
+  </div>
+</div>
+</section>
+<!-- ═══ METRICS ═══════════════════════════════════════════= -->
+<section class="metrics fade-in">
+<div class="container">
+  <h2>Performance</h2>
+  <div class="metrics-grid">
+    <div class="metric-card">
+      <div class="num" style="color:var(--green)">6/6</div>
+      <div class="label">Tasks Solved by Baseline</div>
+    </div>
+    <div class="metric-card">
+      <div class="num" style="color:var(--accent)">1.000</div>
+      <div class="label">Average Score</div>
+    </div>
+    <div class="metric-card">
+      <div class="num" style="color:var(--purple)">&lt; 2s</div>
+      <div class="label">Avg Response Time</div>
+    </div>
+    <div class="metric-card">
+      <div class="num" style="color:var(--orange)">100%</div>
+      <div class="label">OpenEnv Spec Compliant</div>
+    </div>
+  </div>
+</div>
+</section>
+<!-- ═══ FOOTER ════════════════════════════════════════════= -->
+<footer class="footer">
+  <div class="container">
+    <div class="footer-links">
+      <a href="https://github.com/arnavzz/openenv-code-debugger" target="_blank">GitHub</a>
+      <a href="/docs" target="_blank">API Docs</a>
+      <a href="/health" target="_blank">Health Check</a>
+    </div>
+    <p>Built for the Meta x PyTorch OpenEnv Hackathon 2026</p>
+  </div>
+</footer>
+<!-- ═══ SCRIPTS ═══════════════════════════════════════════= -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
+<script>
+(function() {
+  const API = '';  // same origin
+  let episodeId = null;
+  let currentTask = null;
+  let stepCount = 0;
+  let logs = [];
+  const $  = s => document.querySelector(s);
+  const $$ = s => document.querySelectorAll(s);
+  // ── Fade-in observer ─────────────────────────────────────
+  const obs = new IntersectionObserver(entries => {
+    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); } });
+  }, { threshold: 0.1 });
+  $$('.fade-in').forEach(el => obs.observe(el));
+  // ── Load tasks ───────────────────────────────────────────
+  async function loadTasks() {
+    try {
+      const res = await fetch(API + '/tasks');
+      const tasks = await res.json();
+      $('#stat-tasks').textContent = tasks.length;
+      renderTaskSelect(tasks);
+      renderTaskGrid(tasks);
+    } catch(e) {
+      console.error('Failed to load tasks:', e);
+    }
+  }
+  function renderTaskSelect(tasks) {
+    const sel = $('#task-select');
+    sel.innerHTML = '<option value="">-- Select a task --</option>';
+    tasks.forEach(t => {
+      sel.innerHTML += `<option value="${t.task_id}">[${t.difficulty.toUpperCase()}] ${t.description.slice(0,60)}</option>`;
+    });
+    $('#btn-reset').disabled = false;
+  }
+  function renderTaskGrid(tasks) {
+    const grid = $('#task-grid');
+    const order = {easy:0,medium:1,hard:2};
+    tasks.sort((a,b) => order[a.difficulty] - order[b.difficulty]);
+    grid.innerHTML = tasks.map(t => `
+      <div class="card task-card" data-id="${t.task_id}">
+        <span class="badge badge-${t.difficulty}">${t.difficulty}</span>
+        <h3>${t.task_id.replace(/^task_\d+_/, '').replace(/_/g,' ')}</h3>
+        <p>${t.description}</p>
+        <div class="task-meta">
+          <span>Max steps: ${t.max_steps}</span>
+          <span>Tests: ${t.total_tests}</span>
+        </div>
+      </div>
+    `).join('');
+    $$('.task-card').forEach(card => {
+      card.addEventListener('click', () => {
+        $('#task-select').value = card.dataset.id;
+        resetEnv();
+        document.getElementById('arena').scrollIntoView({ behavior: 'smooth' });
+      });
+    });
+  }
+  // ── Reset environment ────────────────────────────────────
+  async function resetEnv() {
+    const taskId = $('#task-select').value;
+    if (!taskId) return;
+    $('#btn-reset').disabled = true;
+    $('#btn-submit').disabled = true;
+    clearResults();
+    try {
+      const res = await fetch(API + '/reset', {
+        method: 'POST',
+        headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ task_id: taskId })
+      });
+      const data = await res.json();
+      episodeId = data.episode_id;
+      currentTask = data.observation;
+      stepCount = 0;
+      logs = [];
+      // Render buggy code
+      const codeEl = $('#buggy-code');
+      codeEl.textContent = currentTask.buggy_code;
+      Prism.highlightElement(codeEl);
+      // Set difficulty badge
+      const d = currentTask.difficulty;
+      $('#task-difficulty').innerHTML = `<span class="badge badge-${d}">${d}</span>`;
+      // Pre-fill editor with buggy code
+      $('#code-editor').value = currentTask.buggy_code;
+      $('#btn-submit').disabled = false;
+      $('#step-info').textContent = `Step 0/${currentTask.max_steps}`;
+      // Log [START]
+      addLog(`[START] task=${taskId} env=arena model=interactive`);
+    } catch(e) {
+      console.error('Reset failed:', e);
+    }
+    $('#btn-reset').disabled = false;
+  }
+  // ── Submit fix ───────────────────────────────────────────
+  async function submitFix() {
+    if (!episodeId) return;
+    const code = $('#code-editor').value;
+    if (!code.trim()) return;
+    $('#btn-submit').disabled = true;
+    try {
+      const res = await fetch(API + `/step/${episodeId}`, {
+        method: 'POST',
+        headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ action: { code } })
+      });
+      const data = await res.json();
+      const obs = data.observation;
+      stepCount = obs.step_count;
+      $('#step-info').textContent = `Step ${stepCount}/${obs.max_steps}`;
+      // Animate test results
+      renderTestResults(obs.test_results);
+      // Show reward
+      showReward(data.reward, obs.tests_passed, obs.total_tests);
+      // Log
+      const actionShort = code.replace(/\n/g, '\\n').slice(0, 60);
+      addLog(`[STEP] step=${stepCount} action="${actionShort}..." reward=${data.reward.toFixed(2)} done=${data.done} error=null`);
+      if (data.done) {
+        addLog(`[END] success=${data.reward === 1.0} steps=${stepCount} score=${data.reward.toFixed(3)}`);
+        if (data.reward === 1.0) {
+          $('#step-info').innerHTML = `<span style="color:var(--green)">&#10003; All tests passed!</span>`;
+        } else {
+          $('#step-info').innerHTML = `<span style="color:var(--red)">Episode ended (max steps reached)</span>`;
+        }
+      } else {
+        $('#btn-submit').disabled = false;
+      }
+    } catch(e) {
+      console.error('Step failed:', e);
+      $('#btn-submit').disabled = false;
+    }
+  }
+  // ── Render test results with stagger animation ───────────
+  function renderTestResults(results) {
+    const container = $('#test-results');
+    container.innerHTML = '';
+    results.forEach((t, i) => {
+      const row = document.createElement('div');
+      row.className = `test-row ${t.passed ? 'pass' : 'fail'}`;
+      row.innerHTML = `
+        <span class="test-icon">${t.passed ? '&#10003;' : '&#10007;'}</span>
+        <span class="test-name mono">${t.test_name}</span>
+        ${!t.passed ? `<span class="test-detail">expected: ${t.expected} | actual: ${t.actual}</span>` : ''}
+      `;
+      container.appendChild(row);
+      setTimeout(() => row.classList.add('show'), 100 + i * 120);
+    });
+  }
+  // ── Show reward ───���──────────────────────────────────────
+  function showReward(reward, passed, total) {
+    const display = $('#reward-display');
+    display.style.display = 'block';
+    const pct = Math.round(reward * 100);
+    $('#reward-value').textContent = reward.toFixed(2);
+    $('#reward-value').style.color = reward === 1.0 ? 'var(--green)' : reward > 0 ? 'var(--orange)' : 'var(--red)';
+    $('#tests-summary').textContent = `${passed}/${total}`;
+    const fill = $('#progress-fill');
+    fill.style.width = '0';
+    requestAnimationFrame(() => { fill.style.width = pct + '%'; });
+  }
+  // ── Terminal log ─────────────────────────────────────────
+  function addLog(line) {
+    logs.push(line);
+    const term = $('#terminal');
+    term.style.display = 'block';
+    const body = $('#terminal-body');
+    body.innerHTML = logs.map(l => {
+      if (l.startsWith('[START]')) return `<span style="color:var(--accent)">${esc(l)}</span>`;
+      if (l.startsWith('[STEP]'))  return `<span style="color:var(--text)">${esc(l)}</span>`;
+      if (l.startsWith('[END]'))   return `<span style="color:${l.includes('success=true')?'var(--green)':'var(--red)'}">${esc(l)}</span>`;
+      return esc(l);
+    }).join('\n') + ' <span class="cursor"></span>';
+    body.scrollTop = body.scrollHeight;
+  }
+  function esc(s) { return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+  function clearResults() {
+    $('#test-results').innerHTML = '';
+    $('#reward-display').style.display = 'none';
+    $('#terminal').style.display = 'none';
+    logs = [];
+  }
+  // ── Event listeners ──────────────────────────────────────
+  $('#btn-reset').addEventListener('click', resetEnv);
+  $('#btn-submit').addEventListener('click', submitFix);
+  // ── Init ─────────────────────────────────────────────────
+  loadTasks();
+})();
+</script>
+</body>
+</html>