Spaces:

jester1177
/

cloudnative-devops-debug-env

Sleeping

File size: 28,454 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cloud-Native DevOps Debug Environment</title>
    <meta name="description" content="Train AI agents to debug broken GitHub Actions workflows, Dockerfiles, and Kubernetes manifests. 10 tasks, 50 scenarios, difficulty-aware grading.">
    <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;
        }

        .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); } }

        .container { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 24px; }

        /* Hero */
        .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: 680px; 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 */
        .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 */
        .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-card.expert::before { background: linear-gradient(90deg, #a78bfa, #818cf8, #fb7185); }

        .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; }
        .difficulty-badge.expert { background: rgba(167,139,250,0.15); color: #a78bfa; }

        .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; }

        /* Flow Steps */
        .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; 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; }

        /* Grading */
        .grading-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 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-purple); }
        .grade-card:nth-child(5) .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); }

        /* 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; }

        /* 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; }
        .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); }

        /* 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; }

        @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); }
        }
        @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">

    <section class="hero">
        <div class="hero-badge">
            <span class="dot"></span>
            OpenEnv Environment &middot; Live
        </div>
        <h1>
            <span class="gradient-text">Cloud-Native DevOps</span><br>
            Debug Environment
        </h1>
        <p>
            Broken Dockerfiles. Misconfigured workflows. K8s pods stuck in CrashLoopBackOff.
            This environment throws real-world deployment failures at AI agents and
            measures how well they can track down the root cause and fix it.
        </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">10</div>
            <div class="stat-label">Task Categories</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">50</div>
            <div class="stat-label">Unique Scenarios</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">3</div>
            <div class="stat-label">Simulators (Docker, GHA, K8s)</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">12</div>
            <div class="stat-label">API Endpoints</div>
        </div>
    </div>

    <!-- How It Works -->
    <section class="section">
        <div class="section-header">
            <h2>How It Works</h2>
            <p>Same loop every DevOps engineer runs through, just faster.</p>
        </div>
        <div class="flow-steps">
            <div class="flow-step">
                <span class="flow-icon">&#x1F4E5;</span>
                <h3>1. Reset</h3>
                <p>Agent gets broken config files &mdash; a Dockerfile, a workflow YAML, some K8s manifests &mdash; along with whatever error the pipeline spit out.</p>
            </div>
            <div class="flow-step">
                <span class="flow-icon">&#x1F527;</span>
                <h3>2. Observe &rarr; Act</h3>
                <p>Read the error, find the bug, edit the file. Could be a typo, a wrong port, a missing secret. Up to 10 steps to get it right.</p>
            </div>
            <div class="flow-step">
                <span class="flow-icon">&#x1F4CA;</span>
                <h3>3. Grade</h3>
                <p>Deterministic scoring: how many issues got fixed, how quickly, and whether hints were needed. Harder tasks are graded more generously.</p>
            </div>
        </div>
    </section>

    <!-- Tasks -->
    <section class="section">
        <div class="section-header">
            <h2>10 Tasks, 50 Scenarios</h2>
            <p>From single-typo Dockerfile fixes to multi-bug pipeline debugging across GHA + Docker + K8s.</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>The classic stuff &mdash; misspelled filenames, bad base image tags, broken <code>RUN</code> continuations. Things that make <code>docker build</code> fail immediately.</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>It builds fine, then crashes at runtime. Missing WORKDIR, CMD/ENTRYPOINT conflicts, permission issues, missing env vars.</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 that GitHub refuses to even parse. Missing <code>runs-on</code>, wrong trigger format, 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>The secret is right there in the repo settings, but the workflow can't see it. Missing <code>env:</code> blocks, wrong <code>${{ }}</code> syntax, token permission gaps.</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>The workflow and Dockerfile depend on each other. Build context mismatches, missing buildx setup, login without secrets.</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>Multi-stage builds, matrix strategies, cross-job artifacts. Two or three bugs that only make sense when you look at the files together.</p>
                <div class="task-scenarios">5 scenarios</div>
            </div>
            <div class="task-card medium">
                <div class="task-header">
                    <span class="task-id">k8s_pod_failures</span>
                    <span class="difficulty-badge medium">Medium</span>
                </div>
                <h3>Kubernetes Pod Failures</h3>
                <p>Pods stuck in CrashLoopBackOff or ImagePullBackOff. OOM kills, wrong commands, missing ConfigMaps, misconfigured probes.</p>
                <div class="task-scenarios">5 scenarios</div>
            </div>
            <div class="task-card hard">
                <div class="task-header">
                    <span class="task-id">k8s_networking</span>
                    <span class="difficulty-badge hard">Hard</span>
                </div>
                <h3>K8s Service &amp; Ingress Issues</h3>
                <p>Pods are running, but nobody can reach them. Selector mismatches, wrong targetPorts, NetworkPolicies blocking traffic, missing ingress classes.</p>
                <div class="task-scenarios">5 scenarios</div>
            </div>
            <div class="task-card hard">
                <div class="task-header">
                    <span class="task-id">pipeline_build_deploy</span>
                    <span class="difficulty-badge hard">Hard</span>
                </div>
                <h3>Build &amp; Push Pipeline</h3>
                <p>End-to-end GHA-to-Docker-to-Registry failures. GHCR tokens not wired, image tag mismatches between build and push, missing permissions.</p>
                <div class="task-scenarios">5 scenarios</div>
            </div>
            <div class="task-card expert">
                <div class="task-header">
                    <span class="task-id">pipeline_full_stack</span>
                    <span class="difficulty-badge expert">Expert</span>
                </div>
                <h3>Full Stack Pipeline</h3>
                <p>The real deal &mdash; 2 to 4 bugs scattered across a GHA workflow, Dockerfile, and K8s manifests at the same time. Requires cross-file reasoning.</p>
                <div class="task-scenarios">5 scenarios &middot; multi-error</div>
            </div>
        </div>
    </section>

    <!-- Grading -->
    <section class="section">
        <div class="section-header">
            <h2>Grading</h2>
            <p>Deterministic, difficulty-aware scoring. Same actions, same score. Harder tasks get more room to breathe.</p>
        </div>
        <div class="grading-grid">
            <div class="grade-card">
                <div class="grade-weight">35%</div>
                <h4>Partial Fixes</h4>
                <p>Credit for each issue you fix, even if you don't get them all</p>
            </div>
            <div class="grade-card">
                <div class="grade-weight">25%</div>
                <h4>Complete Bonus</h4>
                <p>Extra credit when every single issue is resolved</p>
            </div>
            <div class="grade-card">
                <div class="grade-weight">25%</div>
                <h4>Efficiency</h4>
                <p>Fewer steps is better &mdash; decay is gentler on hard tasks</p>
            </div>
            <div class="grade-card">
                <div class="grade-weight">+3%</div>
                <h4>Difficulty Bonus</h4>
                <p>Solving hard/expert tasks perfectly earns extra points</p>
            </div>
            <div class="grade-card">
                <div class="grade-weight">&minus;3-4%</div>
                <h4>Hint Penalty</h4>
                <p>Per hint used &mdash; cheaper on harder tasks where hints are fair</p>
            </div>
        </div>
    </section>

    <!-- API Endpoints -->
    <section class="section">
        <div class="section-header">
            <h2>API Endpoints</h2>
            <p>Everything you need to run episodes, grade trajectories, and inspect the environment.</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>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, version, tags</td></tr>
                <tr><td><span class="endpoint-path">/tasks</span></td><td><span class="method-badge get">GET</span></td><td>All 10 tasks with difficulty levels</td></tr>
                <tr><td><span class="endpoint-path">/info</span></td><td><span class="method-badge get">GET</span></td><td>Full task list with 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 (pick a task or get a random one)</td></tr>
                <tr><td><span class="endpoint-path">/step</span></td><td><span class="method-badge post">POST</span></td><td>Take an action, get back observation + reward</td></tr>
                <tr><td><span class="endpoint-path">/state</span></td><td><span class="method-badge get">GET</span></td><td>Current observation without acting</td></tr>
                <tr><td><span class="endpoint-path">/grader</span></td><td><span class="method-badge post">POST</span></td><td>Score a trajectory after the episode</td></tr>
                <tr><td><span class="endpoint-path">/baseline</span></td><td><span class="method-badge post">POST</span></td><td>Run the built-in heuristic baseline</td></tr>
                <tr><td><span class="endpoint-path">/schema</span></td><td><span class="method-badge get">GET</span></td><td>Action and observation JSON schemas</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 docs</td></tr>
            </tbody>
        </table>
    </section>

    <!-- Quick Start -->
    <section class="section">
        <div class="section-header">
            <h2>Try It</h2>
            <p>Fix a K8s OOMKilled pod in 3 commands.</p>
        </div>
        <div class="code-block">
<span class="comment"># 1. Get a broken K8s deployment with OOMKilled pods</span>
<span class="cmd">curl</span> -X POST <span class="url">http://localhost:7860/reset</span> \
  -H <span class="flag">"Content-Type: application/json"</span> \
  -d '{"task_id": "k8s_pod_failures", "scenario_id": "oom_killed"}'

<span class="comment"># 2. Bump the memory limit from 64Mi to 256Mi</span>
<span class="cmd">curl</span> -X POST <span class="url">http://localhost:7860/step</span> \
  -H <span class="flag">"Content-Type: application/json"</span> \
  -d '{"action": {"action_type": "edit_file", "edits": [{"file_path": "k8s/deployment.yaml", "old_content": "memory: \"64Mi\"", "new_content": "memory: \"256Mi\""}]}}'

<span class="comment"># 3. Done - issues_fixed: 1/1, reward: 0.3</span>
        </div>
    </section>

    <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>
    const cards = document.querySelectorAll('.task-card, .grade-card, .flow-step');
    const obs = new IntersectionObserver((entries) => {
        entries.forEach((entry, i) => {
            if (entry.isIntersecting) {
                entry.target.style.animation = `fadeInUp 0.5s ease-out ${i * 0.06}s both`;
                obs.unobserve(entry.target);
            }
        });
    }, { threshold: 0.15 });
    cards.forEach(c => obs.observe(c));
</script>

</body>
</html>