Upload folder using huggingface_hub

Dockerfile

@@ -15,9 +15,16 @@ FROM ${BASE_IMAGE} AS builder
 
 WORKDIR /app
 
-# Ensure git is available (required for installing dependencies from VCS)
+# Ensure git + Node are available. Node is needed to build the React frontend.
 RUN apt-get update && \
-    apt-get install -y --no-install-recommends git && \
+    apt-get install -y --no-install-recommends git curl ca-certificates gnupg && \
+    mkdir -p /etc/apt/keyrings && \
+    curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key \
+        | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg && \
+    echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" \
+        > /etc/apt/sources.list.d/nodesource.list && \
+    apt-get update && \
+    apt-get install -y --no-install-recommends nodejs && \
     rm -rf /var/lib/apt/lists/*
 
 # Build argument to control whether we're building standalone or in-repo
@@ -54,6 +61,13 @@ RUN --mount=type=cache,target=/root/.cache/uv \
         uv sync --no-editable; \
     fi
 
+# Build the React frontend
+WORKDIR /app/env/frontend
+RUN --mount=type=cache,target=/root/.npm \
+    npm install --no-audit --no-fund --prefer-offline && \
+    npm run build
+WORKDIR /app/env
+
 # Final runtime stage
 FROM ${BASE_IMAGE}
 

demo/ui.py

@@ -21,6 +21,30 @@ import numpy as np
 import plotly.graph_objects as go
 from plotly.subplots import make_subplots
 
+
+def _fmt_obs(obs_dict: dict) -> str:
+    """Pretty-print an observation as indented JSON for gr.Code display.
+
+    Shrinks very long arrays (baseline trajectories etc.) so the rendered view
+    stays readable. `json.dumps(indent=2)` gives one value per line which
+    looks much cleaner than gr.JSON's component-per-field tree.
+    """
+    def _shrink(v):
+        if isinstance(v, list):
+            if len(v) > 8:
+                return (
+                    [_shrink(x) for x in v[:3]]
+                    + [f"... ({len(v)-6} more) ..."]
+                    + [_shrink(x) for x in v[-3:]]
+                )
+            return [_shrink(x) for x in v]
+        if isinstance(v, dict):
+            return {k: _shrink(x) for k, x in v.items()}
+        if isinstance(v, float):
+            return round(v, 6)
+        return v
+    return json.dumps(_shrink(obs_dict), indent=2, default=str)
+
 try:
     from ..arena import auto_test_draft, run_arena
     from ..landscapes import BUILDERS, build_landscape, structural_hints
@@ -1418,7 +1442,7 @@ def _api_reset(tier, seed):
     obs = env.reset()
     _API_ENV_STATE["env"] = env
     return (
-        obs.model_dump(exclude_none=True),
+        _fmt_obs(obs.model_dump(exclude_none=True)),
         f"✓ Reset complete · landscape: **{obs.landscape_description}** · "
         f"dim = {obs.dim} · budget = {obs.budget_remaining}",
     )
@@ -1445,7 +1469,7 @@ def _api_step(kind, baseline_name, code, draft_idx, step_start, step_end):
         return {"error": str(e)}, f"❌ Invalid action: {e}"
 
     obs = env.step(action)
-    dump = obs.model_dump(exclude_none=True)
+    dump = _fmt_obs(obs.model_dump(exclude_none=True))
     banner = (
         f"✓ {kind} executed · budget remaining = {obs.budget_remaining}"
         + (" · **episode done**" if obs.done else "")
@@ -1513,7 +1537,7 @@ def _llm_auto_run(endpoint_choice, custom_url, api_key, model_name,
         f"**Dim:** {obs.dim} · **Initial budget:** {obs.budget_remaining}",
         "",
     ]
-    yield ("\n".join(log_lines), obs.model_dump(exclude_none=True), None)
+    yield ("\n".join(log_lines), _fmt_obs(obs.model_dump(exclude_none=True)), None)
 
     for turn in range(1, int(max_turns) + 1):
         messages = build_prompt(obs)
@@ -1528,12 +1552,12 @@ def _llm_auto_run(endpoint_choice, custom_url, api_key, model_name,
             }, timeout=180)
             if r.status_code >= 400:
                 log_lines.append(f"**[LLM error {r.status_code}]** {r.text[:300]}")
-                yield ("\n".join(log_lines), obs.model_dump(exclude_none=True), None)
+                yield ("\n".join(log_lines), _fmt_obs(obs.model_dump(exclude_none=True)), None)
                 return
             raw = r.json()["choices"][0]["message"]["content"]
         except Exception as e:
             log_lines.append(f"**[request failed]** `{type(e).__name__}: {e}`")
-            yield ("\n".join(log_lines), obs.model_dump(exclude_none=True), None)
+            yield ("\n".join(log_lines), _fmt_obs(obs.model_dump(exclude_none=True)), None)
             return
 
         dt = _time.time() - t0
@@ -1545,7 +1569,7 @@ def _llm_auto_run(endpoint_choice, custom_url, api_key, model_name,
                 f"**[turn {turn}] parse error:** `{e}`"
                 f"\n```\n{raw[:500]}\n```\n"
             )
-            yield ("\n".join(log_lines), obs.model_dump(exclude_none=True), None)
+            yield ("\n".join(log_lines), _fmt_obs(obs.model_dump(exclude_none=True)), None)
             return
 
         obs = env.step(action)
@@ -1619,7 +1643,7 @@ def _llm_auto_run(endpoint_choice, custom_url, api_key, model_name,
             log_lines.append(f"```python\n{action.code.strip()}\n```")
             log_lines.append(f"")
 
-        yield ("\n".join(log_lines), obs.model_dump(exclude_none=True), None)
+        yield ("\n".join(log_lines), _fmt_obs(obs.model_dump(exclude_none=True)), None)
 
         if obs.done:
             bk = obs.r_optcoder_breakdown or {}
@@ -1676,12 +1700,12 @@ def _llm_auto_run(endpoint_choice, custom_url, api_key, model_name,
                 "-r_eval_fail":  -bk.get("r_eval_failures", 0),
             }, reward_val)
             yield ("\n".join(log_lines),
-                   obs.model_dump(exclude_none=True),
+                   _fmt_obs(obs.model_dump(exclude_none=True)),
                    reward_plot)
             return
 
     log_lines.append("\n**[!] Reached max turns without commit** — episode unfinished.")
-    yield ("\n".join(log_lines), obs.model_dump(exclude_none=True), None)
+    yield ("\n".join(log_lines), _fmt_obs(obs.model_dump(exclude_none=True)), None)
 
 
 # ----------------- top-level UI -----------------
@@ -1789,8 +1813,8 @@ def build_ui(*args, **kwargs) -> gr.Blocks:
         gr.HTML(HERO_HTML)
 
         with gr.Tabs():
-            # --- Tab 0: OpenEnv (primary — LLM auto-run) ---
-            with gr.Tab("OpenEnv"):
+            # --- Tab 0: Run with LLM (primary — auto-run) ---
+            with gr.Tab("Run with LLM"):
                 with gr.Row(equal_height=False):
                     # -------- MAIN PANE (left, wider) --------
                     with gr.Column(scale=4, min_width=640):
@@ -1805,8 +1829,9 @@ def build_ui(*args, **kwargs) -> gr.Blocks:
                                 llm_reward_plot = gr.Plot(
                                     label="Reward breakdown (on episode end)")
                             with gr.Column(scale=1):
-                                latest_obs = gr.JSON(label="Latest observation",
-                                                      height=240, open=False)
+                                latest_obs = gr.Code(
+                                    language="json", interactive=False,
+                                    label="Latest observation", lines=14)
 
                     # -------- SIDEBAR (right, narrower) --------
                     with gr.Column(scale=1, min_width=300, elem_classes="lf-sidebar"):
@@ -1849,6 +1874,18 @@ def build_ui(*args, **kwargs) -> gr.Blocks:
                         run_btn = gr.Button("▶ Run episode", variant="primary",
                                              size="lg")
 
