FIX: gitignore for Next.js, add lib/api.js and HTML reference

.gitignore

@@ -8,14 +8,14 @@ __pycache__/
 
 # Distribution / packaging
 .Python
-build/
+/build/
 develop-eggs/
 dist/
 downloads/
 eggs/
 .eggs/
-lib/
-lib64/
+/lib/
+/lib64/
 parts/
 sdist/
 var/
@@ -147,6 +147,10 @@ cython_debug/
 .DS_Store
 Thumbs.db
 
+# Next.js
+node_modules/
+.next/
+
 # Project-specific artifacts
 *.png
 temp_*

pr_review_dashboard.html

@@ -0,0 +1,287 @@
+
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:var(--font-sans)}
+.dash{display:grid;grid-template-columns:220px 1fr;min-height:600px;gap:0;border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);overflow:hidden;background:var(--color-background-primary)}
+.sidebar{background:var(--color-background-secondary);border-right:0.5px solid var(--color-border-tertiary);padding:16px;display:flex;flex-direction:column;gap:14px}
+.sidebar-label{font-size:11px;font-weight:500;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
+.sidebar select,.sidebar input{width:100%;font-size:13px;padding:7px 10px;background:var(--color-background-primary);border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);color:var(--color-text-primary)}
+.init-btn{width:100%;padding:9px;font-size:13px;font-weight:500;background:var(--color-background-primary);border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);color:var(--color-text-primary);cursor:pointer;transition:background .15s}
+.init-btn:hover{background:var(--color-background-tertiary)}
+.init-btn.active{background:#1a7f3c;color:#fff;border-color:#1a7f3c}
+.main{display:flex;flex-direction:column;gap:0;overflow:hidden}
+.topbar{padding:14px 18px;border-bottom:0.5px solid var(--color-border-tertiary);display:flex;align-items:center;justify-content:space-between}
+.pr-title{font-size:15px;font-weight:500;color:var(--color-text-primary)}
+.pr-sub{font-size:12px;color:var(--color-text-secondary);margin-top:2px}
+.badge{font-size:11px;font-weight:500;padding:4px 10px;border-radius:20px;letter-spacing:.02em}
+.badge.approve{background:#d4edda;color:#1a7f3c}
+.badge.request{background:#fde8e8;color:#c0392b}
+.badge.escalate{background:#fef3cd;color:#856404}
+.badge.running{background:var(--color-background-secondary);color:var(--color-text-secondary)}
+.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 18px;border-bottom:0.5px solid var(--color-border-tertiary)}
+.metric-card{background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:10px 14px}
+.metric-card .m-label{font-size:11px;color:var(--color-text-tertiary);margin-bottom:4px}
+.metric-card .m-val{font-size:22px;font-weight:500;color:var(--color-text-primary);line-height:1}
+.metric-card .m-sub{font-size:11px;color:var(--color-text-secondary);margin-top:3px}
+.progress-bar{height:4px;background:var(--color-border-tertiary);border-radius:2px;overflow:hidden;margin-top:6px}
+.progress-fill{height:100%;border-radius:2px;transition:width .5s ease;background:#1a7f3c}
+.tabs{display:flex;gap:0;padding:0 18px;border-bottom:0.5px solid var(--color-border-tertiary)}
+.tab{font-size:12px;font-weight:500;padding:9px 14px;cursor:pointer;color:var(--color-text-secondary);border-bottom:2px solid transparent;transition:color .15s}
+.tab.active{color:var(--color-text-primary);border-bottom-color:var(--color-text-primary)}
+.content{flex:1;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
+.diff-box{background:#0d1117;border-radius:var(--border-radius-md);overflow:hidden;border:0.5px solid #30363d}
+.diff-header{background:#161b22;padding:8px 14px;font-size:11px;color:#8b949e;font-family:var(--font-mono);border-bottom:0.5px solid #30363d;display:flex;justify-content:space-between}
+.diff-body{padding:4px 0;font-family:var(--font-mono);font-size:12px;line-height:1.7}
+.diff-line{padding:1px 14px;display:flex;gap:10px;color:#e6edf3}
+.diff-line .ln{color:#484f58;min-width:28px;text-align:right;user-select:none}
+.diff-line.add{background:rgba(46,160,67,.15);color:#aff5b4}
+.diff-line.add .ln{color:rgba(46,160,67,.5)}
+.diff-line.del{background:rgba(248,81,73,.15);color:#ffa198}
+.diff-line.del .ln{color:rgba(248,81,73,.5)}
+.diff-line.meta{color:#8b949e;background:#161b22}
+.chat-thread{display:flex;flex-direction:column;gap:12px}
+.chat-msg{display:flex;gap:10px;align-items:flex-start}
+.chat-msg.author{flex-direction:row-reverse}
+.avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0}
+.avatar.reviewer{background:#E6F1FB;color:#185FA5}
+.avatar.author{background:#EAF3DE;color:#3B6D11}
+.bubble{background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);padding:10px 14px;font-size:13px;color:var(--color-text-primary);max-width:80%;line-height:1.55}
+.bubble.reviewer{border-radius:4px var(--border-radius-lg) var(--border-radius-lg) var(--border-radius-lg)}
+.bubble.author{background:#F0F7FF;border-radius:var(--border-radius-lg) 4px var(--border-radius-lg) var(--border-radius-lg)}
+.chat-meta{font-size:10px;color:var(--color-text-tertiary);margin-top:3px}
+.log-box{background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);overflow:hidden}
+.log-toggle{padding:10px 14px;font-size:12px;cursor:pointer;color:var(--color-text-secondary);display:flex;justify-content:space-between;align-items:center;user-select:none}
+.log-toggle:hover{background:var(--color-background-tertiary)}
+.log-content{display:none;padding:12px 14px;font-family:var(--font-mono);font-size:11px;color:var(--color-text-secondary);border-top:0.5px solid var(--color-border-tertiary);line-height:1.8}
+.log-content.open{display:block}
+.reward-chart{padding:4px 0 8px}
+.chart-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}
+.chart-label{font-size:11px;color:var(--color-text-tertiary);min-width:40px;text-align:right}
+.chart-bar-wrap{flex:1;height:12px;background:var(--color-background-secondary);border-radius:2px;overflow:hidden}
+.chart-bar{height:100%;border-radius:2px;transition:width .6s ease}
+.chart-val{font-size:11px;color:var(--color-text-secondary);min-width:28px}
+.section-head{font-size:11px;font-weight:500;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.06em}
+.pulse{animation:pulse 1.8s ease-in-out infinite}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
+.thinking{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--color-text-secondary);padding:4px 0}
+.dot{width:6px;height:6px;border-radius:50%;background:var(--color-text-tertiary)}
+.dot:nth-child(1){animation:blink 1.2s .0s infinite}
+.dot:nth-child(2){animation:blink 1.2s .2s infinite}
+.dot:nth-child(3){animation:blink 1.2s .4s infinite}
+@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
+.sep{height:0.5px;background:var(--color-border-tertiary)}
+</style>
+
+<h2 class="sr-only">PR Review Command Center — interactive dashboard for AI code review negotiation</h2>
+
+<div class="dash" id="dash">
+  <div class="sidebar">
+    <div>
+      <div class="sidebar-label">Task difficulty</div>
+      <select id="task-sel">
+        <option>Easy — fix typo in docs</option>
+        <option selected>Medium — fix pagination offset</option>
+        <option>Hard — concurrency race condition</option>
+      </select>
+    </div>
+    <div>
+      <div class="sidebar-label">API base URL</div>
+      <input type="text" value="https://api.anthropic.com" />
+    </div>
+    <div>
+      <div class="sidebar-label">Model</div>
+      <input type="text" value="claude-sonnet-4-20250514" />
+    </div>
+    <div class="sep"></div>
+    <button class="init-btn" id="init-btn" onclick="initEnv()">Initialize environment</button>
+    <div style="margin-top:auto">
+      <div class="sidebar-label" style="margin-bottom:8px">Reward history</div>
+      <div class="reward-chart" id="reward-chart">
+        <div class="chart-row"><span class="chart-label">T1</span><div class="chart-bar-wrap"><div class="chart-bar" style="width:35%;background:#e24b4a"></div></div><span class="chart-val">0.35</span></div>
+        <div class="chart-row"><span class="chart-label">T2</span><div class="chart-bar-wrap"><div class="chart-bar" style="width:62%;background:#ef9f27"></div></div><span class="chart-val">0.62</span></div>
+        <div class="chart-row"><span class="chart-label">T3</span><div class="chart-bar-wrap"><div class="chart-bar" style="width:88%;background:#1a7f3c"></div></div><span class="chart-val">0.88</span></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="main">
+    <div class="topbar">
+      <div>
+        <div class="pr-title" id="pr-title">Fix pagination offset logic in user listings API</div>
+        <div class="pr-sub">#4821 · feat/pagination-fix · opened 2h ago by env-author</div>
+      </div>
+      <span class="badge request" id="status-badge">REQUEST_CHANGES</span>
+    </div>
+
+    <div class="metrics">
+      <div class="metric-card">
+        <div class="m-label">Cumulative reward</div>
+        <div class="m-val" id="score-val">0.62</div>
+        <div class="progress-bar"><div class="progress-fill" id="score-bar" style="width:62%"></div></div>
+      </div>
+      <div class="metric-card">
+        <div class="m-label">Turn</div>
+        <div class="m-val" id="turn-val">2 <span style="font-size:14px;color:var(--color-text-tertiary)">/ 3</span></div>
+        <div class="m-sub" id="turn-sub">Reviewer processing…</div>
+      </div>
+      <div class="metric-card">
+        <div class="m-label">Episode status</div>
+        <div class="m-val" style="font-size:14px;font-weight:500;padding-top:4px" id="ep-status">Running</div>
+        <div class="m-sub" id="ep-sub">AI turn active</div>
+      </div>
+    </div>
+
+    <div class="tabs">
+      <div class="tab active" onclick="showTab('diff',this)">Diff view</div>
+      <div class="tab" onclick="showTab('timeline',this)">Negotiation timeline</div>
+      <div class="tab" onclick="showTab('manual',this)">Manual override</div>
+    </div>
+
+    <div class="content">
+      <div id="tab-diff">
+        <div class="diff-box">
+          <div class="diff-header">
+            <span>src/api/users.py</span>
+            <span>+8 −4 lines</span>
+          </div>
+          <div class="diff-body" id="diff-body">
+            <div class="diff-line meta"><span class="ln">···</span><span>@@ -42,12 +42,16 @@ def get_users(page, limit):</span></div>
+            <div class="diff-line"><span class="ln">42</span><span>    query = db.session.query(User)</span></div>
+            <div class="diff-line del"><span class="ln">43</span><span>-   offset = page * limit</span></div>
+            <div class="diff-line add"><span class="ln">43</span><span>+   offset = (page - 1) * limit</span></div>
+            <div class="diff-line"><span class="ln">44</span><span>    results = query.offset(offset).limit(limit).all()</span></div>
+            <div class="diff-line del"><span class="ln">45</span><span>-   return results</span></div>
+            <div class="diff-line add"><span class="ln">45</span><span>+   if not results and page > 1:</span></div>
+            <div class="diff-line add"><span class="ln">46</span><span>+       raise PageOutOfRangeError(page)</span></div>
+            <div class="diff-line add"><span class="ln">47</span><span>+   return paginate_response(results, page, limit)</span></div>
+            <div class="diff-line"><span class="ln">48</span><span>    </span></div>
+            <div class="diff-line del"><span class="ln">49</span><span>-   # TODO: add error handling</span></div>
+            <div class="diff-line add"><span class="ln">49</span><span>+   # Handled via PageOutOfRangeError + paginate_response</span></div>
+          </div>
+        </div>
+      </div>
+
+      <div id="tab-timeline" style="display:none">
+        <div class="chat-thread">
+          <div class="chat-msg">
+            <div class="avatar reviewer">AI</div>
+            <div>
+              <div class="bubble reviewer">The offset calculation on line 43 is incorrect. For 1-indexed pagination, <code style="background:var(--color-background-tertiary);padding:1px 4px;border-radius:3px;font-size:11px">offset = page * limit</code> would skip the first page entirely. Should be <code style="background:var(--color-background-tertiary);padding:1px 4px;border-radius:3px;font-size:11px">(page - 1) * limit</code>.</div>
+              <div class="chat-meta">Reviewer · Turn 1</div>
+            </div>
+          </div>
+          <div class="chat-msg author">
+            <div class="avatar author">Env</div>
+            <div>
+              <div class="bubble author">Fixed the offset bug. Also added a <code style="background:rgba(255,255,255,.3);padding:1px 4px;border-radius:3px;font-size:11px">PageOutOfRangeError</code> guard and wrapped the return in <code style="background:rgba(255,255,255,.3);padding:1px 4px;border-radius:3px;font-size:11px">paginate_response()</code> for consistency. Take another look!</div>
+              <div class="chat-meta" style="text-align:right">Author · Turn 1 response</div>
+            </div>
+          </div>
+          <div class="chat-msg">
+            <div class="avatar reviewer">AI</div>
+            <div>
+              <div class="bubble reviewer">Good fixes. However, <code style="background:var(--color-background-tertiary);padding:1px 4px;border-radius:3px;font-size:11px">paginate_response()</code> is not defined in scope — is it imported? Missing import will cause a runtime error.</div>
+              <div class="chat-meta">Reviewer · Turn 2</div>
+            </div>
+          </div>
+          <div class="chat-msg">
+            <div class="avatar reviewer pulse">AI</div>
+            <div>
+              <div class="thinking"><div class="dot"></div><div class="dot"></div><div class="dot"></div><span style="margin-left:2px">Reviewer is thinking…</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="tab-manual" style="display:none">
+        <div style="font-size:13px;color:var(--color-text-secondary);margin-bottom:12px">Act as the reviewer. Submit feedback to see how the environment responds.</div>
+        <textarea id="manual-input" style="width:100%;min-height:80px;font-size:13px;padding:10px;background:var(--color-background-secondary);border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);color:var(--color-text-primary);resize:vertical;font-family:var(--font-sans)" placeholder="e.g. I found a potential null pointer issue in line 47…"></textarea>
+        <div style="display:flex;gap:8px;margin-top:8px">
+          <button class="init-btn" onclick="sendManual('REQUEST_CHANGES')">Request changes</button>
+          <button class="init-btn active" onclick="sendManual('APPROVE')">Approve</button>
+          <button class="init-btn" style="border-color:#856404;color:#856404" onclick="sendManual('ESCALATE')">Escalate</button>
+        </div>
+        <div id="manual-response" style="margin-top:14px;display:none">
+          <div class="section-head" style="margin-bottom:8px">Environment response</div>
+          <div class="bubble reviewer" id="manual-resp-text" style="max-width:100%"></div>
+        </div>
+      </div>
+
+      <div class="log-box">
+        <div class="log-toggle" onclick="toggleLog(this)">
+          <span>Behind the scenes — raw logs</span>
+          <span id="log-arrow">▶</span>
+        </div>
+        <div class="log-content" id="log-content">
+[START] episode_id=ep_4821 task=medium seed=42
+[ENV]   observation: diff loaded, 8 hunks
+[STEP]  turn=1 action=REQUEST_CHANGES reward=0.35
+[AI]    tokens_used=312 latency_ms=840
+[STEP]  turn=2 action=REQUEST_CHANGES reward=0.62
+[AI]    tokens_used=289 latency_ms=760
+[STATE] {"page":2,"max_turns":3,"cumulative_reward":0.62,"done":false}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function showTab(name, el) {
+  ['diff','timeline','manual'].forEach(t => {
+    document.getElementById('tab-'+t).style.display = t===name?'':'none';
+  });
+  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+  el.classList.add('active');
+}
+function toggleLog(el) {
+  const c = document.getElementById('log-content');
+  const a = document.getElementById('log-arrow');
+  const open = c.classList.toggle('open');
+  a.textContent = open ? '▼' : '▶';
+}
+function initEnv() {
+  const btn = document.getElementById('init-btn');
+  const tasks = ['Easy — fix typo in docs','Medium — fix pagination offset','Hard — concurrency race condition'];
+  const sel = document.getElementById('task-sel').value;
+  const titles = {
+    'Easy': 'Fix spelling in README introduction',
+    'Medium': 'Fix pagination offset logic in user listings API',
+    'Hard': 'Resolve race condition in concurrent write handler'
+  };
+  const key = sel.startsWith('Easy')?'Easy':sel.startsWith('Medium')?'Medium':'Hard';
+  document.getElementById('pr-title').textContent = titles[key];
+  document.getElementById('score-val').textContent = '0.00';
+  document.getElementById('score-bar').style.width = '0%';
+  document.getElementById('turn-val').innerHTML = '1 <span style="font-size:14px;color:var(--color-text-tertiary)">/ 3</span>';
+  document.getElementById('turn-sub').textContent = 'Starting…';
+  document.getElementById('ep-status').textContent = 'Initializing';
+  document.getElementById('ep-sub').textContent = 'Episode reset';
+  document.getElementById('status-badge').className = 'badge running';
+  document.getElementById('status-badge').textContent = 'RUNNING';
+  btn.textContent = 'Initializing…';
+  btn.classList.add('active');
+  setTimeout(() => {
+    btn.textContent = 'Environment ready';
+    document.getElementById('ep-status').textContent = 'Running';
+    document.getElementById('ep-sub').textContent = 'AI turn active';
+    document.getElementById('turn-sub').textContent = 'Reviewer processing…';
+  }, 1200);
+}
+const envResponses = {
+  REQUEST_CHANGES: "Acknowledged. I've addressed the points raised — updated the import for paginate_response and added a unit test. Please take another look.",
+  APPROVE: "Thanks for the approval! Merging into main. All checks passed.",
+  ESCALATE: "Understood, escalating to the senior reviewer. I'll add more context to the PR description."
+};
+function sendManual(decision) {
+  const input = document.getElementById('manual-input').value.trim();
+  const badges = {REQUEST_CHANGES:'request',APPROVE:'approve',ESCALATE:'escalate'};
+  document.getElementById('status-badge').className = 'badge ' + badges[decision];
+  document.getElementById('status-badge').textContent = decision;
+  const resp = document.getElementById('manual-response');
+  const txt = document.getElementById('manual-resp-text');
+  resp.style.display = 'block';
+  txt.textContent = '…';
+  setTimeout(() => { txt.textContent = envResponses[decision]; }, 700);
+}
+</script>

pr_review_dashboard/lib/api.js

@@ -0,0 +1,41 @@
+const BASE = "/api/env";
+
+export async function resetEnv(taskName) {
+  const res = await fetch(`${BASE}/reset`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ task_name: taskName }),
+  });
+  if (!res.ok) throw new Error(`Reset failed: ${res.status}`);
+  return res.json();
+}
+
+export async function stepEnv(action) {
+  const res = await fetch(`${BASE}/step`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ action }),
+  });
+  if (!res.ok) throw new Error(`Step failed: ${res.status}`);
+  return res.json();
+}
+
+export async function configCustom({ diff, pr_title, pr_description }) {
+  const res = await fetch(`${BASE}/config/custom`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ diff, pr_title, pr_description }),
+  });
+  if (!res.ok) throw new Error(`Config failed: ${res.status}`);
+  return res.json();
+}
+
+export async function callAgent({ observation, modelId, apiUrl, apiKey }) {
+  const res = await fetch("/api/agent", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ observation, modelId, apiUrl, apiKey }),
+  });
+  if (!res.ok) throw new Error(`Agent failed: ${res.status}`);
+  return res.json();
+}