Spaces:

jester1177
/

cloudnative-devops-debug-env

Sleeping

App Files Files Community

Krishna1107 commited on Apr 5

Commit

804f70e

1 Parent(s): 88ffd96

deployment fixes, hf space fixes

Browse files

Files changed (6) hide show

.gitignore +1 -0
Dockerfile +1 -1
inference.py +20 -12
server/main.py +12 -3
server/static/index.html +863 -0
tests/test_endpoints.py +8 -2

.gitignore CHANGED Viewed

@@ -42,3 +42,4 @@ Thumbs.db
 *.zip
 context/

 *.zip
 context/
+tutorial_references/

Dockerfile CHANGED Viewed

@@ -4,7 +4,7 @@ WORKDIR /app
 # Install dependencies first (layer caching)
 COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
 # Copy application code
 COPY server/ ./server/

 # Install dependencies first (layer caching)
 COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt && pip install --no-cache-dir aiofiles
 # Copy application code
 COPY server/ ./server/

inference.py CHANGED Viewed

@@ -24,10 +24,11 @@ from openai import OpenAI
 # ── Configuration ─────────────────────────────────────────────────
-API_BASE_URL = os.environ.get("API_BASE_URL", "https://router.huggingface.co/v1")
-MODEL_NAME = os.environ.get("MODEL_NAME", "meta-llama/Llama-3.1-70B-Instruct")
-HF_TOKEN = os.environ.get("HF_TOKEN", "")
-ENV_URL = os.environ.get("ENV_URL", "http://localhost:8000")
 MAX_STEPS = 8  # leave 2 steps buffer before env hard-limit of 10
 SYSTEM_PROMPT = """You are an expert DevOps engineer debugging CI/CD pipelines.
@@ -70,7 +71,7 @@ def create_client() -> OpenAI:
     """Create OpenAI-compatible client for HuggingFace router."""
     return OpenAI(
         base_url=API_BASE_URL,
-        api_key=HF_TOKEN or "dummy",
     )
@@ -182,10 +183,12 @@ def run_episode(client: OpenAI, task_id: Optional[str] = None, scenario_id: Opti
     actual_task_id = info.get("task_id", task_id or "unknown")
     actual_scenario_id = info.get("scenario_id", scenario_id or "unknown")
-    print(f"  Episode: task={actual_task_id}, scenario={actual_scenario_id}")
     messages = [{"role": "system", "content": SYSTEM_PROMPT}]
     trajectory = []
     for step_num in range(MAX_STEPS):
         user_msg = format_observation(obs)
@@ -200,7 +203,7 @@ def run_episode(client: OpenAI, task_id: Optional[str] = None, scenario_id: Opti
             )
             llm_text = completion.choices[0].message.content or '{"action": "submit"}'
         except Exception as e:
-            print(f"    LLM error at step {step_num + 1}: {e}")
             llm_text = '{"action": "submit"}'
         messages.append({"role": "assistant", "content": llm_text})
@@ -208,18 +211,21 @@ def run_episode(client: OpenAI, task_id: Optional[str] = None, scenario_id: Opti
         parsed = parse_llm_response(llm_text)
         action = build_action(parsed)
-        print(f"    Step {step_num + 1}: {action['action_type']}", end="")
         step_resp = env_request("POST", "/step", {"action": action})
         obs = step_resp["observation"]
         reward = step_resp.get("reward", 0.0)
         done = step_resp.get("done", False)
         step_info = step_resp.get("info", {})
-        print(f" -> reward={reward:.2f}, fixed={step_info.get('issues_fixed', '?')}/{step_info.get('issues_total', '?')}")
         trajectory.append({
-            "step": step_num + 1,
             "action": action,
             "reward": reward,
             "done": done,
@@ -236,7 +242,9 @@ def run_episode(client: OpenAI, task_id: Optional[str] = None, scenario_id: Opti
     })
     result = grade_resp.get("result", {})
     score = result.get("score", 0.0)
-    print(f"  Score: {score:.3f} | {result.get('feedback', '')}")
     return result

 # ── Configuration ─────────────────────────────────────────────────
+API_BASE_URL = os.getenv("API_BASE_URL", "https://router.huggingface.co/v1")
+MODEL_NAME = os.getenv("MODEL_NAME", "meta-llama/Llama-3.1-70B-Instruct")
+HF_TOKEN = os.getenv("HF_TOKEN")
+ENV_URL = os.getenv("ENV_URL", "http://localhost:8000")
+LOCAL_IMAGE_NAME = os.getenv("LOCAL_IMAGE_NAME")
 MAX_STEPS = 8  # leave 2 steps buffer before env hard-limit of 10
 SYSTEM_PROMPT = """You are an expert DevOps engineer debugging CI/CD pipelines.
     """Create OpenAI-compatible client for HuggingFace router."""
     return OpenAI(
         base_url=API_BASE_URL,
+        api_key=HF_TOKEN,
     )
     actual_task_id = info.get("task_id", task_id or "unknown")
     actual_scenario_id = info.get("scenario_id", scenario_id or "unknown")
