app/static/app.js

const $ = (selector) => document.querySelector(selector);
const $$ = (selector) => [...document.querySelectorAll(selector)];

const state = { runId: null, poller: null, lastRecord: null, startedAt: 0 };
const stageOrder = ["planning", "branching", "testing", "judging", "complete"];

function escapeHtml(value = "") {
  return value.replace(/[&<>'"]/g, (char) => ({
    "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#39;", '"': "&quot;"
  })[char]);
}

function toast(message) {
  const node = $("#toast");
  node.textContent = message;
  node.classList.add("show");
  window.setTimeout(() => node.classList.remove("show"), 2200);
}

async function api(path, options) {
  const response = await fetch(path, options);
  if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
  return response.json();
}

async function boot() {
  try {
    const [sample, health] = await Promise.all([api("/api/sample"), api("/api/health")]);
    $("#issue").value = sample.issue;
    $("#repository").value = sample.repository;
    $("#provider-badge").textContent = health.provider;
    const planner = health.model.split("/").pop().replaceAll("_", ".").replace("Nemotron-", "N");
    const judge = health.judge_model.split("/").pop().replaceAll("_", ".").replace("Nemotron-", "N");
    $("#model-badge").textContent = planner === judge ? `${planner} · 2 STAGES` : `${planner} → ${judge}`;
  } catch (error) {
    $("#issue").value = "Refunds at half-cent boundaries round against the customer. Preserve validation and prove a safe fix.";
  }
}

function resetRunUi() {
  $("#evidence").hidden = true;
  $("#run-status").classList.add("running");
  $("#run-status").innerHTML = "<span></span> Preparing experiment";
  $("#branch-grid").innerHTML = ["amber", "violet", "green"].map((color, i) => `
    <article class="branch-card skeleton running ${color}">
      <div class="branch-top"><span>${String.fromCharCode(65 + i)}</span><i></i><small>PLANNING</small></div>
      <h3>Generating hypothesis</h3>
      <p>Nemotron is searching for a distinct, executable repair strategy.</p>
    </article>`).join("");
  updateStages("planning");
}

function updateStages(activeStage) {
  const activeIndex = stageOrder.indexOf(activeStage);
  $$(".stage").forEach((node) => {
    const index = stageOrder.indexOf(node.dataset.stage);
    node.classList.toggle("active", index === activeIndex || activeStage === "complete" && index === 3);
    node.classList.toggle("done", index < activeIndex || activeStage === "complete");
  });
  $$("#stage-track > i").forEach((node, index) => node.classList.toggle("done", index < activeIndex));
}

function runningCards(stage) {
  const labels = {
    planning: ["FORMING THESIS", "Generating hypothesis", "Nemotron is creating independent repair strategies."],
    branching: ["FORKING STATE", "Creating checkpoint", "ConTree is forking the same filesystem state."],
    testing: ["EXECUTING", "Running regression suite", "Each branch is producing comparable test evidence."],
    judging: ["SCORING", "Weighing the evidence", "Nemotron is reviewing safety, clarity, and observed results."]
  };
  const [tag, title, body] = labels[stage] || labels.planning;
  $$(".branch-card").forEach((card, i) => {
    const top = card.querySelector("small");
    const h3 = card.querySelector("h3");
    const p = card.querySelector("p");
    if (top) top.textContent = tag;
    if (h3) h3.textContent = `${title} ${String.fromCharCode(65 + i)}`;
    if (p) p.textContent = body;
  });
}

function renderBranch(branch, index) {
  const { candidate, tests, score, verdict } = branch;
  const statusClass = tests.exit_code === 0 ? "pass" : "fail";
  const statusText = tests.exit_code === 0 ? "PASS" : "FAIL";
  const winner = verdict === "winner";
  return `
    <article class="branch-card ${candidate.accent} ${winner ? "winner" : ""}">
      ${winner ? '<span class="winner-chip">SELECTED</span>' : ""}
      <div class="branch-top"><span>${String.fromCharCode(65 + index)}</span><i></i><small>${escapeHtml(tests.checkpoint.slice(0, 13).toUpperCase())}</small></div>
      <h3>${escapeHtml(candidate.name)}</h3>
      <p>${escapeHtml(candidate.thesis)}</p>
      <div class="score-row"><span>EVIDENCE SCORE</span><strong>${score}</strong><div class="score-bar"><i style="--score:${score}%"></i></div></div>
      <div class="test-strip"><span>TESTS <strong>${tests.passed}/${tests.total}</strong></span><span>${tests.duration_ms}ms</span><strong class="${statusClass}">${statusText}</strong></div>
      <div class="branch-risk"><b>RISK</b><span>${escapeHtml(candidate.risk)}</span></div>
    </article>`;
}

