web/js/run-mimo.js

// A rollout on the MiMo release's own harness (app/mimo/runner), live: phases across the top, the agent's steps as a
// timeline, and the grade when it lands. The MiMo RL Environment Explorer's run page; run.js hands MiMo rollouts here.
import { $, api, esc, checkMsg, md, money, dur, ago, tokensShort, statusPill, toast, DOMAIN_NAME, LIVE_STATUSES, rewardClass, rewardText, sk, spinner, emptyState,
  confetti, openDialog, closeModal, visibilityBadge, PRIVATE_NOTE, reportUrl } from "./util.js";
import { icon, DOMAIN_ICON } from "./icons.js";
import { refreshActive } from "./session.js";
import { taskHref, compareHref } from "./task.js";

const taskOf = (r) => taskHref(r.dataset || "XiaomiMiMo/MiMo-V2.6-RL-oss", r.path || r.task_id);

const PHASES = [["sandbox", "Sandbox"], ["setup", "Setup"], ["agent", "Agent"], ["verify", "Grading"], ["done", "Done"]];
const TOOL_ICON = { bash: "terminal", read: "file", write: "pencil", edit: "pencil", grep: "search", glob: "search", todowrite: "check", list: "list" };
let timer = null, tick = null, alive = true;

export function unmount() { alive = false; clearTimeout(timer); clearInterval(tick); }
const isLive = (r) => r && LIVE_STATUSES.includes(r.status);

function skeleton() {
  return `<div class="wrap page"><div class="crumbs">${sk.line(18)}</div>
    <div class="rp-head">${sk.line(22, 22)}${sk.line(55, 24)}${sk.line(45)}</div>
    <div class="stepper">${PHASES.map(() => `<div class="step">${sk.box(20, "width:20px;border-radius:50%")}${sk.line(60)}</div>`).join("")}</div>
    <div class="rp-grid"><div style="display:grid;gap:10px">${[70, 90, 55, 85, 60].map((w) => `<div style="display:grid;grid-template-columns:28px 1fr;gap:10px">${sk.box(28, "border-radius:8px")}${sk.box(30, `width:${w}%;border-radius:10px`)}</div>`).join("")}</div>
      <div style="display:grid;gap:12px">${sk.card(sk.line(30, 14) + sk.line(25, 40) + sk.lines(90, 70))}${sk.card(sk.line(30, 14) + sk.line(35, 28) + sk.lines(80, 60))}</div></div></div>`;
}

export async function mount(el, id, first) {
  alive = true;
  const st = { id, after: 0, events: [], run: null, follow: true, steps: 0 };
  if (!first) {
    el.innerHTML = skeleton();
    try { first = await api(`/api/runs/${encodeURIComponent(id)}`); }
    catch (e) {
      if (!alive) return;
      el.innerHTML = `<div class="wrap page">${emptyState("search", "Rollout not found", e.status === 404 ? "It may be private, or the link is wrong." : esc(e.message),
        `<a class="btn" href="/runs">${icon("arrowLeft")}Your rollouts</a>`)}</div>`;
      return;
    }
    if (!alive) return;
  }
  el.innerHTML = `<div class="wrap page rp fade-in">
    <nav class="crumbs" aria-label="Breadcrumb"><a href="/runs">Rollouts</a>${icon("chevronRight", 13)}<span>${esc(id)}</span></nav>
    <header class="rp-head" id="rp-head"></header>
    <div class="stepper" id="rp-phases"></div>
    <div class="rp-grid">
      <div class="rp-main"><div class="tl-bar"><h2>What the agent did</h2><span class="n" id="rp-n"></span>
        <div class="tools-right"><button class="btn sm ghost" id="rp-expand" type="button">Expand all</button>
        <label class="switch" id="rp-follow-wrap"><input type="checkbox" id="rp-follow" checked> Follow live</label></div></div>
        <ol class="timeline" id="rp-tl"></ol><div id="rp-tail"></div></div>
      <aside class="rp-side"><section class="panel grade" id="rp-grade"></section><section class="panel costcard" id="rp-cost"></section>
        <section class="panel meta-card" id="rp-meta"></section></aside>
    </div></div>`;
  $("#rp-follow", el).addEventListener("change", (e) => (st.follow = e.target.checked));
  $("#rp-expand", el).addEventListener("click", (e) => {
    const open = e.target.textContent === "Expand all";
    el.querySelectorAll("#rp-tl details").forEach((d) => (d.open = open));
    e.target.textContent = open ? "Collapse all" : "Expand all";
  });
  el.addEventListener("click", onClick(st));
  apply(el, st, first);
  const poll = async () => {
    if (!alive) return;
    try { apply(el, st, await api(`/api/runs/${encodeURIComponent(id)}?after=${st.after}`)); } catch { /* retry next tick */ }
    if (alive && isLive(st.run)) timer = setTimeout(poll, 1500);
    else refreshActive();
  };
  if (isLive(st.run)) timer = setTimeout(poll, 1500);
  tick = setInterval(() => { if (isLive(st.run)) { renderHead(el, st); renderTail(el, st); } }, 1000);
}

