Spaces:

krishpotanwar
/

sql-repair-env

Sleeping

App Files Files Community

krishpotanwar commited on Apr 8

Commit

f86ef5b

1 Parent(s): 0376765

feat(frontend): add SQL command center UI

Browse files

Files changed (34) hide show

.dockerignore +2 -0
Dockerfile +8 -1
frontend/.gitignore +5 -0
frontend/README.md +44 -0
frontend/eslint.config.js +23 -0
frontend/index.html +26 -0
frontend/package-lock.json +0 -0
frontend/package.json +40 -0
frontend/public/favicon.svg +1 -0
frontend/public/icons.svg +24 -0
frontend/src/App.css +184 -0
frontend/src/App.tsx +231 -0
frontend/src/api/client.ts +113 -0
frontend/src/assets/hero.png +0 -0
frontend/src/assets/react.svg +1 -0
frontend/src/assets/vite.svg +1 -0
frontend/src/components/ApiOpsTab.tsx +79 -0
frontend/src/components/BaselineArenaTab.tsx +132 -0
frontend/src/components/ProtocolTab.tsx +71 -0
frontend/src/components/QueryWorkbenchTab.tsx +243 -0
frontend/src/components/SectionCard.tsx +38 -0
frontend/src/components/SqlLandingPage.tsx +159 -0
frontend/src/components/SqlPreviewTable.tsx +44 -0
frontend/src/components/TaskAtlasTab.tsx +79 -0
frontend/src/data/taskCatalog.ts +61 -0
frontend/src/index.css +88 -0
frontend/src/main.tsx +10 -0
frontend/src/types.ts +73 -0
frontend/tsconfig.app.json +28 -0
frontend/tsconfig.json +7 -0
frontend/tsconfig.node.json +26 -0
frontend/vercel.json +12 -0
frontend/vite.config.ts +8 -0
server/app.py +72 -1

.dockerignore CHANGED Viewed

@@ -7,6 +7,8 @@ __pycache__
 .pytest_cache
 .ruff_cache
 .mypy_cache
 tests/
 *.egg-info
 build/

 .pytest_cache
 .ruff_cache
 .mypy_cache
+frontend/node_modules
+frontend/dist
 tests/
 *.egg-info
 build/

Dockerfile CHANGED Viewed

@@ -2,9 +2,13 @@ FROM python:3.11-slim
 WORKDIR /app