+    # ── [START] structured log ──
+    print(f"[START] task_id={actual_task_id} scenario_id={actual_scenario_id}")
     messages = [{"role": "system", "content": SYSTEM_PROMPT}]
     trajectory = []
+    total_steps = 0
     for step_num in range(MAX_STEPS):
         user_msg = format_observation(obs)
             )
             llm_text = completion.choices[0].message.content or '{"action": "submit"}'
         except Exception as e:
+            print(f"[STEP] step={step_num + 1} action=error reward=0.00 done=false issues_fixed=0 issues_total=0 error={e}")
             llm_text = '{"action": "submit"}'
         messages.append({"role": "assistant", "content": llm_text})
         parsed = parse_llm_response(llm_text)
         action = build_action(parsed)
         step_resp = env_request("POST", "/step", {"action": action})
         obs = step_resp["observation"]
         reward = step_resp.get("reward", 0.0)
         done = step_resp.get("done", False)
         step_info = step_resp.get("info", {})
+        total_steps = step_num + 1
+        issues_fixed = step_info.get("issues_fixed", 0)
+        issues_total = step_info.get("issues_total", 0)
+        # ── [STEP] structured log ──
+        print(f"[STEP] step={total_steps} action={action['action_type']} reward={reward:.2f} done={str(done).lower()} issues_fixed={issues_fixed} issues_total={issues_total}")
         trajectory.append({
+            "step": total_steps,
             "action": action,
             "reward": reward,
             "done": done,
     })
     result = grade_resp.get("result", {})
     score = result.get("score", 0.0)
+    # ── [END] structured log ──
+    print(f"[END] task_id={actual_task_id} scenario_id={actual_scenario_id} score={score:.3f} steps={total_steps}")
     return result

server/main.py CHANGED Viewed

@@ -2,11 +2,14 @@
 from __future__ import annotations
 from typing import Optional
 import uvicorn
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
 from server.environment import CICDDebugEnvironment
 from server.graders import run_grader
@@ -27,8 +30,10 @@ from server.models import (
 )
 from server.tasks.task_registry import TASK_REGISTRY
 app = FastAPI(
-    title="CI/CD Debug Environment",
     description="OpenEnv-style environment for Docker + GitHub Actions debugging",
     version="1.0.0",
 )
@@ -41,12 +46,16 @@ app.add_middleware(
     allow_headers=["*"],
 )
 env: Optional[CICDDebugEnvironment] = None
-@app.get("/")
 async def root():
-    return {"status": "healthy", "environment": "cicd-docker-env"}
 @app.get("/health")

 from __future__ import annotations
+from pathlib import Path
 from typing import Optional
 import uvicorn
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
 from server.environment import CICDDebugEnvironment
 from server.graders import run_grader
 )
 from server.tasks.task_registry import TASK_REGISTRY
+STATIC_DIR = Path(__file__).resolve().parent / "static"
 app = FastAPI(
+    title="CI/CD + Docker Debug Environment",
     description="OpenEnv-style environment for Docker + GitHub Actions debugging",
     version="1.0.0",
 )
     allow_headers=["*"],
 )
+# Serve static assets (CSS, JS, images if needed later)
+app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
 env: Optional[CICDDebugEnvironment] = None
+@app.get("/", response_class=HTMLResponse)
 async def root():
+    html_path = STATIC_DIR / "index.html"
+    return HTMLResponse(content=html_path.read_text(encoding="utf-8"), status_code=200)
 @app.get("/health")

server/static/index.html ADDED Viewed

	@@ -0,0 +1,863 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CI/CD + Docker Debug Environment</title>