function apply(el, st, d) {
  st.run = d.run;
  st.stream = d.stream;
  if (!st.navSet) {   // someone else's public rollout belongs to Community, not to My rollouts
    st.navSet = true;
    const mine = !!d.run.is_owner;
    document.querySelectorAll("[data-nav]").forEach((a) => a.classList.toggle("on", a.dataset.nav === (mine ? "runs" : "community")));
    const c = el.querySelector(".crumbs a");
    if (c && !mine) { c.href = "/community"; c.textContent = "Community"; }
  }
  const fresh = d.events.filter((e) => e.i >= st.after);
  st.events.push(...fresh);
  st.after = st.events.length ? st.events[st.events.length - 1].i + 1 : st.after;
  renderHead(el, st);
  renderPhases(el, st);
  appendTimeline(el, st, fresh);
  // history appears at once; only steps that arrive while you watch slide in
  if (!st.primed) { el.querySelectorAll("#rp-tl .ev").forEach((li) => li.classList.add("still")); st.primed = true; }
  renderGrade(el, st);
  renderCost(el, st);
  renderMeta(el, st);
  renderTail(el, st);
  $("#rp-follow-wrap", el).hidden = !isLive(st.run);
  if (!st.run.is_owner) $("#rp-cost .fine", el)?.remove();
  if (st.follow && fresh.length && isLive(st.run)) $("#rp-tail", el).scrollIntoView({ behavior: "smooth", block: "end" });
}

// Built once and then only its text changes: re-rendering every second restarted the spinner and made it flicker.
function renderTail(el, st) {
  const t = $("#rp-tail", el);
  if (!t) return;
  if (!isLive(st.run)) { t.innerHTML = ""; return; }
  let msg = $(".live-msg", t);
  if (!msg) {
    t.innerHTML = `<ol class="timeline"><li class="ev ev-live still"><span class="ei">${spinner()}</span><div class="eb"><span class="live-msg"></span></div><span class="ts"></span></li></ol>`;
    msg = $(".live-msg", t);
  }
  const text = liveHint(st);
  if (msg.textContent !== text) msg.textContent = text;
}

function liveHint(st) {
  const s = st.run.status;
  if (s === "queued") return "Queued…";
  if (s === "starting") return "Starting a sandbox from the task's image. Big images take a minute or two.";
  if (s === "setup") return "Preparing the environment…";
  if (s === "verifying") return "Grading…";
  const last = st.events[st.events.length - 1];
  if (last?.kind === "partial") return `Writing… ${last.chars.toLocaleString()} characters${last.thinking_chars ? `, ${last.thinking_chars.toLocaleString()} thinking` : ""}`;
  const sm = st.stream;
  if (sm) {
    const n = sm.text + sm.thinking + sm.tool;
    if (!n) return `Waiting for the model's reply · ${dur(sm.age)}`;
    const parts = [sm.thinking && `${sm.thinking.toLocaleString()} thinking`, sm.text && `${sm.text.toLocaleString()} message`,
      sm.tool && `${sm.tool.toLocaleString()} in a tool call`].filter(Boolean);
    return `The model is writing · ${n.toLocaleString()} characters so far (${parts.join(", ")}) · ${dur(sm.age)}`;
  }
  const since = last ? Math.max(0, (Date.now() / 1000 - (st.run.started_at || st.run.created_at)) - last.t) : 0;
  return since > 45 ? `The model is working · ${dur(since)} since the last step. Long files take a while to write.` : "The model is working…";
}