-# System deps (curl for healthchecks)
 RUN apt-get update && apt-get install -y --no-install-recommends \
         curl \
     && rm -rf /var/lib/apt/lists/*
 # Copy & install Python deps first for layer caching
@@ -14,6 +18,9 @@ RUN pip install --no-cache-dir -r requirements.txt
 # Copy application
 COPY . .
 # Install package so [project.scripts] is callable
 RUN pip install --no-cache-dir -e .

 WORKDIR /app
+# System deps + Node.js for frontend build
 RUN apt-get update && apt-get install -y --no-install-recommends \
         curl \
+        gnupg \
+    && curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
+    && apt-get install -y --no-install-recommends \
+        nodejs \
     && rm -rf /var/lib/apt/lists/*
 # Copy & install Python deps first for layer caching
 # Copy application
 COPY . .
+# Build the copied React frontend so FastAPI can serve it at /
+RUN cd frontend && npm ci && npm run build
 # Install package so [project.scripts] is callable
 RUN pip install --no-cache-dir -e .

frontend/.gitignore ADDED Viewed

	@@ -0,0 +1,5 @@

+node_modules/
+dist/
+.env
+.vercel
+.env*.local

frontend/README.md ADDED Viewed

	@@ -0,0 +1,44 @@

+# DisasterMan Frontend
+React + TypeScript + Vite frontend for the DisasterMan disaster-relief simulator.
+## What It Does
+- Loads task metadata from the FastAPI backend
+- Replays full simulation runs step by step
+- Compares `random`, `greedy`, and `ai_4stage` agents side by side
+- Shows map state, resources, scores, and agent reasoning
+## Local Development
+From this `frontend/` directory:
+```bash
+npm install
+npm run dev
+```
+Default API behavior:
+- Development: `http://localhost:7860`
+- Production: `/api` proxy
+- Override: set `VITE_API_URL`
+## Environment Variables
+```bash
+VITE_API_URL=http://localhost:7860
+```
+Use `VITE_API_URL` when you want the frontend to talk directly to a backend instead of using the production proxy rewrite.
+## Build
+```bash
+npm run build
+```
+## Notes
+- The compare view only includes the 4-stage AI agent when the backend has `GROQ_API_KEY` or `OPENAI_API_KEY` configured.
+- Production rewrites for Vercel live in `vercel.json`.

frontend/eslint.config.js ADDED Viewed

	@@ -0,0 +1,23 @@

+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/index.html ADDED Viewed

	@@ -0,0 +1,26 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DisasterMan</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <script type="text/javascript">
+      (function(d, t) {
+          var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
+          v.onload = function() {
+            window.voiceflow.chat.load({
+              verify: { projectID: 'YOUR_PROJECT_ID_HERE' },
+              url: 'https://general-runtime.voiceflow.com',
+              versionID: 'production'
+            });
+          }
+          v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
+      })(document, 'script');
+    </script>
+  </body>
+</html>

frontend/package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

frontend/package.json ADDED Viewed

	@@ -0,0 +1,40 @@

+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.2",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.38.0",
+    "leaflet": "^1.9.4",
+    "lucide-react": "^1.7.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-leaflet": "^5.0.0",
+    "recharts": "^3.8.1",
+    "tailwindcss": "^4.2.2",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/leaflet": "^1.9.20",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^8.0.1"
+  }
+}

frontend/public/favicon.svg ADDED Viewed

frontend/public/icons.svg ADDED Viewed

frontend/src/App.css ADDED Viewed

	@@ -0,0 +1,184 @@

+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+.hero {
+  position: relative;
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+  .framework,
+  .vite {
+    position: absolute;
+  }
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+#docs {
+  border-right: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+  .logo {
+    height: 18px;
+  }
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+.ticks {
+  position: relative;
+  width: 100%;
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}

frontend/src/App.tsx ADDED Viewed

	@@ -0,0 +1,231 @@

+import { startTransition, useEffect, useMemo, useState } from 'react'
+import { ApiError, fetchHealth, fetchTasks, getApiInfo } from './api/client'
+import { ApiOpsTab } from './components/ApiOpsTab'
+import { BaselineArenaTab } from './components/BaselineArenaTab'
+import { ProtocolTab } from './components/ProtocolTab'
+import { QueryWorkbenchTab } from './components/QueryWorkbenchTab'
+import { SqlLandingPage } from './components/SqlLandingPage'
+import { TaskAtlasTab } from './components/TaskAtlasTab'
+import type { HealthStatus, TaskInfo } from './types'
+type Tab = 'lab' | 'atlas' | 'baseline' | 'protocol' | 'ops'
+const TAB_LABELS: Record<Tab, string> = {
+  lab: 'QUERY LAB',
+  atlas: 'TASK ATLAS',
+  baseline: 'BASELINE ARENA',
+  protocol: 'AGENT PROTOCOL',
+  ops: 'API OPS',
+}
+const TAB_ICONS: Record<Tab, string> = {
+  lab: '⌘',
+  atlas: '◫',
+  baseline: '▣',
+  protocol: '⟟',
+  ops: '◌',
+}
+export default function App() {
+  const [showLanding, setShowLanding] = useState(true)
+  const [tab, setTab] = useState<Tab>('lab')
+  const [tasks, setTasks] = useState<TaskInfo[]>([])
+  const [selectedTask, setSelectedTask] = useState('task_1')
+  const [tasksError, setTasksError] = useState<string | null>(null)
+  const [health, setHealth] = useState<HealthStatus>('loading')
+  const [healthPayload, setHealthPayload] = useState<string>('Loading…')
+  const apiInfo = getApiInfo()
+  useEffect(() => {
+    void fetchHealth()
+      .then((payload) => {
+        setHealth(payload.status === 'ok' ? 'ok' : 'error')
+        setHealthPayload(JSON.stringify(payload))
+      })
+      .catch((error: unknown) => {
+        setHealth('error')
+        setHealthPayload(error instanceof Error ? error.message : String(error))
+      })
+  }, [])
+  useEffect(() => {
+    void fetchTasks()
+      .then((nextTasks) => {
+        setTasks(nextTasks)
+        setTasksError(null)
+        if (nextTasks.length > 0) {
+          startTransition(() => {
+            setSelectedTask((current) =>
+              nextTasks.some((task) => task.id === current) ? current : nextTasks[0].id,
+            )
+          })
+        }
+      })
+      .catch((error: unknown) => {
+        if (error instanceof ApiError) {
+          setTasksError(`${error.message} (url: ${error.url})`)
+          return
+        }
+        setTasksError(String(error))
+      })
+  }, [])
+  const selectedTaskInfo = useMemo(
+    () => tasks.find((task) => task.id === selectedTask),
+    [selectedTask, tasks],
+  )
+  const tabClass = (value: Tab) =>
+    `px-5 py-2.5 text-sm font-medium rounded-lg transition-colors whitespace-nowrap ${
+      tab === value
+        ? 'bg-zinc-800 text-white'
+        : 'text-zinc-500 hover:text-zinc-300 hover:bg-zinc-900/50'
+    }`
+  if (showLanding) {
+    return <SqlLandingPage onLaunch={() => setShowLanding(false)} />
+  }
+  return (
+    <div className="min-h-screen text-white flex flex-col relative z-0">
+      <header className="border-b border-zinc-800/50 backdrop-blur-3xl bg-black/40 sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 py-4 flex flex-wrap items-center justify-between gap-4">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-full bg-emerald-500/15 border border-emerald-400/30 flex items-center justify-center text-xl shadow-[0_0_15px_rgba(16,185,129,0.35)]">
+              ⚡
+            </div>
+            <div>
+              <h1 className="text-xl font-bold leading-tight tracking-wider bg-gradient-to-r from-emerald-300 via-cyan-300 to-amber-300 bg-clip-text text-transparent drop-shadow-sm">
+                SQL REPAIR COMMAND
+              </h1>
+              <p className="text-[11px] text-zinc-400 uppercase tracking-widest mt-0.5">
+                OpenEnv Query Recovery Console
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3 flex-wrap">
+            <div
+              className={`px-3 py-1.5 rounded-lg border text-xs font-semibold tracking-wide ${
+                health === 'ok'
+                  ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-300'
+                  : health === 'loading'
+                    ? 'border-zinc-700 bg-zinc-900 text-zinc-300'
+                    : 'border-rose-500/30 bg-rose-500/10 text-rose-300'
+              }`}
+            >
+              {health === 'ok' ? 'SPACE HEALTHY' : health === 'loading' ? 'CHECKING HEALTH' : 'HEALTH WARNING'}
+            </div>
+            <a
+              href="https://github.com/Krishpotanwar/sql-repair-env"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-zinc-500 hover:text-white transition-colors px-3 py-1.5 border border-zinc-800 rounded-lg"
+            >
+              GitHub ↗
+            </a>
+            <a
+              href="/docs"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs font-semibold bg-gradient-to-r from-emerald-600 to-cyan-600 hover:from-emerald-500 hover:to-cyan-500 text-white transition-all px-4 py-1.5 rounded-lg shadow-[0_0_15px_rgba(16,185,129,0.35)]"
+            >
+              API Docs ↗
+            </a>
+          </div>
+        </div>
+        <div className="max-w-7xl mx-auto px-4 pb-3 flex gap-2 overflow-x-auto">
+          {(Object.keys(TAB_LABELS) as Tab[]).map((value) => (
+            <button key={value} className={tabClass(value)} onClick={() => setTab(value)}>
+              <span className="mr-1.5">{TAB_ICONS[value]}</span>
+              {TAB_LABELS[value]}
+            </button>
+          ))}
+        </div>
+      </header>
+      <main className="max-w-7xl mx-auto px-4 py-6 w-full">
+        {tasksError && (
+          <div className="bg-red-950 border border-red-800 rounded-xl p-4 text-red-300 text-sm mb-6">
+            Could not connect to backend: {tasksError}
+            <br />
+            <span className="text-xs text-red-500">
+              API mode: {apiInfo.mode} | base: {apiInfo.base} | VITE_API_URL: {apiInfo.env}
+            </span>
+          </div>
+        )}
+        {!tasksError && tasks.length === 0 && (
+          <div className="glass-panel rounded-2xl px-6 py-10 text-zinc-300 text-sm flex items-center justify-center gap-3">
+            <span className="animate-spin text-lg">⚙</span>
+            Connecting to the SQL task grid…
+          </div>
+        )}
+        {tasks.length > 0 && (
+          <>
+            <div className="glass-panel rounded-2xl px-5 py-4 mb-6 flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500">Loaded Mission</p>
+                <p className="text-lg font-semibold text-zinc-100">
+                  {selectedTaskInfo?.name ?? selectedTask}
+                </p>
+              </div>
+              <div className="flex items-center gap-3 flex-wrap text-sm">
+                <label className="text-zinc-400">Current task</label>
+                <select
+                  value={selectedTask}
+                  onChange={(event) => {
+                    const nextValue = event.target.value
+                    startTransition(() => setSelectedTask(nextValue))
+                  }}
+                  className="bg-zinc-950/70 border border-zinc-800 rounded-lg px-3 py-2 text-sm text-zinc-100 focus:outline-none focus:border-emerald-500/50"
+                >
+                  {tasks.map((task) => (
+                    <option key={task.id} value={task.id}>
+                      {task.name} ({task.difficulty})
+                    </option>
+                  ))}
+                </select>
+                <div className="text-xs text-zinc-500">
+                  Live health payload: <span className="mono">{healthPayload}</span>
+                </div>
+              </div>
+            </div>
+            {tab === 'lab' && (
+              <QueryWorkbenchTab
+                apiInfo={apiInfo}
+                selectedTask={selectedTask}
+                taskInfo={selectedTaskInfo}
+              />
+            )}
+            {tab === 'atlas' && (
+              <TaskAtlasTab
+                onSelectTask={(taskId) => {
+                  startTransition(() => {
+                    setSelectedTask(taskId)
+                    setTab('lab')
+                  })
+                }}
+                selectedTask={selectedTask}
+                tasks={tasks}
+              />
+            )}
+            {tab === 'baseline' && <BaselineArenaTab />}
+            {tab === 'protocol' && <ProtocolTab />}
+            {tab === 'ops' && (
+              <ApiOpsTab
+                apiInfo={apiInfo}
+                health={health}
+                selectedTask={selectedTask}
+                taskInfo={selectedTaskInfo}
+              />
+            )}
+          </>
+        )}
+      </main>
+    </div>
+  )
+}

frontend/src/api/client.ts ADDED Viewed

	@@ -0,0 +1,113 @@

+import type {
+  ApiInfo,
+  BaselineResponse,
+  GraderResponse,
+  HealthResponse,
+  StepResponse,
+  TaskInfo,
+  TaskObservation,
+} from '../types'
+const PROD = import.meta.env.PROD
+const devEnvBase = import.meta.env.VITE_API_URL?.trim()
+const normalizedDevEnvBase = devEnvBase ? devEnvBase.replace(/\/+$/, '') : ''
+const BASE = PROD ? '/api' : normalizedDevEnvBase || 'http://localhost:8000'
+export class ApiError extends Error {
+  status: number
+  body: string
+  url: string
+  constructor(status: number, body: string, url: string, message: string) {
+    super(message)
+    this.name = 'ApiError'
+    this.status = status
+    this.body = body
+    this.url = url
+  }
+}
+function buildUrl(path: string): string {
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`
+  return `${BASE}${normalizedPath}`
+}
+async function request<T>(path: string, options?: RequestInit): Promise<T> {
+  const url = buildUrl(path)
+  try {
+    const res = await fetch(url, options)
+    if (!res.ok) {
+      const err = await res.text()
+      throw new ApiError(res.status, err, url, `API error ${res.status}: ${err}`)
+    }
+    return res.json() as Promise<T>
+  } catch (error) {
+    if (error instanceof ApiError) {
+      throw error
+    }
+    const message = error instanceof Error ? error.message : String(error)
+    throw new ApiError(0, message, url, `Network error: ${message}`)
+  }
+}
+export function getApiInfo(): ApiInfo {
+  return {
+    base: BASE,
+    mode: PROD ? 'proxy' : normalizedDevEnvBase ? 'direct' : 'local',
+    env: PROD ? '(disabled in production)' : normalizedDevEnvBase || '(not set)',
+  }
+}
+export async function fetchHealth(): Promise<HealthResponse> {
+  return request<HealthResponse>('/health')
+}
+export async function fetchTasks(): Promise<TaskInfo[]> {
+  const data = await request<{
+    tasks: string[]
+    details: Array<{ id: string; name: string; difficulty: string }>
+  }>('/tasks')
+  return data.details.map((task) => ({
+    id: task.id,
+    name: task.name,
+    difficulty: task.difficulty,
+  }))
+}
+export async function resetTask(taskId?: string): Promise<TaskObservation> {
+  return request<TaskObservation>('/reset', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(taskId ? { task_id: taskId } : {}),
+  })
+}
+export async function submitQuery(query: string): Promise<StepResponse> {
+  return request<StepResponse>('/step', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      action: {
+        action_type: 'submit_query',
+        query,
+      },
+    }),
+  })
+}
+export async function gradeTask(taskId?: string): Promise<GraderResponse> {
+  return request<GraderResponse>('/grader', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(taskId ? { task_id: taskId } : {}),
+  })
+}
+export async function fetchBaseline(taskIds?: string[]): Promise<BaselineResponse> {
+  return request<BaselineResponse>('/baseline', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(taskIds?.length ? { tasks: taskIds } : {}),
+  })
+}

frontend/src/assets/hero.png ADDED Viewed

frontend/src/assets/react.svg ADDED Viewed

frontend/src/assets/vite.svg ADDED Viewed

frontend/src/components/ApiOpsTab.tsx ADDED Viewed

	@@ -0,0 +1,79 @@

+import { TASK_CATALOG } from '../data/taskCatalog'
+import type { ApiInfo, HealthStatus, TaskInfo } from '../types'
+import { SectionCard } from './SectionCard'
+interface ApiOpsTabProps {
+  health: HealthStatus
+  apiInfo: ApiInfo
+  selectedTask: string
+  taskInfo?: TaskInfo
+}
+export function ApiOpsTab({
+  health,
+  apiInfo,
+  selectedTask,
+  taskInfo,
+}: ApiOpsTabProps) {
+  const canonicalQuery = TASK_CATALOG[selectedTask]?.canonicalQuery ?? 'SELECT 1'
+  return (
+    <div className="space-y-6">
+      <SectionCard
+        eyebrow="Operations"
+        title="API ops + live endpoints"
+        subtitle="The frontend talks to Winner through `/api/*` in production, while the backend still exposes the original canonical OpenEnv routes."
+      >
+        <div className="grid xl:grid-cols-[0.95fr_1.05fr] gap-6">
+          <div className="space-y-4">
+            <div className="rounded-2xl border border-zinc-800 bg-zinc-950/60 p-5">
+              <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-3">Live status</p>
+              <div className="space-y-2 text-sm">
+                <p className="text-zinc-200">Health state: <span className="mono">{health}</span></p>
+                <p className="text-zinc-200">API mode: <span className="mono">{apiInfo.mode}</span></p>
+                <p className="text-zinc-200">Base path: <span className="mono">{apiInfo.base}</span></p>
+                <p className="text-zinc-200">Focused task: <span className="mono">{taskInfo?.name ?? selectedTask}</span></p>
+              </div>
+            </div>
+            <div className="rounded-2xl border border-zinc-800 bg-zinc-950/60 p-5">
+              <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-3">Endpoints</p>
+              <div className="space-y-2 text-sm text-zinc-200 mono">
+                <div>GET /health</div>
+                <div>GET /tasks</div>
+                <div>POST /reset</div>
+                <div>POST /step</div>
+                <div>POST /grader</div>
+                <div>POST /baseline</div>
+              </div>
+            </div>
+          </div>
+          <div className="space-y-4">
+            <div className="rounded-2xl border border-cyan-500/15 bg-cyan-500/8 p-5">
+              <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-3">Canonical smoke test</p>
+              <pre className="mono text-xs leading-6 text-cyan-100 whitespace-pre-wrap">
+{`curl -sS https://krishpotanwar-sql-repair-env.hf.space/health
+curl -sS -X POST https://krishpotanwar-sql-repair-env.hf.space/reset \\
+  -H "Content-Type: application/json" \\
+  -d '{"task_id":"${selectedTask}"}'
+curl -sS -X POST https://krishpotanwar-sql-repair-env.hf.space/step \\
+  -H "Content-Type: application/json" \\
+  -d '{"action":{"type":"submit_query","query":"${canonicalQuery}"}}'`}
+              </pre>
+            </div>
+            <div className="rounded-2xl border border-amber-500/15 bg-amber-500/8 p-5">
+              <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-3">Docs</p>
+              <p className="text-sm text-zinc-200 leading-7">
+                FastAPI still exposes Swagger docs at <span className="mono">/docs</span>. The
+                HF App tab now serves a proper root UI at <span className="mono">/</span>, while
+                preserving the canonical OpenEnv API for the validator.
+              </p>
+            </div>
+          </div>
+        </div>
+      </SectionCard>
+    </div>
+  )
+}

frontend/src/components/BaselineArenaTab.tsx ADDED Viewed

	@@ -0,0 +1,132 @@

+import { useEffect, useMemo, useState } from 'react'
+import { fetchBaseline } from '../api/client'
+import { TASK_CATALOG } from '../data/taskCatalog'
+import type { BaselineResponse } from '../types'
+import { SectionCard } from './SectionCard'
+const IDEAL_SCORE = 0.99
+export function BaselineArenaTab() {
+  const [baseline, setBaseline] = useState<BaselineResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const loadBaseline = async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await fetchBaseline()
+      setBaseline(result)
+    } catch (loadError) {
+      setError(loadError instanceof Error ? loadError.message : String(loadError))
+    } finally {
+      setLoading(false)
+    }
+  }
+  useEffect(() => {
+    void loadBaseline()
+  }, [])
+  const entries = useMemo(
+    () =>
+      Object.entries(baseline?.scores ?? {}).map(([taskId, score]) => ({
+        taskId,
+        score,
+        delta: Number((IDEAL_SCORE - score).toFixed(4)),
+      })),
+    [baseline],
+  )
+  return (
+    <div className="space-y-6">
+      <SectionCard
+        eyebrow="Broken-query benchmark"
+        title="Baseline arena"
+        subtitle="The baseline endpoint runs the intentionally broken SQL for every task so we can inspect score separation."
+        actions={
+          <button
+            onClick={() => void loadBaseline()}
+            className="px-3 py-2 rounded-lg text-sm border border-zinc-800 bg-zinc-950/60 hover:bg-zinc-900/60"
+          >
+            Refresh Baseline
+          </button>
+        }
+      >
+        {error && (
+          <div className="rounded-xl border border-rose-500/20 bg-rose-500/10 px-4 py-4 text-sm text-rose-200 mb-4">
+            {error}
+          </div>
+        )}
+        {loading && (
+          <div className="text-sm text-zinc-500">Collecting live baseline scores…</div>
+        )}
+        {!loading && baseline && (
+          <div className="grid xl:grid-cols-[1.15fr_0.85fr] gap-6">
+            <div className="space-y-4">
+              {entries.map(({ taskId, score, delta }) => (
+                <div key={taskId} className="rounded-2xl border border-zinc-800 bg-zinc-950/60 p-4">
+                  <div className="flex items-start justify-between gap-4 mb-3">
+                    <div>
+                      <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500">{taskId}</p>
+                      <h3 className="text-lg font-semibold text-zinc-100 mt-2">
+                        {TASK_CATALOG[taskId]?.story}
+                      </h3>
+                    </div>
+                    <div className="text-right">
+                      <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500">Score</p>
+                      <p className="text-2xl font-semibold text-zinc-100 mt-2">{score.toFixed(4)}</p>
+                    </div>
+                  </div>
+                  <div className="h-3 rounded-full bg-zinc-900 overflow-hidden">
+                    <div
+                      className="h-full rounded-full bg-gradient-to-r from-amber-400 to-emerald-400"
+                      style={{ width: `${Math.max(6, score * 100)}%` }}
+                    />
+                  </div>
+                  <p className="text-xs text-zinc-500 mt-3">
+                    Gap to a near-perfect solve: <span className="mono">{delta.toFixed(4)}</span>
+                  </p>
+                </div>
+              ))}
+            </div>
+            <div className="space-y-4">
+              <div className="rounded-2xl border border-zinc-800 bg-zinc-950/60 p-5">
+                <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-2">Grader formula</p>
+                <ul className="space-y-2 text-sm text-zinc-200 leading-7">
+                  <li>0.05 for submitting any query</li>
+                  <li>0.25 when the last query executes without error</li>
+                  <li>0.60 when the result matches the expected rows</li>
+                  <li>0.09 efficiency bonus for faster perfect solves</li>
+                </ul>
+              </div>
+              <div className="rounded-2xl border border-cyan-500/15 bg-cyan-500/8 p-5">
+                <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-2">Why this matters</p>
+                <p className="text-sm text-cyan-100 leading-7">
+                  The scores stay strictly inside the open interval (0, 1), while still leaving
+                  enough spread between broken-query baselines and reference solves for the
+                  validator to tell them apart.
+                </p>
+              </div>
+              <div className="rounded-2xl border border-amber-500/15 bg-amber-500/8 p-5">
+                <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-2">Max steps</p>
+                <p className="text-3xl font-semibold text-zinc-100">{baseline.max_steps}</p>
+                <p className="text-sm text-zinc-300 leading-7 mt-2">
+                  Every task shares the same step ceiling, which keeps grading and agent runtime
+                  predictable for the OpenEnv portal.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </SectionCard>
+    </div>
+  )
+}

frontend/src/components/ProtocolTab.tsx ADDED Viewed

	@@ -0,0 +1,71 @@

+import { SectionCard } from './SectionCard'
+const stdoutContract = `[START] task_1
+[END] task_1 | score=0.5000 | status=fatal_no_llm
+[START] task_2
+[END] task_2 | score=0.5000 | status=fatal_no_llm
+[START] task_3
+[END] task_3 | score=0.5000 | status=fatal_no_llm`
+export function ProtocolTab() {
+  return (
+    <div className="space-y-6">
+      <SectionCard
+        eyebrow="Inference contract"
+        title="Agent protocol"
+        subtitle="Winner’s extra protocol pages document the exact validator assumptions that came out of the hackathon debugging cycle."
+      >
+        <div className="grid xl:grid-cols-2 gap-6">
+          <div className="space-y-4">
+            <div className="rounded-2xl border border-zinc-800 bg-zinc-950/60 p-5">
+              <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-3">Environment variables</p>
+              <ul className="space-y-2 text-sm text-zinc-200 mono">
+                <li>API_BASE_URL</li>
+                <li>MODEL_NAME</li>
+                <li>HF_TOKEN</li>
+                <li>LOCAL_IMAGE_NAME (optional)</li>
+                <li>ENV_URL (optional for local replay)</li>
+              </ul>
+            </div>
+            <div className="rounded-2xl border border-zinc-800 bg-zinc-950/60 p-5">
+              <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-3">Scoring guardrails</p>
+              <ul className="space-y-2 text-sm text-zinc-200 leading-7">
+                <li>Scores are clamped after rounding to avoid `0.0000` and `1.0000` leaks.</li>
+                <li>NaN, inf, and non-numeric paths collapse to `0.5`.</li>
+                <li>Every task emits exactly one `[START]` and one `[END]` line.</li>
+                <li>No stray stdout floats are allowed outside the score field.</li>
+              </ul>
+            </div>
+          </div>
+          <div className="rounded-2xl border border-emerald-500/15 bg-emerald-500/8 p-5">
+            <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-3">No-key stdout example</p>
+            <pre className="mono text-xs leading-6 text-emerald-100 whitespace-pre-wrap">
+              {stdoutContract}
+            </pre>
+          </div>
+        </div>
+      </SectionCard>
+      <SectionCard
+        eyebrow="Validator checklist"
+        title="What the portal expects"
+        subtitle="This page mirrors the checks we had to satisfy before the Winner Space became portal-ready."
+      >
+        <div className="grid md:grid-cols-2 xl:grid-cols-4 gap-4">
+          {[
+            'GET /health returns 200',
+            'POST /reset accepts an empty body',
+            'POST /step returns reward and done state',
+            'POST /grader emits a score strictly inside (0, 1)',
+          ].map((item) => (
+            <div key={item} className="rounded-2xl border border-zinc-800 bg-zinc-950/60 p-4 text-sm text-zinc-200">
+              {item}
+            </div>
+          ))}
+        </div>
+      </SectionCard>
+    </div>
+  )
+}

frontend/src/components/QueryWorkbenchTab.tsx ADDED Viewed

	@@ -0,0 +1,243 @@

+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { gradeTask, resetTask, submitQuery } from '../api/client'
+import { TASK_CATALOG } from '../data/taskCatalog'
+import type { ApiInfo, GraderResponse, StepResponse, TaskInfo, TaskObservation } from '../types'
+import { SectionCard } from './SectionCard'
+import { SqlPreviewTable } from './SqlPreviewTable'
+interface QueryWorkbenchTabProps {
+  selectedTask: string
+  taskInfo?: TaskInfo
+  apiInfo: ApiInfo
+}
+function scoreTone(score: number | null) {
+  if (score === null) return 'text-zinc-400'
+  if (score >= 0.9) return 'text-emerald-300'
+  if (score >= 0.3) return 'text-amber-300'
+  return 'text-rose-300'
+}
+export function QueryWorkbenchTab({
+  selectedTask,
+  taskInfo,
+  apiInfo,
+}: QueryWorkbenchTabProps) {
+  const [task, setTask] = useState<TaskObservation | null>(null)
+  const [query, setQuery] = useState('')
+  const [grader, setGrader] = useState<GraderResponse | null>(null)
+  const [stepResult, setStepResult] = useState<StepResponse | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const catalogEntry = TASK_CATALOG[selectedTask]
+  const loadTask = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const nextTask = await resetTask(selectedTask)
+      setTask(nextTask)
+      setQuery(nextTask.broken_query)
+      setStepResult(null)
+      setGrader(null)
+    } catch (loadError) {
+      setError(loadError instanceof Error ? loadError.message : String(loadError))
+    } finally {
+      setLoading(false)
+    }
+  }, [selectedTask])
+  useEffect(() => {
+    void loadTask()
+  }, [loadTask])
+  const mergedObservation = useMemo(() => {
+    if (!task) return null
+    if (!stepResult) return task
+    return { ...task, ...stepResult.observation }
+  }, [stepResult, task])
+  const runQuery = async (nextQuery: string) => {
+    setLoading(true)
+    setError(null)
+    try {
+      const response = await submitQuery(nextQuery)
+      setStepResult(response)
+      setTask((current) => (current ? { ...current, ...response.observation } : response.observation))
+      const nextScore = await gradeTask(selectedTask)
+      setGrader(nextScore)
+    } catch (runError) {
+      setError(runError instanceof Error ? runError.message : String(runError))
+    } finally {
+      setLoading(false)
+    }
+  }
+  return (
+    <div className="space-y-6">
+      <div className="grid xl:grid-cols-[0.95fr_1.05fr] gap-6">
+        <SectionCard
+          eyebrow="Case File"
+          title={taskInfo?.name ?? selectedTask}
+          subtitle="The environment resets on every task change and tracks a single active SQL repair session."
+          actions={
+            <button
+              onClick={() => void loadTask()}
+              className="px-3 py-2 rounded-lg text-sm border border-zinc-800 bg-zinc-950/60 hover:bg-zinc-900/60"
+            >
+              Reset Task
+            </button>
+          }
+        >
+          {mergedObservation ? (
+            <div className="space-y-5">
+              <div className="grid sm:grid-cols-3 gap-3">
+                <div className="rounded-xl bg-zinc-950/60 border border-zinc-800 p-3">
+                  <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500">Difficulty</p>
+                  <p className="text-lg font-semibold mt-2 text-zinc-100">{mergedObservation.difficulty}</p>
+                </div>
+                <div className="rounded-xl bg-zinc-950/60 border border-zinc-800 p-3">
+                  <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500">Expected Shape</p>
+                  <p className="text-lg font-semibold mt-2 text-zinc-100">
+                    {mergedObservation.expected_row_count} × {mergedObservation.expected_column_count}
+                  </p>
+                </div>
+                <div className="rounded-xl bg-zinc-950/60 border border-zinc-800 p-3">
+                  <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500">Current Score</p>
+                  <p className={`text-lg font-semibold mt-2 ${scoreTone(grader?.score ?? null)}`}>
+                    {grader ? grader.score.toFixed(4) : '—'}
+                  </p>
+                </div>
+              </div>
+              <div>
+                <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-2">Hint</p>
+                <p className="text-sm leading-7 text-zinc-200">{mergedObservation.hint}</p>
+              </div>
+              <div>
+                <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-2">Broken Query</p>
+                <pre className="mono text-sm rounded-xl border border-zinc-800 bg-zinc-950/70 px-4 py-4 overflow-auto text-rose-200 whitespace-pre-wrap">
+                  {mergedObservation.broken_query}
+                </pre>
+              </div>
+              <div>
+                <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-2">Schema</p>
+                <pre className="mono text-sm rounded-xl border border-zinc-800 bg-zinc-950/70 px-4 py-4 overflow-auto text-zinc-200 whitespace-pre-wrap">
+                  {mergedObservation.schema_sql}
+                </pre>
+              </div>
+              {mergedObservation.broken_query_error && (
+                <div className="rounded-xl border border-amber-500/20 bg-amber-500/8 px-4 py-4 text-sm text-amber-100">
+                  Baseline error: <span className="mono">{mergedObservation.broken_query_error}</span>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="text-sm text-zinc-500">Loading task snapshot…</div>
+          )}
+        </SectionCard>
+        <SectionCard
+          eyebrow="Repair Workbench"
+          title="Submit and score candidate fixes"
+          subtitle="Use the same reset/step/grader flow that the validator exercises on the live Space."
+          actions={
+            <div className="flex flex-wrap gap-2">
+              <button
+                onClick={() => setQuery(task?.broken_query ?? '')}
+                className="px-3 py-2 rounded-lg text-sm border border-zinc-800 bg-zinc-950/60 hover:bg-zinc-900/60"
+              >
+                Load Broken Query
+              </button>
+              <button
+                onClick={() => setQuery(catalogEntry?.canonicalQuery ?? '')}
+                className="px-3 py-2 rounded-lg text-sm border border-emerald-500/20 bg-emerald-500/10 text-emerald-200 hover:bg-emerald-500/15"
+              >
+                Load Reference Fix
+              </button>
+            </div>
+          }
+        >
+          <div className="space-y-4">
+            <textarea
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              spellCheck={false}
+              className="w-full min-h-[220px] rounded-2xl border border-zinc-800 bg-zinc-950/80 px-4 py-4 text-sm text-zinc-100 mono focus:outline-none focus:border-cyan-500/40"
+            />
+            <div className="flex flex-wrap gap-3">
+              <button
+                onClick={() => void runQuery(query)}
+                disabled={loading}
+                className="px-5 py-3 rounded-xl text-sm font-semibold bg-gradient-to-r from-emerald-500 to-cyan-500 text-zinc-950 disabled:opacity-60"
+              >
+                {loading ? 'Executing…' : 'Submit Current Query'}
+              </button>
+              <button
+                onClick={() => void loadTask()}
+                disabled={loading}
+                className="px-4 py-3 rounded-xl text-sm border border-zinc-800 bg-zinc-950/60 hover:bg-zinc-900/60 disabled:opacity-60"
+              >
+                Reset Session
+              </button>
+            </div>
+            {error && (
+              <div className="rounded-xl border border-rose-500/20 bg-rose-500/10 px-4 py-4 text-sm text-rose-200">
+                {error}
+              </div>
+            )}
+            <div className="grid lg:grid-cols-3 gap-4">
+              <div className="rounded-2xl border border-zinc-800 bg-zinc-950/60 p-4">
+                <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-2">Reward</p>
+                <p className="text-2xl font-semibold text-zinc-100">
+                  {stepResult ? stepResult.reward.toFixed(2) : '—'}
+                </p>
+              </div>
+              <div className="rounded-2xl border border-zinc-800 bg-zinc-950/60 p-4">
+                <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-2">Solved</p>
+                <p className="text-2xl font-semibold text-zinc-100">
+                  {stepResult ? (stepResult.info.solved ? 'YES' : 'NO') : '—'}
+                </p>
+              </div>
+              <div className="rounded-2xl border border-zinc-800 bg-zinc-950/60 p-4">
+                <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-2">API Mode</p>
+                <p className="text-sm font-semibold text-zinc-100">{apiInfo.mode}</p>
+                <p className="text-xs text-zinc-500 mt-1 mono">{apiInfo.base}</p>
+              </div>
+            </div>
+            <div className="grid lg:grid-cols-2 gap-4">
+              <div>
+                <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-2">Result Preview</p>
+                <SqlPreviewTable
+                  emptyLabel="Run a query to inspect the first rows returned by SQLite."
+                  rows={mergedObservation?.result_preview}
+                />
+              </div>
+              <div>
+                <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-2">Expected Preview</p>
+                <SqlPreviewTable
+                  emptyLabel="Expected rows will appear after the task loads."
+                  rows={mergedObservation?.expected_preview}
+                />
+              </div>
+            </div>
+            {catalogEntry && (
+              <div className="rounded-2xl border border-cyan-500/15 bg-cyan-500/8 px-4 py-4 text-sm text-cyan-100">
+                <p className="font-semibold mb-2">Reference validation signal</p>
+                <p className="leading-7">{catalogEntry.validationSignal}</p>
+              </div>
+            )}
+          </div>
+        </SectionCard>
+      </div>
+    </div>
+  )
+}

frontend/src/components/SectionCard.tsx ADDED Viewed

	@@ -0,0 +1,38 @@

+import clsx from 'clsx'
+import type { ReactNode } from 'react'
+interface SectionCardProps {
+  title: string
+  eyebrow?: string
+  subtitle?: string
+  actions?: ReactNode
+  children: ReactNode
+  className?: string
+}
+export function SectionCard({
+  title,
+  eyebrow,
+  subtitle,
+  actions,
+  children,
+  className,
+}: SectionCardProps) {
+  return (
+    <section className={clsx('glass-panel rounded-2xl overflow-hidden', className)}>
+      <div className="px-5 py-4 border-b border-zinc-800/80 flex items-start justify-between gap-4">
+        <div>
+          {eyebrow && (
+            <p className="text-[11px] uppercase tracking-[0.26em] text-zinc-500 mb-2">
+              {eyebrow}
+            </p>
+          )}
+          <h2 className="text-lg font-semibold text-zinc-100">{title}</h2>
+          {subtitle && <p className="text-sm text-zinc-400 mt-1">{subtitle}</p>}
+        </div>
+        {actions && <div className="flex items-center gap-2 flex-wrap">{actions}</div>}
+      </div>
+      <div className="p-5">{children}</div>
+    </section>
+  )
+}

frontend/src/components/SqlLandingPage.tsx ADDED Viewed

	@@ -0,0 +1,159 @@

+import { motion } from 'framer-motion'
+import {
+  Activity,
+  Braces,
+  Database,
+  ShieldCheck,
+  Sparkles,
+  TerminalSquare,
+} from 'lucide-react'
+interface SqlLandingPageProps {
+  onLaunch: () => void
+}
+const featureCards = [
+  {
+    icon: Database,
+    title: 'SQLite-backed task arena',
+    copy: 'Each mission spins up a fresh in-memory database so every repair attempt is deterministic and reproducible.',
+  },
+  {
+    icon: ShieldCheck,
+    title: 'Strict validator guardrails',
+    copy: 'Scores are clamped to the open interval (0, 1) even after rounding, matching the hackathon validator contract.',
+  },
+  {
+    icon: TerminalSquare,
+    title: 'Inference protocol ready',
+    copy: 'The console mirrors the same reset/step/grader lifecycle that powers the baseline agent and portal checks.',
+  },
+]
+const statusPills = [
+  { label: '3 SQL tasks', value: 'easy → hard' },
+  { label: '6-step budget', value: 'per task' },
+  { label: 'HF Space', value: 'live + healthy' },
+]
+export function SqlLandingPage({ onLaunch }: SqlLandingPageProps) {
+  return (
+    <div className="min-h-screen relative overflow-hidden bg-[#050505] text-white">
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(16,185,129,0.18),transparent_32%),radial-gradient(circle_at_top_right,rgba(34,211,238,0.14),transparent_32%),radial-gradient(circle_at_bottom,rgba(245,158,11,0.12),transparent_36%)]" />
+      <div className="absolute inset-0 opacity-30 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:28px_28px]" />
+      <div className="relative z-10 max-w-7xl mx-auto px-6 py-10 md:py-16">
+        <motion.div
+          initial={{ opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="flex flex-wrap items-center justify-between gap-4 mb-16"
+        >
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 rounded-full border border-emerald-400/30 bg-emerald-500/10 flex items-center justify-center shadow-[0_0_18px_rgba(16,185,129,0.35)]">
+              <Sparkles className="w-6 h-6 text-emerald-300" />
+            </div>
+            <div>
+              <p className="text-[11px] uppercase tracking-[0.3em] text-zinc-500">Winner Project</p>
+              <h1 className="text-xl font-semibold">SQL Repair Env</h1>
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-3">
+            <a
+              href="/docs"
+              className="px-4 py-2 text-sm rounded-lg border border-zinc-800 bg-black/30 hover:bg-zinc-900/60 transition-colors"
+            >
+              Inspect API Docs
+            </a>
+            <button
+              onClick={onLaunch}
+              className="px-5 py-2 text-sm font-semibold rounded-lg bg-gradient-to-r from-emerald-500 to-cyan-500 text-zinc-950 shadow-[0_0_22px_rgba(34,211,238,0.28)]"
+            >
+              Launch Repair Console
+            </button>
+          </div>
+        </motion.div>
+        <div className="grid lg:grid-cols-[1.2fr_0.8fr] gap-8 items-start">
+          <motion.div
+            initial={{ opacity: 0, x: -24 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.55, delay: 0.1 }}
+            className="glass-panel rounded-[28px] p-8 md:p-10"
+          >
+            <div className="inline-flex items-center gap-2 rounded-full border border-emerald-400/20 bg-emerald-500/8 px-4 py-2 text-[11px] uppercase tracking-[0.26em] text-emerald-200 mb-6">
+              <Activity className="w-4 h-4" />
+              Live Validation Console
+            </div>
+            <h2 className="text-4xl md:text-6xl font-semibold leading-[1.02] tracking-tight max-w-3xl">
+              Copy the canary’s
+              <span className="block bg-gradient-to-r from-emerald-300 via-cyan-300 to-amber-300 bg-clip-text text-transparent">
+                command-center energy
+              </span>
+              for a SQL repair environment.
+            </h2>
+            <p className="text-zinc-300 text-base md:text-lg leading-8 mt-6 max-w-2xl">
+              Winner now ships a proper root UI for Hugging Face Spaces: task explorer, live
+              repair workbench, baseline scoring, and the exact agent protocol used by the
+              OpenEnv validator.
+            </p>
+            <div className="grid sm:grid-cols-3 gap-3 mt-8">
+              {statusPills.map((pill) => (
+                <div
+                  key={pill.label}
+                  className="rounded-2xl border border-zinc-800/80 bg-zinc-950/65 px-4 py-4"
+                >
+                  <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500">{pill.label}</p>
+                  <p className="text-lg font-semibold mt-2 text-zinc-100">{pill.value}</p>
+                </div>
+              ))}
+            </div>
+          </motion.div>
+          <motion.div
+            initial={{ opacity: 0, x: 24 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.55, delay: 0.18 }}
+            className="space-y-4"
+          >
+            {featureCards.map(({ icon: Icon, title, copy }) => (
+              <div
+                key={title}
+                className="glass-panel rounded-2xl p-5 border border-zinc-800/80"
+              >
+                <div className="flex items-center gap-3 mb-3">
+                  <div className="w-11 h-11 rounded-xl bg-zinc-950/70 border border-zinc-800 flex items-center justify-center">
+                    <Icon className="w-5 h-5 text-cyan-300" />
+                  </div>
+                  <h3 className="text-lg font-semibold">{title}</h3>
+                </div>
+                <p className="text-sm leading-7 text-zinc-300">{copy}</p>
+              </div>
+            ))}
+            <div className="glass-panel rounded-2xl p-5 border border-amber-500/20 bg-[linear-gradient(180deg,rgba(245,158,11,0.08),rgba(9,9,11,0.6))]">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="w-11 h-11 rounded-xl bg-zinc-950/60 border border-amber-400/20 flex items-center justify-center">
+                  <Braces className="w-5 h-5 text-amber-200" />
+                </div>
+                <h3 className="text-lg font-semibold">Validator-safe stdout</h3>
+              </div>
+              <pre className="mono text-xs leading-6 text-amber-100 whitespace-pre-wrap">
+{`[START] task_1
+[END] task_1 | score=0.5000 | status=fatal_no_llm
+[START] task_2
+[END] task_2 | score=0.5000 | status=fatal_no_llm
+[START] task_3
+[END] task_3 | score=0.5000 | status=fatal_no_llm`}
+              </pre>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/SqlPreviewTable.tsx ADDED Viewed

	@@ -0,0 +1,44 @@

+import type { SqlRow } from '../types'
+interface SqlPreviewTableProps {
+  rows?: SqlRow[] | null
+  emptyLabel: string
+}
+function formatCell(cell: SqlRow[number]) {
+  if (cell === null) return 'NULL'
+  if (typeof cell === 'number') return Number.isInteger(cell) ? cell.toString() : cell.toFixed(2)
+  return String(cell)
+}
+export function SqlPreviewTable({ rows, emptyLabel }: SqlPreviewTableProps) {
+  if (!rows || rows.length === 0) {
+    return (
+      <div className="rounded-xl border border-dashed border-zinc-800 bg-zinc-950/60 px-4 py-6 text-sm text-zinc-500">
+        {emptyLabel}
+      </div>
+    )
+  }
+  return (
+    <div className="overflow-auto rounded-xl border border-zinc-800">
+      <table className="w-full text-sm">
+        <tbody>
+          {rows.map((row, rowIndex) => (
+            <tr key={`row-${rowIndex}`} className="odd:bg-zinc-950/60 even:bg-zinc-900/60">
+              <td className="px-3 py-2 text-zinc-500 border-r border-zinc-800 mono w-12">{rowIndex}</td>
+              {row.map((cell, cellIndex) => (
+                <td
+                  key={`cell-${rowIndex}-${cellIndex}`}
+                  className="px-3 py-2 border-r border-zinc-800/80 last:border-r-0 text-zinc-100 mono"
+                >
+                  {formatCell(cell)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

frontend/src/components/TaskAtlasTab.tsx ADDED Viewed

	@@ -0,0 +1,79 @@

+import { TASK_CATALOG } from '../data/taskCatalog'
+import type { TaskInfo } from '../types'
+import { SectionCard } from './SectionCard'
+interface TaskAtlasTabProps {
+  tasks: TaskInfo[]
+  selectedTask: string
+  onSelectTask: (taskId: string) => void
+}
+export function TaskAtlasTab({ tasks, selectedTask, onSelectTask }: TaskAtlasTabProps) {
+  return (
+    <div className="space-y-6">
+      <SectionCard
+        eyebrow="Mission Catalog"
+        title="All SQL repair tasks"
+        subtitle="Winner-specific task cards built on top of the copied DisasterMan console shell."
+      >
+        <div className="grid xl:grid-cols-3 gap-5">
+          {tasks.map((task) => {
+            const catalog = TASK_CATALOG[task.id]
+            const isSelected = task.id === selectedTask
+            return (
+              <article
+                key={task.id}
+                className={`rounded-2xl border p-5 transition-colors ${
+                  isSelected
+                    ? 'border-emerald-400/40 bg-emerald-500/10'
+                    : 'border-zinc-800 bg-zinc-950/60'
+                }`}
+              >
+                <div className="flex items-start justify-between gap-3 mb-4">
+                  <div>
+                    <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500">{task.id}</p>
+                    <h3 className="text-lg font-semibold mt-2 text-zinc-100">{task.name}</h3>
+                  </div>
+                  <span className="rounded-full px-3 py-1 text-xs uppercase tracking-[0.2em] border border-zinc-700 text-zinc-300">
+                    {task.difficulty}
+                  </span>
+                </div>
+                <p className="text-sm leading-7 text-zinc-300 mb-4">{catalog?.story}</p>
+                <div className="space-y-4 text-sm">
+                  <div>
+                    <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-2">Why it fails</p>
+                    <p className="leading-7 text-zinc-200">{catalog?.whyItFails}</p>
+                  </div>
+                  <div>
+                    <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-2">Schema snapshot</p>
+                    <pre className="mono text-xs rounded-xl border border-zinc-800 bg-black/40 px-3 py-3 whitespace-pre-wrap overflow-auto text-zinc-300">
+                      {catalog?.schemaStatements.slice(0, 4).join('\n')}
+                    </pre>
+                  </div>
+                  <div>
+                    <p className="text-[11px] uppercase tracking-[0.24em] text-zinc-500 mb-2">Reference fix</p>
+                    <pre className="mono text-xs rounded-xl border border-emerald-500/15 bg-emerald-500/8 px-3 py-3 whitespace-pre-wrap overflow-auto text-emerald-100">
+                      {catalog?.canonicalQuery}
+                    </pre>
+                  </div>
+                </div>
+                <button
+                  onClick={() => onSelectTask(task.id)}
+                  className="mt-5 w-full px-4 py-3 rounded-xl bg-gradient-to-r from-emerald-500 to-cyan-500 text-zinc-950 font-semibold text-sm"
+                >
+                  Open in Query Lab
+                </button>
+              </article>
+            )
+          })}
+        </div>
+      </SectionCard>
+    </div>
+  )
+}

frontend/src/data/taskCatalog.ts ADDED Viewed

	@@ -0,0 +1,61 @@

+import type { TaskCatalogEntry } from '../types'
+export const TASK_CATALOG: Record<string, TaskCatalogEntry> = {
+  task_1: {
+    id: 'task_1',
+    story:
+      'A receipt parser captured the right columns but dropped commas in the SELECT list.',
+    whyItFails:
+      'SQLite interprets `id name price` as malformed syntax because the projection list never separates the column identifiers.',
+    schemaStatements: [
+      'CREATE TABLE products (id INTEGER PRIMARY KEY, name TEXT NOT NULL, price REAL NOT NULL);',
+      "INSERT INTO products VALUES (1, 'Apple', 0.50);",
+      "INSERT INTO products VALUES (2, 'Bread', 2.50);",
+      "INSERT INTO products VALUES (3, 'Cheese', 5.00);",
+      "INSERT INTO products VALUES (4, 'Milk', 1.50);",
+      "INSERT INTO products VALUES (5, 'Eggs', 3.00);",
+    ],
+    canonicalQuery: 'SELECT id, name, price FROM products ORDER BY id',
+    validationSignal: 'Solved when the result matches 5 rows × 3 columns in the expected order.',
+  },
+  task_2: {
+    id: 'task_2',
+    story:
+      'An analyst copied a JOIN from another schema and kept the wrong column names.',
+    whyItFails:
+      'Both `username` and `user` do not exist in the current schema, so the join never resolves against the users and orders tables.',
+    schemaStatements: [
+      'CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT NOT NULL, country TEXT);',
+      'CREATE TABLE orders (id INTEGER PRIMARY KEY, user_id INTEGER NOT NULL, total REAL NOT NULL);',
+      "INSERT INTO users VALUES (1, 'Aarav', 'IN');",
+      "INSERT INTO users VALUES (2, 'Bea', 'US');",
+      "INSERT INTO users VALUES (3, 'Chen', 'CN');",
+      'INSERT INTO orders VALUES (10, 1, 99.00);',
+      'INSERT INTO orders VALUES (11, 1, 49.50);',
+      'INSERT INTO orders VALUES (12, 2, 200.00);',
+      'INSERT INTO orders VALUES (13, 3, 25.00);',
+    ],
+    canonicalQuery:
+      'SELECT u.name, o.total FROM users u JOIN orders o ON u.id = o.user_id ORDER BY o.id',
+    validationSignal: 'Solved when the name/total pairs align with all 4 order rows.',
+  },
+  task_3: {
+    id: 'task_3',
+    story:
+      'A reporting query totals revenue by region but omits the grouping step.',
+    whyItFails:
+      'The query mixes a non-aggregate column with `SUM(amount)` and never groups by region, so the repair must add the missing aggregation boundary.',
+    schemaStatements: [
+      'CREATE TABLE sales (id INTEGER PRIMARY KEY, region TEXT NOT NULL, amount REAL NOT NULL);',
+      "INSERT INTO sales VALUES (1, 'north', 100.00);",
+      "INSERT INTO sales VALUES (2, 'north', 50.00);",
+      "INSERT INTO sales VALUES (3, 'south', 200.00);",
+      "INSERT INTO sales VALUES (4, 'south', 75.00);",
+      "INSERT INTO sales VALUES (5, 'east', 150.00);",
+      "INSERT INTO sales VALUES (6, 'east', 25.00);",
+    ],
+    canonicalQuery:
+      'SELECT region, SUM(amount) AS total FROM sales GROUP BY region ORDER BY region',
+    validationSignal: 'Solved when the grouped totals produce exactly 3 ordered regional aggregates.',
+  },
+}

frontend/src/index.css ADDED Viewed

	@@ -0,0 +1,88 @@

+@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Geist:wght@400;500;600;700&display=swap');
+@import 'leaflet/dist/leaflet.css';
+@import "tailwindcss";
+:root {
+  font-family: 'Geist', system-ui, sans-serif;
+  --glass-bg: rgba(9, 9, 11, 0.6);
+  --glass-border: rgba(255, 255, 255, 0.05);
+}
+body {
+  background-color: #050505;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    radial-gradient(circle at 15% 50%, rgba(59, 130, 246, 0.15), transparent 40%),
+    radial-gradient(circle at 85% 30%, rgba(220, 38, 38, 0.12), transparent 40%);
+  background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%;
+  background-position: center center;
+  background-attachment: fixed;
+  color: #fafafa;
+  margin: 0;
+  min-height: 100vh;
+}
+#root {
+  min-height: 100vh;
+}
+.mono {
+  font-family: 'Geist Mono', monospace;
+}
+.zone-pulse {
+  animation: pulse-ring 0.8s ease-out infinite;
+}
+@keyframes pulse-ring {
+  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8); }
+  100% { box-shadow: 0 0 0 16px rgba(239, 68, 68, 0); }
+}
+.zone-pulse-green {
+  animation: pulse-ring-green 1s ease-out infinite;
+}
+@keyframes pulse-ring-green {
+  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
+  100% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); }
+}
+.step-fade-in {
+  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+.score-bar-fill {
+  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.glass-panel {
+  background: rgba(9, 9, 11, 0.4);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
+}
+.neon-border-red {
+  box-shadow: 0 0 10px rgba(220, 38, 38, 0.4), inset 0 0 10px rgba(220, 38, 38, 0.4);
+  border-color: rgba(239, 68, 68, 0.6);
+}
+.neon-border-green {
+  box-shadow: 0 0 10px rgba(34, 197, 94, 0.2), inset 0 0 10px rgba(34, 197, 94, 0.1);
+  border-color: rgba(34, 197, 94, 0.4);
+}
+.neon-border-purple {
+  box-shadow: 0 0 15px rgba(168, 85, 247, 0.5), inset 0 0 15px rgba(168, 85, 247, 0.3);
+  border-color: rgba(192, 132, 252, 0.8);
+}

frontend/src/main.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/types.ts ADDED Viewed

	@@ -0,0 +1,73 @@

+export type HealthStatus = 'loading' | 'ok' | 'error'
+export interface ApiInfo {
+  base: string
+  mode: 'proxy' | 'direct' | 'local'
+  env: string
+}
+export type SqlCell = string | number | boolean | null
+export type SqlRow = SqlCell[]
+export interface HealthResponse {
+  status: string
+  [key: string]: unknown
+}
+export interface TaskInfo {
+  id: string
+  name: string
+  difficulty: string
+}
+export interface TaskObservation {
+  task_id: string
+  name: string
+  difficulty: string
+  schema_sql: string
+  broken_query: string
+  broken_query_error: string | null
+  broken_query_executes: boolean
+  hint: string
+  expected_row_count: number
+  expected_column_count: number
+  step_count: number
+  max_steps: number
+  remaining_steps: number
+  submitted_query?: string
+  error?: string | null
+  executed?: boolean
+  matches_expected?: boolean
+  result_row_count?: number
+  result_preview?: SqlRow[] | null
+  expected_preview?: SqlRow[] | null
+}
+export interface StepResponse {
+  observation: TaskObservation
+  reward: number
+  done: boolean
+  info: {
+    solved: boolean
+    [key: string]: unknown
+  }
+}
+export interface GraderResponse {
+  task_id: string
+  score: number
+}
+export interface BaselineResponse {
+  scores: Record<string, number>
+  max_steps: number
+}
+export interface TaskCatalogEntry {
+  id: string
+  story: string
+  whyItFails: string
+  schemaStatements: string[]
+  canonicalQuery: string
+  validationSignal: string
+}

frontend/tsconfig.app.json ADDED Viewed

	@@ -0,0 +1,28 @@

+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

frontend/tsconfig.json ADDED Viewed

	@@ -0,0 +1,7 @@

+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

frontend/tsconfig.node.json ADDED Viewed

	@@ -0,0 +1,26 @@

+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vercel.json ADDED Viewed

	@@ -0,0 +1,12 @@

+{
+  "rewrites": [
+    {
+      "source": "/api/(.*)",
+      "destination": "https://krishpotanwar-disaster-relief-env.hf.space/$1"
+    },
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}

frontend/vite.config.ts ADDED Viewed

	@@ -0,0 +1,8 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})

server/app.py CHANGED Viewed

@@ -18,7 +18,9 @@ from __future__ import annotations
 import os
 from typing import Any, Dict, List, Optional
-from fastapi import Body, FastAPI
 from pydantic import BaseModel, Field
 from sql_env.env_core import EnvState, MAX_STEPS
@@ -36,6 +38,8 @@ app = FastAPI(
 # Single mutable env state instance — the validator runs one session.
 _state = EnvState()
 # ---------------------------------------------------------------------------
@@ -70,6 +74,11 @@ def health() -> Dict[str, str]:
     return {"status": "ok"}
 @app.get("/tasks")
 def list_tasks() -> Dict[str, Any]:
     return {
@@ -85,6 +94,11 @@ def list_tasks() -> Dict[str, Any]:
     }
 @app.post("/reset")
 def reset(req: Optional[ResetRequest] = Body(default=None)) -> Dict[str, Any]:
     """Reset the environment. Body is optional — defaults to task_1."""
@@ -93,6 +107,11 @@ def reset(req: Optional[ResetRequest] = Body(default=None)) -> Dict[str, Any]:
     return obs
 @app.post("/step")
 def step(req: Optional[StepRequest] = Body(default=None)) -> Dict[str, Any]:
     """Apply one action to the environment."""
@@ -100,6 +119,11 @@ def step(req: Optional[StepRequest] = Body(default=None)) -> Dict[str, Any]:
     return _state.step(action)
 @app.post("/grader")
 def grader(req: Optional[GraderRequest] = Body(default=None)) -> Dict[str, Any]:
     """Return the strict-(0,1) score for the given task."""
@@ -108,6 +132,11 @@ def grader(req: Optional[GraderRequest] = Body(default=None)) -> Dict[str, Any]:
     return {"task_id": task_id, "score": float(score)}
 @app.post("/baseline")
 def baseline(
     req: Optional[BaselineRequest] = Body(default=None),
@@ -126,6 +155,48 @@ def baseline(
     return {"scores": out, "max_steps": MAX_STEPS}
 # ---------------------------------------------------------------------------
 # Entry point — referenced by [project.scripts] server = "server.app:main"
 # ---------------------------------------------------------------------------

 import os
 from typing import Any, Dict, List, Optional
+from fastapi import Body, FastAPI, HTTPException
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel, Field
 from sql_env.env_core import EnvState, MAX_STEPS
 # Single mutable env state instance — the validator runs one session.
 _state = EnvState()
+_server_dir = os.path.dirname(os.path.abspath(__file__))
+_frontend_dist = os.path.abspath(os.path.join(_server_dir, "..", "frontend", "dist"))
 # ---------------------------------------------------------------------------
     return {"status": "ok"}
+@app.get("/api/health")
+def health_api() -> Dict[str, str]:
+    return health()
 @app.get("/tasks")
 def list_tasks() -> Dict[str, Any]:
     return {
     }
+@app.get("/api/tasks")
+def list_tasks_api() -> Dict[str, Any]:
+    return list_tasks()
 @app.post("/reset")
 def reset(req: Optional[ResetRequest] = Body(default=None)) -> Dict[str, Any]:
     """Reset the environment. Body is optional — defaults to task_1."""
     return obs
+@app.post("/api/reset")
+def reset_api(req: Optional[ResetRequest] = Body(default=None)) -> Dict[str, Any]:
+    return reset(req)
 @app.post("/step")
 def step(req: Optional[StepRequest] = Body(default=None)) -> Dict[str, Any]:
     """Apply one action to the environment."""
     return _state.step(action)
+@app.post("/api/step")
+def step_api(req: Optional[StepRequest] = Body(default=None)) -> Dict[str, Any]:
+    return step(req)
 @app.post("/grader")
 def grader(req: Optional[GraderRequest] = Body(default=None)) -> Dict[str, Any]:
     """Return the strict-(0,1) score for the given task."""
     return {"task_id": task_id, "score": float(score)}
+@app.post("/api/grader")
+def grader_api(req: Optional[GraderRequest] = Body(default=None)) -> Dict[str, Any]:
+    return grader(req)
 @app.post("/baseline")
 def baseline(
     req: Optional[BaselineRequest] = Body(default=None),
     return {"scores": out, "max_steps": MAX_STEPS}
+@app.post("/api/baseline")
+def baseline_api(
+    req: Optional[BaselineRequest] = Body(default=None),
+) -> Dict[str, Any]:
+    return baseline(req)
+@app.get("/", include_in_schema=False, response_model=None)
+def root() -> Any:
+    index_file = os.path.join(_frontend_dist, "index.html")
+    if os.path.exists(index_file):
+        return FileResponse(index_file)
+    return {
+        "name": "SQL Repair OpenEnv",
+        "status": "ok",
+        "docs": "/docs",
+        "health": "/health",
+        "tasks": "/tasks",
+    }
+if os.path.isdir(_frontend_dist):
+    assets_dir = os.path.join(_frontend_dist, "assets")
+    if os.path.isdir(assets_dir):
+        app.mount("/assets", StaticFiles(directory=assets_dir), name="assets")
+    @app.get("/{full_path:path}", include_in_schema=False)
+    def spa_fallback(full_path: str) -> FileResponse:
+        if full_path.startswith("api/"):
+            raise HTTPException(status_code=404, detail="Not Found")
+        requested_file = os.path.join(_frontend_dist, full_path)
+        if os.path.isfile(requested_file):
+            return FileResponse(requested_file)
+        index_file = os.path.join(_frontend_dist, "index.html")
+        if os.path.isfile(index_file):
+            return FileResponse(index_file)
+        raise HTTPException(status_code=404, detail="Not Found")
 # ---------------------------------------------------------------------------
 # Entry point — referenced by [project.scripts] server = "server.app:main"
 # ---------------------------------------------------------------------------