+                        with gr.Accordion("System prompt (sent to LLM)",
+                                           open=False):
+                            try:
+                                from ..prompts import SYSTEM as _SYS, ACTION_SPEC as _ACT
+                            except ImportError:
+                                from prompts import SYSTEM as _SYS, ACTION_SPEC as _ACT  # type: ignore
+                            gr.Code(
+                                value=f"# SYSTEM\n\n{_SYS}\n\n# ACTION_SPEC\n\n{_ACT}",
+                                language="markdown", interactive=False,
+                                lines=14,
+                            )
+
                 run_btn.click(
                     _llm_auto_run,
                     [ep_choice, custom_url_in, key_in, model_name_in,
@@ -1857,7 +1894,7 @@ def build_ui(*args, **kwargs) -> gr.Blocks:
                 )
 
             # --- Tab: Manual stepping (raw /reset + /step) ---
-            with gr.Tab("Manual"):
+            with gr.Tab("API playground"):
                 with gr.Row(equal_height=False):
                     with gr.Column(scale=1, min_width=340, elem_classes="lf-sidebar"):
                         gr.Markdown("### Manual stepping")
@@ -1896,10 +1933,13 @@ def build_ui(*args, **kwargs) -> gr.Blocks:
                     with gr.Column(scale=2, min_width=580):
                         status4 = gr.Markdown(
                             "*No active env — hit **Reset env** to begin.*")
-                        obs4_reset = gr.JSON(label="Initial observation",
-                                              height=280)
+                        obs4_reset = gr.Code(
+                            language="json", interactive=False,
+                            label="Initial observation", lines=12)
                         status4b = gr.Markdown()
-                        obs4 = gr.JSON(label="Step observation", height=320)
+                        obs4 = gr.Code(
+                            language="json", interactive=False,
+                            label="Step observation", lines=14)
 
                 reset_btn.click(_api_reset, [tier4, seed4],
                                 [obs4_reset, status4])

frontend/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LandscapeForge</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <style>
+      html, body, #root { height: 100%; background: #1f1d1a; color: #f3f0e8; }
+      body { margin: 0; font-family: 'Inter', system-ui, sans-serif; }
+      *::-webkit-scrollbar { width: 10px; height: 10px; }
+      *::-webkit-scrollbar-track { background: #1f1d1a; }
+      *::-webkit-scrollbar-thumb { background: #403b34; border-radius: 5px; }
+      *::-webkit-scrollbar-thumb:hover { background: #857d72; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "landscapeforge-frontend",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.460.0",
+    "plotly.js-basic-dist-min": "^2.35.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-plotly.js": "^2.6.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
+    "vite": "^5.4.11"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.jsx

@@ -0,0 +1,51 @@
+import { useState } from 'react'
+import { TopBar } from './components/TopBar.jsx'
+import { TabNav } from './components/TabNav.jsx'
+import { RunWithLlm } from './pages/RunWithLlm.jsx'
+import { ApiPlayground } from './pages/ApiPlayground.jsx'
+import { LandscapeExplorer } from './pages/LandscapeExplorer.jsx'
+import { BaselineRace } from './pages/BaselineRace.jsx'
+import { OptimizerArena } from './pages/OptimizerArena.jsx'
+import { About } from './pages/About.jsx'
+
+const TABS = [
+  { id: 'llm',       label: 'Run with LLM' },
+  { id: 'api',       label: 'API playground' },
+  { id: 'landscape', label: 'Landscape' },
+  { id: 'race',      label: 'Baseline race' },
+  { id: 'arena',     label: 'Optimizer arena' },
+  { id: 'about',     label: 'About' },
+]
+
+export default function App() {
+  const [active, setActive] = useState('llm')
+
+  return (
+    <div className="min-h-screen bg-bg text-ink">
+      <div className="max-w-[1400px] mx-auto px-6 py-6">
+        <TopBar />
+        <section className="py-4">
+          <h1 className="text-[2rem] leading-tight max-w-[820px]">
+            An LLM designs optimizers, through a probe–draft–commit REPL.
+          </h1>
+          <p className="text-muted text-base mt-2 max-w-[720px]">
+            Two agents co-evolve: one writes optimizer code, the other picks
+            adversarial landscapes. Connect any OpenAI-compatible endpoint
+            and watch a model play, or explore the landscape library interactively.
+          </p>
+        </section>
+
+        <TabNav tabs={TABS} active={active} onChange={setActive} />
+
+        <main className="mt-6">
+          {active === 'llm'       && <RunWithLlm />}
+          {active === 'api'       && <ApiPlayground />}
+          {active === 'landscape' && <LandscapeExplorer />}
+          {active === 'race'      && <BaselineRace />}
+          {active === 'arena'     && <OptimizerArena />}
+          {active === 'about'     && <About />}
+        </main>
+      </div>
+    </div>
+  )
+}

frontend/src/components/KpiCard.jsx

@@ -0,0 +1,20 @@
+export function KpiCard({ label, value, sub, tone, sign = '' }) {
+  const toneClass =
+    tone === 'good' ? 'text-good border-good/35'
+    : tone === 'warn' ? 'text-warn border-warn/35'
+    : tone === 'bad'  ? 'text-bad  border-bad/35'
+    : 'text-ink border-border-soft'
+  return (
+    <div className={`rounded-xl border bg-elevated p-4 ${toneClass}`}>
+      <div className="text-[0.68rem] font-semibold uppercase tracking-[0.1em]
+                      text-subtle mb-1">{label}</div>
+      <div className="font-serif font-medium text-[1.9rem] leading-[1.05]
+                      tracking-tight">{sign}{value}</div>
+      {sub && (
+        <div className="text-[0.72rem] mt-1.5 text-subtle font-mono">
+          {sub}
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/RewardBreakdown.jsx

@@ -0,0 +1,64 @@
+import Plot from 'react-plotly.js'
+
+const PLOTLY_BASE = {
+  font: { family: 'Inter', color: '#f3f0e8', size: 12 },
+  paper_bgcolor: '#2a2824',
+  plot_bgcolor: '#1f1d1a',
+  hoverlabel: { bgcolor: '#f3f0e8', font: { color: '#1f1d1a' } },
+}
+const AXIS = {
+  gridcolor: '#403b34', zerolinecolor: '#554e45',
+  showline: true, linecolor: '#554e45',
+  tickfont: { color: '#b5ada0' },
+}
+
+export function RewardBreakdown({ breakdown, total }) {
+  const components = {
+    r_regret:      breakdown.r_regret,
+    r_convergence: breakdown.r_convergence,
+    r_robustness:  breakdown.r_robustness,
+    r_novelty:     breakdown.r_novelty,
+    '-r_budget':   -breakdown.r_budget,
+    '-r_eval_fail': -breakdown.r_eval_failures,
+  }
+  const names = Object.keys(components)
+  const vs = names.map(n => components[n])
+  const colors = vs.map(v => v >= 0 ? '#3d6b4c' : '#a0483a')
+  const labels = vs.map(v => (v >= 0 ? '+' : '') + v.toFixed(3))
+
+  return (
+    <Plot
+      data={[{
+        type: 'bar', orientation: 'h',
+        y: names, x: vs,
+        marker: { color: colors, line: { color: '#1f1d1a', width: 1 } },
+        text: labels, textposition: 'outside', cliponaxis: false,
+        textfont: { color: '#f3f0e8', size: 11 },
+        hovertemplate: '%{y}<br>contribution=%{x:+.3f}<extra></extra>',
+      }]}
+      layout={{
+        ...PLOTLY_BASE,
+        title: {
+          text: `Reward breakdown  ·  total = ${(total >= 0 ? '+' : '') + total.toFixed(3)}`,
+          x: 0.02, xanchor: 'left',
+          font: { size: 14, color: '#f3f0e8' },
+        },
+        height: 260, margin: { l: 110, r: 50, t: 50, b: 30 },
+        xaxis: {
+          title: 'weighted contribution',
+          range: [Math.min(...vs, 0) - 0.15, Math.max(...vs, 0) + 0.15],
+          ...AXIS,
+        },
+        yaxis: { autorange: 'reversed', ...AXIS },
+        showlegend: false, bargap: 0.25,
+        shapes: [{
+          type: 'line', x0: 0, x1: 0, y0: -0.5, y1: names.length - 0.5,
+          line: { color: '#554e45', width: 1 },
+        }],
+      }}
+      config={{ displayModeBar: false, responsive: true }}
+      style={{ width: '100%' }}
+      useResizeHandler
+    />
+  )
+}

frontend/src/components/TabNav.jsx

@@ -0,0 +1,20 @@
+export function TabNav({ tabs, active, onChange }) {
+  return (
+    <nav className="flex gap-1 border-b border-border">
+      {tabs.map(t => (
+        <button
+          key={t.id}
+          onClick={() => onChange(t.id)}
+          className={
+            'px-4 py-3 text-sm font-medium transition-colors border-b-2 -mb-px ' +
+            (t.id === active
+              ? 'text-accent border-accent'
+              : 'text-muted hover:text-ink border-transparent')
+          }
+        >
+          {t.label}
+        </button>
+      ))}
+    </nav>
+  )
+}

frontend/src/components/TopBar.jsx

@@ -0,0 +1,38 @@
+export function TopBar() {
+  return (
+    <header className="flex items-center justify-between border-b border-border pb-4">
+      <div className="flex items-center gap-3">
+        <div className="relative w-8 h-8 rounded-[8px] shadow-card"
+             style={{ background: 'linear-gradient(135deg, #e28763 0%, #c96442 100%)' }}>
+          <div className="absolute inset-[5px] border-[1.5px] rounded-[4px] border-white/60"
+               style={{ clipPath: 'polygon(0 0, 100% 0, 100% 70%, 30% 100%, 0 100%)' }} />
+        </div>
+        <div>
+          <div className="font-semibold text-base leading-tight">LandscapeForge</div>
+          <div className="text-[0.7rem] uppercase tracking-wider text-subtle mt-[1px]">
+            OpenEnv · Hackathon Apr '26
+          </div>
+        </div>
+      </div>
+      <nav className="flex items-center gap-1">
+        {[
+          ['Space', 'https://huggingface.co/spaces/mnawfal29/landscapeforge'],
+          ['API schema', '/schema'],
+          ['OpenAPI', '/openapi.json'],
+        ].map(([label, href]) => (
+          <a
+            key={label}
+            href={href}
+            target="_blank"
+            rel="noreferrer"
+            className="text-sm text-muted hover:text-ink px-3 py-1.5 rounded-md
+                       hover:bg-surface border border-transparent
+                       hover:border-border transition-colors"
+          >
+            {label}
+          </a>
+        ))}
+      </nav>
+    </header>
+  )
+}

frontend/src/components/TurnCard.jsx

@@ -0,0 +1,65 @@
+const KIND_STYLES = {
+  draft:        'text-accent border-accent',
+  run_baseline: 'text-[#7ecfc5] border-[#5a9c94]',
+  inspect:      'text-[#b5a5e0] border-[#7e6ea8]',
+  commit:       'text-[#7ab68c] border-[#4e7c5c]',
+}
+
+export function TurnCard({ turn, kind, action_str, output, duration_s,
+                           budget_remaining, code }) {
+  const chipClass = KIND_STYLES[kind] || 'text-ink border-border'
+
+  return (
+    <div className="rounded-lg border border-border bg-surface p-4 shadow-card">
+      <div className="flex items-center gap-3 pb-2.5 mb-2.5
+                      border-b border-dashed border-border/60">
+        <span className="font-serif font-semibold text-[0.98rem] tracking-tight">
+          Turn {turn}
+        </span>
+        <span className={`chip ${chipClass}`}>{kind}</span>
+        <span className="ml-auto font-mono text-xs text-subtle">
+          {duration_s.toFixed(1)}s · budget <strong className="text-ink">{budget_remaining}</strong>
+        </span>
+      </div>
+
+      <Row label="Action">{action_str}</Row>
+      <Row label="Output">
+        {output.length === 0 ? 'ok' : output.map((o, i) => (
+          <StatusChip key={i} {...o} />
+        ))}
+      </Row>
+
+      {code && (
+        <pre className="mt-3 rounded-lg border border-border bg-[#14120f]
+                        px-4 py-3 overflow-x-auto text-[0.82rem] leading-relaxed">
+          <code className="font-mono text-[#e8e3d6]">{code.trim()}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
+function Row({ label, children }) {
+  return (
+    <div className="grid grid-cols-[70px_1fr] gap-3 items-baseline py-1">
+      <div className="text-[0.68rem] font-semibold uppercase tracking-[0.1em]
+                      text-subtle pt-0.5">{label}</div>
+      <div className="text-[0.9rem] leading-[1.55] flex flex-wrap gap-2 items-center">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function StatusChip({ kind, text }) {
+  const cls = {
+    good: 'text-good border-good/40 bg-good/10',
+    warn: 'text-warn border-warn/40 bg-warn/10',
+    bad:  'text-bad  border-bad/40  bg-bad/10',
+    info: 'text-ink  border-border  bg-transparent',
+  }[kind] || 'text-ink border-border'
+  return (
+    <span className={`inline-block px-1.5 py-0.5 rounded border text-xs font-medium ${cls}`}
+          dangerouslySetInnerHTML={{ __html: text }} />
+  )
+}

frontend/src/index.css

@@ -0,0 +1,45 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  h1, h2, h3, h4 { @apply font-serif font-medium tracking-tight; }
+  h1 { @apply text-3xl; }
+  h2 { @apply text-xl; }
+  h3 { @apply text-base font-semibold; }
+  code { @apply font-mono text-[0.85em]; }
+}
+
+@layer components {
+  .card {
+    @apply bg-surface border border-border rounded-xl p-5;
+  }
+  .btn-primary {
+    @apply inline-flex items-center justify-center gap-2
+           bg-accent hover:bg-accent-dark text-white font-semibold text-sm
+           rounded-lg px-4 py-2 transition-colors
+           shadow-[0_1px_2px_rgba(201,100,66,0.15)];
+  }
+  .btn-secondary {
+    @apply inline-flex items-center justify-center gap-2
+           bg-surface border border-border hover:border-accent text-ink
+           font-medium text-sm rounded-lg px-4 py-2 transition-colors;
+  }
+  .input {
+    @apply w-full bg-elevated border border-border text-ink rounded-lg
+           px-3 py-2 text-sm placeholder:text-subtle
+           focus:border-accent focus:outline-none focus:ring-[3px]
+           focus:ring-accent/20 transition;
+  }
+  .label {
+    @apply text-xs font-medium text-muted tracking-wide mb-1.5 block;
+  }
+  .chip {
+    @apply inline-block px-2 py-0.5 rounded border font-mono text-[0.78rem]
+           font-medium;
+  }
+  .kbd {
+    @apply inline-block px-1.5 py-0.5 rounded border border-border bg-elevated
+           font-mono text-xs text-muted;
+  }
+}

frontend/src/lib/api.js

@@ -0,0 +1,67 @@
+// Thin wrappers around the FastAPI endpoints.
+
+export async function envReset(params = {}) {
+  const r = await fetch('/reset', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(params),
+  })
+  if (!r.ok) throw new Error(`reset failed: ${r.status}`)
+  return r.json()
+}
+
+export async function envStep(action) {
+  const r = await fetch('/step', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ action }),
+  })
+  if (!r.ok) throw new Error(`step failed: ${r.status}`)
+  return r.json()
+}
+
+export async function getLandscape(params) {
+  const r = await fetch('/api/landscape', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(params),
+  })
+  if (!r.ok) throw new Error(`landscape failed: ${r.status}`)
+  return r.json()
+}
+
+export async function getBaselineRace(params) {
+  const r = await fetch('/api/baseline_race', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(params),
+  })
+  if (!r.ok) throw new Error(`baseline_race failed: ${r.status}`)
+  return r.json()
+}
+
+export async function runArena(params) {
+  const r = await fetch('/api/arena', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(params),
+  })
+  if (!r.ok) throw new Error(`arena failed: ${r.status}`)
+  return r.json()
+}
+
+export function llmRunStream(params, onEvent) {
+  // SSE stream: each chunk is a JSON event
+  const url = '/api/llm_run?' + new URLSearchParams(params).toString()
+  const es = new EventSource(url)
+  es.onmessage = ev => {
+    try {
+      onEvent(JSON.parse(ev.data))
+    } catch (e) {
+      console.error('bad SSE payload', ev.data, e)
+    }
+  }
+  es.addEventListener('end', () => es.close())
+  es.onerror = () => es.close()
+  return () => es.close()
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

frontend/src/pages/About.jsx

@@ -0,0 +1,66 @@
+export function About() {
+  return (
+    <article className="card prose prose-invert max-w-[820px] text-[0.95rem]
+                        [&_code]:bg-elevated [&_code]:border [&_code]:border-border
+                        [&_code]:px-1 [&_code]:rounded [&_a]:text-accent">
+      <h2>How the environment works</h2>
+      <p>
+        <strong>OptCoder</strong> (the LLM policy) designs an
+        <code> Optimizer </code>class that minimizes a hidden loss landscape.
+        Each episode:
+      </p>
+      <ol>
+        <li>
+          <strong>LandscapeForge</strong> (v1: internal template picker)
+          chooses a landscape at a tier-appropriate difficulty — convex
+          quadratic, Rosenbrock, Gaussian mix, Himmelblau, stiff quadratic,
+          cliff.
+        </li>
+        <li>
+          <strong>OptCoder runs a 4-action REPL</strong> with a 12-unit budget:
+          <ul>
+            <li><code>run_baseline(name)</code> — run SGD / Momentum / Adam /
+                L-BFGS, observe trajectory (cost 2)</li>
+            <li><code>draft(code)</code> — submit <code>Optimizer</code> class,
+                env auto-tests 20 steps (cost 2)</li>
+            <li><code>inspect(draft_idx, step_range)</code> — per-step detail
+                for a prior draft (cost 1)</li>
+            <li><code>commit</code> — run the full 10-seed × 200-step arena
+                (cost 0)</li>
+          </ul>
+        </li>
+        <li>
+          <strong>Reward</strong> is Adam-relative progress —
+          <code>my_progress / tuned_adam_progress − 1</code>, clipped to
+          <code>[−1, +1]</code>. No <code>f_min</code> dependency, so this
+          extends to NN training as a drop-in.
+        </li>
+        <li>
+          <strong>GRPO</strong> trains the policy against this reward; arena
+          cost is ~50 ms so ~36k episodes/hour on one H100.
+        </li>
+      </ol>
+
+      <h2>Research anchors</h2>
+      <ul>
+        <li><strong>Thread 1</strong> · LLMs as optimizer designers:{' '}
+          <a href="https://arxiv.org/abs/2302.06675">Lion</a>,{' '}
+          <a href="https://www.nature.com/articles/s41586-023-06924-6">FunSearch</a>
+        </li>
+        <li><strong>Thread 2</strong> · Co-evolutionary LLM-env: Coevolve,{' '}
+          <a href="https://arxiv.org/html/2512.19682v1">GenEnv</a>
+        </li>
+        <li><strong>Thread 3</strong> · Iterative code refinement:{' '}
+          <a href="https://arxiv.org/abs/2303.17651">Self-Refine</a>
+        </li>
+        <li><strong>Thread 4</strong> · GRPO with measurable rewards:{' '}
+          <a href="https://arxiv.org/abs/2602.12049v1">HPC GFLOPS reward</a>
+        </li>
+        <li><strong>Thread 5</strong> · Analytical landscape benchmarks:{' '}
+          <a href="https://inria.hal.science/hal-00362649/document">BBOB/COCO</a>,{' '}
+          <a href="https://arxiv.org/abs/1901.01753">POET</a>
+        </li>
+      </ul>
+    </article>
+  )
+}

frontend/src/pages/ApiPlayground.jsx

@@ -0,0 +1,141 @@
+import { useState } from 'react'
+import { envReset, envStep } from '../lib/api.js'
+
+const SAMPLE_CODE = `class Optimizer:
+    def __init__(self, dim):
+        self.lr = 0.05
+        self.beta = 0.9
+        self.v = np.zeros(dim)
+
+    def step(self, x, f_val, grad):
+        self.v = self.beta * self.v - self.lr * grad
+        return x + self.v
+`
+
+export function ApiPlayground() {
+  const [tier, setTier] = useState('T0')
+  const [seed, setSeed] = useState(42)
+  const [obs, setObs] = useState(null)
+  const [status, setStatus] = useState('No active env — hit Reset to begin.')
+  const [kind, setKind] = useState('run_baseline')
+  const [baselineName, setBaselineName] = useState('adam')
+  const [code, setCode] = useState(SAMPLE_CODE)
+  const [draftIdx, setDraftIdx] = useState(0)
+  const [stepStart, setStepStart] = useState(0)
+  const [stepEnd, setStepEnd] = useState(20)
+
+  async function reset() {
+    try {
+      const result = await envReset({ tier, seed })
+      setObs(result.observation || result)
+      setStatus(`✓ Reset · ${result.observation?.landscape_description ?? 'landscape ready'}`)
+    } catch (e) { setStatus(`❌ ${e.message}`) }
+  }
+  async function step() {
+    const action = { kind }
+    if (kind === 'run_baseline') action.baseline_name = baselineName
+    if (kind === 'draft') action.code = code
+    if (kind === 'inspect') {
+      action.draft_idx = draftIdx
+      action.step_range_start = stepStart
+      action.step_range_end = stepEnd
+    }
+    try {
+      const result = await envStep(action)
+      setObs(result.observation || result)
+      setStatus(`✓ Stepped · budget ${result.observation?.budget_remaining ?? '—'}`)
+    } catch (e) { setStatus(`❌ ${e.message}`) }
+  }
+
+  return (
+    <div className="grid grid-cols-[320px_1fr] gap-5">
+      <aside className="card space-y-4 h-fit">
+        <div>
+          <h3 className="mb-1">Manual stepping</h3>
+          <p className="text-xs text-muted">
+            Drive the env one action at a time — same contract as HTTP
+            <code> /reset </code> + <code> /step </code>.
+          </p>
+        </div>
+        <div>
+          <label className="label">Tier</label>
+          <select className="input" value={tier} onChange={e => setTier(e.target.value)}>
+            <option>T0</option><option>T1</option><option>T2</option>
+          </select>
+        </div>
+        <div>
+          <label className="label">Seed: {seed}</label>
+          <input type="range" min={0} max={100} step={1} value={seed}
+                 onChange={e => setSeed(Number(e.target.value))}
+                 className="w-full accent-accent" />
+        </div>
+        <button className="btn-primary w-full" onClick={reset}>Reset env</button>
+
+        <hr className="border-border/50" />
+
+        <div>
+          <label className="label">Action kind</label>
+          <div className="grid grid-cols-2 gap-1.5">
+            {['run_baseline', 'draft', 'inspect', 'commit'].map(k => (
+              <button key={k}
+                      onClick={() => setKind(k)}
+                      className={`text-xs font-mono px-2 py-1.5 rounded border transition ${
+                        kind === k
+                          ? 'bg-accent/20 text-accent border-accent'
+                          : 'bg-elevated text-muted border-border hover:text-ink'}`}>
+                {k}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {kind === 'run_baseline' && (
+          <div>
+            <label className="label">Reference optimizer</label>
+            <select className="input" value={baselineName}
+                    onChange={e => setBaselineName(e.target.value)}>
+              <option>sgd</option><option>momentum</option>
+              <option>adam</option><option>lbfgs</option>
+            </select>
+          </div>
+        )}
+        {kind === 'draft' && (
+          <div>
+            <label className="label">Optimizer class</label>
+            <textarea className="input font-mono text-xs h-40"
+                      value={code} onChange={e => setCode(e.target.value)} />
+          </div>
+        )}
+        {kind === 'inspect' && (
+          <div className="space-y-2">
+            <div>
+              <label className="label">draft_idx</label>
+              <input type="number" className="input" value={draftIdx}
+                     onChange={e => setDraftIdx(Number(e.target.value))} />
+            </div>
+            <div>
+              <label className="label">step_range_start</label>
+              <input type="number" className="input" value={stepStart}
+                     onChange={e => setStepStart(Number(e.target.value))} />
+            </div>
+            <div>
+              <label className="label">step_range_end</label>
+              <input type="number" className="input" value={stepEnd}
+                     onChange={e => setStepEnd(Number(e.target.value))} />
+            </div>
+          </div>
+        )}
+        <button className="btn-primary w-full" onClick={step}>Step</button>
+      </aside>
+
+      <div className="space-y-3">
+        <div className="text-sm text-muted font-mono">{status}</div>
+        <pre className="card overflow-x-auto max-h-[640px] overflow-y-auto">
+          <code className="font-mono text-xs text-ink leading-relaxed whitespace-pre-wrap">
+            {obs ? JSON.stringify(obs, null, 2) : '// hit Reset to begin'}
+          </code>
+        </pre>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/BaselineRace.jsx

@@ -0,0 +1,81 @@
+import { useState } from 'react'
+import Plot from 'react-plotly.js'
+import { Play } from 'lucide-react'
+import { getBaselineRace } from '../lib/api.js'
+
+const TEMPLATES = [
+  'quadratic', 'rosenbrock', 'styblinski_tang', 'huber',
+  'gaussian_mix', 'himmelblau', 'plateau', 'cliff',
+]
+
+export function BaselineRace() {
+  const [template, setTemplate] = useState('rosenbrock')
+  const [seed, setSeed] = useState(1)
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(false)
+
+  async function race() {
+    setLoading(true)
+    try { setData(await getBaselineRace({ template, seed })) }
+    finally { setLoading(false) }
+  }
+
+  return (
+    <div className="grid grid-cols-[320px_1fr] gap-5">
+      <aside className="card space-y-4 h-fit">
+        <div>
+          <h3 className="mb-1">Baseline race</h3>
+          <p className="text-xs text-muted">
+            SGD / Momentum / Adam / L-BFGS each with per-landscape LR tuning.
+            Tuned Adam is the bar the trained OptCoder has to beat.
+          </p>
+        </div>
+        <div>
+          <label className="label">Template</label>
+          <select className="input" value={template}
+                  onChange={e => setTemplate(e.target.value)}>
+            {TEMPLATES.map(t => <option key={t}>{t}</option>)}
+          </select>
+        </div>
+        <div>
+          <label className="label">Seed: {seed}</label>
+          <input type="range" min={0} max={100} step={1} value={seed}
+                 onChange={e => setSeed(Number(e.target.value))}
+                 className="w-full accent-accent" />
+        </div>
+        <button className="btn-primary w-full" onClick={race} disabled={loading}>
+          <Play size={14} /> {loading ? 'Racing…' : 'Race'}
+        </button>
+      </aside>
+
+      <div className="space-y-4">
+        {data?.contour && (
+          <div className="card">
+            <Plot data={data.contour.data} layout={data.contour.layout}
+                  config={{ displayModeBar: false, responsive: true }}
+                  style={{ width: '100%' }} useResizeHandler />
+          </div>
+        )}
+        {data && (
+          <div className="grid grid-cols-2 gap-4">
+            {data.curves && (
+              <div className="card"><Plot data={data.curves.data} layout={data.curves.layout}
+                    config={{ displayModeBar: false }} style={{ width: '100%' }} useResizeHandler /></div>
+            )}
+            {data.finals && (
+              <div className="card"><Plot data={data.finals.data} layout={data.finals.layout}
+                    config={{ displayModeBar: false }} style={{ width: '100%' }} useResizeHandler /></div>
+            )}
+          </div>
+        )}
+        {data?.summary_md && (
+          <div className="card prose prose-invert max-w-none text-sm
+                          [&_code]:bg-elevated [&_code]:border [&_code]:border-border
+                          [&_code]:px-1 [&_code]:rounded">
+            <div dangerouslySetInnerHTML={{ __html: data.summary_md }} />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/pages/LandscapeExplorer.jsx

@@ -0,0 +1,87 @@
+import { useState, useEffect } from 'react'
+import Plot from 'react-plotly.js'
+import { getLandscape } from '../lib/api.js'
+
+const TEMPLATES = [
+  'quadratic', 'rosenbrock', 'styblinski_tang', 'huber',
+  'gaussian_mix', 'himmelblau', 'plateau', 'cliff',
+]
+
+export function LandscapeExplorer() {
+  const [template, setTemplate] = useState('rosenbrock')
+  const [dim, setDim] = useState(2)
+  const [seed, setSeed] = useState(0)
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(false)
+
+  async function build() {
+    setLoading(true)
+    try {
+      const d = await getLandscape({ template, dim, seed })
+      setData(d)
+    } finally { setLoading(false) }
+  }
+  useEffect(() => { build() /* initial load */ // eslint-disable-next-line
+  }, [])
+
+  return (
+    <div className="grid grid-cols-[320px_1fr] gap-5">
+      <aside className="card space-y-4 h-fit">
+        <div>
+          <h3 className="mb-1">Landscape explorer</h3>
+          <p className="text-xs text-muted">
+            Pick a template and see what the agent sees at reset.
+          </p>
+        </div>
+        <div>
+          <label className="label">Template</label>
+          <select className="input" value={template}
+                  onChange={e => setTemplate(e.target.value)}>
+            {TEMPLATES.map(t => <option key={t}>{t}</option>)}
+          </select>
+        </div>
+        <div>
+          <label className="label">Dim: {dim}</label>
+          <input type="range" min={2} max={10} step={1} value={dim}
+                 onChange={e => setDim(Number(e.target.value))}
+                 className="w-full accent-accent" />
+        </div>
+        <div>
+          <label className="label">Seed: {seed}</label>
+          <input type="range" min={0} max={100} step={1} value={seed}
+                 onChange={e => setSeed(Number(e.target.value))}
+                 className="w-full accent-accent" />
+        </div>
+        <button className="btn-primary w-full"
+                onClick={build} disabled={loading}>
+          {loading ? 'Building…' : 'Build landscape'}
+        </button>
+      </aside>
+
+      <div className="space-y-4">
+        {data?.contour && (
+          <div className="card">
+            <Plot data={data.contour.data} layout={data.contour.layout}
+                  config={{ displayModeBar: false, responsive: true }}
+                  style={{ width: '100%' }} useResizeHandler />
+          </div>
+        )}
+        {data?.hints && (
+          <div className="card">
+            <h3 className="mb-2">Structural hints</h3>
+            <table className="w-full text-sm">
+              <tbody>
+                {data.hints.map(([k, v], i) => (
+                  <tr key={i} className="border-b border-border-soft">
+                    <td className="py-2 pr-3 text-muted font-mono text-xs">{k}</td>
+                    <td className="py-2 text-ink font-mono text-xs">{v}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/pages/OptimizerArena.jsx

@@ -0,0 +1,111 @@
+import { useState } from 'react'
+import Plot from 'react-plotly.js'
+import { Swords } from 'lucide-react'
+import { runArena } from '../lib/api.js'
+import { RewardBreakdown } from '../components/RewardBreakdown.jsx'
+
+const SAMPLE = `class Optimizer:
+    def __init__(self, dim):
+        self.lr = 0.05
+        self.beta = 0.9
+        self.v = np.zeros(dim)
+
+    def step(self, x, f_val, grad):
+        # SGD with heavy-ball momentum
+        self.v = self.beta * self.v - self.lr * grad
+        return x + self.v
+`
+
+const TEMPLATES = [
+  'quadratic', 'rosenbrock', 'styblinski_tang', 'huber',
+  'gaussian_mix', 'himmelblau', 'plateau', 'cliff',
+]
+
+export function OptimizerArena() {
+  const [template, setTemplate] = useState('quadratic')
+  const [dim, setDim] = useState(5)
+  const [seed, setSeed] = useState(42)
+  const [code, setCode] = useState(SAMPLE)
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [err, setErr] = useState(null)
+
+  async function run() {
+    setLoading(true); setErr(null)
+    try { setData(await runArena({ template, dim, seed, code })) }
+    catch (e) { setErr(e.message) }
+    finally { setLoading(false) }
+  }
+
+  return (
+    <div className="grid grid-cols-[340px_1fr] gap-5">
+      <aside className="card space-y-4 h-fit">
+        <div>
+          <h3 className="mb-1">Optimizer arena</h3>
+          <p className="text-xs text-muted">
+            Paste an <code>Optimizer</code> class. We run it through the full
+            Phase-D arena vs tuned Adam on the chosen landscape.
+            <br /><span className="text-subtle">np is pre-injected — no import lines.</span>
+          </p>
+        </div>
+        <div>
+          <label className="label">Template</label>
+          <select className="input" value={template}
+                  onChange={e => setTemplate(e.target.value)}>
+            {TEMPLATES.map(t => <option key={t}>{t}</option>)}
+          </select>
+        </div>
+        <div>
+          <label className="label">Dim: {dim}</label>
+          <input type="range" min={2} max={10} step={1} value={dim}
+                 onChange={e => setDim(Number(e.target.value))}
+                 className="w-full accent-accent" />
+        </div>
+        <div>
+          <label className="label">Seed: {seed}</label>
+          <input type="range" min={0} max={100} step={1} value={seed}
+                 onChange={e => setSeed(Number(e.target.value))}
+                 className="w-full accent-accent" />
+        </div>
+        <button className="btn-primary w-full" onClick={run} disabled={loading}>
+          <Swords size={14} /> {loading ? 'Running…' : 'Run arena'}
+        </button>
+      </aside>
+
+      <div className="space-y-4">
+        <div className="card">
+          <h3 className="mb-2">Your Optimizer class</h3>
+          <textarea className="input font-mono text-xs h-72 leading-relaxed"
+                    value={code} onChange={e => setCode(e.target.value)} spellCheck={false} />
+        </div>
+        {err && (
+          <div className="card border-bad/40 bg-bad/10 text-bad">
+            <strong>Compile error:</strong>
+            <pre className="mt-1 text-xs whitespace-pre-wrap">{err}</pre>
+          </div>
+        )}
+        {data?.summary_md && (
+          <div className="card prose prose-invert max-w-none text-sm"
+               dangerouslySetInnerHTML={{ __html: data.summary_md }} />
+        )}
+        {data && (
+          <div className="grid grid-cols-2 gap-4">
+            {data.contour && (
+              <div className="card"><Plot data={data.contour.data} layout={data.contour.layout}
+                    config={{ displayModeBar: false }} style={{ width: '100%' }} useResizeHandler /></div>
+            )}
+            {data.progress && (
+              <div className="card"><Plot data={data.progress.data} layout={data.progress.layout}
+                    config={{ displayModeBar: false }} style={{ width: '100%' }} useResizeHandler /></div>
+            )}
+          </div>
+        )}
+        {data?.breakdown && (
+          <div className="card">
+            <RewardBreakdown breakdown={data.breakdown} total={data.total} />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/pages/RunWithLlm.jsx

@@ -0,0 +1,247 @@
+import { useState, useRef } from 'react'
+import { Play, Terminal, Activity } from 'lucide-react'
+import { llmRunStream } from '../lib/api.js'
+import { RewardBreakdown } from '../components/RewardBreakdown.jsx'
+import { TurnCard } from '../components/TurnCard.jsx'
+import { KpiCard } from '../components/KpiCard.jsx'
+
+const PRESET_ENDPOINTS = [
+  { label: 'Ollama (localhost:11434)', url: 'http://localhost:11434/v1' },
+  { label: 'Hugging Face Router',       url: 'https://router.huggingface.co/v1' },
+  { label: 'OpenAI',                    url: 'https://api.openai.com/v1' },
+  { label: 'Custom',                    url: '' },
+]
+const MODELS = [
+  'qwen2.5:3b', 'qwen2.5:7b', 'qwen2.5:1.5b',
+  'Qwen/Qwen2.5-7B-Instruct', 'Qwen/Qwen2.5-3B-Instruct',
+  'meta-llama/Llama-3.2-3B-Instruct', 'gpt-4o-mini',
+]
+
+export function RunWithLlm() {
+  const [endpoint, setEndpoint] = useState(PRESET_ENDPOINTS[0].label)
+  const [customUrl, setCustomUrl] = useState('')
+  const [apiKey, setApiKey] = useState('')
+  const [model, setModel] = useState(MODELS[0])
+  const [tier, setTier] = useState('T0')
+  const [seed, setSeed] = useState(42)
+  const [temperature, setTemperature] = useState(0.7)
+  const [maxTurns, setMaxTurns] = useState(10)
+
+  const [running, setRunning] = useState(false)
+  const [turns, setTurns] = useState([])
+  const [header, setHeader] = useState(null)
+  const [done, setDone] = useState(null)
+  const stopRef = useRef(null)
+
+  function run() {
+    setTurns([]); setHeader(null); setDone(null); setRunning(true)
+    const preset = PRESET_ENDPOINTS.find(p => p.label === endpoint)
+    const base_url = (customUrl || preset.url).replace(/\/$/, '')
+
+    if (stopRef.current) stopRef.current()
+    stopRef.current = llmRunStream(
+      {
+        base_url, api_key: apiKey, model,
+        tier, seed, temperature, max_turns: maxTurns,
+      },
+      (ev) => {
+        if (ev.kind === 'header') {
+          setHeader(ev)
+        } else if (ev.kind === 'turn') {
+          // SSE event uses `kind` for event type and `kind_of` for action kind;
+          // TurnCard expects `kind` = action kind, so rename here.
+          setTurns(prev => [...prev, { ...ev, kind: ev.kind_of }])
+        } else if (ev.kind === 'done') {
+          setDone(ev)
+          setRunning(false)
+        } else if (ev.kind === 'error') {
+          setHeader(h => ({ ...(h || {}), error: ev.message }))
+          setRunning(false)
+        }
+      },
+    )
+  }
+
+  return (
+    <div className="grid grid-cols-[1fr_320px] gap-5">
+      {/* ─── MAIN PANE ─── */}
+      <div className="space-y-5">
+        <div className="card">
+          <div className="flex items-center gap-2 mb-3">
+            <Terminal size={18} className="text-subtle" />
+            <h3>Transcript</h3>
+          </div>
+          {!header && !turns.length && (
+            <p className="text-muted italic text-sm">
+              Configure the LLM on the right and hit <strong>Run episode</strong>.
+              Each turn streams here as the model plays.
+            </p>
+          )}
+          {header && (
+            <div className="border-b border-border/50 pb-3 mb-3">
+              <div className="text-sm text-muted">
+                Model <span className="chip border-border text-ink">{header.model}</span>
+                &nbsp;via&nbsp;
+                <span className="chip border-border text-ink">{header.base_url}</span>
+              </div>
+              <div className="text-sm mt-2">
+                <strong>Landscape:</strong> {header.landscape}
+              </div>
+              <div className="text-sm text-muted mt-1">
+                Dim: <strong>{header.dim}</strong> · Initial budget:{' '}
+                <strong>{header.budget}</strong>
+              </div>
+              {header.error && (
+                <div className="mt-2 p-3 rounded border border-bad/40 bg-bad/10 text-bad">
+                  {header.error}
+                </div>
+              )}
+            </div>
+          )}
+          <div className="space-y-3">
+            {turns.map((t, i) => <TurnCard key={i} {...t} />)}
+          </div>
+        </div>
+
+        {done && <EpisodeDone done={done} />}
+      </div>
+
+      {/* ─── SIDEBAR ─── */}
+      <aside className="card space-y-4 h-fit sticky top-4">
+        <div>
+          <h3 className="mb-1">Connect an LLM</h3>
+          <p className="text-xs text-muted">
+            Point at any OpenAI-compatible <code>/v1/chat/completions</code> endpoint.
+          </p>
+        </div>
+
+        <div>
+          <label className="label">Endpoint</label>
+          <select
+            className="input"
+            value={endpoint}
+            onChange={e => setEndpoint(e.target.value)}
+          >
+            {PRESET_ENDPOINTS.map(p => (
+              <option key={p.label} value={p.label}>{p.label}</option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label className="label">Model</label>
+          <input
+            className="input font-mono text-xs"
+            list="model-list"
+            value={model}
+            onChange={e => setModel(e.target.value)}
+          />
+          <datalist id="model-list">
+            {MODELS.map(m => <option key={m} value={m} />)}
+          </datalist>
+        </div>
+
+        <div>
+          <label className="label">Custom base URL (optional)</label>
+          <input
+            className="input font-mono text-xs"
+            placeholder="http://localhost:8080/v1"
+            value={customUrl}
+            onChange={e => setCustomUrl(e.target.value)}
+          />
+        </div>
+
+        <div>
+          <label className="label">API key (optional)</label>
+          <input
+            type="password"
+            className="input font-mono text-xs"
+            placeholder="Bearer <key>"
+            value={apiKey}
+            onChange={e => setApiKey(e.target.value)}
+          />
+        </div>
+
+        <hr className="border-border/50" />
+
+        <h3>Episode config</h3>
+
+        <div>
+          <label className="label">Tier</label>
+          <select className="input" value={tier} onChange={e => setTier(e.target.value)}>
+            <option>T0</option><option>T1</option><option>T2</option>
+          </select>
+        </div>
+
+        <RangeRow label={`Seed: ${seed}`} min={0} max={100} step={1}
+                   value={seed} onChange={setSeed} />
+        <RangeRow label={`Temperature: ${temperature.toFixed(2)}`}
+                   min={0} max={1.5} step={0.05}
+                   value={temperature} onChange={setTemperature} />
+        <RangeRow label={`Max turns: ${maxTurns}`} min={3} max={15} step={1}
+                   value={maxTurns} onChange={setMaxTurns} />
+
+        <button
+          className="btn-primary w-full py-3"
+          disabled={running}
+          onClick={run}
+        >
+          {running
+            ? <><Activity size={16} className="animate-pulse" /> Running…</>
+            : <><Play size={16} /> Run episode</>}
+        </button>
+      </aside>
+    </div>
+  )
+}
+
+function RangeRow({ label, min, max, step, value, onChange }) {
+  return (
+    <div>
+      <label className="label">{label}</label>
+      <input
+        type="range"
+        min={min} max={max} step={step} value={value}
+        onChange={e => onChange(Number(e.target.value))}
+        className="w-full accent-accent"
+      />
+    </div>
+  )
+}
+
+function EpisodeDone({ done }) {
+  const reward = done.reward
+  const speedup = done.speedup_vs_adam
+  const rewardTone =
+    reward >= 0.5 ? 'good' : reward >= 0 ? 'warn' : 'bad'
+  const speedupTone = speedup >= 1.0 ? 'good' : 'warn'
+  const speedupDisplay = speedup < 100
+    ? `${speedup.toFixed(2)}×`
+    : `${Math.round(speedup)}×`
+
+  return (
+    <div className="card"
+         style={{ background: 'linear-gradient(180deg, rgba(226,135,99,0.07) 0%, rgba(42,40,36,0) 60%)' }}>
+      <div className="flex items-baseline gap-3 mb-4">
+        <span className="chip border-accent text-accent uppercase tracking-wider text-[0.7rem]">
+          Episode complete
+        </span>
+        <span className="text-subtle text-sm">
+          ended by <code className="text-muted">{done.reason}</code>
+        </span>
+      </div>
+
+      <div className="grid grid-cols-3 gap-3 mb-5">
+        <KpiCard label="Terminal reward" value={reward.toFixed(3)}
+                 sub="GRPO training scalar" tone={rewardTone} sign={reward >= 0 ? '+' : ''}/>
+        <KpiCard label="Speedup vs tuned Adam" value={speedupDisplay}
+                 sub={`my ${done.my_progress.toFixed(3)} · adam ${done.adam_progress.toFixed(3)}`}
+                 tone={speedupTone} />
+        <KpiCard label="Adam shortfall" value={done.final_regret.toFixed(3)}
+                 sub="0 = matched/beat Adam" />
+      </div>
+
+      <RewardBreakdown breakdown={done.breakdown} total={reward} />
+    </div>
+  )
+}

frontend/tailwind.config.js

@@ -0,0 +1,33 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,jsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        // Warm Claude-inspired dark palette
+        bg:       '#1f1d1a',
+        surface:  '#2a2824',
+        elevated: '#332f2a',
+        border:   { DEFAULT: '#403b34', soft: '#332f2a' },
+        ink:      '#f3f0e8',
+        muted:    '#b5ada0',
+        subtle:   '#857d72',
+        accent:   { DEFAULT: '#e28763', dark: '#c96442', soft: '#4a2f22' },
+        good:     '#7ab68c',
+        warn:     '#e4b264',
+        bad:      '#d47d6a',
+      },
+      fontFamily: {
+        sans:   ['Inter', 'system-ui', 'sans-serif'],
+        serif:  ['"Source Serif 4"', 'Georgia', 'serif'],
+        mono:   ['"JetBrains Mono"', 'ui-monospace', 'monospace'],
+      },
+      boxShadow: {
+        card: '0 1px 0 rgba(0,0,0,0.2)',
+        glow: '0 0 0 3px rgba(226,135,99,0.18)',
+      },
+    },
+  },
+  plugins: [],
+}

frontend/vite.config.js

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      // Proxy API calls to FastAPI during development
+      '/reset': 'http://localhost:8000',
+      '/step': 'http://localhost:8000',
+      '/schema': 'http://localhost:8000',
+      '/health': 'http://localhost:8000',
+      '/api': 'http://localhost:8000',
+    },
+  },
+})

server/api_routes.py

@@ -0,0 +1,538 @@
+"""FastAPI endpoints used by the React frontend.
+
+Provides:
+  - /api/landscape        build a template and return a Plotly contour + hints
+  - /api/baseline_race    run 4 LR-tuned baselines and return plots + summary
+  - /api/arena            full Phase-D evaluation of a user optimizer vs Adam
+  - /api/llm_run          SSE-streamed LLM-driven episode
+"""
+
+from __future__ import annotations
+
+import asyncio
+import json
+import re
+import time
+from typing import Any, Optional
+
+import numpy as np
+import requests
+from fastapi import APIRouter, Query
+from fastapi.responses import StreamingResponse
+from pydantic import BaseModel
+
+try:
+    from ..arena import auto_test_draft, run_arena, ArenaResult
+    from ..landscapes import BUILDERS, build_landscape, structural_hints
+    from ..reference_optimizers import (
+        run_baseline_tuned, tune_adam_lr,
+    )
+    from ..rewards import ast_novelty_score, compute_optcoder_reward
+    from ..sandbox import SandboxError, compile_optimizer
+    from ..models import LandscapeforgeAction
+    from ..prompts import build_prompt, parse_action
+    from .landscapeforge_environment import LandscapeforgeEnvironment
+except ImportError:  # flat layout
+    from arena import auto_test_draft, run_arena, ArenaResult              # type: ignore
+    from landscapes import BUILDERS, build_landscape, structural_hints     # type: ignore
+    from reference_optimizers import (                                      # type: ignore
+        run_baseline_tuned, tune_adam_lr,
+    )
+    from rewards import ast_novelty_score, compute_optcoder_reward          # type: ignore
+    from sandbox import SandboxError, compile_optimizer                     # type: ignore
+    from models import LandscapeforgeAction                                 # type: ignore
+    from prompts import build_prompt, parse_action                          # type: ignore
+    from server.landscapeforge_environment import LandscapeforgeEnvironment # type: ignore
+
+
+router = APIRouter(prefix="/api", tags=["lf-frontend"])
+
+
+# ---------- palette constants for Plotly layouts ----------
+
+_PLOTLY_LAYOUT = dict(
+    font=dict(family="Inter", color="#f3f0e8", size=12),
+    paper_bgcolor="#2a2824", plot_bgcolor="#1f1d1a",
+    hoverlabel=dict(bgcolor="#f3f0e8", font_color="#1f1d1a"),
+    legend=dict(bgcolor="rgba(31,29,26,0.85)",
+                bordercolor="#403b34", borderwidth=1,
+                font=dict(color="#f3f0e8")),
+)
+_AXIS = dict(gridcolor="#403b34", zerolinecolor="#554e45",
+             showline=True, linecolor="#554e45",
+             tickfont=dict(color="#b5ada0"))
+_DEFAULT_MARGIN = dict(l=60, r=30, t=60, b=55)
+_TITLE = dict(x=0.02, xanchor="left", font=dict(size=14, color="#f3f0e8"))
+
+OPT_COLORS = {
+    "sgd":      "#c05450",
+    "momentum": "#d9865b",
+    "adam":     "#5b7a6b",
+    "lbfgs":    "#556b99",
+    "custom":   "#e28763",
+}
+
+
+# ---------- shared plot helpers ----------
+
+def _color(name: str) -> str:
+    return OPT_COLORS.get(name.split("(")[0].strip(), "#e28763")
+
+
+def _contour_fig(ls, trajectories=None, title=None):
+    import numpy as np
+    if ls.dim != 2:
+        return _empty_fig(f"{ls.name} · dim={ls.dim}\nContour is 2-D only", 480)
+    CLIP = 8.0
+    xs_all, ys_all = [0.0], [0.0]
+    for traj in (trajectories or {}).values():
+        arr = np.asarray(traj)
+        if arr.size == 0:
+            continue
+        mask = (np.abs(arr) <= CLIP).all(axis=1) & np.isfinite(arr).all(axis=1)
+        good = arr[mask]
+        if good.size:
+            xs_all.extend(good[:, 0].tolist())
+            ys_all.extend(good[:, 1].tolist())
+    x_min = max(min(xs_all) - 1.5, -CLIP); x_max = min(max(xs_all) + 1.5, CLIP)
+    y_min = max(min(ys_all) - 1.5, -CLIP); y_max = min(max(ys_all) + 1.5, CLIP)
+    x_min, x_max = min(x_min, -3.5), max(x_max, 3.5)
+    y_min, y_max = min(y_min, -3.5), max(y_max, 3.5)
+
+    g = 70
+    xs = np.linspace(x_min, x_max, g)
+    ys = np.linspace(y_min, y_max, g)
+    X, Y = np.meshgrid(xs, ys)
+    Z = np.empty_like(X)
+    for i in range(g):
+        for j in range(g):
+            Z[i, j] = ls.f(np.array([X[i, j], Y[i, j]]))
+    finite = Z[np.isfinite(Z)]
+    lo, hi = map(float, np.percentile(finite, [2, 95]))
+
+    data = [dict(
+        type="contour", x=xs.tolist(), y=ys.tolist(), z=Z.tolist(),
+        zmin=lo, zmax=hi,
+        colorscale=[
+            [0.0, "#1f1d1a"], [0.15, "#2f2a22"], [0.3, "#4a2f22"],
+            [0.5, "#7a4229"], [0.7, "#c25a3a"], [0.85, "#e28763"],
+            [1.0, "#f4d6c5"],
+        ],
+        contours=dict(coloring="heatmap", showlabels=False),
+        line=dict(width=0.5, color="rgba(243,240,232,0.12)"),
+        colorbar=dict(title=dict(text="f(x)",
+                                   font=dict(size=11, color="#f3f0e8")),
+                       thickness=12, len=0.85,
+                       tickfont=dict(size=10, color="#b5ada0"),
+                       outlinewidth=0),
+        hovertemplate="x₁=%{x:.3f}<br>x₂=%{y:.3f}<br>f=%{z:.3f}<extra></extra>",
+    )]
+    if trajectories:
+        for name, traj in trajectories.items():
+            arr = np.asarray(traj)
+            if not arr.size:
+                continue
+            mask = (np.abs(arr) <= CLIP).all(axis=1) & np.isfinite(arr).all(axis=1)
+            diverged = not mask.all()
+            arr = arr[mask]
+            if arr.shape[0] == 0:
+                continue
+            color = _color(name)
+            label = f"{name} · diverged" if diverged else name
+            data.append(dict(
+                type="scatter", mode="lines+markers",
+                x=arr[:, 0].tolist(), y=arr[:, 1].tolist(),
+                name=label,
+                line=dict(color=color, width=2.5, dash="dash" if diverged else "solid"),
+                marker=dict(size=4, color=color,
+                            line=dict(color="#ffffff", width=0.8)),
+                hovertemplate="step %{pointNumber}<br>x₁=%{x:.3f}<br>x₂=%{y:.3f}"
+                              "<extra>" + label + "</extra>",
+            ))
+            data.append(dict(type="scatter", mode="markers",
+                             x=[arr[0, 0].item()], y=[arr[0, 1].item()],
+                             showlegend=False,
+                             marker=dict(size=12, color=color, symbol="circle-open",
+                                         line=dict(color=color, width=2.5)),
+                             hoverinfo="skip"))
+            end_sym = "x" if diverged else "star"
+            data.append(dict(type="scatter", mode="markers",
+                             x=[arr[-1, 0].item()], y=[arr[-1, 1].item()],
+                             showlegend=False,
+                             marker=dict(size=14 if diverged else 16,
+                                         color=color, symbol=end_sym,
+                                         line=dict(color="#ffffff", width=1.2)),
+                             hoverinfo="skip"))
+
+    layout = {
+        **_PLOTLY_LAYOUT,
+        "title": {"text": title or f"{ls.name} (dim=2)", **_TITLE},
+        "height": 480, "margin": _DEFAULT_MARGIN,
+        "xaxis": {"title": "x₁", "range": [x_min, x_max], **_AXIS},
+        "yaxis": {"title": "x₂", "range": [y_min, y_max],
+                  "scaleanchor": "x", "scaleratio": 1, **_AXIS},
+    }
+    return {"data": data, "layout": layout}
+
+
+def _empty_fig(msg: str, h: int = 480):
+    return {"data": [], "layout": {
+        **_PLOTLY_LAYOUT, "height": h, "margin": _DEFAULT_MARGIN,
+        "xaxis": {"visible": False}, "yaxis": {"visible": False},
+        "annotations": [{"text": msg, "showarrow": False,
+                          "x": 0.5, "y": 0.5, "xref": "paper", "yref": "paper",
+                          "font": {"size": 14, "color": "#b5ada0"}}],
+    }}
+
+
+def _curves_fig(curves, title):
+    data = []
+    for name, fs in curves.items():
+        if not fs:
+            continue
+        color = _color(name)
+        data.append(dict(
+            type="scatter", mode="lines+markers", name=name,
+            x=list(range(len(fs))),
+            y=[v if np.isfinite(v) else None for v in fs],
+            line=dict(color=color, width=2.2, shape="spline"),
+            marker=dict(size=4, color=color),
+            hovertemplate="step=%{x}<br>f=%{y:.4g}<extra>" + name + "</extra>",
+            connectgaps=False,
+        ))
+    layout = {
+        **_PLOTLY_LAYOUT, "title": {"text": title, **_TITLE},
+        "height": 360, "margin": _DEFAULT_MARGIN,
+        "xaxis": {"title": "optimizer step", **_AXIS},
+        "yaxis": {"title": "f(x) (symlog)", "type": "log", **_AXIS},
+    }
+    return {"data": data, "layout": layout}
+
+
+def _bar_fig(values, title, ylabel):
+    names = list(values.keys())
+    vs = [values[n] for n in names]
+    data = [dict(type="bar", x=names, y=vs,
+                  marker=dict(color=[_color(n) for n in names],
+                              line=dict(color="#ffffff", width=1)),
+                  text=[f"{v:.3g}" for v in vs], textposition="outside",
+                  textfont=dict(size=11, color="#f3f0e8"),
+                  hovertemplate="%{x}<br>" + ylabel + "=%{y:.4g}<extra></extra>")]
+    layout = {
+        **_PLOTLY_LAYOUT, "title": {"text": title, **_TITLE},
+        "height": 280, "margin": _DEFAULT_MARGIN,
+        "xaxis": {**_AXIS},
+        "yaxis": {"title": ylabel, **_AXIS},
+        "showlegend": False,
+    }
+    return {"data": data, "layout": layout}
+
+
+# ---------- request/response models ----------
+
+class LandscapeReq(BaseModel):
+    template: str
+    dim: int = 2
+    seed: int = 0
+
+
+class BaselineReq(BaseModel):
+    template: str
+    seed: int = 1
+
+
+class ArenaReq(BaseModel):
+    template: str
+    dim: int = 5
+    seed: int = 42
+    code: str
+
+
+# ---------- /api/landscape ----------
+
+def _landscape_params(template: str) -> dict:
+    if template == "quadratic":       return {"cond": 10.0}
+    if template == "gaussian_mix":    return {"k": 3, "sigma": 0.5, "spread": 2.0}
+    return {}
+
+
+@router.post("/landscape")
+def api_landscape(req: LandscapeReq):
+    rng = np.random.default_rng(req.seed)
+    dim = 2 if req.template == "himmelblau" else req.dim
+    ls = build_landscape(template=req.template, dim=dim,
+                          params=_landscape_params(req.template), rng=rng)
+    hints = structural_hints(ls, rng=rng)
+    hints_rows = [[k, f"{v:.4g}" if isinstance(v, float) else str(v)]
+                   for k, v in hints.items()]
+    hints_rows.append(["dim", str(ls.dim)])
+    hints_rows.append(["f_min (known)", f"{ls.f_min:.4g}"])
+    hints_rows.append(["description", ls.description])
+    return {
+        "contour": _contour_fig(ls, title=f"{req.template} · dim={ls.dim}"),
+        "hints": hints_rows,
+    }
+
+
+# ---------- /api/baseline_race ----------
+
+@router.post("/baseline_race")
+def api_baseline_race(req: BaselineReq):
+    rng = np.random.default_rng(req.seed)
+    ls = build_landscape(template=req.template, dim=2,
+                          params=_landscape_params(req.template), rng=rng)
+    x0 = np.random.default_rng(req.seed + 999).normal(0.0, 0.5, size=2)
+
+    traj_2d, curves, finals, lrs = {}, {}, {}, {}
+    for name in ["sgd", "momentum", "adam", "lbfgs"]:
+        r = run_baseline_tuned(name, ls.f, ls.grad, x0, steps=50)
+        lrs[name] = r["lr"]
+        traj = [s for s in r["trajectory"] if s.get("x") is not None]
+        traj_2d[name] = [(s["x"][0], s["x"][1]) for s in traj]
+        curves[name] = [s["f"] for s in traj if s.get("f") is not None]
+        finals[name] = curves[name][-1] if curves[name] else float("inf")
+
+    lr_list = " · ".join(f"<code>{n}</code>: <code>{lr:g}</code>"
+                          for n, lr in lrs.items())
+    best = min(finals, key=finals.get)
+    return {
+        "contour": _contour_fig(ls, trajectories=traj_2d,
+                                  title=f"{req.template} — baselines racing (LR-tuned)"),
+        "curves":  _curves_fig(curves, "f(x) vs step"),
+        "finals":  _bar_fig(finals, "Final f after 50 steps",
+                              "f(x) at step 50"),
+        "summary_md": (
+            f"<p><strong>{ls.description}</strong></p>"
+            f"<p>Tuned LR per baseline (7-point sweep, 30 steps): {lr_list}</p>"
+            f"<p>Best baseline: <code>{best}</code> at f = "
+            f"<code>{finals[best]:.4f}</code></p>"
+        ),
+    }
+
+
+# ---------- /api/arena ----------
+
+ADAM_TEMPLATE = """\
+class Optimizer:
+    def __init__(self, dim):
+        self.lr = {lr}
+        self.b1, self.b2, self.eps = 0.9, 0.999, 1e-8
+        self.m = np.zeros(dim); self.v = np.zeros(dim); self.t = 0
+    def step(self, x, f_val, grad):
+        self.t += 1
+        self.m = self.b1*self.m + (1-self.b1)*grad
+        self.v = self.b2*self.v + (1-self.b2)*grad*grad
+        mh = self.m/(1-self.b1**self.t); vh = self.v/(1-self.b2**self.t)
+        return x - self.lr * mh / (np.sqrt(vh) + self.eps)
+"""
+
+ARENA_SEEDS = [101, 202, 303, 404, 505, 606, 707, 808, 909, 1010]
+
+
+@router.post("/arena")
+def api_arena(req: ArenaReq):
+    rng = np.random.default_rng(req.seed)
+    dim = 2 if req.template == "himmelblau" else req.dim
+    ls = build_landscape(template=req.template, dim=dim,
+                          params=_landscape_params(req.template), rng=rng)
+
+    tune_x0 = np.random.default_rng(0).normal(0.0, 0.5, size=dim)
+    best_lr = tune_adam_lr(ls.f, ls.grad, tune_x0, sweep_steps=30)
+    adam_src = ADAM_TEMPLATE.format(lr=best_lr)
+
+    try:
+        opt = compile_optimizer(req.code, dim=dim)
+    except SandboxError as e:
+        return {"error": str(e)}
+
+    test = auto_test_draft(opt, ls, seed=req.seed, steps=20)
+    user_arena = run_arena(opt, ls, seeds=ARENA_SEEDS, steps=200)
+    adam_opt = compile_optimizer(adam_src, dim=dim)
+    adam_arena = run_arena(adam_opt, ls, seeds=ARENA_SEEDS, steps=200)
+
+    reward = compute_optcoder_reward(
+        arena=user_arena, adam_arena=adam_arena,
+        actions_used_cost=0, budget_total=12,
+        novelty_score=ast_novelty_score(req.code, [adam_src]),
+        convergence_step=None, arena_steps=200,
+    )
+
+    # 2-D contour if applicable
+    contour = None
+    if dim == 2:
+        from .reference_optimizers import run_baseline
+        user_traj = [(s["x"][0], s["x"][1]) for s in test["detail"]]
+        adam_run_raw = []
+        try:
+            from ..reference_optimizers import run_baseline as _rb
+        except ImportError:
+            from reference_optimizers import run_baseline as _rb  # type: ignore
+        adam_run = _rb("adam", ls.f, ls.grad,
+                        np.random.default_rng(req.seed).normal(0.0, 0.5, 2),
+                        steps=50)
+        adam_traj = [(s["x"][0], s["x"][1]) for s in adam_run["trajectory"]
+                     if s.get("x") is not None]
+        contour = _contour_fig(ls,
+                                 trajectories={"custom": user_traj, "adam": adam_traj},
+                                 title=f"{req.template} — your optimizer vs tuned Adam")
+
+    bk = reward.breakdown
+    return {
+        "contour":   contour or _empty_fig(f"{req.template} · dim={dim}\nContour is 2-D only"),
+        "progress":  _bar_fig(
+            {"custom": user_arena.mean_progress,
+             "adam (tuned)": adam_arena.mean_progress},
+            "Arena mean progress",
+            "mean(f₀ − f_N) over 10 seeds",
+        ),
+        "breakdown": bk,
+        "total":     reward.r_total,
+        "summary_md": (
+            f"<h3>Results</h3>"
+            f"<ul>"
+            f"<li>Your mean progress: <code>{user_arena.mean_progress:.4g}</code></li>"
+            f"<li>Tuned Adam progress: <code>{adam_arena.mean_progress:.4g}</code>"
+            f" (lr=<code>{best_lr:g}</code>)</li>"
+            f"<li>Speedup vs Adam: <code>{bk.get('speedup_vs_adam', 0):.3g}×</code></li>"
+            f"<li>Your crash fraction: <code>{user_arena.crash_fraction:.0%}</code></li>"
+            f"<li><strong>Total reward: <code>{reward.r_total:+.3f}</code></strong></li>"
+            f"</ul>"
+        ),
+    }
+
+
+# ---------- /api/llm_run  (SSE stream) ----------
+
+def _sse(event: str, data: dict) -> str:
+    return f"event: {event}\ndata: {json.dumps(data, default=str)}\n\n"
+
+
+@router.get("/llm_run")
+def api_llm_run(
+    base_url: str = Query(...),
+    api_key: str = "",
+    model: str = Query(...),
+    tier: str = "T0",
+    seed: int = 42,
+    temperature: float = 0.7,
+    max_turns: int = 10,
+):
+    """SSE-streamed LLM-driven episode. One event per turn."""
+
+    def gen():
+        url = base_url.rstrip("/") + "/chat/completions"
+        headers = {"Content-Type": "application/json"}
+        if api_key:
+            headers["Authorization"] = f"Bearer {api_key}"
+
+        env = LandscapeforgeEnvironment(tier=tier, seed=int(seed))
+        obs = env.reset()
+
+        yield _sse("message", {
+            "kind": "header", "model": model, "base_url": base_url,
+            "landscape": obs.landscape_description,
+            "dim": obs.dim, "budget": obs.budget_remaining,
+        })
+
+        for turn in range(1, int(max_turns) + 1):
+            messages = build_prompt(obs)
+            t0 = time.time()
+            try:
+                r = requests.post(url, headers=headers, json={
+                    "model": model, "messages": messages,
+                    "temperature": float(temperature),
+                    "max_tokens": 1200, "stream": False,
+                }, timeout=180)
+                if r.status_code >= 400:
+                    yield _sse("message", {
+                        "kind": "error",
+                        "message": f"LLM {r.status_code}: {r.text[:400]}",
+                    })
+                    return
+                raw = r.json()["choices"][0]["message"]["content"]
+            except Exception as e:
+                yield _sse("message", {
+                    "kind": "error",
+                    "message": f"request failed: {type(e).__name__}: {e}",
+                })
+                return
+            dt = time.time() - t0
+
+            try:
+                action = parse_action(raw)
+            except Exception as e:
+                yield _sse("message", {
+                    "kind": "error",
+                    "message": f"parse error: {e}. Raw: {raw[:400]}",
+                })
+                return
+
+            obs = env.step(action)
+            lar = obs.last_action_result or {}
+
+            output_chips = []
+            if lar.get("compile_error"):
+                output_chips.append({"kind": "bad", "text": "compile error"})
+            if lar.get("summary"):
+                s = lar["summary"]
+                if s.get("converged"):
+                    output_chips.append({"kind": "good", "text": "auto-test converged"})
+                elif s.get("diverged"):
+                    output_chips.append({"kind": "warn", "text": "auto-test diverged"})
+                if s.get("final_f") is not None:
+                    output_chips.append({
+                        "kind": "info",
+                        "text": f"<code>final_f</code>=<b>{s['final_f']:.3g}</b>",
+                    })
+            if action.kind == "run_baseline" and lar.get("final_f") is not None:
+                output_chips.append({
+                    "kind": "info",
+                    "text": f"<code>final_f</code>=<b>{lar['final_f']:.3g}</b>",
+                })
+            for k, v in (lar.get("feedback") or {}).items():
+                output_chips.append({
+                    "kind": "good" if v >= 0 else "warn",
+                    "text": f"<code>{k}</code> <b>{v:+.3f}</b>",
+                })
+
+            if action.kind == "draft":
+                action_str = f"draft ({len(action.code or '')} chars)"
+            elif action.kind == "run_baseline":
+                action_str = f"run_baseline({action.baseline_name})"
+            elif action.kind == "inspect":
+                action_str = (f"inspect(draft={action.draft_idx}, "
+                              f"[{action.step_range_start},{action.step_range_end}])")
+            else:
+                action_str = "commit"
+
+            yield _sse("message", {
+                "kind": "turn",
+                "turn": turn, "kind_of": action.kind,
+                "action_str": action_str, "output": output_chips,
+                "duration_s": dt,
+                "budget_remaining": obs.budget_remaining,
+                "code": action.code if action.kind == "draft" else None,
+            })
+
+            if obs.done:
+                bk = obs.r_optcoder_breakdown or {}
+                yield _sse("message", {
+                    "kind": "done",
+                    "reason": (obs.last_action_result or {}).get("reason"),
+                    "reward": obs.r_optcoder or 0.0,
+                    "final_regret": obs.final_regret or 0.0,
+                    "my_progress": bk.get("my_progress", 0.0),
+                    "adam_progress": bk.get("adam_progress", 0.0),
+                    "speedup_vs_adam": bk.get("speedup_vs_adam", 0.0),
+                    "breakdown": bk,
+                })
+                yield "event: end\ndata: {}\n\n"
+                return
+
+        yield _sse("message", {
+            "kind": "error",
+            "message": f"reached MAX_TURNS ({max_turns}) without commit",
+        })
+        yield "event: end\ndata: {}\n\n"
+
+    return StreamingResponse(gen(), media_type="text/event-stream")

server/app.py

@@ -1,53 +1,30 @@
-# Copyright (c) Meta Platforms, Inc. and affiliates.
-# All rights reserved.
-#
-# This source code is licensed under the BSD-style license found in the
-# LICENSE file in the root directory of this source tree.
+"""FastAPI application for LandscapeForge.
 
+Mounts:
+  - OpenEnv endpoints (`/reset`, `/step`, `/schema`, `/ws`, etc.) via create_app
+  - Frontend API helpers at `/api/*` (see `api_routes.py`)
+  - React SPA at `/` (built to `/app/env/frontend/dist` via Vite)
 """
-FastAPI application for the Landscapeforge Environment.
 
-This module creates an HTTP server that exposes the LandscapeforgeEnvironment
-over HTTP and WebSocket endpoints, compatible with EnvClient.
-
-Endpoints:
-    - POST /reset: Reset the environment
-    - POST /step: Execute an action
-    - GET /state: Get current environment state
-    - GET /schema: Get action/observation schemas
-    - WS /ws: WebSocket endpoint for persistent sessions
-
-Usage:
-    # Development (with auto-reload):
-    uvicorn server.app:app --reload --host 0.0.0.0 --port 8000
-
-    # Production:
-    uvicorn server.app:app --host 0.0.0.0 --port 8000 --workers 4
-
-    # Or run directly:
-    python -m server.app
-"""
+from pathlib import Path
 
 try:
     from openenv.core.env_server.http_server import create_app
 except Exception as e:  # pragma: no cover
     raise ImportError(
-        "openenv is required for the web interface. Install dependencies with '\n    uv sync\n'"
+        "openenv is required for the web interface. Install dependencies via 'uv sync'."
     ) from e
 
 try:
     from ..models import LandscapeforgeAction, LandscapeforgeObservation
     from .landscapeforge_environment import LandscapeforgeEnvironment
-    from ..demo.ui import build_ui as _build_demo_ui
+    from .api_routes import router as lf_api_router
 except (ModuleNotFoundError, ImportError):
     from models import LandscapeforgeAction, LandscapeforgeObservation  # type: ignore
     from server.landscapeforge_environment import LandscapeforgeEnvironment  # type: ignore
-    from demo.ui import build_ui as _build_demo_ui  # type: ignore
+    from server.api_routes import router as lf_api_router  # type: ignore
 
 
-# Create the core FastAPI app (without OpenEnv's built-in web UI, which has a
-# theme-kwarg incompatibility with Gradio 5.x). We mount our custom Gradio
-# demo manually at /web below.
 app = create_app(
     LandscapeforgeEnvironment,
     LandscapeforgeAction,
@@ -56,34 +33,51 @@ app = create_app(
     max_concurrent_envs=4,
 )
 
-# Mount the Gradio demo at the root path.
-#
-# Mounting at "/" lets HF Spaces iframe the app directly without needing
-# base_path in the README, and avoids the Gradio 5.x SSR sidecar that 502s
-# under HF's Docker reverse proxy. FastAPI routes registered by create_app
-# (/reset, /step, /schema, /openapi.json, /health, /ws) keep priority
-# because they're exact-match and were registered BEFORE this mount.
+# Frontend-facing API (landscape, baseline_race, arena, llm_run)
+app.include_router(lf_api_router)
+
+
+# ---- React SPA serving ----
+# The Dockerfile builds the frontend into `frontend/dist/`. Locate it relative
+# to this file, and serve it under `/` with a SPA fallback to index.html.
 try:
-    import gradio as gr
-    _demo = _build_demo_ui()
-    app = gr.mount_gradio_app(
-        app, _demo,
-        path="/",
-        ssr_mode=False,
-    )
-except Exception as _e:  # pragma: no cover
+    from fastapi.staticfiles import StaticFiles
+    from fastapi.responses import FileResponse
+
+    _here = Path(__file__).resolve().parent.parent
+    _dist = _here / "frontend" / "dist"
+
+    if _dist.is_dir():
+        # Assets (hashed css/js) at /assets, vite dist root items at /
+        app.mount("/assets", StaticFiles(directory=_dist / "assets"),
+                  name="lf-assets")
+
+        @app.get("/")
+        def _index():
+            return FileResponse(_dist / "index.html")
+
+        # SPA fallback: any route the FastAPI router doesn't own, serve
+        # index.html so client-side routing (if any) works.
+        @app.get("/{path:path}")
+        def _spa_fallback(path: str):
+            # Don't swallow API/OpenEnv routes — FastAPI matches those first
+            # because they're registered before this catch-all.
+            candidate = _dist / path
+            if candidate.is_file():
+                return FileResponse(candidate)
+            return FileResponse(_dist / "index.html")
+    else:
+        import logging
+        logging.getLogger(__name__).warning(
+            "Frontend dist not found at %s — SPA routes disabled.", _dist
+        )
+except Exception as _e:
     import logging
-    logging.getLogger(__name__).warning(
-        "Gradio demo failed to mount (%s); FastAPI endpoints still available.", _e,
-    )
+    logging.getLogger(__name__).warning("SPA mount failed: %s", _e)
 
 
 def main():
-    """Entry point for direct execution.
-
-    Parses --host / --port from the command line (also honours $PORT),
-    defaulting to 0.0.0.0:8000 for container-friendly launches.
-    """
+    """Entry point for direct execution."""
     import argparse
     import os
     import uvicorn