function renderHead(el, st) {
  const r = st.run;
  if (!r) return;
  const start = r.started_at || r.created_at, end = r.finished_at || Date.now() / 1000;
  const owner = !!r.is_owner;
  const action = !owner ? `<a class="btn sm primary" href="${taskOf(r)}">${icon("play", 13)}Run it yourself</a>`
    : isLive(r)
    ? (st.stopping ? `<button class="btn danger sm" disabled>${spinner()}Stopping</button>` : `<button class="btn danger sm" id="rp-cancel">${icon("stop", 13)}Stop</button>`)
    : `<a class="btn sm primary" href="${taskOf(r)}">${icon("refresh", 13)}Run again</a>`;
  const vis = owner
    ? `<button class="btn sm" id="rp-vis" type="button" title="Change who can see this rollout">${icon(r.visibility === "public" ? "shield" : "globe", 13)}Make ${r.visibility === "public" ? "private" : "public"}</button>`
    : "";
  $("#rp-head", el).innerHTML = `
    <div class="kick"><span class="badge" style="--dc:var(--c-${r.domain},var(--primary))">${icon(DOMAIN_ICON[r.domain] || "cpu", 13)}${esc(DOMAIN_NAME[r.domain] || (r.runner === "nemo-gym" ? "NeMo Gym" : r.domain))}</span>${statusPill(r.status)}${visibilityBadge(r.visibility)}
      ${owner ? "" : '<span class="when">shared anonymously</span>'}
      <span class="when">${icon("clock", 13)}${dur(end - start)} · started ${ago(r.created_at)}</span></div>
    <h1><a href="${taskOf(r)}">${esc(r.title)}</a></h1>
    <div class="rp-bar"><div class="facts">
      <span>${icon("cpu", 14)}<b>${esc(r.endpoint ? r.model : r.model.split("/")[1] || r.model)}</b> via ${r.endpoint ? `your endpoint <code>${esc(r.endpoint.host)}</code>` : esc(r.provider || "auto")}</span>
      ${paramsText(r.params) ? `<span>${icon("gauge", 14)}${esc(paramsText(r.params))}</span>` : ""}
      ${r.judge ? `<span>${icon("scale", 14)}judge <b>${esc(r.judge.split("/")[1] || r.judge)}</b></span>` : ""}
      ${r.runner === "nemo-gym" ? `<span>${icon("check", 14)}One prediction · NeMo Gym verifier</span>` : r.domain === "music" ? `<span>${icon("message", 14)}single model call</span>` : `<span>${icon("terminal", 14)}OpenCode on the MiMo harness</span>`}${r.flavor ? `<span>${icon("box", 14)}${esc(r.flavor)}</span>` : ""}</div>
      <div class="rp-actions"><a class="btn sm ghost" href="${reportUrl({ run: r })}" target="_blank" rel="noopener" title="Report an issue with this rollout">${icon("flag", 13)}Report</a>${vis}
        <a class="btn sm" href="${compareHref(r.dataset || "XiaomiMiMo/MiMo-V2.6-RL-oss", r.path || r.task_id, [r.id])}" title="Compare with other rollouts of this task">${icon("columns", 13)}Compare</a>
        <a class="btn sm" href="${taskOf(r)}">${icon("file", 13)}View task</a>${action}</div></div>
    ${r.error ? `<div class="note-box err">${icon("alert")}<span>${esc(r.error)}</span></div>` : ""}`;
}

function renderPhases(el, st) {
  const seen = {};
  st.events.filter((e) => e.kind === "phase").forEach((e) => { (seen[e.name] ||= {})[e.status] = e; });
  const failed = ["failed", "cancelled", "interrupted"].includes(st.run.status);
  const noSandbox = st.run.domain === "music" || st.run.runner === "nemo-gym";
  const list = PHASES.filter(([k]) => !(noSandbox && (k === "sandbox" || k === "setup")));
  const box = $("#rp-phases", el);
  box.style.setProperty("--n", list.length);
  box.innerHTML = list.map(([k, label]) => {
    const p = seen[k] || {};
    const state = p.done ? (p.done.status === "error" ? "bad" : "ok") : p.start ? (failed ? "bad" : "on") : "off";
    const t = p.start && p.done ? dur(p.done.t - p.start.t) : "";
    const detail = (p.done || p.start)?.detail || "";
    const mk = state === "ok" ? icon("check", 12) : state === "bad" ? icon("x", 12) : "";
    return `<div class="step ${state}" title="${esc(detail)}"><span class="mk">${mk}</span><b>${label}</b><span class="t">${esc(t)}</span><em>${esc(detail)}</em></div>`;
  }).join("");
}

