mirror of
https://github.com/Sea-Haven-Industries/pr-reviewer.git
synced 2026-09-30 03:23:14 +00:00
Adam Moussa
89494c1710
Feed the reviewer a distilled digest of the Sea Haven engineering-handbook so findings reflect our naming, commit, PR, secrets, and IaC conventions instead of generic code-review judgment. A new handbook module keeps an app-managed shallow clone of the (private) handbook, distills the review-relevant pages into a compact conventions checklist via the Fireworks model once a day, caches it under ~/.cache, and hands it to the reviewer to inject into every review's system prompt. The refresh runs in-process at the start of each worker cycle; failures keep the last good digest and back off, so a handbook outage never blocks reviews. Set HANDBOOK_ENABLED=false to disable. Extract a shared fireworks_complete helper used by both the reviewer and the distiller, so the handbook provider needs no reviewer reference and the guidance callable is set once at construction. Clone auth uses a Basic http.extraHeader (GitHub git-over-HTTPS rejects Bearer), and the distiller wraps its answer in delimiters to strip a reasoning model's chain-of-thought preamble. Adds GET /api/handbook and a header status line. Stdlib-only, no new dependencies.
356 lines
15 KiB
HTML
356 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>PR Review Desk</title>
|
|
<style>
|
|
:root {
|
|
--bg: #12141a;
|
|
--panel: #191c24;
|
|
--panel-2: #1f2330;
|
|
--line: #2a2f3d;
|
|
--ink: #e7e9ef;
|
|
--ink-dim: #9aa2b4;
|
|
--accent: #6ea8fe;
|
|
--block: #ff6b6b;
|
|
--fix: #f7b955;
|
|
--nit: #7bd88f;
|
|
--question: #b39 dff;
|
|
--question: #b39dff;
|
|
--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
|
|
--sans: "Inter", system-ui, -apple-system, sans-serif;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0; background: var(--bg); color: var(--ink);
|
|
font-family: var(--sans); font-size: 14px; line-height: 1.5;
|
|
}
|
|
header {
|
|
display: flex; align-items: baseline; gap: 16px;
|
|
padding: 14px 20px; border-bottom: 1px solid var(--line);
|
|
background: var(--panel);
|
|
}
|
|
header h1 { font-size: 15px; margin: 0; letter-spacing: .02em; font-weight: 600; }
|
|
header .meta { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
|
|
header .spacer { flex: 1; }
|
|
button {
|
|
font-family: var(--sans); font-size: 13px; cursor: pointer;
|
|
background: var(--panel-2); color: var(--ink);
|
|
border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px;
|
|
}
|
|
button:hover { border-color: var(--accent); }
|
|
button:disabled { opacity: .5; cursor: not-allowed; }
|
|
button.primary { background: var(--accent); color: #0b0e14; border-color: var(--accent); font-weight: 600; }
|
|
button.danger { border-color: var(--block); }
|
|
.layout { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - 51px); }
|
|
.queue { border-right: 1px solid var(--line); overflow-y: auto; background: var(--panel); }
|
|
.queue-item {
|
|
padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer;
|
|
}
|
|
.queue-item:hover { background: var(--panel-2); }
|
|
.queue-item.active { background: var(--panel-2); border-left: 2px solid var(--accent); padding-left: 14px; }
|
|
.queue-item .repo { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
|
|
.queue-item .title { font-weight: 500; margin: 2px 0; }
|
|
.queue-item .sub { font-size: 12px; color: var(--ink-dim); display: flex; gap: 8px; align-items: center; }
|
|
.badge { font-size: 10px; font-family: var(--mono); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); }
|
|
.badge.reviewed, .badge.ready { color: var(--nit); border-color: var(--nit); }
|
|
.badge.reviewing { color: var(--fix); border-color: var(--fix); }
|
|
.badge.error { color: var(--block); border-color: var(--block); }
|
|
.badge.closed { color: var(--ink-dim); border-color: var(--line); }
|
|
.badge.mention { color: var(--accent); border-color: var(--accent); }
|
|
.queue-item.closed { opacity: .55; }
|
|
.detail { overflow-y: auto; padding: 24px 28px; }
|
|
.detail h2 { font-size: 17px; margin: 0 0 4px; }
|
|
.detail .prlink { font-family: var(--mono); font-size: 12px; color: var(--accent); text-decoration: none; }
|
|
.empty { color: var(--ink-dim); padding: 60px; text-align: center; }
|
|
.toolbar { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; align-items: center; }
|
|
.rec { font-family: var(--mono); font-size: 12px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); }
|
|
.rec.APPROVE { color: var(--nit); border-color: var(--nit); }
|
|
.rec.REQUEST_CHANGES { color: var(--block); border-color: var(--block); }
|
|
.rec.COMMENT { color: var(--fix); border-color: var(--fix); }
|
|
.summary { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
|
|
border-radius: 8px; padding: 14px 16px; margin: 8px 0 16px; }
|
|
.cat { margin: 14px 0; }
|
|
.cat h3 { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; margin: 0 0 6px; }
|
|
.cat.block h3 { color: var(--block); }
|
|
.cat.fix h3 { color: var(--fix); }
|
|
.cat.nit h3 { color: var(--nit); }
|
|
.cat.question h3 { color: var(--question); }
|
|
.cat ul { margin: 0; padding-left: 18px; }
|
|
.cat li { margin: 4px 0; }
|
|
.cat code { font-family: var(--mono); font-size: 12px; background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
|
|
textarea {
|
|
width: 100%; min-height: 70px; background: var(--panel); color: var(--ink);
|
|
border: 1px solid var(--line); border-radius: 6px; padding: 10px;
|
|
font-family: var(--sans); font-size: 13px; resize: vertical;
|
|
}
|
|
.bodyprev {
|
|
background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
|
|
padding: 14px 16px; font-family: var(--mono); font-size: 12px; white-space: pre-wrap;
|
|
color: var(--ink-dim); margin-top: 8px;
|
|
}
|
|
select {
|
|
background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
|
|
border-radius: 6px; padding: 6px 10px; font-family: var(--mono); font-size: 12px;
|
|
}
|
|
.spin { color: var(--ink-dim); font-style: italic; }
|
|
.toast { position: fixed; bottom: 20px; right: 20px; background: var(--panel-2);
|
|
border: 1px solid var(--accent); border-radius: 8px; padding: 12px 16px; }
|
|
.toast.err { border-color: var(--block); }
|
|
label.small { font-size: 12px; color: var(--ink-dim); display: block; margin: 14px 0 4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>PR Review Desk</h1>
|
|
<span class="meta" id="cfgMeta">loading config...</span>
|
|
<span class="meta" id="hbMeta"></span>
|
|
<span class="spacer"></span>
|
|
<span class="meta" id="syncMeta"></span>
|
|
<button id="refreshBtn">Refresh now</button>
|
|
</header>
|
|
|
|
<div class="layout">
|
|
<div class="queue" id="queue"><div class="empty spin">Loading queue...</div></div>
|
|
<div class="detail" id="detail"><div class="empty">Select a PR. Reviews are prepared automatically in the background.</div></div>
|
|
</div>
|
|
|
|
<div id="toastHost"></div>
|
|
|
|
<script>
|
|
const state = { items: [], byKey: {}, me: "", active: null, mentions: [], shownKey: null, pollMs: 8000 };
|
|
|
|
function key(pr){ return `${pr.owner}/${pr.repo}#${pr.number}`; }
|
|
|
|
async function j(url, opts){
|
|
const r = await fetch(url, opts);
|
|
if(!r.ok){ const t = await r.text(); throw new Error(t); }
|
|
return r.json();
|
|
}
|
|
|
|
function toast(msg, err){
|
|
const host = document.getElementById("toastHost");
|
|
const el = document.createElement("div");
|
|
el.className = "toast" + (err ? " err" : "");
|
|
el.textContent = msg;
|
|
host.appendChild(el);
|
|
setTimeout(()=>el.remove(), 4000);
|
|
}
|
|
|
|
async function loadConfig(){
|
|
const c = await j("/api/config");
|
|
document.getElementById("cfgMeta").textContent =
|
|
`${c.org} | model: ${c.model.split('/').pop()} | mentions: ${c.mention_authors.join(', ')||'none'}`;
|
|
state.mentions = c.mention_authors;
|
|
}
|
|
|
|
// The reviewer identity (for the post confirmation) comes from /api/prs, which
|
|
// also returns the authenticated login. Best-effort, non-blocking.
|
|
async function loadMe(){
|
|
try { const data = await j("/api/prs"); state.me = data.me || ""; } catch(e){ /* ignore */ }
|
|
}
|
|
|
|
// Show which handbook commit the reviews are grounded in. Hidden when disabled.
|
|
async function updateHandbook(){
|
|
const el = document.getElementById("hbMeta");
|
|
try {
|
|
const h = await j("/api/handbook");
|
|
if(!h.enabled || !h.head_sha){ el.textContent = ""; return; }
|
|
let ago = "";
|
|
if(h.distilled_at){
|
|
const hrs = Math.round((Date.now()/1000 - h.distilled_at)/3600);
|
|
ago = hrs <= 0 ? " (just now)" : ` (${hrs}h ago)`;
|
|
}
|
|
el.textContent = `| handbook @ ${h.head_sha.slice(0,7)}${ago}`;
|
|
} catch(e){ el.textContent = ""; }
|
|
}
|
|
|
|
// Force an immediate background poll cycle, then refresh the view shortly after.
|
|
async function refreshNow(){
|
|
try { await fetch("/api/refresh", {method:"POST"}); toast("Refresh scheduled."); }
|
|
catch(e){ toast("Could not schedule refresh: "+e.message, true); }
|
|
setTimeout(poll, 1500);
|
|
}
|
|
|
|
// Poll the cached reviews and repaint the queue. Runs on a timer.
|
|
async function poll(){
|
|
let data;
|
|
try { data = await j("/api/reviews"); }
|
|
catch(e){
|
|
document.getElementById("syncMeta").textContent = "sync failed";
|
|
return;
|
|
}
|
|
state.items = data.reviews || [];
|
|
state.byKey = {};
|
|
state.items.forEach(it => { state.byKey[key(it)] = it; });
|
|
if(data.poll_interval){ document.getElementById("cfgMeta").dataset.poll = data.poll_interval; }
|
|
const now = new Date();
|
|
document.getElementById("syncMeta").textContent =
|
|
"synced " + now.toLocaleTimeString();
|
|
updateHandbook();
|
|
renderQueue();
|
|
// Upgrade a placeholder to the full review once it becomes ready.
|
|
if(state.active){
|
|
const it = state.byKey[state.active];
|
|
if(it && it.status === "ready" && it.review && state.shownKey !== state.active){
|
|
renderReview(it, it.review);
|
|
} else if(it && it.status !== "ready" && state.shownKey === state.active){
|
|
// it went back to reviewing/error after being shown
|
|
state.shownKey = null; selectPR(state.active);
|
|
}
|
|
}
|
|
}
|
|
|
|
const STATUS_LABEL = { reviewing: "reviewing", ready: "ready", error: "error", closed: "closed" };
|
|
|
|
function renderQueue(){
|
|
const q = document.getElementById("queue");
|
|
if(!state.items.length){ q.innerHTML = '<div class="empty">No PRs in the queue yet. The worker reviews new PRs automatically.</div>'; return; }
|
|
q.innerHTML = "";
|
|
state.items.forEach(it => {
|
|
const k = key(it);
|
|
const div = document.createElement("div");
|
|
div.className = "queue-item" + (state.active===k ? " active":"") + (it.status==="closed" ? " closed":"");
|
|
const mention = (state.mentions||[]).includes((it.author||"").toLowerCase());
|
|
const statusBadge = `<span class="badge ${it.status}">${STATUS_LABEL[it.status]||it.status}</span>`;
|
|
div.innerHTML = `
|
|
<div class="repo">${it.owner}/${it.repo} #${it.number}</div>
|
|
<div class="title">${escapeHtml(it.title||"(no title)")}</div>
|
|
<div class="sub">
|
|
<span>@${escapeHtml(it.author||"")}</span>
|
|
${mention ? '<span class="badge mention">will @mention</span>':''}
|
|
${statusBadge}
|
|
</div>`;
|
|
div.onclick = ()=>selectPR(k);
|
|
q.appendChild(div);
|
|
});
|
|
}
|
|
|
|
function selectPR(k){
|
|
state.active = k; renderQueue();
|
|
const it = state.byKey[k];
|
|
if(!it) return;
|
|
const d = document.getElementById("detail");
|
|
if(it.status === "ready" && it.review){ renderReview(it, it.review); return; }
|
|
state.shownKey = null;
|
|
let inner;
|
|
if(it.status === "reviewing"){
|
|
inner = '<span class="spin">Reviewing with Fireworks in the background...</span>';
|
|
} else if(it.status === "error"){
|
|
inner = `<div class="cat block"><h3>REVIEW FAILED</h3><div>${escapeHtml(it.error||"unknown error")} (attempt ${it.attempts||0})</div></div>
|
|
<div class="toolbar"><button class="primary" id="runBtn">Retry now</button></div>`;
|
|
} else if(it.status === "closed"){
|
|
inner = '<div class="spin">This PR left the queue (merged or closed).</div>';
|
|
} else {
|
|
inner = '<div class="toolbar"><button class="primary" id="runBtn">Run review now</button></div>';
|
|
}
|
|
d.innerHTML = `
|
|
<h2>${escapeHtml(it.title||"(no title)")}</h2>
|
|
<a class="prlink" href="${it.url||"#"}" target="_blank">${it.owner}/${it.repo} #${it.number}</a>
|
|
<div style="margin-top:16px">${inner}</div>`;
|
|
const runBtn = document.getElementById("runBtn");
|
|
if(runBtn) runBtn.onclick = ()=>runReview(it);
|
|
}
|
|
|
|
async function runReview(pr){
|
|
const d = document.getElementById("detail");
|
|
d.querySelector(".toolbar") && (d.querySelector(".toolbar").innerHTML = '<span class="spin">Reviewing with Fireworks...</span>');
|
|
try {
|
|
const res = await j("/api/review", {
|
|
method:"POST", headers:{"Content-Type":"application/json"},
|
|
body: JSON.stringify({owner:pr.owner, repo:pr.repo, number:pr.number, title:pr.title||"", author:pr.author||""})
|
|
});
|
|
renderReview(pr, res.review);
|
|
poll();
|
|
} catch(e){
|
|
toast("Review failed: "+e.message, true);
|
|
selectPR(key(pr));
|
|
}
|
|
}
|
|
|
|
function renderReview(pr, rv){
|
|
const d = document.getElementById("detail");
|
|
state.shownKey = key(pr);
|
|
const cats = [["block","BLOCK"],["fix","FIX"],["nit","NIT"],["question","QUESTION"]];
|
|
let catHtml = "";
|
|
cats.forEach(([k,label])=>{
|
|
const items = (rv[k]||[]).filter(Boolean);
|
|
if(!items.length) return;
|
|
catHtml += `<div class="cat ${k}"><h3>${label}</h3><ul>${
|
|
items.map(i=>`<li>${mdInline(i)}</li>`).join("")}</ul></div>`;
|
|
});
|
|
const rec = rv.recommended_event || "COMMENT";
|
|
d.innerHTML = `
|
|
<h2>${escapeHtml(pr.title)}</h2>
|
|
<a class="prlink" href="${pr.url}" target="_blank">${pr.owner}/${pr.repo} #${pr.number}</a>
|
|
<div class="toolbar">
|
|
<span class="rec ${rec}">recommends ${rec}</span>
|
|
<button id="rerunBtn">Re-run</button>
|
|
</div>
|
|
<div class="summary">${mdInline(rv.summary||"")}</div>
|
|
${catHtml}
|
|
${rv.overall ? `<div class="cat"><h3 style="color:var(--ink-dim)">OVERALL</h3><div>${mdInline(rv.overall)}</div></div>`:""}
|
|
|
|
<label class="small">Request a revision (tell the model what to change about this review)</label>
|
|
<textarea id="notes" placeholder="e.g. The auth check on line 40 is fine, drop that BLOCK. Be harsher on missing tests."></textarea>
|
|
<div class="toolbar"><button id="reviseBtn">Request revision</button></div>
|
|
|
|
<label class="small">Body that will be posted (editable)</label>
|
|
<textarea id="bodyEdit" style="min-height:160px;font-family:var(--mono)">${escapeHtml(rv._body_markdown||"")}</textarea>
|
|
<div class="toolbar">
|
|
<select id="eventSel">
|
|
<option value="COMMENT"${rec==="COMMENT"?" selected":""}>COMMENT</option>
|
|
<option value="APPROVE"${rec==="APPROVE"?" selected":""}>APPROVE</option>
|
|
<option value="REQUEST_CHANGES"${rec==="REQUEST_CHANGES"?" selected":""}>REQUEST_CHANGES</option>
|
|
</select>
|
|
<button class="primary" id="postBtn">Post review to GitHub</button>
|
|
</div>`;
|
|
document.getElementById("rerunBtn").onclick = ()=>runReview(pr);
|
|
document.getElementById("reviseBtn").onclick = ()=>revise(pr);
|
|
document.getElementById("postBtn").onclick = ()=>postReview(pr);
|
|
}
|
|
|
|
async function revise(pr){
|
|
const notes = document.getElementById("notes").value.trim();
|
|
if(!notes){ toast("Enter revision notes first.", true); return; }
|
|
const btn = document.getElementById("reviseBtn");
|
|
btn.disabled = true; btn.textContent = "Revising...";
|
|
try {
|
|
const res = await j("/api/revise", {
|
|
method:"POST", headers:{"Content-Type":"application/json"},
|
|
body: JSON.stringify({owner:pr.owner, repo:pr.repo, number:pr.number, title:pr.title||"", author:pr.author||"", notes})
|
|
});
|
|
renderReview(pr, res.review);
|
|
toast("Review revised.");
|
|
} catch(e){ toast("Revision failed: "+e.message, true); btn.disabled=false; btn.textContent="Request revision"; }
|
|
}
|
|
|
|
async function postReview(pr){
|
|
const body = document.getElementById("bodyEdit").value;
|
|
const event = document.getElementById("eventSel").value;
|
|
if(!confirm(`Post a ${event} review to ${pr.owner}/${pr.repo}#${pr.number} as @${state.me}?`)) return;
|
|
const btn = document.getElementById("postBtn");
|
|
btn.disabled = true; btn.textContent = "Posting...";
|
|
try {
|
|
const res = await j("/api/post", {
|
|
method:"POST", headers:{"Content-Type":"application/json"},
|
|
body: JSON.stringify({owner:pr.owner, repo:pr.repo, number:pr.number, body, event})
|
|
});
|
|
toast("Posted. Opening on GitHub...");
|
|
if(res.html_url) window.open(res.html_url, "_blank");
|
|
btn.textContent = "Posted";
|
|
} catch(e){ toast("Post failed: "+e.message, true); btn.disabled=false; btn.textContent="Post review to GitHub"; }
|
|
}
|
|
|
|
function escapeHtml(s){ return (s||"").replace(/[&<>"']/g, c=>({"&":"&","<":"<",">":">",'"':""","'":"'"}[c])); }
|
|
function mdInline(s){ return escapeHtml(s).replace(/`([^`]+)`/g, '<code>$1</code>'); }
|
|
|
|
document.getElementById("refreshBtn").onclick = refreshNow;
|
|
loadConfig();
|
|
loadMe();
|
|
poll();
|
|
setInterval(poll, state.pollMs);
|
|
</script>
|
|
</body>
|
|
</html>
|