+    <meta name="description" content="OpenEnv environment where AI agents learn to debug broken GitHub Actions workflows and Dockerfiles.">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <style>
+        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+        :root {
+            --bg-primary: #0a0e1a;
+            --bg-secondary: #111827;
+            --bg-card: rgba(17, 24, 39, 0.6);
+            --border-card: rgba(99, 102, 241, 0.15);
+            --text-primary: #f1f5f9;
+            --text-secondary: #94a3b8;
+            --text-muted: #64748b;
+            --accent-indigo: #818cf8;
+            --accent-blue: #60a5fa;
+            --accent-cyan: #22d3ee;
+            --accent-emerald: #34d399;
+            --accent-amber: #fbbf24;
+            --accent-rose: #fb7185;
+            --accent-purple: #a78bfa;
+            --gradient-primary: linear-gradient(135deg, #818cf8, #60a5fa, #22d3ee);
+            --gradient-warm: linear-gradient(135deg, #f97316, #fb7185, #a78bfa);
+        }
+        html { scroll-behavior: smooth; }
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.7;
+            overflow-x: hidden;
+        }
+        /* ── Animated Background ── */
+        .bg-grid {
+            position: fixed;
+            inset: 0;
+            z-index: 0;
+            background-image:
+                radial-gradient(circle at 20% 30%, rgba(99,102,241,0.08) 0%, transparent 50%),
+                radial-gradient(circle at 80% 70%, rgba(34,211,238,0.06) 0%, transparent 50%),
+                radial-gradient(circle at 50% 50%, rgba(168,85,247,0.04) 0%, transparent 60%);
+            animation: bgPulse 12s ease-in-out infinite alternate;
+        }
+        .bg-grid::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background-image: linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px),
+                              linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px);
+            background-size: 60px 60px;
+        }
+        @keyframes bgPulse {
+            0% { opacity: 1; }
+            100% { opacity: 0.6; transform: scale(1.02); }
+        }
+        /* ── Main Container ── */
+        .container {
+            position: relative;
+            z-index: 1;
+            max-width: 1100px;
+            margin: 0 auto;
+            padding: 0 24px;
+        }
+        /* ── Hero Section ── */
+        .hero {
+            text-align: center;
+            padding: 80px 0 60px;
+        }
+        .hero-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 6px 16px;
+            border-radius: 100px;
+            background: rgba(99,102,241,0.1);
+            border: 1px solid rgba(99,102,241,0.25);
+            font-size: 0.8rem;
+            font-weight: 500;
+            color: var(--accent-indigo);
+            letter-spacing: 0.5px;
+            margin-bottom: 28px;
+            animation: fadeInDown 0.6s ease-out;
+        }
+        .hero-badge .dot {
+            width: 7px; height: 7px;
+            border-radius: 50%;
+            background: var(--accent-emerald);
+            animation: pulse 2s ease-in-out infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52,211,153,0.5); }
+            50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(52,211,153,0); }
+        }
+        @keyframes fadeInDown {
+            from { opacity: 0; transform: translateY(-16px); }
+            to   { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(20px); }
+            to   { opacity: 1; transform: translateY(0); }
+        }
+        .hero h1 {
+            font-size: clamp(2.2rem, 5vw, 3.4rem);
+            font-weight: 800;
+            line-height: 1.15;
+            letter-spacing: -1.5px;
+            margin-bottom: 20px;
+            animation: fadeInUp 0.7s ease-out 0.1s both;
+        }
+        .hero h1 .gradient-text {
+            background: var(--gradient-primary);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .hero p {
+            font-size: 1.15rem;
+            color: var(--text-secondary);
+            max-width: 650px;
+            margin: 0 auto 36px;
+            animation: fadeInUp 0.7s ease-out 0.2s both;
+        }
+        .hero-actions {
+            display: flex;
+            gap: 14px;
+            justify-content: center;
+            flex-wrap: wrap;
+            animation: fadeInUp 0.7s ease-out 0.3s both;
+        }
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 12px 26px;
+            border-radius: 12px;
+            font-family: inherit;
+            font-size: 0.9rem;
+            font-weight: 600;
+            text-decoration: none;
+            cursor: pointer;
+            border: none;
+            transition: all 0.25s ease;
+        }
+        .btn-primary {
+            background: var(--gradient-primary);
+            color: #0a0e1a;
+        }
+        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(99,102,241,0.3); }
+        .btn-secondary {
+            background: rgba(99,102,241,0.1);
+            border: 1px solid rgba(99,102,241,0.25);
+            color: var(--accent-indigo);
+        }
+        .btn-secondary:hover { background: rgba(99,102,241,0.18); transform: translateY(-2px); }
+        /* ── Stats Strip ── */
+        .stats {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 16px;
+            margin: 0 0 64px;
+            animation: fadeInUp 0.7s ease-out 0.4s both;
+        }
+        .stat-card {
+            text-align: center;
+            padding: 24px 16px;
+            border-radius: 16px;
+            background: var(--bg-card);
+            border: 1px solid var(--border-card);
+            backdrop-filter: blur(12px);
+            transition: border-color 0.3s;
+        }
+        .stat-card:hover { border-color: rgba(99,102,241,0.35); }
+        .stat-number {
+            font-size: 2rem;
+            font-weight: 800;
+            letter-spacing: -1px;
+            background: var(--gradient-primary);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .stat-label {
+            font-size: 0.82rem;
+            color: var(--text-muted);
+            margin-top: 4px;
+            font-weight: 500;
+        }
+        /* ── Section Headers ── */
+        .section { margin-bottom: 64px; }
+        .section-header {
+            margin-bottom: 28px;
+        }
+        .section-header h2 {
+            font-size: 1.6rem;
+            font-weight: 700;
+            letter-spacing: -0.5px;
+            margin-bottom: 8px;
+        }
+        .section-header p {
+            color: var(--text-secondary);
+            font-size: 0.95rem;
+        }
+        /* ── Task Cards ── */
+        .task-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+            gap: 18px;
+        }
+        .task-card {
+            padding: 24px;
+            border-radius: 16px;
+            background: var(--bg-card);
+            border: 1px solid var(--border-card);
+            backdrop-filter: blur(12px);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .task-card::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0;
+            height: 3px;
+            border-radius: 16px 16px 0 0;
+        }
+        .task-card:hover {
+            border-color: rgba(99,102,241,0.35);
+            transform: translateY(-4px);
+            box-shadow: 0 12px 40px rgba(0,0,0,0.3);
+        }
+        .task-card.easy::before    { background: linear-gradient(90deg, #34d399, #22d3ee); }
+        .task-card.medium::before  { background: linear-gradient(90deg, #fbbf24, #f97316); }
+        .task-card.hard::before    { background: linear-gradient(90deg, #fb7185, #a78bfa); }
+        .task-header {
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            margin-bottom: 12px;
+        }
+        .task-id {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.78rem;
+            color: var(--accent-indigo);
+            background: rgba(99,102,241,0.1);
+            padding: 3px 10px;
+            border-radius: 6px;
+        }
+        .difficulty-badge {
+            font-size: 0.72rem;
+            font-weight: 600;
+            padding: 3px 10px;
+            border-radius: 100px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .difficulty-badge.easy    { background: rgba(52,211,153,0.12); color: #34d399; }
+        .difficulty-badge.medium  { background: rgba(251,191,36,0.12); color: #fbbf24; }
+        .difficulty-badge.medium-hard { background: rgba(249,115,22,0.12); color: #f97316; }
+        .difficulty-badge.hard    { background: rgba(251,113,133,0.12); color: #fb7185; }
+        .task-card h3 {
+            font-size: 1.05rem;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+        .task-card p {
+            font-size: 0.88rem;
+            color: var(--text-secondary);
+            line-height: 1.6;
+        }
+        .task-scenarios {
+            margin-top: 14px;
+            font-size: 0.78rem;
+            color: var(--text-muted);
+            font-weight: 500;
+        }
+        /* ── Endpoint Table ── */
+        .endpoint-table {
+            width: 100%;
+            border-collapse: collapse;
+            border-radius: 16px;
+            overflow: hidden;
+            background: var(--bg-card);
+            border: 1px solid var(--border-card);
+            backdrop-filter: blur(12px);
+        }
+        .endpoint-table th {
+            text-align: left;
+            padding: 14px 20px;
+            font-size: 0.78rem;
+            font-weight: 600;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 0.8px;
+            border-bottom: 1px solid var(--border-card);
+            background: rgba(99,102,241,0.04);
+        }
+        .endpoint-table td {
+            padding: 13px 20px;
+            font-size: 0.88rem;
+            border-bottom: 1px solid rgba(99,102,241,0.06);
+            color: var(--text-secondary);
+        }
+        .endpoint-table tr:last-child td { border-bottom: none; }
+        .endpoint-table tr:hover td { background: rgba(99,102,241,0.03); }
+        .endpoint-path {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.84rem;
+            color: var(--accent-cyan);
+        }
+        .method-badge {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.72rem;
+            font-weight: 600;
+            padding: 3px 8px;
+            border-radius: 5px;
+            text-transform: uppercase;
+        }
+        .method-badge.get  { background: rgba(52,211,153,0.12); color: #34d399; }
+        .method-badge.post { background: rgba(96,165,250,0.12); color: #60a5fa; }
+        /* ── How It Works Flow ── */
+        .flow-steps {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 18px;
+        }
+        .flow-step {
+            padding: 28px 24px;
+            border-radius: 16px;
+            background: var(--bg-card);
+            border: 1px solid var(--border-card);
+            backdrop-filter: blur(12px);
+            text-align: center;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+        .flow-step:hover { border-color: rgba(99,102,241,0.3); transform: translateY(-3px); }
+        .flow-icon {
+            font-size: 2rem;
+            margin-bottom: 14px;
+            display: block;
+        }
+        .flow-step h3 {
+            font-size: 1rem;
+            font-weight: 700;
+            margin-bottom: 10px;
+        }
+        .flow-step p {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            line-height: 1.6;
+        }
+        .flow-arrow {
+            display: none;
+        }
+        /* ── Code Block ── */
+        .code-block {
+            background: rgba(0,0,0,0.4);
+            border: 1px solid var(--border-card);
+            border-radius: 14px;
+            padding: 22px 26px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.82rem;
+            line-height: 1.8;
+            color: var(--text-secondary);
+            overflow-x: auto;
+            position: relative;
+        }
+        .code-block .comment { color: var(--text-muted); }
+        .code-block .cmd { color: var(--accent-cyan); }
+        .code-block .flag { color: var(--accent-amber); }
+        .code-block .url { color: var(--accent-indigo); }
+        /* ── Grading Section ── */
+        .grading-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+            gap: 16px;
+        }
+        .grade-card {
+            padding: 22px;
+            border-radius: 14px;
+            background: var(--bg-card);
+            border: 1px solid var(--border-card);
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+        .grade-card:hover { border-color: rgba(99,102,241,0.3); }
+        .grade-weight {
+            font-size: 1.8rem;
+            font-weight: 800;
+            margin-bottom: 6px;
+        }
+        .grade-card:nth-child(1) .grade-weight { color: var(--accent-emerald); }
+        .grade-card:nth-child(2) .grade-weight { color: var(--accent-blue); }
+        .grade-card:nth-child(3) .grade-weight { color: var(--accent-amber); }
+        .grade-card:nth-child(4) .grade-weight { color: var(--accent-rose); }
+        .grade-card h4 { font-size: 0.9rem; margin-bottom: 6px; }
+        .grade-card p { font-size: 0.8rem; color: var(--text-muted); }
+        /* ── Baseline Scores ── */
+        .baseline-bar {
+            display: flex;
+            align-items: center;
+            gap: 14px;
+            padding: 14px 20px;
+            border-radius: 12px;
+            background: var(--bg-card);
+            border: 1px solid var(--border-card);
+            margin-bottom: 10px;
+            transition: all 0.3s;
+        }
+        .baseline-bar:hover { border-color: rgba(99,102,241,0.3); }
+        .baseline-bar .task-name {
+            flex: 0 0 260px;
+            font-size: 0.85rem;
+            font-family: 'JetBrains Mono', monospace;
+            color: var(--text-secondary);
+        }
+        .baseline-bar .bar-track {
+            flex: 1;
+            height: 8px;
+            border-radius: 8px;
+            background: rgba(99,102,241,0.08);
+            overflow: hidden;
+        }
+        .baseline-bar .bar-fill {
+            height: 100%;
+            border-radius: 8px;
+            background: var(--gradient-primary);
+            transition: width 1.5s ease-out;
+        }
+        .baseline-bar .score-value {
+            flex: 0 0 60px;
+            text-align: right;
+            font-weight: 700;
+            font-size: 0.9rem;
+            font-family: 'JetBrains Mono', monospace;
+        }
+        /* ── Footer ── */
+        .footer {
+            text-align: center;
+            padding: 48px 0 40px;
+            border-top: 1px solid var(--border-card);
+            margin-top: 40px;
+        }
+        .footer p {
+            font-size: 0.82rem;
+            color: var(--text-muted);
+        }
+        .footer a {
+            color: var(--accent-indigo);
+            text-decoration: none;
+        }
+        .footer a:hover { text-decoration: underline; }
+        /* ── Responsive ── */
+        @media (max-width: 768px) {
+            .stats { grid-template-columns: repeat(2, 1fr); }
+            .flow-steps { grid-template-columns: 1fr; }
+            .task-grid { grid-template-columns: 1fr; }
+            .grading-grid { grid-template-columns: repeat(2, 1fr); }
+            .baseline-bar .task-name { flex: 0 0 160px; font-size: 0.75rem; }
+            .endpoint-table { font-size: 0.8rem; }
+        }
+        @media (max-width: 480px) {
+            .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
+            .grading-grid { grid-template-columns: 1fr; }
+            .hero { padding: 50px 0 40px; }
+        }
+    </style>
+</head>
+<body>
+<div class="bg-grid"></div>
+<div class="container">
+    <!-- ═══ HERO ═══ -->
+    <section class="hero">
+        <div class="hero-badge">
+            <span class="dot"></span>
+            OpenEnv Environment &middot; Live
+        </div>
+        <h1>
+            <span class="gradient-text">CI/CD + Docker</span><br>
+            Debug Environment
+        </h1>
+        <p>
+            An OpenEnv-compatible environment where AI agents learn to debug broken
+            GitHub Actions workflows and Dockerfiles. Built for the OpenEnv Hackathon
+            by Scaler School of Technology.
+        </p>
+        <div class="hero-actions">
+            <a href="/info" class="btn btn-primary">
+                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
+                Explore API
+            </a>
+            <a href="https://github.com/melohub-xbit/GitHubActions-Docker-OpenEnv" target="_blank" class="btn btn-secondary">
+                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.39.6.11.82-.26.82-.58v-2.17c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.75.08-.73.08-.73 1.2.08 1.84 1.24 1.84 1.24 1.07 1.84 2.81 1.31 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.12-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6.02 0c2.28-1.55 3.28-1.23 3.28-1.23.66 1.66.25 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.82.58C20.56 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z"/></svg>
+                GitHub
+            </a>
+            <a href="/docs" class="btn btn-secondary">
+                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+                API Docs
+            </a>
+        </div>
+    </section>
+    <!-- ═══ STATS ═══ -->
+    <div class="stats">
+        <div class="stat-card">
+            <div class="stat-number">6</div>
+            <div class="stat-label">Task Categories</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-number">30</div>
+            <div class="stat-label">Unique Scenarios</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-number">12</div>
+            <div class="stat-label">API Endpoints</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-number">0.547</div>
+            <div class="stat-label">Baseline Score (Llama 70B)</div>
+        </div>
+    </div>
+    <!-- ═══ HOW IT WORKS ═══ -->
+    <section class="section">
+        <div class="section-header">
+            <h2>How It Works</h2>
+            <p>Three-phase loop: receive broken configs, fix them, get graded.</p>
+        </div>
+        <div class="flow-steps">
+            <div class="flow-step">
+                <span class="flow-icon">📥</span>
+                <h3>1. Reset</h3>
+                <p>Agent receives broken Dockerfile or GitHub Actions YAML, error messages, and available secrets.</p>
+            </div>
+            <div class="flow-step">
+                <span class="flow-icon">🔧</span>
+                <h3>2. Observe → Act</h3>
+                <p>Read errors, analyze files, edit content, replace lines, or request hints. Up to 10 steps per episode.</p>
+            </div>
+            <div class="flow-step">
+                <span class="flow-icon">📊</span>
+                <h3>3. Grade</h3>
+                <p>Deterministic scoring based on issues fixed, efficiency, and hint usage. Score range: 0.0 → 1.0.</p>
+            </div>
+        </div>
+    </section>
+    <!-- ═══ TASKS ═══ -->
+    <section class="section">
+        <div class="section-header">
+            <h2>The 6 Tasks</h2>
+            <p>30 scenarios across 6 categories with clear difficulty progression.</p>
+        </div>
+        <div class="task-grid">
+            <div class="task-card easy">
+                <div class="task-header">
+                    <span class="task-id">dockerfile_syntax</span>
+                    <span class="difficulty-badge easy">Easy</span>
+                </div>
+                <h3>Dockerfile Syntax Errors</h3>
+                <p>Simple typos and instruction errors that break <code>docker build</code> — misspelled filenames, invalid base images, broken line continuations.</p>
+                <div class="task-scenarios">5 scenarios</div>
+            </div>
+            <div class="task-card medium">
+                <div class="task-header">
+                    <span class="task-id">dockerfile_runtime</span>
+                    <span class="difficulty-badge medium">Medium</span>
+                </div>
+                <h3>Dockerfile Runtime Errors</h3>
+                <p>Dockerfile builds but the container crashes at runtime — missing WORKDIR, CMD/ENTRYPOINT conflicts, permission issues.</p>
+                <div class="task-scenarios">5 scenarios</div>
+            </div>
+            <div class="task-card easy">
+                <div class="task-header">
+                    <span class="task-id">workflow_syntax_structure</span>
+                    <span class="difficulty-badge easy">Easy</span>
+                </div>
+                <h3>Workflow Syntax &amp; Structure</h3>
+                <p>GitHub Actions YAML with structural problems — missing <code>runs-on</code>, invalid triggers, steps without actions.</p>
+                <div class="task-scenarios">5 scenarios</div>
+            </div>
+            <div class="task-card medium">
+                <div class="task-header">
+                    <span class="task-id">workflow_secrets_permissions</span>
+                    <span class="difficulty-badge medium">Medium</span>
+                </div>
+                <h3>Secrets &amp; Permissions</h3>
+                <p>Secrets exist but aren't wired correctly — missing <code>env:</code> blocks, wrong syntax, missing token permissions.</p>
+                <div class="task-scenarios">5 scenarios</div>
+            </div>
+            <div class="task-card medium">
+                <div class="task-header">
+                    <span class="task-id">ci_docker_integration</span>
+                    <span class="difficulty-badge medium-hard">Medium-Hard</span>
+                </div>
+                <h3>CI + Docker Integration</h3>
+                <p>Workflow and Dockerfile interact — fixing one alone isn't enough. Build context mismatches, missing login steps.</p>
+                <div class="task-scenarios">5 scenarios</div>
+            </div>
+            <div class="task-card hard">
+                <div class="task-header">
+                    <span class="task-id">multi_stage_pipeline_matrix</span>
+                    <span class="difficulty-badge hard">Hard</span>
+                </div>
+                <h3>Multi-Stage &amp; Matrix Pipelines</h3>
+                <p>Complex pipelines with 2-3 interacting bugs across multiple files. Artifact mismatches, matrix failures, cross-job dependencies.</p>
+                <div class="task-scenarios">5 scenarios</div>
+            </div>
+        </div>
+    </section>
+    <!-- ═══ GRADING ═══ -->
+    <section class="section">
+        <div class="section-header">
+            <h2>Grading System</h2>
+            <p>Deterministic and dynamic — same actions always produce the same score.</p>
+        </div>
+        <div class="grading-grid">
+            <div class="grade-card">
+                <div class="grade-weight">40%</div>
+                <h4>Partial Fixes</h4>
+                <p>Proportional to fraction of issues fixed</p>
+            </div>
+            <div class="grade-card">
+                <div class="grade-weight">30%</div>
+                <h4>Complete Bonus</h4>
+                <p>All-or-nothing bonus when every issue is fixed</p>
+            </div>
+            <div class="grade-card">
+                <div class="grade-weight">30%</div>
+                <h4>Efficiency</h4>
+                <p>Bonus for solving in minimal steps</p>
+            </div>
+            <div class="grade-card">
+                <div class="grade-weight">−5%</div>
+                <h4>Hint Penalty</h4>
+                <p>Per hint requested by the agent</p>
+            </div>
+        </div>
+    </section>
+    <!-- ═══ BASELINE RESULTS ═══ -->
+    <section class="section">
+        <div class="section-header">
+            <h2>Baseline Results</h2>
+            <p>Tested with <code style="color:var(--accent-cyan)">meta-llama/Llama-3.1-70B-Instruct</code> via HuggingFace router.</p>
+        </div>
+        <div class="baseline-bars">
+            <div class="baseline-bar">
+                <span class="task-name">dockerfile_syntax</span>
+                <div class="bar-track"><div class="bar-fill" data-width="100"></div></div>
+                <span class="score-value" style="color:var(--accent-emerald)">1.000</span>
+            </div>
+            <div class="baseline-bar">
+                <span class="task-name">dockerfile_runtime</span>
+                <div class="bar-track"><div class="bar-fill" data-width="100"></div></div>
+                <span class="score-value" style="color:var(--accent-emerald)">1.000</span>
+            </div>
+            <div class="baseline-bar">
+                <span class="task-name">workflow_syntax_structure</span>
+                <div class="bar-track"><div class="bar-fill" data-width="0"></div></div>
+                <span class="score-value" style="color:var(--accent-rose)">0.000</span>
+            </div>
+            <div class="baseline-bar">
+                <span class="task-name">workflow_secrets_permissions</span>
+                <div class="bar-track"><div class="bar-fill" data-width="100"></div></div>
+                <span class="score-value" style="color:var(--accent-emerald)">1.000</span>
+            </div>
+            <div class="baseline-bar">
+                <span class="task-name">ci_docker_integration</span>
+                <div class="bar-track"><div class="bar-fill" data-width="0"></div></div>
+                <span class="score-value" style="color:var(--accent-rose)">0.000</span>
+            </div>
+            <div class="baseline-bar">
+                <span class="task-name">multi_stage_pipeline_matrix</span>
+                <div class="bar-track"><div class="bar-fill" data-width="28"></div></div>
+                <span class="score-value" style="color:var(--accent-amber)">0.283</span>
+            </div>
+            <div class="baseline-bar" style="border-color: rgba(99,102,241,0.3);">
+                <span class="task-name" style="font-weight:700; color:var(--text-primary);">OVERALL</span>
+                <div class="bar-track"><div class="bar-fill" data-width="55"></div></div>
+                <span class="score-value" style="color:var(--accent-indigo); font-size:1rem;">0.547</span>
+            </div>
+        </div>
+    </section>
+    <!-- ═══ API ENDPOINTS ═══ -->
+    <section class="section">
+        <div class="section-header">
+            <h2>API Endpoints</h2>
+            <p>12 endpoints for environment control, grading, and introspection.</p>
+        </div>
+        <table class="endpoint-table">
+            <thead>
+                <tr>
+                    <th>Endpoint</th>
+                    <th>Method</th>
+                    <th>Description</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><span class="endpoint-path">/health</span></td>
+                    <td><span class="method-badge get">GET</span></td>
+                    <td>Health check — returns <code>{"status": "healthy"}</code></td>
+                </tr>
+                <tr>
+                    <td><span class="endpoint-path">/metadata</span></td>
+                    <td><span class="method-badge get">GET</span></td>
+                    <td>Environment name, description, version, tags</td>
+                </tr>
+                <tr>
+                    <td><span class="endpoint-path">/schema</span></td>
+                    <td><span class="method-badge get">GET</span></td>
+                    <td>Action, observation, and state JSON schemas</td>
+                </tr>
+                <tr>
+                    <td><span class="endpoint-path">/reset</span></td>
+                    <td><span class="method-badge post">POST</span></td>
+                    <td>Start a new episode (optional: task_id, scenario_id, seed)</td>
+                </tr>
+                <tr>
+                    <td><span class="endpoint-path">/step</span></td>
+                    <td><span class="method-badge post">POST</span></td>
+                    <td>Take an action and receive observation + reward</td>
+                </tr>
+                <tr>
+                    <td><span class="endpoint-path">/state</span></td>
+                    <td><span class="method-badge get">GET</span></td>
+                    <td>Get current observation without acting</td>
+                </tr>
+                <tr>
+                    <td><span class="endpoint-path">/info</span></td>
+                    <td><span class="method-badge get">GET</span></td>
+                    <td>Task list with metadata</td>
+                </tr>
+                <tr>
+                    <td><span class="endpoint-path">/tasks</span></td>
+                    <td><span class="method-badge get">GET</span></td>
+                    <td>All tasks with difficulty levels</td>
+                </tr>
+                <tr>
+                    <td><span class="endpoint-path">/grader</span></td>
+                    <td><span class="method-badge post">POST</span></td>
+                    <td>Grade a trajectory (list of step dicts)</td>
+                </tr>
+                <tr>
+                    <td><span class="endpoint-path">/baseline</span></td>
+                    <td><span class="method-badge post">POST</span></td>
+                    <td>Run built-in heuristic baseline</td>
+                </tr>
+                <tr>
+                    <td><span class="endpoint-path">/mcp</span></td>
+                    <td><span class="method-badge post">POST</span></td>
+                    <td>JSON-RPC 2.0 MCP endpoint</td>
+                </tr>
+                <tr>
+                    <td><span class="endpoint-path">/docs</span></td>
+                    <td><span class="method-badge get">GET</span></td>
+                    <td>Interactive Swagger API documentation</td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+    <!-- ═══ QUICK START ═══ -->
+    <section class="section">
+        <div class="section-header">
+            <h2>Quick Start</h2>
+            <p>Run a full episode in 3 commands.</p>
+        </div>
+        <div class="code-block">
+<span class="comment"># 1. Start an episode</span>
+<span class="cmd">curl</span> -X POST <span class="url">http://localhost:8000/reset</span> \
+  -H <span class="flag">"Content-Type: application/json"</span> \
+  -d '{"task_id": "dockerfile_syntax", "scenario_id": "typo_filename"}'
+<span class="comment"># 2. Fix the typo</span>
+<span class="cmd">curl</span> -X POST <span class="url">http://localhost:8000/step</span> \
+  -H <span class="flag">"Content-Type: application/json"</span> \
+  -d '{"action": {"action_type": "edit_file", "edits": [{"file_path": "Dockerfile", "old_content": "COPY requirments.txt .", "new_content": "COPY requirements.txt ."}]}}'
+<span class="comment"># 3. Submit</span>
+<span class="cmd">curl</span> -X POST <span class="url">http://localhost:8000/step</span> \
+  -H <span class="flag">"Content-Type: application/json"</span> \
+  -d '{"action": {"action_type": "submit"}}'
+        </div>
+    </section>
+    <!-- ═══ FOOTER ═══ -->
+    <footer class="footer">
+        <p>
+            Built for the <strong>OpenEnv Hackathon</strong> by
+            <a href="https://github.com/melohub-xbit/GitHubActions-Docker-OpenEnv" target="_blank">Scaler School of Technology</a>
+            &middot; Partners: Meta, HuggingFace, PyTorch
+        </p>
+        <p style="margin-top: 8px;">MIT License</p>
+    </footer>
+</div>
+<script>
+    // Animate baseline score bars on scroll
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.querySelectorAll('.bar-fill').forEach(bar => {
+                    bar.style.width = bar.dataset.width + '%';
+                });
+                observer.unobserve(entry.target);
+            }
+        });
+    }, { threshold: 0.3 });
+    const bars = document.querySelector('.baseline-bars');
+    if (bars) {
+        bars.querySelectorAll('.bar-fill').forEach(b => b.style.width = '0%');
+        observer.observe(bars);
+    }
+    // Staggered card entrance animation
+    const cards = document.querySelectorAll('.task-card, .grade-card, .flow-step');
+    const cardObserver = new IntersectionObserver((entries) => {
+        entries.forEach((entry, i) => {
+            if (entry.isIntersecting) {
+                entry.target.style.animation = `fadeInUp 0.5s ease-out ${i * 0.06}s both`;
+                cardObserver.unobserve(entry.target);
+            }
+        });
+    }, { threshold: 0.15 });
+    cards.forEach(c => cardObserver.observe(c));
+</script>
+</body>
+</html>

tests/test_endpoints.py CHANGED Viewed

@@ -7,12 +7,18 @@ from server.main import app
 client = TestClient(app)
-def test_root_health():
     response = client.get("/")
     assert response.status_code == 200
     data = response.json()
     assert data["status"] == "healthy"
-    assert data["environment"] == "cicd-docker-env"
 def test_info_returns_all_tasks():

 client = TestClient(app)
+def test_root_landing_page():
     response = client.get("/")
     assert response.status_code == 200
+    assert "text/html" in response.headers.get("content-type", "")
+    assert "CI/CD" in response.text
+def test_health_endpoint():
+    response = client.get("/health")
+    assert response.status_code == 200
     data = response.json()
     assert data["status"] == "healthy"
 def test_info_returns_all_tasks():