function appendTimeline(el, st, events) {
  const tl = $("#rp-tl", el);
  for (const e of events) {
    if (e.kind === "phase" && e.status === "start") st.phase = e.name;
    const html = item(e, st);
    if (html) { tl.insertAdjacentHTML("beforeend", html); if (e.kind === "tool" || e.kind === "text") st.steps++; }
  }
  $("#rp-n", el).textContent = st.steps ? `${st.steps} step${st.steps === 1 ? "" : "s"}` : "";
  const empty = $(".tl-empty", el);
  if (!tl.children.length && !isLive(st.run)) { if (!empty) tl.insertAdjacentHTML("afterend", `<p class="tl-empty">No agent steps were recorded.</p>`); }
  else if (empty) empty.remove();
}

// A whole trace as timeline rows, for pages that show several at once (the comparison). `skip` leaves out kinds
// the page shows elsewhere, such as the prompt when every rollout got the same one.
export function traceHtml(id, events, { skip = [] } = {}) {
  const st = { id, phase: null };
  let steps = 0;
  const html = events.map((e) => {
    if (e.kind === "phase" && e.status === "start") st.phase = e.name;
    if (skip.includes(e.kind)) return "";
    const h = item(e, st);
    if (h && (e.kind === "tool" || e.kind === "text")) steps++;
    return h;
  }).join("");
  return { html, steps };
}

const row = (cls, ic, t, body) => `<li class="ev ${cls}"><span class="ei">${icon(ic, 14)}</span><div class="eb">${body}</div><span class="ts">${t}</span></li>`;

