| |
| import { $, api, esc, dur, ago, statusPill, rewardBadge, LIVE_STATUSES, sk, emptyState, visibilityBadge } from "./util.js"; |
| import { icon } from "./icons.js"; |
| import { getSession } from "./session.js"; |
|
|
| let timer = null, alive = true; |
| const FAILED = ["failed", "cancelled", "interrupted"]; |
| export function unmount() { alive = false; clearTimeout(timer); } |
|
|
| const head = (stats = "") => `<div class="page-h"><div><h1>My rollouts</h1><p>Only yours, public and private. They keep going when you close the page. Everyone's public rollouts are under <a class="u" href="/community">Community</a>.</p></div>${stats}</div>`; |
|
|
| export async function mount(el) { |
| alive = true; |
| if (!getSession().user) { |
| el.innerHTML = `<div class="wrap page">${head()}<div class="panel">${emptyState("user", "Sign in to run rollouts", |
| "Pick a task, choose an agent and a model from HF Inference Providers, and watch it work in an HF Sandbox. Runs are billed to your Hugging Face account.", |
| `<button class="btn primary" type="button" data-signin>${icon("user", 15)}Sign in</button>`)}</div></div>`; |
| return; |
| } |
| el.innerHTML = `<div class="wrap page">${head(`<div class="ex-stats" id="rs-stats"></div>`)} |
| <div class="seg" id="rs-filters" role="group" aria-label="Filter rollouts"></div> |
| <div id="rs-list"><div class="rs-table">${Array.from({ length: 5 }, () => `<div class="rs-row">${sk.box(22, "width:90px;border-radius:99px")} |
| <div style="display:grid;gap:6px">${sk.line(70)}${sk.line(40, 10)}</div>${sk.line(60)}${sk.line(60)}${sk.line(70)}${sk.line(80)}</div>`).join("")}</div></div></div>`; |
| let filter = "all"; |
| $("#rs-filters", el).addEventListener("click", (e) => { const b = e.target.closest("[data-f]"); if (b) { filter = b.dataset.f; draw(); } }); |
| let runs = []; |
| const draw = () => { |
| const counts = { all: runs.length, live: runs.filter((r) => LIVE_STATUSES.includes(r.status)).length, done: runs.filter((r) => r.status === "done").length, |
| failed: runs.filter((r) => FAILED.includes(r.status)).length }; |
| $("#rs-filters", el).innerHTML = [["all", "All"], ["live", "Running"], ["done", "Finished"], ["failed", "Failed or stopped"]] |
| .map(([k, l]) => `<button data-f="${k}" aria-pressed="${filter === k}">${k === "live" && counts.live ? '<i class="pulse" style="color:var(--live)"></i>' : ""}${l}<span>${counts[k]}</span></button>`).join(""); |
| const shown = runs.filter((r) => filter === "all" || (filter === "live" ? LIVE_STATUSES.includes(r.status) : filter === "done" ? r.status === "done" : FAILED.includes(r.status))); |
| $("#rs-list", el).innerHTML = shown.length |
| ? `<div class="rs-table"><div class="rs-row head"><span>Status</span><span>Task</span><span>Model</span><span>Reward</span><span>Agent</span><span style="text-align:right">Started</span></div>${shown.map(row).join("")}</div>` |
| : `<div class="panel">${runs.length ? emptyState("filter", "Nothing in this view", "Try another filter.") |
| : emptyState("play", "No rollouts yet", "Open a task and run one. It shows up here with its live trajectory and reward.", `<a class="btn primary" href="/">${icon("grid", 15)}Browse environments</a>`)}</div>`; |
| const scored = runs.filter((r) => r.reward != null); |
| $("#rs-stats", el).innerHTML = `<div><b>${runs.length}</b><span>rollouts</span></div> |
| <div><b>${scored.length}</b><span>scored rollouts</span></div>`; |
| }; |
| const load = async () => { |
| if (!alive) return; |
| try { runs = (await api("/api/runs")).runs; if (alive) draw(); } |
| catch (e) { $("#rs-list", el).innerHTML = `<div class="panel">${emptyState("alert", "Couldn't load your rollouts", esc(e.message))}</div>`; } |
| if (alive && runs.some((r) => LIVE_STATUSES.includes(r.status))) timer = setTimeout(load, 3000); |
| }; |
| load(); |
| } |
|
|
| const COLL = { mimo: "grid", terminal: "terminal", data: "table", swe: "code", mixed: "flask" }; |
| function row(r) { |
| const end = r.finished_at || Date.now() / 1000; |
| const model = r.endpoint ? r.model : (r.model || "").split("/")[1] || r.model; |
| return `<a class="rs-row" href="/run/${esc(r.id)}" style="--dc:var(--c-${r.collection || "hub"})"> |
| <span class="rs-status">${statusPill(r.status)} ${visibilityBadge(r.visibility)}</span> |
| <span class="rs-task"><b>${esc(r.title)}</b><em>${icon(COLL[r.collection] || "database", 12)}${esc(r.dataset)}</em></span> |
| <span class="rs-model">${esc(model)}</span> |
| <span class="rs-reward">${rewardBadge(r.reward, r.status)}</span> |
| <span class="rs-cost">${esc(r.runner === "nemo-gym" ? "NeMo Gym prediction" : r.runner === "mimo" ? (r.domain === "music" ? "MiMo scorer" : "MiMo harness") : r.harness)}</span> |
| <span class="rs-when">${ago(r.created_at)}<em>${dur(end - (r.started_at || r.created_at))}</em></span></a>`; |
| } |
|
|