function paintDiff(diff) {
  return escapeHtml(diff || "No diff returned.").split("\n").map((line) => {
    const cls = line.startsWith("+") && !line.startsWith("+++") ? "diff-add" :
      line.startsWith("-") && !line.startsWith("---") ? "diff-remove" :
      line.startsWith("@@") || line.startsWith("+++") || line.startsWith("---") ? "diff-head" : "";
    return `<span class="${cls}">${line}</span>`;
  }).join("\n");
}

function renderComplete(record) {
  $("#branch-grid").innerHTML = record.branches.map(renderBranch).join("");
  record.branches.forEach((branch, index) => {
    const tree = document.querySelector(`[data-tree="${index}"]`);
    if (tree) tree.lastChild.textContent = branch.candidate.name.toLowerCase();
  });
  updateStages("complete");
  $("#run-status").classList.remove("running");
  $("#run-status").innerHTML = `<span style="background:var(--green-2);border-color:var(--green-2)"></span> ${escapeHtml(record.events.at(-1)?.message || "Evidence sealed")}`;

  const winner = record.branches.find((branch) => branch.candidate.id === record.winner_id) || record.branches[0];
  $("#winner-name").textContent = winner.candidate.name;
  $("#winner-synthesis").textContent = record.synthesis;
  $("#winner-score").textContent = winner.score;
  $("#receipt-tests").textContent = `${winner.tests.passed} / ${winner.tests.total} passed`;
  $("#receipt-checkpoint").textContent = winner.tests.checkpoint;
  $("#model-path-value").textContent = `${record.planner_mode} / ${record.judge_mode}`.toUpperCase();
  $("#runtime-pill").textContent = record.sandbox_mode.replaceAll("-", " ").toUpperCase();
  $("#isolation-value").textContent = record.sandbox_mode === "nebius-sandbox" ? "VM boundary" : "Local process";
  $("#patch-diff").innerHTML = `<code>${paintDiff(winner.diff)}</code>`;
  $("#evidence").hidden = false;
  $("#run-button").disabled = false;
  $("#run-button .button-copy b").textContent = "Forge again";
  window.setTimeout(() => $("#evidence").scrollIntoView({ behavior: "smooth", block: "start" }), 220);
}

async function pollRun() {
  try {
    const record = await api(`/api/runs/${state.runId}`);
    state.lastRecord = record;
    if (record.status === "failed") {
      throw new Error(record.error || "The experiment stopped safely.");
    }
    updateStages(record.status);
    runningCards(record.status);
    const message = record.events.at(-1)?.message || "Working";
    $("#run-status").innerHTML = `<span></span> ${escapeHtml(message)}`;
    if (record.branches.length) $("#branch-grid").innerHTML = record.branches.map(renderBranch).join("");

    if (record.status === "complete") {
      const elapsed = Date.now() - state.startedAt;
      const minimumShowcaseMs = 2400;
      window.clearInterval(state.poller);
      window.setTimeout(() => renderComplete(record), Math.max(0, minimumShowcaseMs - elapsed));
    }
  } catch (error) {
    window.clearInterval(state.poller);
    $("#run-button").disabled = false;
    $("#run-status").classList.remove("running");
    $("#run-status").innerHTML = `<span style="border-color:var(--danger)"></span> Run stopped safely`;
    toast(error.message);
  }
}

async function startRun() {
  const issue = $("#issue").value.trim();
  if (issue.length < 12) return toast("Add a more specific issue brief.");
  $("#run-button").disabled = true;
  $("#run-button .button-copy b").textContent = "Forging evidence…";
  resetRunUi();
  $("#run-section").scrollIntoView({ behavior: "smooth", block: "start" });
  state.startedAt = Date.now();
  try {
    const record = await api("/api/runs", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ repository: $("#repository").value.trim(), issue, mode: "sample" })
    });
    state.runId = record.id;
    state.poller = window.setInterval(pollRun, 420);
    await pollRun();
  } catch (error) {
    $("#run-button").disabled = false;
    toast(error.message);
  }
}

$("#run-button").addEventListener("click", startRun);
$("#copy-patch").addEventListener("click", async () => {
  const winner = state.lastRecord?.branches.find((branch) => branch.candidate.id === state.lastRecord.winner_id);
  if (!winner) return;
  await navigator.clipboard.writeText(winner.diff);
  toast("Verified diff copied.");
});

boot();