function item(e, st) {
  const t = dur(e.t);
  const summary = (inner) => `<summary>${icon("chevronRight", 13, "chev")}${inner}</summary>`;
  switch (e.kind) {
    case "prompt": return row("ev-prompt", "doc", t, `<details ${e.harness === "nemo-gym" || st.run.runner === "nemo-gym" ? "" : "open"}>${summary(`<b>Instructions to the model</b><span class="peek">${(e.text || "").length.toLocaleString()} characters</span>`)}
      <div class="prompt-text">${esc(e.text)}</div><p class="prompt-note">${e.harness === "nemo-gym" || st.run.runner === "nemo-gym" ? "The native Responses request: conversation history and function definitions. The reference action is withheld." : e.harness === "opencode"
        ? "The task's instructions, sent as the first user message. OpenCode adds its own system prompt and tool definitions."
        : "The whole request: one user message, no system prompt."}</p></details>`);
    case "text": return row("ev-text", "message", t, `<div class="msg prose">${md(e.text)}</div>`);
    case "thinking": return row("ev-think", "brain", t, `<details>${summary(`<b>Thinking</b><span class="peek">${esc(e.text.replace(/\s+/g, " ").slice(0, 220))}</span>`)}<div class="thought">${esc(e.text)}</div></details>`);
    case "tool": {
      const inp = e.input || {};
      const head = inp.command || inp.filePath || inp.pattern || inp.path || e.title || Object.values(inp).map(String).join(" ").slice(0, 160);
      const mcp = isMcpTool(e.tool);
      const cls = `ev-tool${mcp ? " mcp" : ""}${e.status === "error" ? " bad" : ""}`;
      return row(cls, mcp ? "plug" : TOOL_ICON[e.tool] || "terminal", t, `<details>${summary(`<b>${esc(mcp ? prettyTool(e.tool) : e.tool)}</b>
        <code>${esc(String(head).split("\n")[0].slice(0, 200))}</code>${e.ms >= 1000 ? `<span class="ms">${dur(e.ms / 1000)}</span>` : ""}`)}
        <div class="io">${Object.keys(inp).length ? `<h5>Input</h5><pre>${esc(JSON.stringify(inp, null, 2))}</pre>` : ""}
          <h5>Output${e.truncated ? " (truncated)" : ""}</h5><pre>${esc(e.output || "(empty)")}</pre></div></details>`);
    }
    case "phase": return e.status === "error" && e.name !== "done" ? row("ev-err", "alert", t, `${esc(e.name)} failed: ${esc(e.detail)}`) : "";
    case "error": return row("ev-err", "alert", t, `<b>Error</b> ${esc(e.text)}`);
    case "log": return row("ev-log", "terminal", t, `<details>${summary(`<b>${({ sandbox: "Sandbox", setup: "Setup output", agent: "Agent output", verify: "Grader output" })[st.phase] || "Output"}</b><code>${esc((e.text || "").split("\n")[0].slice(0, 160))}</code>`)}<pre class="code-block">${esc(e.text)}</pre></details>`);
    case "diff": return row("ev-diff", "diff", t, `<details open>${summary(`<b>The agent's change</b><code>${e.files.length} file${e.files.length === 1 ? "" : "s"}</code>`)}<pre class="code-block diff">${diffHtml(e.text)}</pre></details>`);
    case "files": return row("ev-log", "folder", t, `<details>${summary(`<b>${esc(e.title)}</b><code>${e.files.length} files</code>`)}<pre class="code-block">${esc(e.files.join("\n"))}</pre></details>`);
    case "image": {
      const src = `/api/runs/${encodeURIComponent(st.id)}/artifacts/${encodeURIComponent(e.name)}`;
      return row("ev-img", "image", t, `<b>Rendered page</b> <span class="muted sm">${e.width}×${e.height}</span>
        <a href="${src}" target="_blank" rel="noopener"><img loading="lazy" src="${src}" alt="Full-page screenshot of what the agent built"></a>`);
    }
    default: return "";
  }
}

const paramsText = (p) => !p ? "" : [p.thinking && p.thinking !== "default" && `thinking ${p.thinking === "none" ? "off" : p.thinking}`,
  p.temperature != null && `temperature ${p.temperature}`, p.steps && `${p.steps} steps max`, p.timeout_min && `${p.timeout_min} min limit`,
  p.max_tokens && `${p.max_tokens.toLocaleString()} max tokens`].filter(Boolean).join(" · ");
const humanize = (id) => { const t = String(id || "").replace(/[_-]+/g, " ").trim(); return t.charAt(0).toUpperCase() + t.slice(1); };
export const prettyTool = (name) => { const parts = name.split("_"); return parts.length > 3 ? parts.slice(-3).join("_") : name; };
export const isMcpTool = (name) => !(name in TOOL_ICON) && /_/.test(name || "");

export function diffHtml(text) {
  return (text || "").split("\n").slice(0, 3000).map((l) => {
    const c = l.startsWith("+++") || l.startsWith("---") || l.startsWith("diff ") ? "dh" : l.startsWith("+") ? "da" : l.startsWith("-") ? "dd" : l.startsWith("@@") ? "dc" : "";
    return `<span class="${c}">${esc(l)}</span>`;
  }).join("\n");
}

function renderGrade(el, st) {
  const g = [...st.events].reverse().find((e) => e.kind === "checks") ||
    (st.run.status === "done" && Number.isFinite(st.run.reward) ? { reward: st.run.reward, summary: "Recorded reward. Detailed grading events are unavailable." } : null);
  const box = $("#rp-grade", el);
  const h = `<div class="panel-h"><h3>${icon("scale", 14)}Grade</h3></div>`;
  if (!g) {
    box.innerHTML = `${h}<div class="panel-b"><p class="muted sm">${isLive(st.run) ? "Appears here once the agent finishes and the task's grader has run." : "This rollout was not graded."}</p></div>`;
    return;
  }
  const rw = g.reward ?? st.run.reward;
  const img = [...st.events].reverse().find((e) => e.kind === "image");
  const src = img && `/api/runs/${encodeURIComponent(st.id)}/artifacts/${encodeURIComponent(img.name)}`;
  const long = (g.summary || "").length > 180;
  const zh = /[一-鿿]/.test(g.summary || "");
  const cls = rewardClass(rw);
  // General rubric checks: each one's share of the reward (verify.py counts a missing weight as 1)
  const rubric = (g.checks || []).some((c) => c.method === "llm" || c.method === "rule");
  const wt = (c) => (c.weight == null ? 1 : Number(c.weight));
  const wsum = rubric ? g.checks.reduce((n, c) => n + wt(c), 0) || 1 : 1;
  box.innerHTML = `${h}<div class="panel-b">
    ${src ? `<a class="shot" href="${src}" target="_blank" rel="noopener" title="Open the full-page render"><img src="${src}" alt="What the judge saw"></a>` : ""}
    <div class="score"><span class="big ${cls}">${rewardText(rw)}</span><span class="of">${esc(st.run.reward_key || "reward")}</span></div>
    ${g.formula ? `<p class="muted xs">${esc(g.formula)}</p>` : ""}
    ${long || !g.summary ? "" : `<p class="gsum">${esc(g.summary)}</p>`}
    ${(g.checks || []).length ? `<ul class="gchecks">${g.checks.map((c) => `<li class="${c.passed === true ? "ok" : c.passed === false ? "bad" : "na"}">
      <span class="mk">${icon(c.passed === true ? "check" : c.passed === false ? "x" : "more", 14)}</span>
      <div><b>${esc(c.question || humanize(c.id))}</b>
      ${c.tier || c.method === "llm" ? `<span class="meta">${esc([c.tier, c.method === "llm" && "model-judged", rubric && `${Math.round((wt(c) / wsum) * 100)}% of the reward`].filter(Boolean).join(" · "))}</span>` : ""}
      ${c.message ? `<p>${esc(checkMsg(c.message).slice(0, 300))}</p>` : ""}</div>
      ${c.score != null && c.passed == null ? `<span class="sc">${Number(c.score).toFixed(2)}</span>` : "<span></span>"}</li>`).join("")}</ul>` : ""}
    ${(g.checks || []).some((c) => c.method === "llm") ? `<p class="xs faint" style="margin-top:8px">The task's grader keeps each check's verdict, not the judge's reasoning.</p>` : ""}
    ${long ? `<details class="notes"><summary class="disclose">${icon("chevronRight", 14, "chev")}Judge's notes</summary><p>${esc(g.summary)}</p>
      ${zh ? `<p class="xs faint">In Chinese because Xiaomi's grading rubric is written in Chinese; it is used unchanged so scores stay comparable with theirs.</p>` : ""}</details>` : ""}
  </div>`;
}

function renderCost(el, st) {
  const r = st.run, c = r.cost || {}, t = r.tokens || {};
  const tot = (c.model || 0) + (c.sandbox || 0) || 1;
  $("#rp-cost", el).innerHTML = `<div class="panel-h"><h3>${icon("coins", 14)}Cost</h3>${isLive(r) ? `<span class="aside"><i class="pulse" style="color:var(--live)"></i> live</span>` : ""}</div>
    <div class="panel-b">
    <div class="big-cost">${money(c.total)}</div>
    <div class="cost-split"><i class="m" style="width:${((c.model || 0) / tot) * 100}%"></i><i class="s" style="width:${((c.sandbox || 0) / tot) * 100}%"></i></div>
    <div class="legend">
      <div><span class="sw" style="background:var(--c-code)"></span><span>Model tokens</span><b>${r.endpoint && r.endpoint.price_in == null && r.endpoint.price_out == null ? '<span class="faint">not metered</span>' : money(c.model)}</b></div>
      <div><span class="sw" style="background:var(--c-cyber)"></span><span>Sandbox time</span><b>${money(c.sandbox)}</b></div>
      ${r.judge ? `<div><span class="sw" style="background:var(--surface-3)"></span><span>Judge calls</span><b class="faint">not metered</b></div>` : ""}
    </div>
    <dl class="kv sm"><dt>Tokens in</dt><dd class="num">${tokensShort((t.input || 0) + (t.cache_read || 0))}${t.cache_read ? ` <span class="faint">(${tokensShort(t.cache_read)} cached)</span>` : ""}</dd>
      <dt>Tokens out</dt><dd class="num">${tokensShort(t.output)}${t.reasoning ? ` <span class="faint">+ ${tokensShort(t.reasoning)} thinking</span>` : ""}</dd></dl>
    <p class="fine">${r.endpoint ? `Tokens are billed by your endpoint (${esc(r.endpoint.host)}); the sandbox by Hugging Face.` : `Billed to your Hugging Face account at ${esc(r.provider || "the provider")}'s price.`}</p></div>`;
}

async function setVisibility(el, st, to, btn) {
  try {
    await api(`/api/runs/${encodeURIComponent(st.id)}/visibility`, { method: "POST", body: { visibility: to } });
    st.run.visibility = to;
    renderHead(el, st);
    if (to === "public") {
      const r = (btn || $("#rp-vis", el))?.getBoundingClientRect();
      confetti(r ? r.left + r.width / 2 : innerWidth / 2, r ? r.top : innerHeight / 3);
      toast("Public: thank you for sharing with the community");
    } else toast("Private: only you can see this rollout");
  } catch (e) { toast(e.message); }
}

function renderMeta(el, st) {
  const r = st.run, p = r.params || {}, pv = r.provenance || {};
  const row = (k, v) => (v == null || v === "" ? "" : `<dt>${k}</dt><dd>${v}</dd>`);
  const code = (v) => `<code>${esc(v)}</code>`;
  const think = { none: "off", low: "low", medium: "medium", high: "high" }[p.thinking] || "model default";
  $("#rp-meta", el).innerHTML = `<div class="panel-h"><h3>${icon("info", 14)}Run details</h3></div><div class="panel-b"><dl class="kv sm">
    ${row("Model", code(r.model))}
    ${row("Served by", r.endpoint ? "an OpenAI-compatible endpoint the runner brought" + (r.endpoint.host && r.is_owner ? ` (${code(r.endpoint.host)})` : "") : esc(r.provider || "HF router auto"))}
    ${row("Judge", r.judge ? code(r.judge) : "")}
    ${row("Thinking", esc(think))}
    ${row("Temperature", p.temperature != null ? esc(p.temperature) : "model default")}
    ${r.domain === "music" || r.runner === "nemo-gym" ? row("Max tokens", esc(p.max_tokens || p.max_tokens_used || 100000)) : row("Step cap", esc(p.steps || "task default")) + row("Time limit", p.timeout_min ? esc(p.timeout_min + " min") : "task default") + row("Max tokens / step", esc(p.max_tokens || "default"))}
    ${row("Harness", r.runner === "nemo-gym" ? "Single prediction; tool calls are not executed" : r.domain === "music" ? "single model call" : `OpenCode ${esc(pv.harness?.installed || pv.harness?.version || "")}`)}
    ${row("Verifier revision", r.runner === "nemo-gym" ? code(pv.commit || "unknown") : "")}
    ${row("Sandbox", r.flavor ? esc(r.flavor) : "")}
    ${row("Image", r.image ? code(r.image.replace("docker.io/", "")) : "")}
    ${row("Explorer", pv.app ? `v${esc(pv.app.version)} · ${code(pv.app.source)}` : "")}
    ${row("Dataset", pv.dataset ? `${esc(pv.dataset.repo)}${pv.dataset.revision ? " @ " + code(pv.dataset.revision.slice(0, 10)) : ""}` : "")}
    ${row("Reference", pv.reference ? Object.entries(pv.reference).map(([k, v]) => `${esc(k.split("/")[1])} ${code(v)}`).join(" · ") : "")}
    ${row("Rollout id", code(r.id))}
  </dl></div>`;
}

function onClick(st) {
  return async (ev) => {
    const vb = ev.target.closest("#rp-vis");
    if (vb) {
      const el = vb.closest(".rp");
      if (st.run.visibility === "public") {
        const dlg = openDialog(`<div class="dialog-h"><div><h2>Make this rollout private?</h2><p>${esc(PRIVATE_NOTE)}</p></div>
          <button class="icon-btn" type="button" data-close aria-label="Close">${icon("x", 18)}</button></div>
          <div class="dialog-b"><div style="display:flex;gap:8px;justify-content:flex-end"><button class="btn" data-close>Keep it public</button>
          <button class="btn primary" id="vis-go">Make private</button></div></div>`);
        dlg.addEventListener("click", async (e) => {
          if (e.target.closest("[data-close]")) closeModal();
          if (e.target.closest("#vis-go")) { closeModal(); await setVisibility(el, st, "private"); }
        });
      } else await setVisibility(el, st, "public", vb);
      return;
    }
    const b = ev.target.closest("#rp-cancel");
    if (!b) return;
    st.stopping = true;
    b.disabled = true;
    b.innerHTML = `${spinner()}Stopping`;
    try { await api(`/api/runs/${encodeURIComponent(st.id)}/cancel`, { method: "POST" }); toast("Stopping the rollout…"); }
    catch (e) { st.stopping = false; toast(e.message); b.disabled = false; b.innerHTML = `${icon("stop", 13)}Stop`; }
  };
}