File size: 5,535 Bytes
ea373a2
b92d20c
 
 
 
 
ea373a2
b92d20c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ea373a2
 
 
 
 
 
 
 
b92d20c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ea373a2
b92d20c
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodeReview-Env</title>
  <link rel="stylesheet" href="static/style.css">
</head>
<body>
  <header class="hero">
    <div class="hero__eyebrow">Meta x PyTorch x Hugging Face Hackathon</div>
    <div class="hero__row">
      <div>
        <h1>CodeReview-Env</h1>
        <p class="hero__copy">A live benchmark for reviewing realistic pull requests across easy, medium, and hard software engineering tasks.</p>
      </div>
      <div class="status-card">
        <div class="status-card__label">Environment</div>
        <div class="status-card__value"><span id="status-dot" class="status-dot"></span><span id="status-text">Checking</span></div>
      </div>
    </div>
  </header>

  <main class="layout">
    <section class="panel panel--diff">
      <div class="panel__header">
        <div>
          <div class="panel__kicker">Episode</div>
          <h2 id="task-title">Loading task...</h2>
        </div>
        <div style="display: flex; gap: 8px;">
          <select id="task-selector" class="btn btn--secondary" style="font-size: 13px;">
            <option value="pagination-regression">Easy: Pagination Bug</option>
            <option value="tenant-export-auth">Medium: Security Audit</option>
            <option value="refund-idempotency">Hard: Async Race</option>
          </select>
          <button id="btn-load-new" class="btn btn--secondary">Load Task</button>
        </div>
      </div>
      <div class="meta-row">
        <span class="pill" id="task-id">task-id</span>
        <span class="pill" id="task-difficulty">difficulty</span>
        <span class="pill" id="task-step-limit">0 steps</span>
      </div>
      <p class="summary" id="task-summary">Preparing environment...</p>
      <div class="artifact-list" id="artifact-list"></div>
      <div class="diff-box">
        <pre id="artifact-content">Select or open an artifact to inspect the code or evidence.</pre>
      </div>
    </section>

    <section class="panel panel--review">
      <div class="panel__header">
        <div>
          <div class="panel__kicker">Review</div>
          <h2>Submit Findings</h2>
        </div>
      </div>
      <label class="field">
        <span>Title</span>
        <input id="finding-title" type="text" placeholder="Missing tenant scope on export route">
      </label>
      <div class="field-grid">
        <label class="field">
          <span>File Path</span>
          <input id="finding-file" type="text" placeholder="api/admin_exports.py">
        </label>
        <label class="field">
          <span>Severity</span>
          <select id="finding-severity">
            <option value="low">low</option>
            <option value="medium" selected>medium</option>
            <option value="high">high</option>
            <option value="critical">critical</option>
          </select>
        </label>
      </div>
      <label class="field">
        <span>Line Hint</span>
        <input id="finding-line" type="text" placeholder="export_invoices">
      </label>
      <label class="field">
        <span>Rationale</span>
        <textarea id="finding-rationale" rows="7" placeholder="Explain the production impact and why this is a real bug."></textarea>
      </label>
      <label class="field">
        <span>Recommendation</span>
        <textarea id="finding-recommendation" rows="5" placeholder="Give a concrete fix the author can apply."></textarea>
      </label>
      <div class="button-row">
        <button class="btn btn--ghost" data-preset="pagination">Easy Preset</button>
        <button class="btn btn--ghost" data-preset="auth">Medium Preset</button>
        <button class="btn btn--ghost" data-preset="refund">Hard Preset</button>
      </div>
      <button id="btn-submit" class="btn btn--primary">Submit Review</button>
    </section>

    <section class="panel panel--results">
      <div class="panel__header">
        <div>
          <div class="panel__kicker">Results</div>
          <h2>Reward Breakdown</h2>
        </div>
      </div>
      <div class="score-card">
        <div class="score-card__label">Reward</div>
        <div id="reward-value" class="score-card__value">0.00</div>
      </div>
      <div class="score-grid">
        <div class="metric">
          <span>Score</span>
          <strong id="score-value">0.00</strong>
        </div>
        <div class="metric">
          <span>Steps</span>
          <strong id="steps-value">0</strong>
        </div>
        <div class="metric">
          <span>Status</span>
          <strong id="done-value">Active</strong>
        </div>
      </div>
      <div>
        <h3>Recent Events</h3>
        <ul id="events-list" class="simple-list"></ul>
      </div>
      <div>
        <h3>Matched Criteria</h3>
        <ul id="criteria-list" class="simple-list"></ul>
      </div>
      <div>
        <h3>Reward Components</h3>
        <ul id="components-list" class="simple-list"></ul>
      </div>
      <div>
        <h3>API Shortcuts</h3>
        <div class="shortcut-links">
          <a href="/docs" target="_blank" rel="noreferrer">Docs</a>
          <a href="/health" target="_blank" rel="noreferrer">Health</a>
          <a href="/tasks" target="_blank" rel="noreferrer">Tasks</a>
          <a href="/demo" target="_blank" rel="noreferrer">Demo</a>
        </div>
      </div>
    </section>
  </main>

  <script src="static/app.js"></script>
</body>
</html>